[cases] CaseScreen bugs (#82)

* fix: change activeText color * fix: make entire StatusUpdatesBar clickable * fix: update warning icon * fix: dates for form items * fix: remove random file * fix: investigating date stuff (not done) * fix: pressable req padding * fix: view all updates alignment * fix: cleaned up status button containers * fix: typing and enumming status options * fix: resolved philips pr review comments * fix: change padding from % to pixel * [feat] create a global shadow style and apply it to all containers with shadow. * [cleanup] remove comments. * [refactor] apply shadows in other places. * [cleanup] simplify date function * cleanup: simplify getStatus function * [cleanup] apply shadow to UpdateView --------- Co-authored-by: Ronnie Beggs <[email protected]>
calblueprint · Apr 24, 2024 · 7b7cd5f · 7b7cd5f
1 parent dde750d
commit 7b7cd5f
Show file tree

Hide file tree

Showing 26 changed files with 111 additions and 147 deletions.
diff --git a/assets/red-warning.svg b/assets/red-warning.svg
diff --git a/src/Components/CaseCard/CaseCard.tsx b/src/Components/CaseCard/CaseCard.tsx
@@ -9,13 +9,14 @@ import {
   formatDate,
   getStatusColor,
 } from '../../app/(BottomTabNavigation)/AllCases/utils';
+import globalStyles from '../../styles/global';
 import { Case } from '../../types/types';
 
 function CaseCard(caseData: Case) {
   const statusColor = getStatusColor(caseData.caseStatus);
   return (
     <TouchableOpacity
-      style={styles.caseCard}
+      style={[styles.caseCard, globalStyles.shadowBorder]}
       onPress={() =>
         router.push({
           pathname: `/AllCases/CaseScreen/${caseData.id}`,

diff --git a/src/Components/CaseCard/styles.ts b/src/Components/CaseCard/styles.ts
@@ -7,16 +7,6 @@ export default StyleSheet.create({
     width: '100%',
     flexDirection: 'column',
     paddingHorizontal: 20,
-
-    backgroundColor: colors.white,
-    border: 'solid',
-    borderColor: colors.darkGrey,
-    borderWidth: 0.25,
-    borderRadius: 5,
-    shadowOffset: { width: 0.05, height: 0.75 },
-    shadowOpacity: 1.25,
-    shadowRadius: 0.05,
-    elevation: 1,
   },
   mainContentContainer: {
     flexDirection: 'row',

diff --git a/src/Components/CaseStatusBar/CaseStatusBar.tsx b/src/Components/CaseStatusBar/CaseStatusBar.tsx
@@ -3,14 +3,16 @@ import { View, Text } from 'react-native';
 
 import styles from './styles';
 import { getStatusColor } from '../../app/(BottomTabNavigation)/AllCases/utils';
+import globalStyles from '../../styles/global';
+
 interface CaseStatusBarProps {
   status: string;
 }
 
 export default function CaseStatusBar({ status }: CaseStatusBarProps) {
   const statusColor = getStatusColor(status);
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, globalStyles.shadowBorder]}>
       <Text style={styles.statusText}>Case Status:</Text>
       <View style={[styles.statusContainer, statusColor.background]}>
         <Text style={[styles.statusTextColor, statusColor.text]}>{status}</Text>

diff --git a/src/Components/CaseStatusBar/styles.ts b/src/Components/CaseStatusBar/styles.ts
@@ -8,19 +8,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    backgroundColor: colors.white,
     paddingHorizontal: 20,
-
-    borderWidth: 0.5,
-    borderRadius: 5,
-    borderStyle: 'solid',
-    borderColor: colors.midGrey,
-
-    shadowColor: colors.black,
-    shadowOffset: { width: 0.05, height: 0.75 },
-    shadowOpacity: 1.25,
-    shadowRadius: 0.05,
-    elevation: 1,
   },
   statusContainer: {
     height: 29,

diff --git a/src/Components/CaseSummaryCard/CaseSummaryCard.tsx b/src/Components/CaseSummaryCard/CaseSummaryCard.tsx
@@ -6,6 +6,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import RightCaret from '../../../assets/right-caret.svg';
 import { formatDate } from '../../app/(BottomTabNavigation)/AllCases/utils';
+import globalStyles from '../../styles/global';
 import { CaseSummaryProps } from '../../types/types';
 
 export default function CaseSummaryCard({
@@ -23,7 +24,7 @@ export default function CaseSummaryCard({
         });
       }}
     >
-      <View style={styles.container}>
+      <View style={[styles.container, globalStyles.shadowBorder]}>
         <Image
           style={styles.imageContainer}
           source={imageUrl}

diff --git a/src/Components/CaseSummaryCard/styles.ts b/src/Components/CaseSummaryCard/styles.ts
@@ -6,16 +6,6 @@ export default StyleSheet.create({
   container: {
     width: '100%',
     flexDirection: 'column',
-    borderWidth: 0.5,
-    borderRadius: 5,
-    borderStyle: 'solid',
-    borderColor: colors.midGrey,
-    backgroundColor: colors.white,
-    shadowColor: colors.black,
-    shadowOffset: { width: 0.05, height: 0.75 },
-    shadowOpacity: 1.25,
-    shadowRadius: 0.05,
-    elevation: 1,
   },
   imageContainer: {
     aspectRatio: 1.9,

diff --git a/src/Components/EducationalBar/EducationalBar.tsx b/src/Components/EducationalBar/EducationalBar.tsx
@@ -5,10 +5,11 @@ import styles from './styles';
 import RedInformationIcon from '../../../assets/red-information-icon.svg';
 import RightCarrot from '../../../assets/right-caret.svg';
 import { openUrl } from '../../app/(BottomTabNavigation)/AllCases/utils';
+import globalStyles from '../../styles/global';
 
 export default function EducationalBar() {
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, globalStyles.shadowBorder]}>
       <TouchableOpacity
         onPress={() => openUrl('https://www.impactfund.org/')}
         style={styles.button}

diff --git a/src/Components/EducationalBar/styles.ts b/src/Components/EducationalBar/styles.ts
@@ -5,13 +5,10 @@ import { colors } from '../../styles/colors';
 export default StyleSheet.create({
   container: {
     width: '100%',
-    display: 'flex',
     height: 55,
-    paddingHorizontal: 20,
-    borderWidth: 0.5,
-    borderRadius: 5,
-    borderColor: colors.darkGrey,
+    display: 'flex',
     flexDirection: 'row',
+    paddingHorizontal: 20,
   },
   button: {
     width: '100%',

diff --git a/src/Components/EligibilityCard/EligibilityCard.tsx b/src/Components/EligibilityCard/EligibilityCard.tsx
@@ -9,6 +9,7 @@ import Fileclaim from '../../../assets/file-claim.svg';
 import Arrow from '../../../assets/next.svg';
 import OptOut from '../../../assets/opt-out.svg';
 import { openUrl } from '../../app/(BottomTabNavigation)/AllCases/utils';
+import globalStyles from '../../styles/global';
 import { Case, Eligibility } from '../../types/types';
 
 interface EligibilityCardProps {
@@ -35,7 +36,7 @@ export default function EligibilityCard({
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={styles.buttonContainer}
+          style={[styles.buttonContainer, globalStyles.shadowBorder]}
           onPress={() => {
             router.push({
               pathname: `/AllCases/EligibilityForm/${caseData.id}`,
@@ -67,7 +68,7 @@ export default function EligibilityCard({
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={styles.buttonContainer}
+          style={[styles.buttonContainer, globalStyles.shadowBorder]}
           onPress={onPressHandler}
         >
           <View style={styles.leftContainer}>
@@ -94,7 +95,7 @@ export default function EligibilityCard({
         </View>
 
         <TouchableOpacity
-          style={styles.buttonContainer}
+          style={[styles.buttonContainer, globalStyles.shadowBorder]}
           onPress={() => {
             router.push({
               pathname: `/AllCases/OptOut/${caseData.id}`,

diff --git a/src/Components/EligibilityCard/styles.ts b/src/Components/EligibilityCard/styles.ts
@@ -15,18 +15,6 @@ export default StyleSheet.create({
     alignSelf: 'center',
     justifyContent: 'space-evenly',
     padding: 20,
-    backgroundColor: colors.white,
-
-    border: 'solid',
-    borderWidth: 0.5,
-    borderRadius: 5,
-    borderColor: colors.midGrey,
-
-    shadowColor: colors.black,
-    shadowOffset: { width: 0.05, height: 0.75 },
-    shadowOpacity: 1.25,
-    shadowRadius: 0.05,
-    elevation: 1,
   },
   leftContainer: {
     flex: 0.15,

diff --git a/src/Components/FormsCard/FormsCard.tsx b/src/Components/FormsCard/FormsCard.tsx
@@ -5,6 +5,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import RightCaret from '../../../assets/right-caret.svg';
 import { getFeaturedForm } from '../../app/(BottomTabNavigation)/AllCases/Forms/utils';
+import globalStyles from '../../styles/global';
 import { Case, Form } from '../../types/types';
 import FormListItem from '../FormListItem/FormListItem';
 
@@ -28,7 +29,7 @@ export default function FormsCard(caseData: Case) {
   }, []);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, globalStyles.shadowBorder]}>
       <View style={styles.topContainer}>
         <Text style={styles.titleText}>Documents</Text>
         <TouchableOpacity

diff --git a/src/Components/FormsCard/styles.ts b/src/Components/FormsCard/styles.ts
@@ -9,9 +9,6 @@ export default StyleSheet.create({
     alignItems: 'center',
     rowGap: 12,
     paddingVertical: 23,
-    borderWidth: 0.5,
-    borderRadius: 5,
-    borderColor: colors.darkGrey,
   },
   topContainer: {
     height: 32,

diff --git a/src/Components/PressableRequirement/styles.ts b/src/Components/PressableRequirement/styles.ts
@@ -5,13 +5,13 @@ import { colors } from '../../styles/colors';
 export default StyleSheet.create({
   requirementContainer: {
     flexDirection: 'row',
-    paddingTop: 20,
     columnGap: 20,
-    paddingHorizontal: '6%',
+    paddingHorizontal: 25,
+    paddingVertical: 20,
   },
   innerRequirementBox: {
     flex: 1,
-    paddingBottom: 20,
+    justifyContent: 'center',
   },
   buttonBase: {
     flexDirection: 'row',
@@ -29,9 +29,9 @@ export default StyleSheet.create({
     fontWeight: '300',
   },
   activeText: {
-    color: colors.black,
+    color: colors.darkGrey,
   },
   inactiveText: {
-    color: colors.midGrey,
+    color: colors.black,
   },
 });
diff --git a/src/Components/StatusUpdatesBar/StatusUpdatesBar.tsx b/src/Components/StatusUpdatesBar/StatusUpdatesBar.tsx
@@ -5,6 +5,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import RightCaret from '../../../assets/right-caret.svg';
 import { getStatusColor } from '../../app/(BottomTabNavigation)/AllCases/utils';
+import globalStyles from '../../styles/global';
 import { CaseUid } from '../../types/types';
 
 interface CaseStatusBarProps {
@@ -19,22 +20,24 @@ export default function StatusUpdatesBar({
   const statusColor = getStatusColor(status);
 
   return (
-    <View style={styles.container}>
-      <View style={styles.topContainer}>
+    <TouchableOpacity
+      style={[styles.updatesButton, globalStyles.shadowBorder]}
+      onPress={() => {
+        router.push({ pathname: `AllCases/Updates/${caseUid}` });
+      }}
+    >
+      <View style={styles.textContainer}>
         <Text style={styles.statusText}>Case Status:</Text>
-        <TouchableOpacity
-          style={styles.updatesButton}
-          onPress={() => {
-            router.push({ pathname: `AllCases/Updates/${caseUid}` });
-          }}
-        >
+
+        <View style={styles.updatesContainer}>
           <Text style={styles.buttonText}>View all updates</Text>
-          <RightCaret />
-        </TouchableOpacity>
+          <RightCaret style={styles.icon} />
+        </View>
       </View>
+
       <View style={[styles.statusContainer, statusColor.background]}>
         <Text style={[styles.statusTextColor, statusColor.text]}>{status}</Text>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 }
diff --git a/src/Components/StatusUpdatesBar/styles.ts b/src/Components/StatusUpdatesBar/styles.ts
@@ -2,29 +2,15 @@ import { StyleSheet } from 'react-native';
 
 import { colors } from '../../styles/colors';
 export default StyleSheet.create({
-  container: {
-    // height: ,
+  updatesButton: {
     width: '100%',
     alignItems: 'center',
     flexDirection: 'column',
     justifyContent: 'space-between',
-    backgroundColor: colors.white,
-    // paddingHorizontal: 20,
     padding: 16,
     rowGap: 10,
-
-    borderWidth: 0.5,
-    borderRadius: 5,
-    borderStyle: 'solid',
-    borderColor: colors.midGrey,
-
-    shadowColor: colors.black,
-    shadowOffset: { width: 0.05, height: 0.75 },
-    shadowOpacity: 1.25,
-    shadowRadius: 0.05,
-    elevation: 1,
   },
-  topContainer: {
+  textContainer: {
     width: '100%',
     height: 31,
     flexDirection: 'row',
@@ -34,11 +20,6 @@ export default StyleSheet.create({
     borderBottomWidth: 0.5,
     borderBottomColor: colors.midGrey,
   },
-  updatesButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    columnGap: 16,
-  },
   statusContainer: {
     height: 29,
     width: '100%',
@@ -49,6 +30,10 @@ export default StyleSheet.create({
     borderWidth: 0.3,
     borderRadius: 5,
   },
+  updatesContainer: {
+    flexDirection: 'row',
+    columnGap: 10,
+  },
   statusText: {
     fontSize: 20,
     lineHeight: 21,
@@ -68,4 +53,7 @@ export default StyleSheet.create({
     fontWeight: '300',
     lineHeight: 21,
   },
+  icon: {
+    marginTop: 5,
+  },
 });
diff --git a/src/app/(BottomTabNavigation)/AllCases/EligibilityForm/[caseUid].tsx b/src/app/(BottomTabNavigation)/AllCases/EligibilityForm/[caseUid].tsx
@@ -5,7 +5,7 @@ import { View, Text, TouchableOpacity, FlatList } from 'react-native';
 
 import styles from './styles';
 import Check from '../../../../../assets/check-circle.svg';
-import Error from '../../../../../assets/exclamation.svg';
+import RedWarning from '../../../../../assets/red-warning.svg';
 import Ex from '../../../../../assets/x.svg';
 import PressableRequirement from '../../../../Components/PressableRequirement/PressableRequirement';
 import {
@@ -77,7 +77,7 @@ export default function EligibilityForm() {
                 transition={300}
               />
               <View style={styles.infoRow}>
-                <Error />
+                <RedWarning />
                 <View style={{ flex: 1 }}>
                   <Text style={styles.bodyText}>
                     You must meet every requirement to be eligible for this

diff --git a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/[updateUid].tsx b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/[updateUid].tsx
@@ -4,6 +4,7 @@ import { View, Text, ScrollView } from 'react-native';
 
 import styles from './styles';
 import NotificationBell from '../../../../../../assets/red-notification-bell.svg';
+import globalStyles from '../../../../../styles/global';
 import { getUpdateById } from '../../../../../supabase/queries/updates';
 import { Update, UpdateUid } from '../../../../../types/types';
 import { formatDate } from '../../utils';
@@ -35,7 +36,7 @@ export default function UpdateView() {
             style={styles.outerScroll}
             showsVerticalScrollIndicator={false}
           >
-            <View style={styles.innerScroll}>
+            <View style={[globalStyles.shadowBorder, styles.innerScroll]}>
               <View style={styles.titleContainer}>
                 <NotificationBell />
                 <View style={styles.headerText}>