Merge pull request #332 from IvanIFChen/hotfix-moment-buttons

[HOTFIX] Moment buttons fix

1 files changed, 57 insertions, 48 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 2ac6aebb..0ceb8542 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,11 +1,10 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {Fragment} from 'react';
+import React from 'react';
 import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
-import {MomentType, ScreenType} from '../../types';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
@@ -13,6 +12,7 @@ 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} from '../../constants/strings';
+import {MomentType, ScreenType} from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 import MomentTile from './MomentTile';
 
@@ -77,55 +77,54 @@ const Moment: React.FC<MomentProps> = ({
   return (
     <View style={[styles.container, externalStyles?.container]}>
       <View style={[styles.header, externalStyles?.header]}>
-        <Text style={[styles.titleText, externalStyles?.titleText]}>
+        <Text
+          style={[styles.titleText, externalStyles?.titleText]}
+          numberOfLines={2}>
           {title}
         </Text>
-        {!userXId ? (
-          <View style={{flexDirection: 'row'}}>
-            {showUpButton && move && (
-              <UpIcon
-                width={19}
-                height={19}
-                onPress={() => move('up', title)}
-                color={TAGG_LIGHT_BLUE}
-                style={{marginHorizontal: 4}}
-              />
-            )}
-            {showDownButton && move && (
-              <DownIcon
-                width={19}
-                height={19}
-                onPress={() => move('down', title)}
+        <View style={styles.buttonsContainer}>
+          {!userXId && (
+            <View style={styles.row}>
+              {showUpButton && move && (
+                <UpIcon
+                  width={19}
+                  height={19}
+                  onPress={() => move('up', title)}
+                  color={TAGG_LIGHT_BLUE}
+                  style={styles.horizontalMargin}
+                />
+              )}
+              {showDownButton && move && (
+                <DownIcon
+                  width={19}
+                  height={19}
+                  onPress={() => move('down', title)}
+                  color={TAGG_LIGHT_BLUE}
+                  style={styles.horizontalMargin}
+                />
+              )}
+            </View>
+          )}
+          {!userXId && (
+            <View style={styles.row}>
+              <PlusIcon
+                width={23}
+                height={23}
+                onPress={() => navigateToImagePicker()}
                 color={TAGG_LIGHT_BLUE}
-                style={{marginHorizontal: 4}}
-              />
-            )}
-          </View>
-        ) : (
-          <Fragment />
-        )}
-        {/* <View style={styles.flexer} /> */}
-        {!userXId ? (
-          <View style={{marginRight: 8, flexDirection: 'row'}}>
-            <PlusIcon
-              width={21}
-              height={21}
-              onPress={() => navigateToImagePicker()}
-              color={TAGG_LIGHT_BLUE}
-              style={{marginHorizontal: 4}}
-            />
-            {shouldAllowDeletion && (
-              <DeleteIcon
-                onPress={() => handleMomentCategoryDelete(title)}
-                width={19}
-                height={19}
-                style={{marginHorizontal: 4}}
+                style={styles.horizontalMargin}
               />
-            )}
-          </View>
-        ) : (
-          <React.Fragment />
-        )}
+              {shouldAllowDeletion && (
+                <DeleteIcon
+                  onPress={() => handleMomentCategoryDelete(title)}
+                  width={19}
+                  height={19}
+                  style={[styles.horizontalMargin, styles.deleButtonAdjustment]}
+                />
+              )}
+            </View>
+          )}
+        </View>
       </View>
       <ScrollView
         horizontal
@@ -172,10 +171,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   titleText: {
-    width: '70%',
     fontSize: normalize(16),
     fontWeight: 'bold',
     color: TAGG_LIGHT_BLUE,
+    maxWidth: '70%',
   },
   flexer: {
     flex: 1,
@@ -199,6 +198,16 @@ const styles = StyleSheet.create({
     width: '80%',
     textAlign: 'center',
   },
+  buttonsContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'space-between',
+    minWidth: 50,
+    alignItems: 'center',
+  },
+  row: {flexDirection: 'row'},
+  horizontalMargin: {marginHorizontal: 4},
+  deleButtonAdjustment: {top: 2},
 });
 
 export default Moment;