[fix] fix style order on updates screen to override default shadow bo…

…rder radius.
calblueprint · Apr 24, 2024 · d946032 · d946032
2 parents fb16185 + dde750d
commit d946032
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 172 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,3 @@
 # Ignore the PR template
-/.github
+/.github
+/ios
diff --git a/assets/grey-notification-bell.svg b/assets/grey-notification-bell.svg
diff --git a/assets/notification-bell.svg b/assets/notification-bell.svg
diff --git a/assets/red-notification-bell.svg b/assets/red-notification-bell.svg
diff --git 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/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) {
     >
       <NotificationBell />
       <View style={styles.contentContainer}>
+        <Text style={styles.categoryText}>
+          {updateData.category.toUpperCase()}
+        </Text>
         <View style={styles.titleContainer}>
           <Text style={styles.titleText} numberOfLines={2}>
             {updateData.title}
           </Text>
         </View>
-        <View style={styles.instructionContainer}>
-          <Text style={styles.updateText}>VIEW UPDATE</Text>
-        </View>
         <Text style={styles.bottomText}>
           {formatDate(updateData.date)} • {updateData.lawFirm}
         </Text>

diff --git 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
@@ -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 globalStyles from '../../../../../styles/global';
 import { getUpdateById } from '../../../../../supabase/queries/updates';
 import { Update, UpdateUid } from '../../../../../types/types';
@@ -34,26 +34,29 @@ export default function UpdateView() {
         <>
           <ScrollView
             style={styles.outerScroll}
-            contentContainerStyle={[
-              globalStyles.shadowBorder,
-              styles.innerScroll,
-            ]}
             showsVerticalScrollIndicator={false}
           >
-            <View style={styles.titleContainer}>
-              <NotificationBell />
-              <Text style={styles.titleText}>{update.title}</Text>
+            <View style={[globalStyles.shadowBorder, styles.innerScroll]}>
+              <View style={styles.titleContainer}>
+                <NotificationBell />
+                <View style={styles.headerText}>
+                  <Text style={styles.categoryText}>
+                    {update.category.toUpperCase()}
+                  </Text>
+                  <Text style={styles.titleText}>{update.title}</Text>
+                </View>
+              </View>
+              <View style={styles.inLineSubInfo}>
+                <Text style={[styles.subText, styles.lawFirmText]}>
+                  {update.lawFirm}
+                </Text>
+                <Text style={[styles.subText, styles.dateText]}>
+                  {' '}
+                  • {formatDate(update.date)}
+                </Text>
+              </View>
+              <Text style={styles.bodyText}>{update.summary}</Text>
             </View>
-            <View style={styles.inLineSubInfo}>
-              <Text style={[styles.subText, styles.lawFirmText]}>
-                {update.lawFirm}
-              </Text>
-              <Text style={[styles.subText, styles.dateText]}>
-                {' '}
-                • {formatDate(update.date)}
-              </Text>
-            </View>
-            <Text style={styles.bodyText}>{update.summary}</Text>
           </ScrollView>
         </>
       )}

diff --git a/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts b/src/app/(BottomTabNavigation)/AllCases/Updates/UpdateView/styles.ts
@@ -11,18 +11,22 @@ export default StyleSheet.create({
   },
   outerScroll: {
     width: '93%',
-    paddingVertical: 20,
   },
   innerScroll: {
     paddingVertical: 32,
     paddingHorizontal: 23,
+    marginVertical: 20,
     rowGap: 20,
     borderRadius: 15,
   },
   titleContainer: {
     flexDirection: 'row',
     columnGap: 13,
   },
+  headerText: {
+    flex: 1,
+    flexDirection: 'column',
+  },
   inLineSubInfo: {
     flexDirection: 'row',
     height: 30,
@@ -36,7 +40,6 @@ export default StyleSheet.create({
     fontWeight: '600',
     fontStyle: 'normal',
     color: colors.black,
-    flex: 1,
   },
   bodyText: {
     fontSize: 16,
@@ -58,4 +61,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
@@ -10,6 +10,7 @@ export default StyleSheet.create({
     backgroundColor: colors.white,
   },
   contentContainer: {
+    height: '100%',
     width: '84%',
   },
   innerScroll: {

diff --git a/src/app/(BottomTabNavigation)/Profile/index.tsx b/src/app/(BottomTabNavigation)/Profile/index.tsx
@@ -32,94 +32,90 @@ function ProfileScreen() {
           <CasesHeader />
           <View style={styles.headerLine} />
         </View>
-        <Text style={styles.title}>Settings</Text>
+        <Text style={styles.titleText}>Settings</Text>
         <View style={[styles.actionsContainer, globalStyles.shadowBorder]}>
-          <View>
-            <View style={styles.actionElementTop}>
-              <View style={styles.iconTitle}>
-                <Envelope />
-                <Text style={styles.textElements}>Email address</Text>
-              </View>
+          <View style={styles.profileDetailsBox}>
+            <Envelope />
+            <View style={styles.textContainer}>
+              <Text style={styles.profileLabelText}>Email address</Text>
+              <Text style={styles.userText}>{session?.user?.email}</Text>
             </View>
-
-            <Text style={styles.userText}>{session?.user?.email}</Text>
           </View>
+
           <View style={styles.line} />
-          <View>
-            <View style={styles.actionElementTop}>
-              <View style={styles.iconTitle}>
-                <Person />
-                <Text style={styles.textElements}>Full name</Text>
-              </View>
-              <TouchableOpacity
-                onPress={() => router.push('/Profile/EditName')}
-              >
+          <TouchableOpacity
+            style={styles.profileDetailsBox}
+            onPress={() => router.push('/Profile/EditName')}
+          >
+            <Person />
+            <View style={styles.textContainer}>
+              <View style={styles.spreadInlineContainer}>
+                <Text style={styles.profileLabelText}>Full name</Text>
                 <Pencil />
-              </TouchableOpacity>
+              </View>
+              <Text style={styles.userText}>
+                {session?.user?.user_metadata.fullName}
+              </Text>
             </View>
-            <Text style={styles.userText}>
-              {session?.user?.user_metadata.fullName}
-            </Text>
-          </View>
+          </TouchableOpacity>
+
           <View style={styles.line} />
-          <View>
-            <View style={styles.actionElementTop}>
-              <View style={styles.iconTitle}>
-                <Location />
-                <Text style={styles.textElements}>Street address</Text>
-              </View>
-              <TouchableOpacity
-                onPress={() => router.push('/Profile/EditAddress')}
-              >
+          <TouchableOpacity
+            style={styles.profileDetailsBox}
+            onPress={() => router.push('/Profile/EditAddress')}
+          >
+            <Location />
+            <View style={styles.textContainer}>
+              <View style={styles.spreadInlineContainer}>
+                <Text style={styles.profileLabelText}>Street address</Text>
                 <Pencil />
-              </TouchableOpacity>
+              </View>
+              <Text style={styles.userText}>
+                {session?.user?.user_metadata.streetName +
+                  '\n' +
+                  session?.user?.user_metadata.city +
+                  ', ' +
+                  session?.user?.user_metadata.state +
+                  ' ' +
+                  session?.user?.user_metadata.zip}
+              </Text>
             </View>
-            <Text style={styles.userText}>
-              {session?.user?.user_metadata.streetName +
-                '\n' +
-                session?.user?.user_metadata.city +
-                ', ' +
-                session?.user?.user_metadata.state +
-                ' ' +
-                session?.user?.user_metadata.zip}
-            </Text>
-          </View>
+          </TouchableOpacity>
         </View>
 
         <View style={[styles.actionsContainer, globalStyles.shadowBorder]}>
           <TouchableOpacity
+            style={[styles.profileDetailsBox, styles.centerAlign]}
             onPress={() =>
               router.push({
                 pathname: '/Profile/ResetConfirm',
                 params: { email: session?.user?.email },
               })
             }
           >
-            <View style={[styles.actionElementTop, styles.resetIcon]}>
-              <View style={styles.iconTitle}>
-                <Reset />
-                <Text style={styles.textElements}>Reset password</Text>
-              </View>
+            <Reset />
+            <View style={styles.spreadInlineContainer}>
+              <Text style={styles.profileLabelText}>Reset password</Text>
               <GreyRightCarrot />
             </View>
           </TouchableOpacity>
+
           <View style={styles.line} />
-          <View>
-            <TouchableOpacity
-              onPress={() => {
-                router.push('/Profile/DeleteAccount');
-              }}
-              style={styles.bottomPush}
-            >
-              <View style={styles.actionElementTop}>
-                <View style={styles.iconTitle}>
-                  <RedTrash />
-                  <Text style={styles.redTextElements}>Delete account</Text>
-                </View>
-                <GreyRightCarrot />
-              </View>
-            </TouchableOpacity>
-          </View>
+
+          <TouchableOpacity
+            onPress={() => {
+              router.push('/Profile/DeleteAccount');
+            }}
+            style={[styles.profileDetailsBox, styles.centerAlign]}
+          >
+            <RedTrash />
+            <View style={styles.spreadInlineContainer}>
+              <Text style={[styles.profileLabelText, styles.redText]}>
+                Delete account
+              </Text>
+              <GreyRightCarrot />
+            </View>
+          </TouchableOpacity>
         </View>
 
         <TouchableOpacity