[add]: LinkBase && PopupCC, starting theme management (light and dark) and translation

2023-10-27 20:50:05 +02:00
parent 6a8ca7d0fa
commit 77f0c2f06f
32 changed files with 739 additions and 1151 deletions
@@ -13,11 +13,41 @@ interface CheckboxProps {
 }

 const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, setCheck }) => {
-	const theme = useTheme();
+	const { colors } = useTheme();
+
 	return (
 		<InteractiveBase
 			style={[styles.container, style]}
-			styleAnimate={styleGlassmorphism}
+			styleAnimate={{
+				Default: {
+					scale: 1,
+					shadowOpacity: 0.3,
+					shadowRadius: 4.65,
+					elevation: 8,
+					backgroundColor: colors.coolGray[500],
+				},
+				onHover: {
+					scale: 1.01,
+					shadowOpacity: 0.37,
+					shadowRadius: 7.49,
+					elevation: 12,
+					backgroundColor: colors.coolGray[400],
+				},
+				onPressed: {
+					scale: 0.99,
+					shadowOpacity: 0.23,
+					shadowRadius: 2.62,
+					elevation: 4,
+					backgroundColor: colors.coolGray[600],
+				},
+				Disabled: {
+					scale: 1,
+					shadowOpacity: 0.3,
+					shadowRadius: 4.65,
+					elevation: 8,
+					backgroundColor: colors.coolGray[500],
+				},
+			}}
 			onPress={async () => {
 				setCheck(!check);
 			}}
@@ -26,13 +56,13 @@ const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, set
 				{check ? (
 					<TickSquare
 						size="24"
-						color={color ? color : theme.colors.primary[400]}
+						color={color ?? colors.primary[400]}
 						variant="Bold"
 					/>
 				) : (
 					<AddSquare
 						size="24"
-						color={color ? color : theme.colors.primary[400]}
+						color={color ?? colors.primary[400]}
 						variant="Outline"
 					/>
 				)}
@@ -44,37 +74,6 @@ const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, set
 	);
 };

-const styleGlassmorphism = StyleSheet.create({
-	Default: {
-		scale: 1,
-		shadowOpacity: 0.3,
-		shadowRadius: 4.65,
-		elevation: 8,
-		backgroundColor: 'rgba(16,16,20,0.5)',
-	},
-	onHover: {
-		scale: 1.01,
-		shadowOpacity: 0.37,
-		shadowRadius: 7.49,
-		elevation: 12,
-		backgroundColor: 'rgba(16,16,20,0.4)',
-	},
-	onPressed: {
-		scale: 0.99,
-		shadowOpacity: 0.23,
-		shadowRadius: 2.62,
-		elevation: 4,
-		backgroundColor: 'rgba(16,16,20,0.6)',
-	},
-	Disabled: {
-		scale: 1,
-		shadowOpacity: 0.3,
-		shadowRadius: 4.65,
-		elevation: 8,
-		backgroundColor: 'rgba(16,16,20,0.5)',
-	},
-});
-
 const styles = StyleSheet.create({
 	container: {
 		borderRadius: 8,