From 384fb10f54a5e2a87e816bbeae8350c0230d7927 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sat, 18 Nov 2023 23:06:10 +0100
Subject: [PATCH] Prettier and linter stuff

---
 front/components/Card.tsx          | 33 ++++++++++++++++++++++--------
 front/components/RowCustom.tsx     | 33 ++++++++++++++++++++++--------
 front/components/UI/ButtonBase.tsx | 18 +++++++++-------
 3 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/front/components/Card.tsx b/front/components/Card.tsx
index e2f5a47..5b88032 100644
--- a/front/components/Card.tsx
+++ b/front/components/Card.tsx
@@ -16,6 +16,25 @@ type CardProps = Parameters<typeof Box>[0] & {
 	onPress: () => void;
 };
 
+const getBgColor = (isPressed: boolean, isHovered: boolean, colorScheme: 'light' | 'dark') => {
+	if (colorScheme === 'dark') {
+		if (isPressed) {
+			return 'gray.800';
+		}
+		if (isHovered) {
+			return 'gray.700';
+		}
+		return undefined;
+	}
+	if (isPressed) {
+		return 'coolGray.200';
+	}
+	if (isHovered) {
+		return 'coolGray.100';
+	}
+	return undefined;
+};
+
 const Card = (props: CardProps) => {
 	const theme = useTheme();
 	const colorScheme = useSelector((state: RootState) => state.settings.local.colorScheme);
@@ -27,15 +46,11 @@ const Card = (props: CardProps) => {
 				<Box
 					{...props}
 					style={[props.style, cardBorder(theme)]}
-					bg={
-						(colorScheme == 'system' ? systemColorMode : colorScheme) == 'dark'
-							? isHovered || isPressed
-								? 'gray.800'
-								: undefined
-							: isHovered || isPressed
-							? 'coolGray.200'
-							: undefined
-					}
+					bg={getBgColor(
+						isPressed,
+						isHovered,
+						(colorScheme === 'system' ? systemColorMode : colorScheme) ?? 'light'
+					)}
 				>
 					{props.children}
 				</Box>
diff --git a/front/components/RowCustom.tsx b/front/components/RowCustom.tsx
index aa9d4e3..6b1998a 100644
--- a/front/components/RowCustom.tsx
+++ b/front/components/RowCustom.tsx
@@ -2,6 +2,25 @@ import { useColorScheme } from 'react-native';
 import { RootState, useSelector } from '../state/Store';
 import { Box, Pressable } from 'native-base';
 
+const getBgColor = (isPressed: boolean, isHovered: boolean, colorScheme: 'light' | 'dark') => {
+	if (colorScheme === 'dark') {
+		if (isPressed) {
+			return 'gray.800';
+		}
+		if (isHovered) {
+			return 'gray.700';
+		}
+		return undefined;
+	}
+	if (isPressed) {
+		return 'coolGray.200';
+	}
+	if (isHovered) {
+		return 'coolGray.100';
+	}
+	return undefined;
+};
+
 const RowCustom = (props: Parameters<typeof Box>[0] & { onPress?: () => void }) => {
 	const settings = useSelector((state: RootState) => state.settings.local);
 	const systemColorMode = useColorScheme();
@@ -14,15 +33,11 @@ const RowCustom = (props: Parameters<typeof Box>[0] & { onPress?: () => void })
 					{...props}
 					py={3}
 					my={1}
-					bg={
-						(colorScheme == 'system' ? systemColorMode : colorScheme) == 'dark'
-							? isHovered || isPressed
-								? 'gray.800'
-								: undefined
-							: isHovered || isPressed
-							? 'coolGray.200'
-							: undefined
-					}
+					bg={getBgColor(
+						isPressed,
+						isHovered,
+						(colorScheme === 'system' ? systemColorMode : colorScheme) ?? 'light'
+					)}
 				>
 					{props.children}
 				</Box>
diff --git a/front/components/UI/ButtonBase.tsx b/front/components/UI/ButtonBase.tsx
index eabc26c..039edd7 100644
--- a/front/components/UI/ButtonBase.tsx
+++ b/front/components/UI/ButtonBase.tsx
@@ -32,6 +32,16 @@ const ButtonBase: React.FC<ButtonProps> = ({
 	const [loading, setLoading] = useState(false);
 	const colorScheme = useColorScheme();
 
+	const getColor = (colorScheme: 'light' | 'dark', type: ButtonType) => {
+		if (type === 'outlined') {
+			return colors.primary[300];
+		}
+		if (colorScheme === 'dark' || type === 'filled') {
+			return '#FFFFFF';
+		}
+		return colors.black[500];
+	};
+
 	const styleButton = StyleSheet.create({
 		Default: {
 			scale: 1,
@@ -132,13 +142,7 @@ const ButtonBase: React.FC<ButtonProps> = ({
 					{MyIcon && (
 						<MyIcon
 							size={'18'}
-							color={
-								type === 'outlined'
-									? colors.primary[300]
-									: colorScheme === 'dark' || type === 'filled'
-									? '#FFFFFF'
-									: colors.black[500]
-							}
+							color={getColor(colorScheme, type)}
 							variant={iconVariant}
 						/>
 					)}