[refactor] add text

calblueprint · Apr 25, 2024 · 8e8e9aa · 8e8e9aa
1 parent efd5d9e
commit 8e8e9aa
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx b/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx
@@ -4,25 +4,31 @@ import { View, TouchableOpacity, Text } from 'react-native';
 import styles from './styles';
 
 function ToggleOptionsButton() {
-  const [isChecked, setIsChecked] = useState(false);
+  const [isSwitched, setIsSwitched] = useState(false);
 
   const handleToggle = () => {
-    setIsChecked(prevState => !prevState);
+    setIsSwitched(prevState => !prevState);
   };
 
   return (
     <TouchableOpacity
       activeOpacity={1}
       style={[
         styles.toggleButtonContainer,
-        isChecked && styles.toggleSwitchCheckedButtonContainer,
+        isSwitched && styles.toggleSwitchCheckedButtonContainer,
       ]}
       onPress={handleToggle}
     >
       <View
-        style={[styles.toggleItem, isChecked && styles.toggleSwitchCheckedItem]}
-      />
-      {isChecked}
+        style={[
+          styles.toggleItem,
+          isSwitched && styles.toggleSwitchCheckedItem,
+        ]}
+      >
+        <Text style={styles.boldText}>
+          {isSwitched ? 'Opt out' : 'File a claim'}
+        </Text>
+      </View>
     </TouchableOpacity>
   );
 }

diff --git a/src/Components/ToggleOptionsButton/styles.ts b/src/Components/ToggleOptionsButton/styles.ts
@@ -5,9 +5,9 @@ import { colors } from '../../styles/colors';
 export default StyleSheet.create({
   toggleButtonContainer: {
     width: '100%',
-    height: 43,
+    height: 50,
     backgroundColor: colors.lightGrey,
-    borderRadius: 20,
+    borderRadius: 30,
     justifyContent: 'center',
     alignItems: 'flex-start',
     flexDirection: 'column',
@@ -19,28 +19,36 @@ export default StyleSheet.create({
     marginLeft: 4,
     marginRight: 4,
     width: '50%',
-    height: 35,
+    height: 42,
     backgroundColor: colors.white,
 
     borderColor: colors.white,
     borderWidth: 1,
     borderStyle: 'solid',
-    borderRadius: 20,
+    borderRadius: 30,
 
     shadowColor: colors.midGrey,
     shadowOffset: { width: 0.05, height: 0.75 },
     shadowOpacity: 1,
     shadowRadius: 0.75,
     elevation: 1,
+
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   toggleSwitchCheckedButtonContainer: {
     backgroundColor: colors.lightGrey,
   },
   toggleSwitchCheckedItem: {
     right: 0,
   },
-  blackText: {
+  lightText: {
     color: colors.black,
     fontWeight: '400',
   },
+  boldText: {
+    color: colors.black,
+    fontSize: 18,
+    fontWeight: '500',
+  },
 });