CheckboxBase update design: color selectable

front/API.ts

@@ -69,7 +69,7 @@ export default class API {
 	public static readonly baseUrl =
 		process.env.NODE_ENV != 'development' && Platform.OS === 'web'
 			? '/api'
-			: Constant.manifest?.extra?.apiUrl;
+			: "https://nightly.chroma.octohub.app/api";
 	public static async fetch(
 		params: FetchParams,
 		handle: Pick<Required<HandleParams>, 'raw'>

front/components/ScoreGraph.tsx

@@ -159,7 +159,7 @@ const ScoreGraph = (props: ScoreGraphProps) => {
 						<View key={skill.value} style={{ padding: 10 }}>
 							<CheckboxBase
 								title={skill.title}
-								value={skill.value}
+								color={skill.color}
 								check={skill.check}
 								setCheck={skill.setCheck}
 							/>

front/components/UI/CheckboxBase.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 import InteractiveBase from './InteractiveBase';
-import { Checkbox } from 'native-base';
+import { Checkbox, useTheme, Text } from 'native-base';
+import { AddSquare, TickSquare } from 'iconsax-react-native';
 
 interface CheckboxProps {
 	title: string;
-	value: string;
-	// color: string;
+	color?: string;
 	check: boolean;
 	setCheck: (value: boolean) => void;
 	style?: StyleProp<ViewStyle>;
@@ -14,43 +14,12 @@ interface CheckboxProps {
 
 const CheckboxBase: React.FC<CheckboxProps> = ({
 	title,
-	value,
-	// color,
+	color,
 	style,
 	check,
 	setCheck,
 }) => {
-	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 theme = useTheme();
 	return (
 		<InteractiveBase
 			style={[styles.container, style]}
@@ -59,15 +28,50 @@ const CheckboxBase: React.FC<CheckboxProps> = ({
 				setCheck(!check);
 			}}
 		>
-			<View style={{ paddingVertical: 5, paddingHorizontal: 10 }}>
-				<Checkbox isChecked={check} style={styles.content} value={value}>
-					{title}
-				</Checkbox>
+			<View style={styles.content}>
+				{
+					check ?
+					<TickSquare size="24" color={color ? color : theme.colors.primary[400]} variant="Bold"/>
+					: <AddSquare size="24" color={color ? color : theme.colors.primary[400]} variant="Outline"/>
+
+				}
+				<Text style={styles.text} selectable={false}>{title}</Text>
 			</View>
 		</InteractiveBase>
 	);
 };
 
+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,
@@ -76,7 +80,12 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		flexDirection: 'row',
 		alignItems: 'center',
+		paddingHorizontal: 10,
+		paddingVertical: 5,
 	},
+	text: {
+		paddingLeft: 10
+	}
 });
 
 export default CheckboxBase;