From e61fa089432942c76a6b3e74280b16134ae1f830 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Wed, 2 Aug 2023 08:50:41 +0000
Subject: [PATCH] changed pressed modal picker list item color

---
 src/Components/Modal/index.js                 | 21 ++++++++++++-------
 .../modals/ChooseScene/CreateScene/index.js   |  2 +-
 .../Device/modals/ChooseScene/index.js        |  2 +-
 src/Screens/FAQ/index.js                      | 18 ----------------
 src/Screens/Feedback/index.js                 | 18 ----------------
 src/Screens/{Device => }/Help/index.js        |  2 +-
 src/utils.js                                  | 14 +++++++------
 7 files changed, 25 insertions(+), 52 deletions(-)
 delete mode 100644 src/Screens/FAQ/index.js
 delete mode 100644 src/Screens/Feedback/index.js
 rename src/Screens/{Device => }/Help/index.js (91%)

diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js
index d78f45f..4945d92 100644
--- a/src/Components/Modal/index.js
+++ b/src/Components/Modal/index.js
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { AppContext, AppStyles, ModalContainer } from "../../utils";
-import { Text, TouchableOpacity, View } from "react-native";
+import { Pressable, Text, TouchableOpacity, View } from "react-native";
 import { Divider } from "../Divider";
 import MyIcon from "../Icon";
 import MyTextInput from "../TextInput";
@@ -113,13 +113,22 @@ export function MyPickerModalListItem({
 
   return (
     <>
-      <TouchableOpacity onPress={onPress} disabled={disabled}>
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        style={({ pressed }) => [
+          {
+            backgroundColor: pressed
+              ? appContext.appTheme.modal.pressedPickerItemColor
+              : appContext.appTheme.backgroundColor,
+          },
+        ]}
+      >
         <View
           style={{
             flexDirection: "row",
             justifyContent: "space-between",
-            marginLeft: 10,
-            marginRight: 10,
+            padding: 12,
           }}
         >
           <Text
@@ -140,9 +149,7 @@ export function MyPickerModalListItem({
             />
           )}
         </View>
-      </TouchableOpacity>
-
-      <Divider />
+      </Pressable>
     </>
   );
 }
diff --git a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
index 3a63be7..baa5704 100644
--- a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
@@ -31,7 +31,7 @@ export default function CreateSceneModalContent({ navigation }) {
   ];
 
   return (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       <FlatList
         data={options}
         keyExtractor={(item) => item.id}
diff --git a/src/Screens/Device/modals/ChooseScene/index.js b/src/Screens/Device/modals/ChooseScene/index.js
index 8ab55fe..6a99ef8 100644
--- a/src/Screens/Device/modals/ChooseScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/index.js
@@ -21,7 +21,7 @@ export default function ChooseSceneModalContent({ navigation, route }) {
   );
 
   return (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       {deviceScenes.length === 0 ? (
         <MyResult
           text={t("screens.device.scenes.modalChooseScene.noResult")}
diff --git a/src/Screens/FAQ/index.js b/src/Screens/FAQ/index.js
deleted file mode 100644
index b4d1af4..0000000
--- a/src/Screens/FAQ/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useContext } from "react";
-import { AppContext } from "../../utils";
-import { Text, View } from "react-native";
-
-export default function FaqScreen() {
-  const appContext = useContext(AppContext);
-
-  return (
-    <View
-      style={{
-        backgroundColor: appContext.appTheme.backgroundColor,
-        height: "100%",
-      }}
-    >
-      <Text>Feedback</Text>
-    </View>
-  );
-}
diff --git a/src/Screens/Feedback/index.js b/src/Screens/Feedback/index.js
deleted file mode 100644
index 00ce1ba..0000000
--- a/src/Screens/Feedback/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useContext } from "react";
-import { AppContext } from "../../utils";
-import { Text, View } from "react-native";
-
-export default function FeedbackScreen() {
-  const appContext = useContext(AppContext);
-
-  return (
-    <View
-      style={{
-        backgroundColor: appContext.appTheme.backgroundColor,
-        height: "100%",
-      }}
-    >
-      <Text>Feedback</Text>
-    </View>
-  );
-}
diff --git a/src/Screens/Device/Help/index.js b/src/Screens/Help/index.js
similarity index 91%
rename from src/Screens/Device/Help/index.js
rename to src/Screens/Help/index.js
index 4e2f531..381c614 100644
--- a/src/Screens/Device/Help/index.js
+++ b/src/Screens/Help/index.js
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { AppContext } from "../../../utils";
+import { AppContext } from "../../utils";
 import { Text, View } from "react-native";
 
 export default function HelpScreen() {
diff --git a/src/utils.js b/src/utils.js
index f778ee2..79b09e6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -54,10 +54,6 @@ export const AppStyles = StyleSheet.create({
     shadowOpacity: 0.2, // only ios
     shadowRadius: 1, // only ios
   },
-  modal: {
-    flex: 1,
-    padding: 10,
-  },
   disabled: {
     opacity: 0.6,
   },
@@ -108,6 +104,9 @@ const DarkAppTheme = {
     },
   },
   colorPickerDisabled: "rgba(0, 0, 0, 0.3)",
+  modal: {
+    pressedPickerItemColor: "rgba(0, 0, 0, 0.3)",
+  },
 };
 
 const LightAppTheme = {
@@ -154,6 +153,9 @@ const LightAppTheme = {
     },
   },
   colorPickerDisabled: "rgba(0, 0, 0, 0.3)",
+  modal: {
+    pressedPickerItemColor: "rgba(0, 0, 0, 0.1)",
+  },
 };
 
 export async function StoreData(key, value) {
@@ -521,9 +523,9 @@ export function VibrateShort() {
   Vibration.vibrate(50);
 }
 
-export function ModalContainer({ children }) {
+export function ModalContainer({ children, withoutPadding }) {
   return (
-    <View style={AppStyles.modal}>
+    <View style={[{ flex: 1 }, !withoutPadding && { padding: 10 }]}>
       <View>{children}</View>
     </View>
   );