From c74be48e2b6b87c7232fc32543a3405307c89627 Mon Sep 17 00:00:00 2001 From: alex Date: Thu, 3 Aug 2023 00:06:01 +0000 Subject: [PATCH] style improvements --- App.js | 16 ++++-- assets/Circle-10.png | Bin 0 -> 1206 bytes locales/de.json | 2 +- locales/en.json | 2 +- package-lock.json | 17 ------ package.json | 1 - src/Components/Card/index.js | 53 +++++++++++------- src/Components/Divider/index.js | 4 +- src/Components/Modal/index.js | 18 ++++-- .../Device/modals/AddSceneAction/index.js | 25 ++++++--- .../Device/modals/EditActions/Lights/index.js | 29 +++++----- .../Device/modals/EditActions/index.js | 4 +- src/Screens/Device/scene.js | 4 +- src/Screens/Device/settings.js | 28 +-------- src/Screens/Settings/index.js | 21 ++----- src/utils.js | 5 ++ 16 files changed, 108 insertions(+), 121 deletions(-) create mode 100644 assets/Circle-10.png diff --git a/App.js b/App.js index 4d918b4..1c4dc63 100644 --- a/App.js +++ b/App.js @@ -7,9 +7,11 @@ import SideBar from "./src/Components/SideBar"; import { AppContext, AppProvider, + AppStyles, Constants, GetDataFromList, GetMultipleData, + IsPlatformIos, } from "./src/utils"; import { Suspense, lazy, useContext, useEffect } from "react"; import { SafeAreaView } from "react-native-safe-area-context"; @@ -34,14 +36,12 @@ import { import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions"; import UpdateSceneNameModalContent from "./src/Screens/Device/modals/UpdateSceneName"; import SettingsChangeDeviceDisplayNameModalContent from "./src/Screens/Device/modals/SettingsChangeDeviceDisplayName"; -import HelpScreen from "./src/Screens/Device/Help"; const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); const SettingsScreen = lazy(() => import("./src/Screens/Settings")); -const FaqScreen = lazy(() => import("./src/Screens/FAQ")); -const FeedbackScreen = lazy(() => import("./src/Screens/Feedback")); +const HelpScreen = lazy(() => import("./src/Screens/Help")); export function MyApp() { const appContext = useContext(AppContext); @@ -108,7 +108,7 @@ export function MyApp() { }; return ( - + isModalScreen ? navigation.goBack() : navigation.toggleDrawer() } - style={{ marginLeft: 20 }} > - + ), headerTintColor: headerTintColor, headerStyle: { backgroundColor: headerBackgroundColor, + height: IsPlatformIos() ? 76 : 56, }, }; } diff --git a/assets/Circle-10.png b/assets/Circle-10.png new file mode 100644 index 0000000000000000000000000000000000000000..c04866d731e963ba2c3e4f680c43934d08481c80 GIT binary patch literal 1206 zcmV;n1WEgeP)Px(a7jc#RCt{2+gpfLRUF6h&wrba*$wi-K$od`h$zD-D1&YgMJ1S2P8XdKDG}*0 zGRqgsqKKe^ULr!8QGyJ*P#Q%yqaJ*S%A%WDMi;Aj$p_;s0()fY$!AIiMgEHfHvKUFX3BxWD3kUIGY%cI-J^#-WRfb@)sj`f6aSG~Wu!91)57}Y!((ox2?4dtLfc2J?{o3pE=T!hj5YPlho&?+J=pR zw8mr;JbnaC`D#3^&GP87yIRMp2BdX54R}pBw=vpsV+(Gqwj`=AfdP;H50i)UBo9^V zbVvizS}TP4jnkAf;g+=4ibHof2x+Zrlx(c~W9*SaQWEAww>K*_S2Q5?nT1U_v68PKU`948O6bm|#?Vc!f$8?@>7)i^f*wwdajxZd9kp8@@rwLtRF zso%1p7sHpptp$iFiha2Tq&3%r(NF3qRU>X^1j))CfOKE{WJ7LsPzmO%(-kp^0xAW!d4*}7-m2$@{441v6^xu z*&K_@cfbAn0?|UtAoI%pABULg5y=mQ2+EV>M<;t?=;b~G2KUMyEJRekJTSB`$jIH{ zZF-fftHvkE7lS$OW7KX?>T@kN<|Zm%t{Yh^RJlf|*Zaa1`Dn_C?-*mJY_kNSs4qxb+G2@ zwZgsD3AZ;^RZb-9qes`Fx>TAdd4?_?MmjxBA?efu&z@0!K&+-SYGhP%I}hUCFjmgEN^s&qR~fZ7vnZu-N?A*;PwdbVSRL4)2Oh`Iy`-xa24j@dYoEk zsGqSx$p*)IYb>Y0Y9*K3S?V=YI0qe)4xEk-p`+ZvcKn3x!gk>&C0|C5FPg3GKl8~W U3cOc6-T(jq07*qoM6N<$f~5XcjQ{`u literal 0 HcmV?d00001 diff --git a/locales/de.json b/locales/de.json index 303f963..2c5ef0f 100644 --- a/locales/de.json +++ b/locales/de.json @@ -105,7 +105,7 @@ }, "settings": { "pageTitle": "Einstellungen", - "settingsCardTitle": "Einstellungen", + "settingsCardTitle": "Allgemein", "languageText": "Sprache", "languageModalTitle": "Sprache ändern", "appColorSchemeText": "Anzeigemodus", diff --git a/locales/en.json b/locales/en.json index fb94dcd..9552670 100644 --- a/locales/en.json +++ b/locales/en.json @@ -105,7 +105,7 @@ }, "settings": { "pageTitle": "Settings", - "settingsCardTitle": "Settings", + "settingsCardTitle": "General", "languageText": "Language", "languageModalTitle": "Customize language", "appColorSchemeText": "Appearance", diff --git a/package-lock.json b/package-lock.json index ac34fcc..b47f28d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "@react-native-community/slider": "^4.4.2", "@react-navigation/drawer": "^6.6.3", "@react-navigation/native": "^6.1.7", - "@react-navigation/native-stack": "^6.9.13", "@react-navigation/stack": "^6.3.17", "expo": "~48.0.18", "expo-status-bar": "~1.4.4", @@ -5038,22 +5037,6 @@ "react-native": "*" } }, - "node_modules/@react-navigation/native-stack": { - "version": "6.9.13", - "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.13.tgz", - "integrity": "sha512-ejlepMrvFneewL+XlXHHhn+6y3lwvavM4/R7XwBV0XJxCymujexK+7Vkg7UcvJ1lx4CRhOcyBSNfGmdNIHREyQ==", - "dependencies": { - "@react-navigation/elements": "^1.3.18", - "warn-once": "^0.1.0" - }, - "peerDependencies": { - "@react-navigation/native": "^6.0.0", - "react": "*", - "react-native": "*", - "react-native-safe-area-context": ">= 3.0.0", - "react-native-screens": ">= 3.0.0" - } - }, "node_modules/@react-navigation/native/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", diff --git a/package.json b/package.json index b8c576a..4cc4f63 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "@react-native-community/slider": "^4.4.2", "@react-navigation/drawer": "^6.6.3", "@react-navigation/native": "^6.1.7", - "@react-navigation/native-stack": "^6.9.13", "@react-navigation/stack": "^6.3.17", "expo": "~48.0.18", "expo-status-bar": "~1.4.4", diff --git a/src/Components/Card/index.js b/src/Components/Card/index.js index 3616f6e..a3e293c 100644 --- a/src/Components/Card/index.js +++ b/src/Components/Card/index.js @@ -1,8 +1,8 @@ import { useContext } from "react"; -import { View } from "react-native"; +import { Text, View } from "react-native"; import { AppContext, AppStyles } from "../../utils"; -export default function Card({ children, cardBackgroundColor }) { +export default function Card({ children, cardTopicText, cardBackgroundColor }) { const appContext = useContext(AppContext); const backgroundColor = @@ -11,26 +11,39 @@ export default function Card({ children, cardBackgroundColor }) { : cardBackgroundColor; return ( - + <> - {children} + {cardTopicText !== undefined && ( + + {cardTopicText} + + )} + + {children} + - + ); } diff --git a/src/Components/Divider/index.js b/src/Components/Divider/index.js index 61b81f5..1aa4b53 100644 --- a/src/Components/Divider/index.js +++ b/src/Components/Divider/index.js @@ -2,7 +2,7 @@ import { useContext } from "react"; import { View } from "react-native"; import { AppContext } from "../../utils"; -export function Divider({ style }) { +export function Divider({ style, withoutMarginVertical }) { const appContext = useContext(AppContext); return ( @@ -12,8 +12,8 @@ export function Divider({ style }) { { height: 1, backgroundColor: appContext.appTheme.divider, - marginVertical: 10, }, + !withoutMarginVertical && { marginVertical: 10 }, ]} /> ); diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js index 4945d92..dea2c7b 100644 --- a/src/Components/Modal/index.js +++ b/src/Components/Modal/index.js @@ -1,10 +1,10 @@ import { useContext, useEffect, useState } from "react"; import { AppContext, AppStyles, ModalContainer } from "../../utils"; -import { Pressable, Text, TouchableOpacity, View } from "react-native"; -import { Divider } from "../Divider"; +import { Pressable, Text, View } from "react-native"; import MyIcon from "../Icon"; import MyTextInput from "../TextInput"; import { MyIconButton } from "../Button"; +import { Divider } from "../Divider"; //const modalContentStyle = { margin: 10, paddingTop: 10 }; @@ -141,14 +141,22 @@ export function MyPickerModalListItem({ {itemName} - {itemSelected && ( + {itemSelected ? ( + ) : ( + )} + ); @@ -171,7 +179,7 @@ export function MyTextInputModalContent({ usePrimaryColor iconName="check" iconSize={24} - style={{ marginRight: 20 }} + style={AppStyles.headerNavigationIcons} onPress={() => { navigation.goBack(); onCheckIconPress(newValue); diff --git a/src/Screens/Device/modals/AddSceneAction/index.js b/src/Screens/Device/modals/AddSceneAction/index.js index 4a0b0ca..c0fea69 100644 --- a/src/Screens/Device/modals/AddSceneAction/index.js +++ b/src/Screens/Device/modals/AddSceneAction/index.js @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native"; +import { Image, Pressable, ScrollView, Text, View } from "react-native"; import { AppContext, AppStyles, ModalContainer } from "../../../../utils"; import MyIcon from "../../../../Components/Icon"; import { Divider } from "../../../../Components/Divider"; @@ -27,10 +27,16 @@ function Action({ return ( <> - [ + { + backgroundColor: pressed + ? appContext.appTheme.modal.pressedPickerItemColor + : appContext.appTheme.backgroundColor, + }, + ]} > {imageSource !== undefined && ( - + )} - - + + + ); } @@ -74,7 +85,7 @@ export default function AddSceneActionModalContent({ navigation, route }) { return ( - + - - 0 && ( - + <> {selectedLightMode.adjustments.map((adjustment, index) => ( - + + + ))} - + )} )} @@ -290,7 +287,7 @@ export function LayersEditActionColorModeSelectionModalContent({ const appContext = useContext(AppContext); return ( - + item.id} diff --git a/src/Screens/Device/modals/EditActions/index.js b/src/Screens/Device/modals/EditActions/index.js index 065d533..b35d1d6 100644 --- a/src/Screens/Device/modals/EditActions/index.js +++ b/src/Screens/Device/modals/EditActions/index.js @@ -84,7 +84,7 @@ export default function EditActionAnimationsCardContent({ AppStyles.typography14, { fontWeight: "bold", - marginTop: 6, + marginTop: 10, color: appContext.appTheme.text, }, ]} @@ -157,7 +157,7 @@ export function EditActionAnimationSelectionModalContent({ animationType === "animationIn" ? "animationInId" : "animationOutId"; return ( - + {supportedLightAnimations.length === 0 ? ( navigation.navigate("modalUpdateSceneName", { deviceSelectedScene: device.selectedScene, diff --git a/src/Screens/Device/settings.js b/src/Screens/Device/settings.js index 2f7504b..7bab62f 100644 --- a/src/Screens/Device/settings.js +++ b/src/Screens/Device/settings.js @@ -24,19 +24,7 @@ export default function SettingsView({ navigation }) { return ( <> - - - {t("screens.device.settings.settingsTitle")} - - + - - - {t("screens.device.settings.deviceInformationText")} - - + - - - {t("screens.settings.settingsCardTitle")} - - + navigation.navigate("modalSettingsAppLanguage")} style={{ marginBottom: 6 }} @@ -40,6 +28,7 @@ export default function SettingsScreen({ navigation }) { flexDirection: "row", alignItems: "center", justifyContent: "space-between", + paddingBottom: 4, }} > + ( @@ -188,7 +179,7 @@ export function SettingsAppColorSchemeModalContent({ navigation }) { ]; return ( - + ( diff --git a/src/utils.js b/src/utils.js index 79b09e6..b62b7bd 100644 --- a/src/utils.js +++ b/src/utils.js @@ -57,6 +57,9 @@ export const AppStyles = StyleSheet.create({ disabled: { opacity: 0.6, }, + headerNavigationIcons: { + padding: 17, + }, }); const DarkAppTheme = { @@ -64,6 +67,7 @@ const DarkAppTheme = { colors: { primary: "#e67e22", secondary: "#9b59b6", + gray: "#b2bec3", }, text: "#fff", textSecondary: "#ddd", @@ -114,6 +118,7 @@ const LightAppTheme = { colors: { primary: "#e67e22", secondary: "#9b59b6", + gray: "#636e72", }, text: "#000", textSecondary: "#555",