From 813b9028612e3e5eef593d38164337c5a4cf74eb Mon Sep 17 00:00:00 2001 From: Melissa <122945886+me-liu@users.noreply.github.com> Date: Sun, 21 Apr 2024 12:47:05 -0700 Subject: [PATCH 1/2] [profile] fix bugs and styling (#79) * profile bugs for hitbox and zipcode fixed * [wip] refactor profile item box. * [feat] standardize style in profile boxes. * [cleanup] cleanup styles.ts file. --------- Co-authored-by: Ronnie Beggs --- src/Components/AuthInput/AuthInput.tsx | 2 +- .../(BottomTabNavigation)/Profile/index.tsx | 125 +++++++++--------- .../(BottomTabNavigation)/Profile/styles.ts | 111 +++++++--------- 3 files changed, 112 insertions(+), 126 deletions(-) diff --git a/src/Components/AuthInput/AuthInput.tsx b/src/Components/AuthInput/AuthInput.tsx index 9f6a88ea..d98e8fec 100644 --- a/src/Components/AuthInput/AuthInput.tsx +++ b/src/Components/AuthInput/AuthInput.tsx @@ -36,7 +36,7 @@ export default function AuthInput({ const offClick = () => { setIsFocused(false); - if (input.trim() === '' && !isPassword) { + if (input && input.trim() === '' && !isPassword) { setPlaceholder(placeholderText); setIsLabelDisplayed(false); } else { diff --git a/src/app/(BottomTabNavigation)/Profile/index.tsx b/src/app/(BottomTabNavigation)/Profile/index.tsx index 34cf2046..4e769efa 100644 --- a/src/app/(BottomTabNavigation)/Profile/index.tsx +++ b/src/app/(BottomTabNavigation)/Profile/index.tsx @@ -31,62 +31,60 @@ function ProfileScreen() { - Settings + Settings - - - - - Email address - + + + + Email address + {session?.user?.email} - - {session?.user?.email} + - - - - - Full name - - router.push('/Profile/EditName')} - > + router.push('/Profile/EditName')} + > + + + + Full name - + + + {session?.user?.user_metadata.fullName} + - - {session?.user?.user_metadata.fullName} - - + + - - - - - Street address - - router.push('/Profile/EditAddress')} - > + router.push('/Profile/EditAddress')} + > + + + + Street address - + + + {session?.user?.user_metadata.streetName + + '\n' + + session?.user?.user_metadata.city + + ', ' + + session?.user?.user_metadata.state + + ' ' + + session?.user?.user_metadata.zip} + - - {session?.user?.user_metadata.streetName + - '\n' + - session?.user?.user_metadata.city + - ', ' + - session?.user?.user_metadata.state + - ' ' + - session?.user?.user_metadata.zip} - - + router.push({ pathname: '/Profile/ResetConfirm', @@ -94,32 +92,31 @@ function ProfileScreen() { }) } > - - - - Reset password - + + + Reset password + - - { - router.push('/Profile/DeleteAccount'); - }} - style={styles.bottomPush} - > - - - - Delete account - - - - - + + { + router.push('/Profile/DeleteAccount'); + }} + style={[styles.profileDetailsBox, styles.centerAlign]} + > + + + + Delete account + + + + + { router.push('/Profile/LogOut'); diff --git a/src/app/(BottomTabNavigation)/Profile/styles.ts b/src/app/(BottomTabNavigation)/Profile/styles.ts index 90e81afa..2828ccf8 100644 --- a/src/app/(BottomTabNavigation)/Profile/styles.ts +++ b/src/app/(BottomTabNavigation)/Profile/styles.ts @@ -8,37 +8,32 @@ export default StyleSheet.create({ backgroundColor: colors.white, alignItems: 'center', }, - iconTitle: { - flexDirection: 'row', - alignItems: 'center', - }, - actionElementTop: { - flexDirection: 'row', - justifyContent: 'space-between', + contentContainer: { + width: '84%', alignItems: 'center', - marginTop: 15, - marginLeft: 10, - marginRight: 20, - }, - userText: { - marginLeft: 35, - marginTop: 5, - marginBottom: 15, - color: colors.darkGrey, }, - userTextMargin: { - marginLeft: 34, - marginTop: 5, - color: colors.darkGrey, + + headerContainer: { + marginTop: 63, + width: '100%', }, - line: { + headerLine: { borderBottom: 'solid', borderBottomColor: colors.midGrey, - borderBottomWidth: 1, - marginLeft: 32, + borderBottomWidth: 0.5, + marginTop: 8, + }, + titleText: { + fontSize: 32, + fontWeight: '800', + lineHeight: 33, + color: colors.black, + alignSelf: 'flex-start', + marginTop: 39, + marginBottom: 18, }, + actionsContainer: { - paddingLeft: 10, width: '100%', border: 'solid', borderColor: colors.midGrey, @@ -54,49 +49,47 @@ export default StyleSheet.create({ shadowRadius: 0.05, elevation: 1, }, - bottomPush: { - paddingBottom: 15, + + profileDetailsBox: { + flexDirection: 'row', + columnGap: 15, + paddingHorizontal: 20, + paddingVertical: 15, }, - title: { - fontSize: 32, - fontWeight: '800', - lineHeight: 33, - color: colors.black, - alignSelf: 'flex-start', - marginTop: 39, - marginBottom: 15, + textContainer: { + flex: 1, + flexDirection: 'column', + rowGap: 5, + }, + spreadInlineContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + flexGrow: 1, }, - userInfo: { + line: { + borderBottom: 'solid', + borderBottomColor: colors.midGrey, + borderBottomWidth: 1, + marginLeft: 50, + }, + centerAlign: { + alignItems: 'center', + }, + userText: { + fontSize: 13, + fontWidth: '300', color: colors.darkGrey, - fontSize: 20, }, - textElements: { + profileLabelText: { color: colors.black, - marginLeft: 10, - marginTop: 0, fontSize: 16, fontWeight: '400', }, - redTextElements: { + redText: { color: colors.darkRed, - marginLeft: 10, - marginTop: 0, - fontSize: 16, - fontWeight: '400', - }, - resetIcon: { - marginBottom: 15, - }, - headerLine: { - borderBottom: 'solid', - borderBottomColor: colors.midGrey, - borderBottomWidth: 0.5, - marginTop: 8, - }, - headerContainer: { - marginTop: 63, - width: '100%', }, + signOutButton: { flexDirection: 'row', justifyContent: 'space-between', @@ -112,10 +105,6 @@ export default StyleSheet.create({ fontWeight: '700', fontSize: 15, }, - contentContainer: { - width: '84%', - alignItems: 'center', - }, signOutInstructions: { flexDirection: 'row', alignItems: 'center', From dde750dcd5cd9f40c9f4c40ba409e5d4dd7f9d83 Mon Sep 17 00:00:00 2001 From: Ronnie Beggs <66931067+ronniebeggs@users.noreply.github.com> Date: Sun, 21 Apr 2024 16:00:45 -0700 Subject: [PATCH 2/2] [updates] fix bugs and styling (#86) * [feat] add category style text and fix UpdateItem spacing. * [fix] resolve minor nits. * [feat] add category to detailed update view. * [fix] fix bottom padding on UpdateView screen. * [fix] minor nits. * [fix] make category text upper case. --- .prettierignore | 3 +- assets/grey-notification-bell.svg | 12 +++++++ assets/notification-bell.svg | 4 --- assets/red-notification-bell.svg | 6 ++++ src/Components/UpdateItem/UpdateItem.tsx | 8 ++--- src/Components/UpdateItem/styles.ts | 28 ++++++--------- .../Updates/UpdateView/[updateUid].tsx | 36 +++++++++++-------- .../AllCases/Updates/UpdateView/styles.ts | 14 ++++++-- .../AllCases/Updates/styles.ts | 1 + .../(BottomTabNavigation)/Profile/styles.ts | 2 +- 10 files changed, 70 insertions(+), 44 deletions(-) create mode 100644 assets/grey-notification-bell.svg delete mode 100644 assets/notification-bell.svg create mode 100644 assets/red-notification-bell.svg diff --git a/.prettierignore b/.prettierignore index fd5e1214..908929d9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ # Ignore the PR template -/.github \ No newline at end of file +/.github +/ios \ No newline at end of file diff --git a/assets/grey-notification-bell.svg b/assets/grey-notification-bell.svg new file mode 100644 index 00000000..d20ffe37 --- /dev/null +++ b/assets/grey-notification-bell.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/notification-bell.svg b/assets/notification-bell.svg deleted file mode 100644 index 4024df9b..00000000 --- a/assets/notification-bell.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/red-notification-bell.svg b/assets/red-notification-bell.svg new file mode 100644 index 00000000..18ff43e2 --- /dev/null +++ b/assets/red-notification-bell.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/Components/UpdateItem/UpdateItem.tsx b/src/Components/UpdateItem/UpdateItem.tsx index a2ab22e6..7695d4d8 100644 --- a/src/Components/UpdateItem/UpdateItem.tsx +++ b/src/Components/UpdateItem/UpdateItem.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; import styles from './styles'; -import NotificationBell from '../../../assets/notification-bell.svg'; +import NotificationBell from '../../../assets/grey-notification-bell.svg'; import { formatDate } from '../../app/(BottomTabNavigation)/AllCases/utils'; import { Update } from '../../types/types'; @@ -19,14 +19,14 @@ export default function UpdateItem(updateData: Update) { > + + {updateData.category.toUpperCase()} + {updateData.title} - - VIEW UPDATE - {formatDate(updateData.date)} • {updateData.lawFirm} diff --git a/src/Components/UpdateItem/styles.ts b/src/Components/UpdateItem/styles.ts index bb0bf16e..f26d7453 100644 --- a/src/Components/UpdateItem/styles.ts +++ b/src/Components/UpdateItem/styles.ts @@ -16,32 +16,20 @@ export default StyleSheet.create({ height: '100%', }, titleContainer: { - height: 41, - }, - instructionContainer: { - width: 130, - justifyContent: 'center', - alignItems: 'center', - paddingHorizontal: 10, - paddingVertical: 3, - - borderRadius: 20, - borderWidth: 1, - borderColor: colors.midGrey, - - marginTop: 20, - marginBottom: 11, + height: 40, + marginTop: 5, + marginBottom: 20, }, titleText: { fontSize: 16, fontStyle: 'normal', - fontWeight: '600', + fontWeight: '500', lineHeight: 18, color: colors.midnightBlack, overflow: 'hidden', }, bottomText: { - fontSize: 10, + fontSize: 12, fontStyle: 'normal', fontWeight: '300', lineHeight: 21, @@ -53,4 +41,10 @@ export default StyleSheet.create({ fontWeight: '300', color: colors.darkGrey, }, + categoryText: { + fontSize: 12, + fontStyle: 'normal', + fontWeight: '700', + color: colors.midGrey, + }, }); diff --git a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/[updateUid].tsx b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/[updateUid].tsx index 8d6e16bc..da39f1dc 100644 --- a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/[updateUid].tsx +++ b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/[updateUid].tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { View, Text, ScrollView } from 'react-native'; import styles from './styles'; -import NotificationBell from '../../../../../../assets/notification-bell.svg'; +import NotificationBell from '../../../../../../assets/red-notification-bell.svg'; import { getUpdateById } from '../../../../../supabase/queries/updates'; import { Update, UpdateUid } from '../../../../../types/types'; import { formatDate } from '../../utils'; @@ -33,23 +33,29 @@ export default function UpdateView() { <> - - - {update.title} + + + + + + {update.category.toUpperCase()} + + {update.title} + + + + + {update.lawFirm} + + + {' '} + • {formatDate(update.date)} + + + {update.summary} - - - {update.lawFirm} - - - {' '} - • {formatDate(update.date)} - - - {update.summary} )} diff --git a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts index e629d38a..eaaaad1d 100644 --- a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts +++ b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts @@ -11,11 +11,11 @@ export default StyleSheet.create({ }, outerScroll: { width: '93%', - paddingVertical: 20, }, innerScroll: { paddingVertical: 32, paddingHorizontal: 23, + marginVertical: 20, rowGap: 20, backgroundColor: colors.white, @@ -34,6 +34,10 @@ export default StyleSheet.create({ flexDirection: 'row', columnGap: 13, }, + headerText: { + flex: 1, + flexDirection: 'column', + }, inLineSubInfo: { flexDirection: 'row', height: 30, @@ -47,7 +51,6 @@ export default StyleSheet.create({ fontWeight: '600', fontStyle: 'normal', color: colors.black, - flex: 1, }, bodyText: { fontSize: 16, @@ -69,4 +72,11 @@ export default StyleSheet.create({ color: colors.darkGrey, fontWeight: '300', }, + categoryText: { + fontSize: 12, + lineHeight: 18, + fontStyle: 'normal', + fontWeight: '700', + color: colors.midGrey, + }, }); diff --git a/src/app/(BottomTabNavigation)/AllCases/Updates/styles.ts b/src/app/(BottomTabNavigation)/AllCases/Updates/styles.ts index c2df9b79..ad9e7897 100644 --- a/src/app/(BottomTabNavigation)/AllCases/Updates/styles.ts +++ b/src/app/(BottomTabNavigation)/AllCases/Updates/styles.ts @@ -10,6 +10,7 @@ export default StyleSheet.create({ backgroundColor: colors.white, }, contentContainer: { + height: '100%', width: '84%', }, innerScroll: { diff --git a/src/app/(BottomTabNavigation)/Profile/styles.ts b/src/app/(BottomTabNavigation)/Profile/styles.ts index 2828ccf8..0112069f 100644 --- a/src/app/(BottomTabNavigation)/Profile/styles.ts +++ b/src/app/(BottomTabNavigation)/Profile/styles.ts @@ -78,7 +78,7 @@ export default StyleSheet.create({ }, userText: { fontSize: 13, - fontWidth: '300', + fontWeight: '300', color: colors.darkGrey, }, profileLabelText: {