From ad98ad617d78c7b68ffc37327f21a8769fcaab57 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 27 Jul 2021 14:49:58 -0400
Subject: Fix styling, Cleanup imports

---
 src/routes/main/MainStackScreen.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 064e9725..ccfc4cbd 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,25 +2,28 @@ import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import {StyleSheet, Text} from 'react-native';
-import {normalize} from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   AccountType,
   AnimatedTutorial,
   BadgeSelection,
+  CameraScreen,
   CaptionScreen,
   CategorySelection,
   ChatListScreen,
   ChatScreen,
+  ChoosingCategoryScreen,
   CommentReactionScreen,
   CreateCustomCategory,
   DiscoverUsers,
+  EditMedia,
   EditProfile,
   FriendsListScreen,
   IndividualMoment,
   InviteFriendsScreen,
   MomentCommentsScreen,
   MomentUploadPromptScreen,
+  MutualBadgeHolders,
   NewChatModal,
   NotificationsScreen,
   PrivacyScreen,
@@ -31,16 +34,17 @@ import {
   SuggestedPeopleScreen,
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
-  TagSelectionScreen,
   TagFriendsScreen,
-  CameraScreen,
-  EditMedia,
+  TagSelectionScreen,
 } from '../../screens';
-import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
-import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {
+  AvatarHeaderHeight,
+  ChatHeaderHeight,
+  normalize,
+  SCREEN_WIDTH,
+} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
-import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen';
 
 /**
  * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited.
@@ -413,6 +417,7 @@ const styles = StyleSheet.create({
     shadowOffset: {width: 0, height: 0},
   },
   headerTitle: {
+    textAlign: 'center',
     letterSpacing: normalize(1.3),
     fontWeight: '700',
   },
-- 
cgit v1.2.3-70-g09d2


From 4cd0910e9b20b10b0a5ef46945b139e711eec252 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 29 Jul 2021 14:02:59 -0400
Subject: Fix header styling

---
 src/components/moments/MomentPost.tsx | 36 +++++++++++++++++++++++++++++++++--
 src/routes/main/MainStackScreen.tsx   |  3 +++
 2 files changed, 37 insertions(+), 2 deletions(-)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 123ee5f4..ecd2e66f 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -34,6 +34,7 @@ import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
 import {
   getTimePosted,
+  isIPhoneX,
   navigateToProfile,
   normalize,
   SCREEN_HEIGHT,
@@ -133,7 +134,22 @@ const MomentPost: React.FC<MomentPostProps> = ({
   useEffect(
     () =>
       navigation.setOptions({
-        ...headerBarOptions('white', moment.moment_category),
+        ...headerBarOptions('white', ''),
+        headerTitle: () => (
+          <Text
+            numberOfLines={3}
+            style={[
+              styles.multilineHeaderTitle,
+              {
+                fontSize:
+                  moment.moment_category.length > 18
+                    ? normalize(14)
+                    : normalize(16),
+              },
+            ]}>
+            {moment.moment_category}
+          </Text>
+        ),
       }),
     [moment.moment_id],
   );
@@ -499,7 +515,23 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: -2.5,
   },
-  profilePreviewContainer: {paddingHorizontal: '3%'},
+  progressBaContainer: {
+    position: 'absolute',
+    top: isIPhoneX() ? 75 : 70,
+  },
+  profilePreviewContainer: {
+    paddingHorizontal: '3%',
+  },
+  multilineHeaderTitle: {
+    width: SCREEN_WIDTH * 0.7,
+    height: normalize(70),
+    marginTop: normalize(90) / 2,
+    textAlign: 'center',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'white',
+  },
 });
 
 export default MomentPost;
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index ccfc4cbd..35e1f8e0 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -382,6 +382,7 @@ export const headerBarOptions: (
   ),
   headerTitle: () => (
     <Text
+      numberOfLines={1}
       style={[
         styles.headerTitle,
         {color: color},
@@ -417,7 +418,9 @@ const styles = StyleSheet.create({
     shadowOffset: {width: 0, height: 0},
   },
   headerTitle: {
+    width: SCREEN_WIDTH * 0.7,
     textAlign: 'center',
+    lineHeight: normalize(21.48),
     letterSpacing: normalize(1.3),
     fontWeight: '700',
   },
-- 
cgit v1.2.3-70-g09d2


From 7c33718ecf68982b362f0756fe3df793ce97f6fd Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 29 Jul 2021 14:27:45 -0400
Subject: Cleaned up logic, Add logic to check if long title

---
 src/components/moments/MomentPost.tsx | 42 +++++++++--------------------------
 src/routes/main/MainStackScreen.tsx   | 27 ++++++++++++++++++++++
 2 files changed, 38 insertions(+), 31 deletions(-)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index eae95fe2..d95d6f3a 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -25,7 +25,7 @@ import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TaggedUsersDrawer} from '.';
 import PauseIcon from '../../assets/icons/pause-icon.svg';
-import {headerBarOptions} from '../../routes';
+import {headerBarOptions, multilineHeaderTitle} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
 import {loadUserMoments} from '../../store/actions';
@@ -129,28 +129,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   };
 
-  useEffect(
-    () =>
+  useEffect(() => {
+    if (moment.moment_category.length > 20) {
       navigation.setOptions({
         ...headerBarOptions('white', ''),
-        headerTitle: () => (
-          <Text
-            numberOfLines={3}
-            style={[
-              styles.multilineHeaderTitle,
-              {
-                fontSize:
-                  moment.moment_category.length > 18
-                    ? normalize(14)
-                    : normalize(16),
-              },
-            ]}>
-            {moment.moment_category}
-          </Text>
-        ),
-      }),
-    [moment.moment_id],
-  );
+        ...multilineHeaderTitle(moment.moment_category),
+      });
+    } else {
+      navigation.setOptions({
+        ...headerBarOptions('white', moment.moment_category),
+      });
+    }
+  }, [moment.moment_id]);
 
   /*
    *  Determines if an image is 9:16 to set aspect ratio of current image and
@@ -506,16 +496,6 @@ const styles = StyleSheet.create({
   profilePreviewContainer: {
     paddingHorizontal: '3%',
   },
-  multilineHeaderTitle: {
-    width: SCREEN_WIDTH * 0.7,
-    height: normalize(70),
-    marginTop: normalize(90) / 2,
-    textAlign: 'center',
-    lineHeight: normalize(21.48),
-    letterSpacing: normalize(1.3),
-    fontWeight: '700',
-    color: 'white',
-  },
 });
 
 export default MomentPost;
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 35e1f8e0..64060554 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -393,6 +393,23 @@ export const headerBarOptions: (
   ),
 });
 
+export const multilineHeaderTitle: (title: string) => StackNavigationOptions = (
+  title,
+) => ({
+  headerTitle: () => (
+    <Text
+      numberOfLines={3}
+      style={[
+        styles.multilineHeaderTitle,
+        {
+          fontSize: title.length > 18 ? normalize(14) : normalize(16),
+        },
+      ]}>
+      {title}
+    </Text>
+  ),
+});
+
 export const modalStyle: StackNavigationOptions = {
   cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
   gestureDirection: 'vertical',
@@ -424,6 +441,16 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(1.3),
     fontWeight: '700',
   },
+  multilineHeaderTitle: {
+    width: SCREEN_WIDTH * 0.7,
+    height: normalize(70),
+    marginTop: normalize(90) / 2,
+    textAlign: 'center',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'white',
+  },
 });
 
 export default MainStackScreen;
-- 
cgit v1.2.3-70-g09d2

