[updates] fix bugs and styling

.prettierignore

@@ -1,2 +1,3 @@
 # Ignore the PR template
-/.github
+/.github
+/ios

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>

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,
+  },
 });

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() {
         <>
           <ScrollView
             style={styles.outerScroll}
-            contentContainerStyle={styles.innerScroll}
             showsVerticalScrollIndicator={false}
           >
-            <View style={styles.titleContainer}>
-              <NotificationBell />
-              <Text style={styles.titleText}>{update.title}</Text>
+            <View style={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>
         </>
       )}

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,
+  },
 });

src/app/(BottomTabNavigation)/AllCases/Updates/styles.ts

@@ -10,6 +10,7 @@ export default StyleSheet.create({
     backgroundColor: colors.white,
   },
   contentContainer: {
+    height: '100%',
     width: '84%',
   },
   innerScroll: {

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: {