auto select first color

App.js

@@ -33,10 +33,7 @@ import {
   SettingsAppLanguageModalContent,
 } from "./src/Screens/Settings";
 import { SettingsChangeDeviceDisplayName } from "./src/Screens/Device/settings";
-import {
-  EditActionAnimationSelectionModalContent,
-  EditActionAnimationsSelectionModalContent,
-} from "./src/Screens/Device/modals/EditActions";
+import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions";
 
 const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator();
@@ -256,7 +253,7 @@ export function MyApp() {
               options({
                 navigation: navigation,
                 pageTitle: t(
-                  "screens.device.modalSettingsChangeDeviceDisplayName.pageTitle"
+                  "screens.device.settings.modalSettingsChangeDeviceDisplayName.pageTitle"
                 ),
               })
             }

src/Screens/Device/index.js

@@ -6,6 +6,7 @@ import {
   View,
   Text,
   KeyboardAvoidingView,
+  Alert,
 } from "react-native";
 import { AppContext } from "../../utils";
 import SettingsView from "./settings";
@@ -71,7 +72,10 @@ export default function DeviceScreen({ navigation }) {
         selectedViewNumber={1}
         top={topSecond}
         iconColor={getIconColor(1)}
-        onPress={() => setSelectedView(1)}
+        onPress={() => {
+          console.log("rotate");
+          Alert.alert("Rotate device", "Soon the device will turn 180 degrees");
+        }}
       />
       <MyDeviceTabButton
         iconName={"group"}

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 { useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { AppContext, AppStyles, ModalContainer } from "../../../../../utils";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
 import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
@@ -28,6 +28,7 @@ import EditActionAnimationsCardContent, {
   EditActionAdjustmentContent,
 } from "..";
 import { useTranslation } from "react-i18next";
+import { useFocusEffect } from "@react-navigation/native";
 
 function LightModeDefaultColor({
   sharedColor,
@@ -74,7 +75,7 @@ export function LightsEditActionModalContent({ navigation, route }) {
   const [lightModeDefaultColors, setLightModeDefaultColors] = useState([]);
   const sharedLightModeDefaultColors = useSharedValue([]);
   const [selectedDefaultLightModeColor, setSelectedDefaultLightModeColor] =
-    useState();
+    useState(0);
   const colorPickerRef = useRef(ColorPickerRef);
   const { t } = useTranslation();
 
@@ -93,11 +94,17 @@ export function LightsEditActionModalContent({ navigation, route }) {
     (s) => s.id === selectedSceneActionModeId
   );
 
+  useEffect(() => {
+    if (colorPickerRef.current && selectedLightMode.defaults.length > 0) {
+      colorPickerRef.current.setColor(selectedLightMode.defaults[0]);
+    }
+  }, [lightModeDefaultColors]);
+
   useEffect(() => {
     if (selectedLightMode !== undefined) {
       sharedLightModeDefaultColors.value = selectedLightMode.defaults;
       setLightModeDefaultColors(selectedLightMode.defaults);
-      setSelectedDefaultLightModeColor();
+      setSelectedDefaultLightModeColor(0);
     }
   }, [selectedSceneActionModeId]);
 
@@ -169,7 +176,11 @@ export function LightsEditActionModalContent({ navigation, route }) {
                     <Text
                       style={[
                         AppStyles.typography14,
-                        { marginTop: 4, marginBottom: 4 },
+                        {
+                          marginTop: 4,
+                          marginBottom: 4,
+                          color: appContext.appTheme.text,
+                        },
                       ]}
                     >
                       {t(
@@ -192,7 +203,7 @@ export function LightsEditActionModalContent({ navigation, route }) {
                       <TouchableOpacity
                         key={index}
                         onPress={() => {
-                          const newSelection =
+                          /*const newSelection =
                             selectedDefaultLightModeColor !== index
                               ? index
                               : undefined;
@@ -203,7 +214,13 @@ export function LightsEditActionModalContent({ navigation, route }) {
                             colorPickerRef.current.setColor(
                               sharedLightModeDefaultColors.value[index]
                             );
-                          }
+                          }*/
+
+                          setSelectedDefaultLightModeColor(index);
+
+                          colorPickerRef.current.setColor(
+                            sharedLightModeDefaultColors.value[index]
+                          );
                         }}
                       >
                         <LightModeDefaultColor

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

@@ -40,7 +40,7 @@ export default function EditActionAnimationsCardContent({
   return (
     <>
       <Card>
-        <Text style={[AppStyles.typography14, { fontWeight: "bold" }]}>
+        <Text style={[AppStyles.typography14, { fontWeight: "bold", color: appContext.appTheme.text }]}>
           {t(
             "screens.device.scenes.editActionAnimationsCardContent.animationsIn"
           )}
@@ -75,7 +75,7 @@ export default function EditActionAnimationsCardContent({
           ))}
 
         <Text
-          style={[AppStyles.typography14, { fontWeight: "bold", marginTop: 6 }]}
+          style={[AppStyles.typography14, { fontWeight: "bold", marginTop: 6, color: appContext.appTheme.text }]}
         >
           {t(
             "screens.device.scenes.editActionAnimationsCardContent.animationsOut"

src/Screens/Device/scene.js

@@ -1,13 +1,6 @@
 import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
-import {
-  AppContext,
-  AppSelectedUserDevice,
-  Constants,
-  GetDevice,
-  GetDeviceScene,
-  GetDeviceScenes,
-} from "../../utils";
+import { AppContext, Constants, GetDevice } from "../../utils";
 import { useCallback, useContext, useState } from "react";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";

src/utils.js

@@ -208,7 +208,7 @@ const devDevicesFirmwareModes = {
         de: "Zufällig",
         en: "Random",
       },
-      defaults: ["red", "orange", "blue"],
+      defaults: ["pink", "orange", "blue"],
       adjustments: [
         {
           type: "slider",