TMA 643 Added Hide Image

4 files changed, 27 insertions, 20 deletions

diff --git a/src/assets/images/hide-caret.png b/src/assets/images/hide-caret.png
new file mode 100644
index 00000000..bb05b53a
--- /dev/null
+++ b/src/assets/images/hide-caret.png
diff --git a/src/assets/images/hide-caret@2x.png b/src/assets/images/hide-caret@2x.png
new file mode 100644
index 00000000..3f4689d3
--- /dev/null
+++ b/src/assets/images/hide-caret@2x.png
diff --git a/src/assets/images/hide-caret@3x.png b/src/assets/images/hide-caret@3x.png
new file mode 100644
index 00000000..a44c36fe
--- /dev/null
+++ b/src/assets/images/hide-caret@3x.png
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 24be7123..675d415d 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -192,7 +192,6 @@ const NotificationsScreen: React.FC = () => {
             styles.sectionFont,
             styles.sectionHeader,
             styles.sectionLocation,
-            styles.sectionHeader,
           ]}>
           {title}
         </Text>
@@ -213,34 +212,39 @@ const NotificationsScreen: React.FC = () => {
               setrequestLimit(DEFAULT_NOTIFICATIONS_SIZE);
               setMoreFooterEnabled(false);
             }}>
+            <View
+              style={[styles.sectionLocation, styles.hiddenSectionContainer]}>
+              <Image
+                style={styles.hideImageStyles}
+                source={require('../../assets/images/hide-caret.png')}
+              />
+              <Text style={[styles.sectionFont, styles.sectionFooter]}>
+                {'Hide'}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        );
+      }
+
+      if (allFriendRequests.length > DEFAULT_NOTIFICATIONS_SIZE) {
+        return (
+          <TouchableOpacity
+            style={styles.sectionHeaderContainer}
+            onPress={() => {
+              setrequestLimit(allFriendRequests.length);
+              setMoreFooterEnabled(true);
+            }}>
             <Text
               style={[
                 styles.sectionFont,
                 styles.sectionFooter,
                 styles.sectionLocation,
               ]}>
-              {'Hide'}
+              {`+ ${allFriendRequests.length - requestLimit} More`}
             </Text>
           </TouchableOpacity>
         );
       }
-      return (
-        <TouchableOpacity
-          style={styles.sectionHeaderContainer}
-          onPress={() => {
-            setrequestLimit(allFriendRequests.length);
-            setMoreFooterEnabled(true);
-          }}>
-          <Text
-            style={[
-              styles.sectionFont,
-              styles.sectionFooter,
-              styles.sectionLocation,
-            ]}>
-            {`+ ${allFriendRequests.length - requestLimit} More`}
-          </Text>
-        </TouchableOpacity>
-      );
     }
 
     return null;
@@ -338,7 +342,10 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     lineHeight: normalize(14),
   },
-
+  hiddenSectionContainer: {
+    flexDirection: 'row',
+  },
+  hideImageStyles: {alignSelf: 'center', marginRight: 8},
   sectionHeader: {
     color: '#828282',
   },