fixed dark mode for element list baxShadow and hover color

front/components/GtkUI/ElementList.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { Element } from "./Element";
+import useColorScheme from "../../hooks/colorScheme";
 
 import {
 	ElementTextProps,
@@ -37,9 +38,11 @@ type ElementListProps = {
 };
 
 const ElementList = ({ elements, style }: ElementListProps) => {
+	const colorScheme = useColorScheme();
+	const isDark = colorScheme === "dark";
 	const elementStyle = {
 		borderRadius: 10,
-		boxShadow: "0px 0px 3px 0px rgba(0,0,0,0.4)",
+		boxShadow: isDark ?  "0px 0px 3px 0px rgba(255,255,255,0.6)" : "0px 0px 3px 0px rgba(0,0,0,0.4)",
 		overflow: "hidden",
 	};
 

front/components/GtkUI/RawElement.tsx

@@ -10,6 +10,7 @@ import {
 	Text,
 	useBreakpointValue,
 } from "native-base";
+import useColorScheme from "../../hooks/colorScheme";
 import { Ionicons } from "@expo/vector-icons";
 import { ElementProps } from "./ElementList";
 import {
@@ -31,6 +32,8 @@ type RawElementProps = {
 export const RawElement = ({ element, isHovered }: RawElementProps) => {
 	const { title, icon, type, helperText, description, disabled, data } =
 		element;
+	const colorScheme = useColorScheme();
+	const isDark = colorScheme === "dark";
 	const screenSize = useBreakpointValue({ base: "small", md: "big" });
 	const isSmallScreen = screenSize === "small";
 	return (
@@ -42,13 +45,17 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
 				justifyContent: "space-between",
 				alignContent: "stretch",
 				alignItems: "center",
-				backgroundColor: isHovered ? "#f5f5f5" : undefined,
+				backgroundColor: isHovered
+					? isDark
+						? "rgba(255, 255, 255, 0.1)"
+						: "rgba(0, 0, 0, 0.05)"
+					: undefined,
 			}}
 		>
 			<Box
 				style={{
 					flexGrow: 1,
-					flexShrink: 100,
+					flexShrink: 1,
 					opacity: disabled ? 0.6 : 1,
 				}}
 			>