From 8e8e9aa66393b3130cc4b352589225541caaa309 Mon Sep 17 00:00:00 2001
From: Arfa Momin <arfamomin16@gmail.com>
Date: Wed, 24 Apr 2024 17:50:21 -0700
Subject: [PATCH] [refactor] add text

---
 .../ToggleOptionsButton.tsx                    | 18 ++++++++++++------
 src/Components/ToggleOptionsButton/styles.ts   | 18 +++++++++++++-----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx b/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx
index be5a3b22..abd75144 100644
--- a/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx
+++ b/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx
@@ -4,10 +4,10 @@ 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 (
@@ -15,14 +15,20 @@ function ToggleOptionsButton() {
       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
index 70ff8738..33e50d31 100644
--- 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,19 +19,22 @@ 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,
@@ -39,8 +42,13 @@ export default StyleSheet.create({
   toggleSwitchCheckedItem: {
     right: 0,
   },
-  blackText: {
+  lightText: {
     color: colors.black,
     fontWeight: '400',
   },
+  boldText: {
+    color: colors.black,
+    fontSize: 18,
+    fontWeight: '500',
+  },
 });