Merge branch 'master' into tma698-api-profile

# Conflicts:
#	src/components/search/SearchBar.tsx

3 files changed, 21 insertions, 16 deletions

diff --git a/src/components/moments/CaptionScreenHeader.tsx b/src/components/moments/CaptionScreenHeader.tsx
index 46dfddfe..0638c128 100644
--- a/src/components/moments/CaptionScreenHeader.tsx
+++ b/src/components/moments/CaptionScreenHeader.tsx
@@ -21,18 +21,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    height: '5%',
   },
   headerContainer: {
-    position: 'absolute',
-    left: '50%',
+    width: '90%',
   },
   header: {
-    position: 'relative',
-    right: '50%',
     fontSize: 20,
     fontWeight: 'bold',
     color: 'white',
+    textAlign: 'center',
   },
 });
 export default CaptionScreenHeader;
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
index 6cdfe0e8..88e0c308 100644
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -18,7 +18,9 @@ const IndividualMomentTitleBar: React.FC<IndividualMomentTitleBarProps> = ({
       <TouchableOpacity style={styles.closeButton} onPress={close}>
         <CloseIcon height={'100%'} width={'100%'} color={'white'} />
       </TouchableOpacity>
-      <Text style={styles.header}>{title}</Text>
+      <View style={styles.headerContainer}>
+        <Text style={styles.header}>{title}</Text>
+      </View>
     </View>
   );
 };
@@ -30,6 +32,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: '5%',
   },
+  headerContainer: {
+    flexShrink: 1,
+    marginLeft: '11%',
+  },
   header: {
     color: 'white',
     fontSize: normalize(18),
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 10cf6070..2ac6aebb 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -12,7 +12,7 @@ import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
+import {ERROR_UPLOAD} from '../../constants/strings';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 import MomentTile from './MomentTile';
 
@@ -69,7 +69,7 @@ const Moment: React.FC<MomentProps> = ({
       })
       .catch((err) => {
         if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-          Alert.alert(ERROR_UPLOAD_MOMENT_SHORT);
+          Alert.alert(ERROR_UPLOAD);
         }
       });
   };
@@ -81,14 +81,14 @@ const Moment: React.FC<MomentProps> = ({
           {title}
         </Text>
         {!userXId ? (
-          <>
+          <View style={{flexDirection: 'row'}}>
             {showUpButton && move && (
               <UpIcon
                 width={19}
                 height={19}
                 onPress={() => move('up', title)}
                 color={TAGG_LIGHT_BLUE}
-                style={{marginLeft: 5}}
+                style={{marginHorizontal: 4}}
               />
             )}
             {showDownButton && move && (
@@ -97,31 +97,32 @@ const Moment: React.FC<MomentProps> = ({
                 height={19}
                 onPress={() => move('down', title)}
                 color={TAGG_LIGHT_BLUE}
-                style={{marginLeft: 5}}
+                style={{marginHorizontal: 4}}
               />
             )}
-          </>
+          </View>
         ) : (
           <Fragment />
         )}
-        <View style={styles.flexer} />
+        {/* <View style={styles.flexer} /> */}
         {!userXId ? (
-          <>
+          <View style={{marginRight: 8, flexDirection: 'row'}}>
             <PlusIcon
               width={21}
               height={21}
               onPress={() => navigateToImagePicker()}
               color={TAGG_LIGHT_BLUE}
-              style={{marginRight: 10}}
+              style={{marginHorizontal: 4}}
             />
             {shouldAllowDeletion && (
               <DeleteIcon
                 onPress={() => handleMomentCategoryDelete(title)}
                 width={19}
                 height={19}
+                style={{marginHorizontal: 4}}
               />
             )}
-          </>
+          </View>
         ) : (
           <React.Fragment />
         )}
@@ -171,6 +172,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   titleText: {
+    width: '70%',
     fontSize: normalize(16),
     fontWeight: 'bold',
     color: TAGG_LIGHT_BLUE,