style improvements

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 HelpScreen = lazy(() => import("./src/Screens/Help"));
-const FeedbackScreen = lazy(() => import("./src/Screens/Feedback"));
 
 export function MyApp() {
   const appContext = useContext(AppContext);
@@ -108,7 +108,7 @@ export function MyApp() {
   };
 
   return (
-    <SafeAreaView style={{ height: "100%" }}>
+    <SafeAreaView style={{ flex: 1 }}>
       <NavigationContainer theme={navigatonTheme}>
         <Stack.Navigator
           screenOptions={{
@@ -367,14 +367,18 @@ function getScreenStackOptions(
         onPress={() =>
           isModalScreen ? navigation.goBack() : navigation.toggleDrawer()
         }
-        style={{ marginLeft: 20 }}
       >
-        <MyIcon name={isModalScreen ? "chevron-left" : "menu"} size={24} />
+        <MyIcon
+          name={isModalScreen ? "chevron-left" : "menu"}
+          size={24}
+          style={[AppStyles.headerNavigationIcons]}
+        />
       </TouchableOpacity>
     ),
     headerTintColor: headerTintColor,
     headerStyle: {
       backgroundColor: headerBackgroundColor,
+      height: IsPlatformIos() ? 76 : 56,
     },
   };
 }

locales/de.json

@@ -105,7 +105,7 @@
     },
     "settings": {
       "pageTitle": "Einstellungen",
-      "settingsCardTitle": "Einstellungen",
+      "settingsCardTitle": "Allgemein",
       "languageText": "Sprache",
       "languageModalTitle": "Sprache ändern",
       "appColorSchemeText": "Anzeigemodus",

locales/en.json

@@ -105,7 +105,7 @@
     },
     "settings": {
       "pageTitle": "Settings",
-      "settingsCardTitle": "Settings",
+      "settingsCardTitle": "General",
       "languageText": "Language",
       "languageModalTitle": "Customize language",
       "appColorSchemeText": "Appearance",

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",

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",

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 (
-    <View
+    <>
-      style={{
-        paddingTop: 10,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingBottom: 10,
-      }}
-    >
       <View
-        style={[
+        style={{
-          {
+          paddingTop: 10,
-            borderRadius: 20,
+          paddingLeft: 10,
-            backgroundColor: backgroundColor,
+          paddingRight: 10,
-            padding: 20,
+          paddingBottom: 10,
-          },
+        }}
-          AppStyles.Shadow,
-        ]}
       >
-        {children}
+        {cardTopicText !== undefined && (
+          <Text
+            style={{
+              paddingLeft: 10,
+              color: appContext.appTheme.colors.gray,
+              paddingBottom: 6,
+            }}
+          >
+            {cardTopicText}
+          </Text>
+        )}
+        <View
+          style={[
+            {
+              borderRadius: 20,
+              backgroundColor: backgroundColor,
+              padding: 20,
+            },
+            AppStyles.Shadow,
+          ]}
+        >
+          {children}
+        </View>
       </View>
-    </View>
+    </>
   );
 }

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 },
       ]}
     />
   );

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 { Pressable, Text, View } from "react-native";
-import { Divider } from "../Divider";
 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}
           </Text>
 
-          {itemSelected && (
+          {itemSelected ? (
             <MyIcon
-              name="check"
+              name="checkbox-marked-circle"
               size={24}
               color={appContext.appTheme.colors.primary}
             />
+          ) : (
+            <MyIcon
+              name="checkbox-blank-circle-outline"
+              size={24}
+              color={appContext.appTheme.colors.gray}
+              style={disabled && AppStyles.disabled}
+            />
           )}
         </View>
+        <Divider withoutMarginVertical />
       </Pressable>
     </>
   );
@@ -171,7 +179,7 @@ export function MyTextInputModalContent({
           usePrimaryColor
           iconName="check"
           iconSize={24}
-          style={{ marginRight: 20 }}
+          style={AppStyles.headerNavigationIcons}
           onPress={() => {
             navigation.goBack();
             onCheckIconPress(newValue);

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 (
     <>
-      <TouchableOpacity
+      <Pressable
-        style={{ marginLeft: 10, marginRight: 10 }}
         onPress={onPress}
         disabled={!deviceFirmwareVersionSupported}
+        style={({ pressed }) => [
+          {
+            backgroundColor: pressed
+              ? appContext.appTheme.modal.pressedPickerItemColor
+              : appContext.appTheme.backgroundColor,
+          },
+        ]}
       >
         <View
           style={[
@@ -38,6 +44,7 @@ function Action({
               flexDirection: "row",
               alignItems: "center",
               flexWrap: "wrap",
+              padding: 12,
             },
             imageSource !== undefined && { marginBottom: 4 },
           ]}
@@ -57,10 +64,14 @@ function Action({
           )}
         </View>
         {imageSource !== undefined && (
-          <Image source={imageSource} style={{ height: 150, width: 150 }} />
+          <Image
+            source={imageSource}
+            style={{ height: 150, width: 150, marginLeft: 12 }}
+          />
         )}
-      </TouchableOpacity>
+      </Pressable>
-      <Divider />
+
+      <Divider withoutMarginVertical />
     </>
   );
 }
@@ -74,7 +85,7 @@ export default function AddSceneActionModalContent({ navigation, route }) {
 
   return (
     <ScrollView>
-      <ModalContainer>
+      <ModalContainer withoutPadding>
         <Action
           text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
           iconName="lightbulb-on-outline"

src/Screens/Device/modals/EditActions/Lights/index.js

@@ -13,7 +13,7 @@ import {
 } from "../../../deviceTabButton";
 import Card from "../../../../../Components/Card";
 import MyDropdown from "../../../../../Components/Dropdown";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { AppContext, AppStyles, ModalContainer } from "../../../../../utils";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
 import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
@@ -28,7 +28,6 @@ import EditActionAnimationsCardContent, {
   EditActionAdjustmentContent,
 } from "..";
 import { useTranslation } from "react-i18next";
-import { useFocusEffect } from "@react-navigation/native";
 
 function LightModeDefaultColor({
   sharedColor,
@@ -171,6 +170,7 @@ export function LightsEditActionModalContent({ navigation, route }) {
                       flexDirection: "row",
                       justifyContent: "space-between",
                       alignItems: "center",
+                      marginTop: 2,
                     }}
                   >
                     <Text
@@ -233,13 +233,9 @@ export function LightsEditActionModalContent({ navigation, route }) {
                     ))}
                   </View>
 
-                  <Divider />
-
                   <MyColorPickerV2
                     pickerRef={colorPickerRef}
-                    style={[
+                    style={{ marginTop: 10 }}
-                      selectedSceneActionModeId === "" && { marginTop: 10 },
-                    ]}
                     appThemeText={appContext.appTheme.text}
                     isUserExpertModeEnabled={appContext.isUserExpertModeEnabled}
                     disabled={selectedDefaultLightModeColor === undefined}
@@ -257,16 +253,17 @@ export function LightsEditActionModalContent({ navigation, route }) {
               )}
 
               {selectedLightMode.adjustments.length > 0 && (
-                <View style={{ marginTop: 2 }}>
+                <>
                   {selectedLightMode.adjustments.map((adjustment, index) => (
-                    <EditActionAdjustmentContent
+                    <View key={index} style={{ marginTop: 10 }}>
-                      key={index}
+                      <EditActionAdjustmentContent
-                      adjustment={adjustment}
+                        adjustment={adjustment}
-                      appThemeText={appContext.appTheme.text}
+                        appThemeText={appContext.appTheme.text}
-                      appLanguage={appContext.appLanguage}
+                        appLanguage={appContext.appLanguage}
-                    />
+                      />
+                    </View>
                   ))}
-                </View>
+                </>
               )}
             </>
           )}
@@ -290,7 +287,7 @@ export function LayersEditActionColorModeSelectionModalContent({
   const appContext = useContext(AppContext);
 
   return (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       <FlatList
         data={route.params.supportedDeviceLightModes}
         keyExtractor={(item) => item.id}

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 (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       {supportedLightAnimations.length === 0 ? (
         <MyResult
           text={

src/Screens/Device/scene.js

@@ -1,6 +1,6 @@
 import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
-import { AppContext, Constants, GetDevice } from "../../utils";
+import { AppContext, AppStyles, Constants, GetDevice } from "../../utils";
 import { useCallback, useContext, useState } from "react";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
@@ -34,7 +34,7 @@ export default function SceneView({ navigation }) {
               <MyIconButton
                 iconName="pencil"
                 iconSize={22}
-                style={{ marginRight: 20 }}
+                style={AppStyles.headerNavigationIcons}
                 onPress={() =>
                   navigation.navigate("modalUpdateSceneName", {
                     deviceSelectedScene: device.selectedScene,

src/Screens/Device/settings.js

@@ -24,19 +24,7 @@ export default function SettingsView({ navigation }) {
 
   return (
     <>
-      <Card>
+      <Card cardTopicText={t("screens.device.settings.settingsTitle")}>
-        <Text
-          style={[
-            AppStyles.typography20,
-            {
-              color: appContext.appTheme.text,
-              marginBottom: 10,
-            },
-          ]}
-        >
-          {t("screens.device.settings.settingsTitle")}
-        </Text>
-
         <View
           style={{
             flexDirection: "row",
@@ -69,19 +57,7 @@ export default function SettingsView({ navigation }) {
         </View>
       </Card>
 
-      <Card>
+      <Card cardTopicText={t("screens.device.settings.deviceInformationText")}>
-        <Text
-          style={[
-            AppStyles.typography20,
-            {
-              color: appContext.appTheme.text,
-              marginBottom: 10,
-            },
-          ]}
-        >
-          {t("screens.device.settings.deviceInformationText")}
-        </Text>
-
         <View
           style={{
             flexDirection: "row",

src/Screens/Settings/index.js

@@ -18,19 +18,7 @@ export default function SettingsScreen({ navigation }) {
         backgroundColor: appContext.appTheme.backgroundColor,
       }}
     >
-      <Card>
+      <Card cardTopicText={t("screens.settings.settingsCardTitle")}>
-        <Text
-          style={[
-            AppStyles.typography20,
-            {
-              color: appContext.appTheme.text,
-              marginBottom: 10,
-            },
-          ]}
-        >
-          {t("screens.settings.settingsCardTitle")}
-        </Text>
-
         <TouchableOpacity
           onPress={() => navigation.navigate("modalSettingsAppLanguage")}
           style={{ marginBottom: 6 }}
@@ -40,6 +28,7 @@ export default function SettingsScreen({ navigation }) {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "space-between",
+              paddingBottom: 4,
             }}
           >
             <Text
@@ -68,6 +57,8 @@ export default function SettingsScreen({ navigation }) {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "space-between",
+              paddingTop: 4,
+              paddingBottom: 4,
             }}
           >
             <Text
@@ -146,7 +137,7 @@ export function SettingsAppLanguageModalContent({ navigation }) {
   const appContext = useContext(AppContext);
 
   return (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       <FlatList
         data={Constants.languages}
         renderItem={({ item, index }) => (
@@ -188,7 +179,7 @@ export function SettingsAppColorSchemeModalContent({ navigation }) {
   ];
 
   return (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       <FlatList
         data={items}
         renderItem={({ item, index }) => (

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",