diff options
| -rw-r--r-- | src/components/moments/Moment.tsx | 105 |
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; |