From 50f6fe6851f88710344a001aec1d0210ee1b8a91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Thu, 13 Apr 2023 09:13:15 +0200
Subject: [PATCH] fixed dark mode for element list baxShadow and hover color

---
 front/components/GtkUI/ElementList.tsx |  5 ++++-
 front/components/GtkUI/RawElement.tsx  | 11 +++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/front/components/GtkUI/ElementList.tsx b/front/components/GtkUI/ElementList.tsx
index 990a636..21821ca 100644
--- a/front/components/GtkUI/ElementList.tsx
+++ b/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",
 	};
 
diff --git a/front/components/GtkUI/RawElement.tsx b/front/components/GtkUI/RawElement.tsx
index 64b8a4f..e4be9c7 100644
--- a/front/components/GtkUI/RawElement.tsx
+++ b/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,
 				}}
 			>