[refactor] update options styling

calblueprint · Apr 25, 2024 · 3971668 · 3971668
1 parent 537b1cd
commit 3971668
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 37 deletions.
diff --git a/src/Components/EligibilityCard/EligibilityCard.tsx b/src/Components/EligibilityCard/EligibilityCard.tsx
@@ -71,51 +71,53 @@ export default function EligibilityCard({
           style={[styles.buttonContainer, globalStyles.shadowBorder]}
           onPress={onPressHandler}
         >
-          <View style={styles.leftContainer}>
-            <Fileclaim />
-          </View>
-          <View style={styles.middleContainer}>
-            <Text style={styles.headerText}>File a case claim</Text>
-            <Text style={styles.bodyText}>
-              Eligible class members can submit a claim electronically to
-              receive a settlement.
-            </Text>
-          </View>
-          <View style={styles.rightContainer}>
-            <Arrow />
+          <View style={styles.topContainer}>
+            <View style={styles.leftContainer}>
+              <Fileclaim />
+            </View>
+            <View style={styles.middleContainer}>
+              <Text style={styles.bodyText}>
+                Eligible class members can submit a claim electronically to
+                receive a settlement.
+              </Text>
+            </View>
           </View>
-        </TouchableOpacity>
 
-        <View style={styles.separatorComponent}>
           <View style={styles.horizontalLine} />
-          <View style={styles.textContainer}>
-            <Text style={styles.separatorText}>OR</Text>
+
+          <View style={styles.bottomContainer}>
+            <Text style={styles.smallText}>File or update my claim</Text>
+            <Arrow />
           </View>
-          <View style={styles.horizontalLine} />
-        </View>
+        </TouchableOpacity>
 
-        <TouchableOpacity
+        {/* <TouchableOpacity
           style={[styles.buttonContainer, globalStyles.shadowBorder]}
           onPress={() => {
             router.push({
               pathname: `/AllCases/OptOut/${caseData.id}`,
             });
           }}
         >
-          <View style={styles.leftContainer}>
-            <OptOut />
-          </View>
-          <View style={styles.middleContainer}>
-            <Text style={styles.headerText}>Opt out of case</Text>
-            <Text style={styles.bodyText}>
-              Opt out of this case to do something you can still file private
-              claim yada yada
-            </Text>
+          <View style={styles.topContainer}>
+            <View style={styles.leftContainer}>
+              <OptOut />
+            </View>
+            <View style={styles.middleContainer}>
+              <Text style={styles.bodyText}>
+                Opt out to remove yourself from this class action and deactivate
+                this case.
+              </Text>
+            </View>
           </View>
-          <View style={styles.rightContainer}>
+
+          <View style={styles.horizontalLine} />
+
+          <View style={styles.bottomContainer}>
+            <Text style={styles.smallText}>View options for opting out</Text>
             <Arrow />
           </View>
-        </TouchableOpacity>
+        </TouchableOpacity> */}
       </View>
     );
   } else {

diff --git a/src/Components/EligibilityCard/styles.ts b/src/Components/EligibilityCard/styles.ts
@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { Directions } from 'react-native-gesture-handler';
 
 import { colors } from '../../styles/colors';
 
@@ -11,7 +12,7 @@ export default StyleSheet.create({
   },
   buttonContainer: {
     width: '100%',
-    flexDirection: 'row',
+    flexDirection: 'column',
     alignSelf: 'center',
     justifyContent: 'space-evenly',
     padding: 20,
@@ -20,10 +21,9 @@ export default StyleSheet.create({
     flex: 0.15,
   },
   middleContainer: {
-    flex: 0.8,
+    flex: 0.9,
     flexDirection: 'column',
     justifyContent: 'space-between',
-    rowGap: 12,
   },
   rightContainer: {
     flex: 0.05,
@@ -40,9 +40,9 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   horizontalLine: {
-    flex: 1,
     height: 0.5,
-    backgroundColor: colors.black,
+    marginVertical: 15,
+    backgroundColor: colors.midGrey,
   },
   headerText: {
     fontSize: 20,
@@ -52,11 +52,11 @@ export default StyleSheet.create({
     color: colors.black,
   },
   bodyText: {
-    fontSize: 12,
+    fontSize: 14,
     fontStyle: 'normal',
     fontWeight: '300',
     lineHeight: 16,
-    color: colors.darkGrey,
+    color: colors.black,
   },
   separatorText: {
     fontSize: 12,
@@ -65,4 +65,21 @@ export default StyleSheet.create({
     lineHeight: 16,
     color: colors.black,
   },
+  topContainer: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  bottomContainer: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  smallText: {
+    fontSize: 14,
+    fontStyle: 'normal',
+    fontWeight: '300',
+    lineHeight: 16,
+    color: colors.darkGrey,
+  },
 });