[style] fix check eligibility button component styling.

calblueprint · May 1, 2024 · 8234e2b · 8234e2b
1 parent c60a8fe
commit 8234e2b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 43 deletions.
diff --git a/src/Components/CheckEligibilityButton/CheckEligibilityButton.tsx b/src/Components/CheckEligibilityButton/CheckEligibilityButton.tsx
@@ -17,29 +17,23 @@ export default function CheckEligibilityButton({
   caseUid,
 }: CheckEligibilityProps) {
   return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={[styles.buttonContainer, globalStyles.shadowBorder]}
-        onPress={() => {
-          router.push({
-            pathname: `/AllCases/EligibilityForm/${caseUid}`,
-          });
-        }}
-      >
-        <View style={styles.leftContainer}>
-          <CheckEligibility />
-        </View>
-        <View style={styles.middleContainer}>
+    <TouchableOpacity
+      style={[styles.buttonContainer, globalStyles.shadowBorder]}
+      onPress={() => {
+        router.push(`/AllCases/EligibilityForm/${caseUid}`);
+      }}
+    >
+      <CheckEligibility />
+      <View style={styles.rightContainer}>
+        <View style={styles.topRow}>
           <Text style={styles.headerText}>Check eligibility</Text>
-          <Text style={styles.bodyText}>
-            Check your eligibility for this case if you would like to file a
-            claim or opt out.
-          </Text>
-        </View>
-        <View style={styles.rightContainer}>
           <Arrow />
         </View>
-      </TouchableOpacity>
-    </View>
+        <Text style={styles.bodyText}>
+          Check your eligibility for this case if you would like to file a claim
+          or opt out.
+        </Text>
+      </View>
+    </TouchableOpacity>
   );
 }
diff --git a/src/Components/CheckEligibilityButton/styles.ts b/src/Components/CheckEligibilityButton/styles.ts
@@ -3,35 +3,25 @@ import { StyleSheet } from 'react-native';
 import { colors } from '../../styles/colors';
 
 export default StyleSheet.create({
-  container: {
-    width: '100%',
-    height: 'auto',
-    justifyContent: 'center',
-    alignContent: 'center',
-  },
   buttonContainer: {
     width: '100%',
-    flexDirection: 'column',
-    alignSelf: 'center',
-    justifyContent: 'space-evenly',
-    padding: 20,
-  },
-  leftContainer: {
-    flex: 0.15,
-  },
-  middleContainer: {
-    flex: 0.9,
-    flexDirection: 'column',
+    flexDirection: 'row',
     justifyContent: 'space-between',
+    columnGap: 12,
+    padding: 20,
   },
   rightContainer: {
-    flex: 0.05,
-    alignItems: 'flex-end',
+    flexDirection: 'column',
+    flex: 1,
+    rowGap: 15,
   },
-  textContainer: {
-    width: 50,
-    justifyContent: 'center',
+  topRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.midGrey,
+    paddingBottom: 5,
   },
   headerText: {
     fontSize: 20,