old device style

old.js

@@ -0,0 +1,284 @@
+import { lazy, useContext, useState } from "react";
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+  Dimensions,
+  Platform,
+  ImageBackground,
+} from "react-native";
+import LightView from "./light";
+import { AppContext } from "../../utils";
+import MyIcon from "../../Components/Icon";
+
+const MotorView = lazy(() => import("./motor"));
+const SettingsView = lazy(() => import("./settings"));
+const ColorScenesView = lazy(() => import("./colorScenes"));
+
+const spaceToSide = 10; // left and right
+const top = 35;
+const spaceBetweenButtons = 60;
+
+const topFirst = top;
+const topSecond = top + spaceBetweenButtons;
+const topThird = top + 2 * spaceBetweenButtons;
+
+const windowDimensions = Dimensions.get("window");
+
+let data = [];
+
+const ledLines = 4;
+const ledsPerLine = 16;
+
+const deviceLeds = ledLines * ledsPerLine;
+
+for (let i = 0; i < deviceLeds; i++) {
+  data.push("lime");
+}
+
+export default function DeviceScreen() {
+  const appContext = useContext(AppContext);
+  const [selectedView, setSelectedView] = useState(0);
+  const [deviceLedsColors, setDeviceLedsColor] = useState(data);
+
+  console.log(
+    "wD",
+    Platform.OS,
+    windowDimensions.width,
+    windowDimensions.width / 16
+  );
+
+  const SelectedView = () => {
+    switch (selectedView) {
+      case 0:
+        return <LightView />;
+      case 2:
+        return <MotorView />;
+      case 3:
+        return <SettingsView />;
+      case 4:
+        return <ColorScenesView />;
+      default:
+        <Text>Not found</Text>;
+    }
+  };
+
+  const MyButton = ({ selectedViewNumber, top, left, space, iconName }) => {
+    const TouchComponent =
+      appContext.appColorScheme === "dark"
+        ? TouchableHighlight
+        : TouchableOpacity;
+
+    return (
+      <TouchComponent
+        onPress={() => setSelectedView(selectedViewNumber)}
+        style={[
+          {
+            position: "absolute",
+            backgroundColor: appContext.appTheme.card.backgroundColor,
+            borderRadius: 10,
+            padding: 8,
+          },
+          { top: top },
+          left === true ? { left: space } : { right: space },
+        ]}
+      >
+        <MyIcon
+          name={iconName}
+          size={30}
+          color={
+            selectedView === selectedViewNumber
+              ? appContext.appTheme.colors.primary
+              : appContext.appTheme.icon
+          }
+        />
+      </TouchComponent>
+    );
+  };
+
+  const DeviceLedsColor = ({ style }) => {
+    /*
+    <Leds style={{ top: 118, right: "8%" }} />
+    <Leds style={{ top: 119, right: "8%" }} />
+    <Leds style={{ top: 120, right: "8%" }} />
+    <Leds style={{ top: 121, right: "8%" }} />
+    */
+
+    let elements = [];
+    let test = 400;
+
+    for (let l = 0; l < ledLines; l++) {
+      let left = 0;
+      let ledsElements = [];
+
+      console.log("l", l);
+
+      for (let p = 0; p < ledsPerLine; p++) {
+        left = left + 1.5;
+
+        ledsElements.push(
+          <View
+            key={`${l}-${p}`}
+            style={{
+              width: 0.1 * (test / 16),
+              height: 0.1 * (test / 16),
+              backgroundColor: "lime",
+              borderRadius: 0.5,
+              left: l,
+              marginRight:
+                windowDimensions.width > 360
+                  ? 0.27 * (test / 16)
+                  : 0.26 * (test / 16),
+            }}
+          />
+        );
+      }
+
+      elements.push(
+        <View
+          key={`v-${l}`}
+          style={{
+            flexDirection: "row",
+            justifyContent: "center",
+            top: 118 + l,
+            right: "8%",
+          }}
+        >
+          {ledsElements}
+        </View>
+      );
+    }
+
+    /*
+    for (let i = 0; i < 16; i++) {
+      l = l + 1.5;
+
+      elements.push(
+        <View
+          key={i}
+          style={{
+            width: 0.1 * (test / 16),
+            height: 0.1 * (test / 16),
+            backgroundColor: "lime",
+            borderRadius: 0.5,
+            left: l,
+            marginRight:
+              windowDimensions.width > 360
+                ? 0.27 * (test / 16)
+                : 0.26 * (test / 16),
+          }}
+        />
+      );
+    }*/
+
+    return <>{elements}</>;
+  };
+
+  return (
+    <View
+      style={{
+        height: "100%",
+        backgroundColor: appContext.appTheme.backgroundColor,
+      }}
+    >
+      {selectedView === 4 && (
+        <View>
+          <ImageBackground
+            source={require("../../../assets/image19.png")}
+            resizeMode="contain"
+            style={{ height: 250 }}
+          >
+            <DeviceLedsColor />
+          </ImageBackground>
+        </View>
+      )}
+
+      {appContext.isUserDeveloperModeEnabled ? (
+        <>
+          {selectedView !== 4 && (
+            <Image
+              source={require("../../../assets/device.png")}
+              style={styles.image}
+              resizeMode="contain"
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {selectedView !== 4 && (
+            <View style={[styles.image, { backgroundColor: "#ddd" }]} />
+          )}
+        </>
+      )}
+
+      <MyButton
+        iconName={"lightbulb-on-outline"}
+        left
+        selectedViewNumber={0}
+        space={spaceToSide}
+        top={topFirst}
+      />
+      <MyButton
+        iconName={"television-ambient-light"}
+        left
+        selectedViewNumber={1}
+        space={spaceToSide}
+        top={topSecond}
+      />
+      <MyButton
+        iconName={"axis-z-rotate-counterclockwise"}
+        left
+        selectedViewNumber={2}
+        space={spaceToSide}
+        top={topThird}
+      />
+
+      <MyButton
+        iconName={"cog-outline"}
+        left={false}
+        selectedViewNumber={3}
+        space={spaceToSide}
+        top={topFirst}
+      />
+      <MyButton
+        iconName={"palette-outline"}
+        left={false}
+        selectedViewNumber={4}
+        space={spaceToSide}
+        top={topSecond}
+      />
+      <MyButton
+        iconName={"rotate-3d-variant"}
+        left={false}
+        selectedViewNumber={5}
+        space={spaceToSide}
+        top={topThird}
+      />
+
+      <ScrollView style={{ height: "100%" }}>
+        <SelectedView />
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#2e2e30",
+  },
+  scrollView: {
+    width: "100%",
+    padding: 20,
+  },
+  image: {
+    width: "100%",
+    height: 250,
+  },
+});

package-lock.json

@@ -14,7 +14,6 @@
         "@react-navigation/native": "^6.1.7",
         "@react-navigation/native-stack": "^6.9.13",
         "expo": "~48.0.18",
-        "expo-haptics": "~12.2.1",
         "expo-status-bar": "~1.4.4",
         "i18next": "^23.2.11",
         "i18next-browser-languagedetector": "^7.1.0",
@@ -7136,14 +7135,6 @@
         "expo": "*"
       }
     },
-    "node_modules/expo-haptics": {
-      "version": "12.2.1",
-      "resolved": "https://registry.npmjs.org/expo-haptics/-/expo-haptics-12.2.1.tgz",
-      "integrity": "sha512-XRZtmIQi901Q4+/cZnVrULRFOqShsgCuSP0SCbVEhnq8sK0OA4jgun12O93Pu5aGvTyoqsAcIArE8tX+8AEqRA==",
-      "peerDependencies": {
-        "expo": "*"
-      }
-    },
     "node_modules/expo-keep-awake": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.0.1.tgz",

package.json

@@ -27,8 +27,7 @@
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-tab-view": "^3.5.2",
-    "reanimated-color-picker": "^2.3.1",
-    "expo-haptics": "~12.2.1"
+    "reanimated-color-picker": "^2.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/Components/ColorPicker/index.js

@@ -0,0 +1,285 @@
+import { useContext, useState } from "react";
+import {
+  StyleSheet,
+  TouchableHighlight,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import ColorPicker, {
+  BrightnessSlider,
+  InputWidget,
+  OpacitySlider,
+  Panel3,
+  Swatches,
+} from "reanimated-color-picker";
+import MyIcon from "../Icon";
+import { AppContext } from "../../utils";
+
+function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
+  const backgroundColorStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: sharedColor.value,
+    };
+  });
+
+  const contrastColorText = useAnimatedStyle(() => {
+    const getContrastRatio = (hexColor) => {
+      const hex = hexColor.replace("#", "");
+      const r = parseInt(hex.substr(0, 2), 16);
+      const g = parseInt(hex.substr(2, 2), 16);
+      const b = parseInt(hex.substr(4, 2), 16);
+      const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
+      return luminance > 0.5 ? "#000000" : "#ffffff";
+    };
+
+    let obj = {};
+
+    obj.color = getContrastRatio(sharedColor.value);
+
+    return obj;
+  });
+
+  const contrastColorBorder = useAnimatedStyle(() => {
+    const getContrastRatio = (hexColor) => {
+      const hex = hexColor.replace("#", "");
+      const r = parseInt(hex.substr(0, 2), 16);
+      const g = parseInt(hex.substr(2, 2), 16);
+      const b = parseInt(hex.substr(4, 2), 16);
+      const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
+      return luminance > 0.5 ? "#000000" : "#ffffff";
+    };
+
+    let obj = {};
+
+    //obj.color = getContrastRatio(sharedColor.value);
+
+    if (selected === true) {
+      obj.borderColor = getContrastRatio(sharedColor.value);
+      obj.borderBottomWidth = 2;
+    } else {
+      obj.borderBottomWidth = 0;
+    }
+
+    return obj;
+  });
+
+  return (
+    <TouchableHighlight
+      style={[
+        {
+          width: 30,
+          height: 30,
+          borderRadius: 10,
+          marginRight: 10,
+          elevation: 3,
+        },
+      ]}
+      onPress={onPress}
+      rippleColor="rgba(0, 0, 0, .32)"
+    >
+      <Animated.View
+        style={[
+          {
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 10,
+          },
+          backgroundColorStyle,
+        ]}
+      >
+        <Animated.View style={contrastColorBorder}>
+          <Animated.Text
+            style={[
+              {
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+              contrastColorText,
+            ]}
+          >
+            {layerNumber}
+          </Animated.Text>
+        </Animated.View>
+      </Animated.View>
+    </TouchableHighlight>
+  );
+}
+
+export default function MyColorPicker({ colorLayer }) {
+  const appContext = useContext(AppContext);
+  const [selectedGlasLayer, setSelectedGlasLayer] = useState(1);
+  const [colorSwatchesFavorites, setColorSwatchesFavorites] = useState([]);
+
+  const selectedColorPickerColor = useSharedValue("#ddd");
+  const selectedColorLayer1 = useSharedValue(selectedColorPickerColor.value);
+  const selectedColorLayer2 = useSharedValue(selectedColorPickerColor.value);
+  const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
+  const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
+
+  const onColorSelect = (color) => {
+    selectedColorPickerColor.value = color.hex;
+
+    switch (selectedGlasLayer) {
+      case 1:
+        selectedColorLayer1.value = color.hex;
+        break;
+      case 2:
+        selectedColorLayer2.value = color.hex;
+        break;
+      case 3:
+        selectedColorLayer3.value = color.hex;
+        break;
+      case 4:
+        selectedColorLayer4.value = color.hex;
+        break;
+    }
+  };
+
+  return (
+    <Animated.View>
+      <ColorPicker
+        value={selectedColorPickerColor.value}
+        thumbSize={26}
+        onChange={onColorSelect}
+      >
+        <View
+          style={{
+            justifyContent: "center",
+            flexDirection: "row",
+            alignItems: "center",
+            marginBottom: 10,
+          }}
+        >
+          <ColorLayer
+            layerNumber={1}
+            sharedColor={selectedColorLayer1}
+            selected={selectedGlasLayer === 1}
+            onPress={() => {
+              setSelectedGlasLayer(1);
+              selectedColorPickerColor.value = selectedColorLayer1.value;
+            }}
+          />
+          <ColorLayer
+            layerNumber={2}
+            sharedColor={selectedColorLayer2}
+            selected={selectedGlasLayer === 2}
+            onPress={() => {
+              setSelectedGlasLayer(2);
+              selectedColorPickerColor.value = selectedColorLayer2.value;
+            }}
+          />
+          <ColorLayer
+            layerNumber={3}
+            sharedColor={selectedColorLayer3}
+            selected={selectedGlasLayer === 3}
+            onPress={() => {
+              setSelectedGlasLayer(3);
+              selectedColorPickerColor.value = selectedColorLayer3.value;
+            }}
+          />
+          <ColorLayer
+            layerNumber={4}
+            sharedColor={selectedColorLayer4}
+            selected={selectedGlasLayer === 4}
+            onPress={() => {
+              setSelectedGlasLayer(4);
+              selectedColorPickerColor.value = selectedColorLayer4.value;
+            }}
+          />
+        </View>
+
+        <TouchableOpacity
+          onPress={() =>
+            setColorSwatchesFavorites([
+              ...colorSwatchesFavorites,
+              selectedColorPickerColor.value,
+            ])
+          }
+          style={{
+            position: "absolute",
+            top: 20,
+            right: 0,
+          }}
+        >
+          <MyIcon
+            name="star-outline"
+            color={appContext.appTheme.icon}
+            size={20}
+          />
+        </TouchableOpacity>
+
+        <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
+          <Panel3 style={{ width: 200 }} />
+
+          <BrightnessSlider style={styles.sliderStyle} vertical reverse />
+
+          <OpacitySlider style={styles.sliderStyle} vertical reverse />
+        </View>
+
+        <Swatches
+          style={styles.swatchesContainer}
+          swatchStyle={styles.swatchStyle}
+          colors={colorSwatchesFavorites}
+        />
+
+        {appContext.isUserExpertModeEnabled && (
+          <View style={styles.previewTxtContainer}>
+            <InputWidget
+              inputStyle={{
+                color: appContext.appTheme.text,
+                paddingVertical: 2,
+                borderColor: "#707070",
+                fontSize: 12,
+                marginLeft: 5,
+              }}
+              iconColor="#707070"
+            />
+          </View>
+        )}
+      </ColorPicker>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  previewTxtContainer: {
+    paddingTop: 20,
+    marginTop: 20,
+    borderTopWidth: 1,
+    borderColor: "#bebdbe",
+  },
+  panelStyle: {
+    width: "60%",
+    height: "60%",
+    alignSelf: "center",
+    borderRadius: 16,
+  },
+  sliderStyle: {
+    borderRadius: 20,
+    marginTop: 20,
+    width: 10,
+  },
+  swatchesContainer: {
+    borderTopWidth: 1,
+    borderColor: "#bebdbe",
+    marginTop: 20,
+    paddingTop: 20,
+    justifyContent: "center",
+    gap: 10,
+  },
+  swatchStyle: {
+    borderRadius: 20,
+    height: 25,
+    width: 25,
+    margin: 0,
+    marginBottom: 0,
+    marginHorizontal: 0,
+    marginVertical: 0,
+  },
+});

src/Components/Switch/index.js

@@ -1,7 +1,6 @@
 import { useContext } from "react";
 import { Switch } from "react-native";
 import { AppContext } from "../../utils";
-import * as Haptics from "expo-haptics";
 
 export default function MySwitch({ style, value, onValueChange }) {
   const appContext = useContext(AppContext);

src/Screens/Device/colorScenes.js

@@ -1,58 +1,35 @@
-import { Dimensions, Text, View } from "react-native";
+import {  View } from "react-native";
 import Card from "../../Components/Card";
 import MyIcon from "../../Components/Icon";
 import { useContext } from "react";
 import { AppContext } from "../../utils";
 import { TouchableOpacity } from "react-native-gesture-handler";
+import MyColorPicker from "../../Components/ColorPicker";
 
-const windowDimensions = Dimensions.get("window");
-const screenDimensions = Dimensions.get("screen");
-
-export default function ColorScenesView() {
+export default function ColorScenesView({
+  deviceLedsColors,
+  setDeviceLedsColor,
+  selectedDeviceLed,
+  setSelectedDeviceLed,
+}) {
   const appContext = useContext(AppContext);
 
-  console.log("wD", windowDimensions, screenDimensions, screenDimensions.width);
-
-  const Leds = ({ style }) => {
-    let elements = [];
-
-    for (let i = 0; i < 16; i++) {
-      elements.push(
-        <View
-          key={i}
-          style={{
-            width: windowDimensions.width / 16 - 5.7,
-            height: windowDimensions.width / 16 - 5.7,
-            backgroundColor: "lime",
-            borderRadius: 4,
-          }}
-        />
-      );
-    }
-
-    return (
-      <View
-        style={[
-          { flexDirection: "row", gap: 2, justifyContent: "center" },
-          style,
-        ]}
-      >
-        {elements}
-      </View>
-    );
-  };
-
   return (
     <Card>
-      <Text style={{ textAlign: "center" }}>Rückseite</Text>
-      <Leds />
-      <Leds style={{ marginTop: 2 }} />
-      <Leds style={{ marginTop: 2 }} />
-      <Leds style={{ marginTop: 2 }} />
-      <Text style={{ textAlign: "center" }}>Vorderseite</Text>
-
       <View style={{ flexDirection: "row" }}>
-        <TouchableOpacity onPress={() => console.log("up")}>
+        <TouchableOpacity
+          onPress={() => {
+            console.log("up");
+
+            setDeviceLedsColor((arr) => {
+              const newArr = [...arr];
+
+              newArr[16] = "red";
+
+              return newArr;
+            });
+          }}
+        >
           <MyIcon
             name="arrow-up-bold-box"
             size={36}
@@ -66,14 +43,29 @@ export default function ColorScenesView() {
             color={appContext.appTheme.icon}
           />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => console.log("left")}>
+        <TouchableOpacity
+          onPress={() => {
+            console.log("left", selectedDeviceLed);
+
+            if (selectedDeviceLed > 0) {
+              setSelectedDeviceLed((prev) => (prev = prev - 1));
+            }
+          }}
+        >
           <MyIcon
             name="arrow-left-bold-box"
             size={36}
             color={appContext.appTheme.icon}
           />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => console.log("right")}>
+        <TouchableOpacity
+          onPress={() => {
+            console.log("right");
+            setSelectedDeviceLed((prev) => (prev = prev + 1));
+
+            console.log("sel", selectedDeviceLed);
+          }}
+        >
           <MyIcon
             name="arrow-right-bold-box"
             size={36}

src/Screens/Device/index.js

@@ -1,4 +1,4 @@
-import { Suspense, lazy, useContext, useState } from "react";
+import { lazy, useContext, useState } from "react";
 import {
   Image,
   ScrollView,
@@ -7,11 +7,12 @@ import {
   Text,
   TouchableHighlight,
   TouchableOpacity,
+  Dimensions,
+  Platform,
+  ImageBackground,
 } from "react-native";
 import LightView from "./light";
 import { AppContext } from "../../utils";
-//import MotorView from "./motor";
-//import SettingsView from "./settings";
 import MyIcon from "../../Components/Icon";
 
 const MotorView = lazy(() => import("./motor"));
@@ -26,9 +27,25 @@ const topFirst = top;
 const topSecond = top + spaceBetweenButtons;
 const topThird = top + 2 * spaceBetweenButtons;
 
+const windowDimensions = Dimensions.get("window");
+
+let data = [];
+
+const ledLines = 4;
+const ledsPerLine = 16;
+
+const deviceLeds = ledLines * ledsPerLine;
+
+// setting default color for testing
+for (let i = 0; i < deviceLeds; i++) {
+  data.push("lime");
+}
+
 export default function DeviceScreen() {
   const appContext = useContext(AppContext);
   const [selectedView, setSelectedView] = useState(0);
+  const [deviceLedsColors, setDeviceLedsColor] = useState(data);
+  const [selectedDeviceLed, setSelectedDeviceLed] = useState(2);
 
   const SelectedView = () => {
     switch (selectedView) {
@@ -39,7 +56,14 @@ export default function DeviceScreen() {
       case 3:
         return <SettingsView />;
       case 4:
-        return <ColorScenesView />;
+        return (
+          <ColorScenesView
+            deviceLedsColors={deviceLedsColors}
+            setDeviceLedsColor={setDeviceLedsColor}
+            selectedDeviceLed={selectedDeviceLed}
+            setSelectedDeviceLed={setSelectedDeviceLed}
+          />
+        );
       default:
         <Text>Not found</Text>;
     }
@@ -78,6 +102,59 @@ export default function DeviceScreen() {
     );
   };
 
+  const DeviceLedsColor = () => {
+    let elements = [];
+    let test = 400;
+
+    for (let l = 0; l < ledLines; l++) {
+      let left = 0;
+      let ledsElements = [];
+
+      for (let p = 0; p < ledsPerLine; p++) {
+        left = left + 1.5;
+
+        const ledId = l > 0 ? l * 16 + p : p;
+
+        const deviceLedColor =
+          l > 0 ? deviceLedsColors[l * 16 + p] : deviceLedsColors[p];
+
+        ledsElements.push(
+          <View
+            key={`${l}-${p}`}
+            style={{
+              width: 0.1 * (test / 16),
+              height: 0.1 * (test / 16),
+              backgroundColor:
+                ledId === selectedDeviceLed ? "red" : deviceLedColor,
+              borderRadius: 0.5,
+              left: left,
+              marginRight:
+                windowDimensions.width > 360
+                  ? 0.27 * (test / 16)
+                  : 0.26 * (test / 16),
+            }}
+          />
+        );
+      }
+
+      elements.push(
+        <View
+          key={`v-${l}`}
+          style={{
+            flexDirection: "row",
+            justifyContent: "center",
+            top: 118.5 + l,
+            right: "8%",
+          }}
+        >
+          {ledsElements}
+        </View>
+      );
+    }
+
+    return <>{elements}</>;
+  };
+
   return (
     <View
       style={{
@@ -85,14 +162,35 @@ export default function DeviceScreen() {
         backgroundColor: appContext.appTheme.backgroundColor,
       }}
     >
+      {selectedView === 4 && (
+        <View>
+          <ImageBackground
+            source={require("../../../assets/image19.png")}
+            resizeMode="contain"
+            style={{ height: 250 }}
+          >
+            <DeviceLedsColor />
+          </ImageBackground>
+        </View>
+      )}
+
       {appContext.isUserDeveloperModeEnabled ? (
+        <>
+          {selectedView !== 4 && (
             <Image
-          source={require("../../../assets/image.png")}
+              source={require("../../../assets/device.png")}
               style={styles.image}
+              resizeMode="contain"
             />
+          )}
+        </>
       ) : (
+        <>
+          {selectedView !== 4 && (
             <View style={[styles.image, { backgroundColor: "#ddd" }]} />
           )}
+        </>
+      )}
 
       <MyButton
         iconName={"lightbulb-on-outline"}

src/Screens/Device/light.js

@@ -144,8 +144,6 @@ export default function LightView() {
   const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
 
   const [sliderBrightness, setSliderBrightness] = useState(10);
-  const [sliderMinimumBrightness, setSliderMinimumBrightness] = useState(25);
-  const [sliderMaximumBrightness, setSliderMaximumBrightness] = useState(75);
 
   const onColorSelect = (color) => {
     selectedColorPickerColor.value = color.hex;
@@ -397,14 +395,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     marginTop: 20,
     width: 10,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
   },
   swatchesContainer: {
     borderTopWidth: 1,