diff --git a/assets/red-warning.svg b/assets/red-warning.svg new file mode 100644 index 00000000..ca2c5ab4 --- /dev/null +++ b/assets/red-warning.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Components/CaseCard/CaseCard.tsx b/src/Components/CaseCard/CaseCard.tsx index 6199b9d5..a8cd566a 100644 --- 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 ( router.push({ pathname: `/AllCases/CaseScreen/${caseData.id}`, diff --git a/src/Components/CaseCard/styles.ts b/src/Components/CaseCard/styles.ts index bea8a094..4d1f0c73 100644 --- 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 index 9d2300d1..4fa4f2ac 100644 --- a/src/Components/CaseStatusBar/CaseStatusBar.tsx +++ b/src/Components/CaseStatusBar/CaseStatusBar.tsx @@ -3,6 +3,8 @@ 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; } @@ -10,7 +12,7 @@ interface CaseStatusBarProps { export default function CaseStatusBar({ status }: CaseStatusBarProps) { const statusColor = getStatusColor(status); return ( - + Case Status: {status} diff --git a/src/Components/CaseStatusBar/styles.ts b/src/Components/CaseStatusBar/styles.ts index dbf85f1e..f5150807 100644 --- 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 index 9c415f70..bc5bd62b 100644 --- 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({ }); }} > - + + openUrl('https://www.impactfund.org/')} style={styles.button} diff --git a/src/Components/EducationalBar/styles.ts b/src/Components/EducationalBar/styles.ts index 66e49f84..50318287 100644 --- 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 index f6244c69..ef1bb957 100644 --- 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 ( { router.push({ pathname: `/AllCases/EligibilityForm/${caseData.id}`, @@ -67,7 +68,7 @@ export default function EligibilityCard({ return ( @@ -94,7 +95,7 @@ export default function EligibilityCard({ { router.push({ pathname: `/AllCases/OptOut/${caseData.id}`, diff --git a/src/Components/EligibilityCard/styles.ts b/src/Components/EligibilityCard/styles.ts index cda5a300..71874220 100644 --- 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 index ff6d426f..d53ade4f 100644 --- 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 ( - + Documents - + { + router.push({ pathname: `AllCases/Updates/${caseUid}` }); + }} + > + Case Status: - { - router.push({ pathname: `AllCases/Updates/${caseUid}` }); - }} - > + + View all updates - - + + + {status} - + ); } diff --git a/src/Components/StatusUpdatesBar/styles.ts b/src/Components/StatusUpdatesBar/styles.ts index 0ac76855..7707b3f8 100644 --- 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 index 8b88203f..cee0740a 100644 --- 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} /> - + 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 index da39f1dc..6b6fe159 100644 --- 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} > - + diff --git a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts index eaaaad1d..9b022bea 100644 --- a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts +++ b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts @@ -17,18 +17,7 @@ export default StyleSheet.create({ paddingHorizontal: 23, marginVertical: 20, rowGap: 20, - backgroundColor: colors.white, - - borderWidth: 1, borderRadius: 15, - borderStyle: 'solid', - borderColor: colors.midGrey, - - shadowColor: colors.midGrey, - shadowOffset: { width: 0.05, height: 0.75 }, - shadowOpacity: 1.25, - shadowRadius: 0.05, - elevation: 1, }, titleContainer: { flexDirection: 'row', diff --git a/src/app/(BottomTabNavigation)/AllCases/index.tsx b/src/app/(BottomTabNavigation)/AllCases/index.tsx index ee50c863..192e398b 100644 --- a/src/app/(BottomTabNavigation)/AllCases/index.tsx +++ b/src/app/(BottomTabNavigation)/AllCases/index.tsx @@ -8,6 +8,7 @@ import Camera from '../../../../assets/camera.svg'; import CaseCard from '../../../Components/CaseCard/CaseCard'; import { useSession } from '../../../context/AuthContext'; import { CaseContext } from '../../../context/CaseContext'; +import globalStyles from '../../../styles/global'; import { registerForPushNotifications, updatePushToken, @@ -90,7 +91,7 @@ function CasesScreen() { router.push('/AllCases/QRCodeScanner')} - style={styles.cameraContainer} + style={[styles.cameraContainer, globalStyles.shadowBorder]} > diff --git a/src/app/(BottomTabNavigation)/AllCases/styles.ts b/src/app/(BottomTabNavigation)/AllCases/styles.ts index 6a6447e7..2c02c93b 100644 --- a/src/app/(BottomTabNavigation)/AllCases/styles.ts +++ b/src/app/(BottomTabNavigation)/AllCases/styles.ts @@ -36,19 +36,8 @@ export default StyleSheet.create({ marginTop: 18, backgroundColor: colors.white, - borderColor: colors.midGrey, - borderWidth: 1, - borderStyle: 'solid', - borderRadius: 5, - justifyContent: 'center', alignItems: 'center', - - shadowColor: colors.midGrey, - shadowOffset: { width: 0.05, height: 0.75 }, - shadowOpacity: 1, - shadowRadius: 0.75, - elevation: 1, }, buttonInfoContainer: { width: '66%', diff --git a/src/app/(BottomTabNavigation)/AllCases/utils.ts b/src/app/(BottomTabNavigation)/AllCases/utils.ts index d76a8c28..ce6ca0fc 100644 --- a/src/app/(BottomTabNavigation)/AllCases/utils.ts +++ b/src/app/(BottomTabNavigation)/AllCases/utils.ts @@ -5,7 +5,13 @@ import { getCaseIdsFromUserId, getCasesByIds, } from '../../../supabase/queries/cases'; -import { Case, UserUid } from '../../../types/types'; +import { + Case, + GreenStatusOptions, + YellowStatusOptions, + RedStatusOptions, + UserUid, +} from '../../../types/types'; /** * Fetches all Cases associated with a specific `userUid` from supabase. Formats Case data and returns an array of `Case` objects. @@ -36,19 +42,18 @@ export async function fetchAllCases(userUid: UserUid): Promise { * @returns readable date string */ export function formatDate(dateObject: Date) { - const date = new Date(dateObject).toDateString().split(' '); - return `${date[1]} ${date[2]}, ${date[3]}`; + const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; + const date = new Date( + dateObject.toLocaleString('en-US', { + timeZone: userTimeZone, + }), + ); + const dateSplit: string[] = date.toDateString().split(' '); + return `${dateSplit[1]} ${dateSplit[2]}, ${dateSplit[3]}`; } export function getStatusColor(status: string) { - if ( - status === 'In Progress' || - status === 'New Case' || - status === 'Settled' || - status === 'Appeal' || - status === 'Payment Processing' || - status === 'Payment Distributed' - ) { + if (Object.values(GreenStatusOptions).includes(status)) { return { background: { backgroundColor: colors.lightGreen, @@ -57,7 +62,7 @@ export function getStatusColor(status: string) { }, text: { color: colors.darkGreen }, }; - } else if (status === 'Pending') { + } else if (Object.values(YellowStatusOptions).includes(status)) { return { background: { backgroundColor: colors.lightYellow, @@ -66,7 +71,7 @@ export function getStatusColor(status: string) { }, text: { color: colors.darkYellow }, }; - } else if (status === 'Action Required') { + } else if (Object.values(RedStatusOptions).includes(status)) { return { background: { backgroundColor: colors.lightRed, diff --git a/src/app/(BottomTabNavigation)/Profile/index.tsx b/src/app/(BottomTabNavigation)/Profile/index.tsx index 4e769efa..0809a89d 100644 --- a/src/app/(BottomTabNavigation)/Profile/index.tsx +++ b/src/app/(BottomTabNavigation)/Profile/index.tsx @@ -14,6 +14,7 @@ import SignOut from '../../../../assets/sign-out.svg'; import WhiteRightCarrot from '../../../../assets/white-right-carrot.svg'; import CasesHeader from '../../../Components/CasesHeader/CasesHeader'; import { useSession } from '../../../context/AuthContext'; +import globalStyles from '../../../styles/global'; function ProfileScreen() { const navigation = useNavigation(); @@ -32,7 +33,7 @@ function ProfileScreen() { Settings - + @@ -82,7 +83,7 @@ function ProfileScreen() { - + diff --git a/src/app/(BottomTabNavigation)/Profile/styles.ts b/src/app/(BottomTabNavigation)/Profile/styles.ts index 0112069f..c1df17fa 100644 --- a/src/app/(BottomTabNavigation)/Profile/styles.ts +++ b/src/app/(BottomTabNavigation)/Profile/styles.ts @@ -35,19 +35,10 @@ export default StyleSheet.create({ actionsContainer: { width: '100%', - border: 'solid', - borderColor: colors.midGrey, - borderWidth: 1, - borderRadius: 5, backgroundColor: colors.white, marginBottom: 22, flexDirection: 'column', justifyContent: 'space-evenly', - shadowColor: colors.midGrey, - shadowOffset: { width: 0.05, height: 0.75 }, - shadowOpacity: 1.25, - shadowRadius: 0.05, - elevation: 1, }, profileDetailsBox: { diff --git a/src/styles/global.ts b/src/styles/global.ts new file mode 100644 index 00000000..fbb10112 --- /dev/null +++ b/src/styles/global.ts @@ -0,0 +1,19 @@ +import { StyleSheet } from 'react-native'; + +import { colors } from './colors'; + +export default StyleSheet.create({ + shadowBorder: { + backgroundColor: colors.white, + borderColor: colors.midGrey, + borderWidth: 1, + borderStyle: 'solid', + borderRadius: 5, + + shadowColor: colors.midGrey, + shadowOffset: { width: 0.05, height: 0.75 }, + shadowOpacity: 1, + shadowRadius: 0.75, + elevation: 1, + }, +}); diff --git a/src/types/types.tsx b/src/types/types.tsx index 0c14a720..d102d9bf 100644 --- a/src/types/types.tsx +++ b/src/types/types.tsx @@ -88,3 +88,20 @@ export interface Update { summary: string; lawFirm: string; } + +export enum GreenStatusOptions { + 'In Progress', + 'New Case', + 'Settled', + 'Appeal', + 'Payment Processing', + 'Payment Distributed', +} + +export enum YellowStatusOptions { + 'Pending', +} + +export enum RedStatusOptions { + 'Action Required', +}