diff options
| -rw-r--r-- | src/components/comments/CommentTile.tsx | 76 |
1 files changed, 43 insertions, 33 deletions
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx index cf79b68c..f793cdbe 100644 --- a/src/components/comments/CommentTile.tsx +++ b/src/components/comments/CommentTile.tsx @@ -160,33 +160,42 @@ const CommentTile: React.FC<CommentTileProps> = ({ onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} - <View style={styles.clockIconAndTime}> - <ClockIcon style={styles.clockIcon} /> - <Text style={styles.date_time}>{' ' + timePosted}</Text> - <View style={styles.flexer} /> + <View style={styles.commentInfoContainer}> + <View style={styles.row}> + <ClockIcon style={styles.clockIcon} /> + <Text style={styles.date_time}>{' ' + timePosted}</Text> + </View> + <View style={styles.row}> + <Text style={[styles.date_time, styles.likeCount]}>5</Text> + <Text style={styles.date_time}>Likes</Text> + </View> + {/* Show replies text only if there are some replies present */} + {!isThread && (commentObject as CommentType).replies_count > 0 ? ( + <TouchableOpacity + style={styles.repliesTextAndIconContainer} + onPress={toggleReplies}> + <Text style={styles.repliesText}> + {getRepliesText(commentObject as CommentType)} + </Text> + <Arrow + width={12} + height={11} + color={TAGG_LIGHT_BLUE} + style={ + !showReplies + ? styles.repliesDownArrow + : styles.repliesUpArrow + } + /> + </TouchableOpacity> + ) : ( + // empty view for justify content's space-between + <View /> + )} </View> </TouchableOpacity> - {/*** Show replies text only if there are some replies present */} - {!isThread && (commentObject as CommentType).replies_count > 0 && ( - <TouchableOpacity - style={styles.repliesTextAndIconContainer} - onPress={toggleReplies}> - <Text style={styles.repliesText}> - {getRepliesText(commentObject as CommentType)} - </Text> - <Arrow - width={12} - height={11} - color={TAGG_LIGHT_BLUE} - style={ - !showReplies ? styles.repliesDownArrow : styles.repliesUpArrow - } - /> - </TouchableOpacity> - )} </View> - - {/*** Show replies if toggle state is true */} + {/* Show replies if toggle state is true */} {showReplies && ( <View> <CommentsContainer @@ -210,8 +219,8 @@ const styles = StyleSheet.create({ flexDirection: 'column', flex: 1, paddingTop: '3%', - paddingBottom: '5%', marginLeft: '7%', + paddingBottom: 5, }, swipeActions: { flexDirection: 'row', @@ -243,18 +252,22 @@ const styles = StyleSheet.create({ height: 12, alignSelf: 'center', }, - clockIconAndTime: { + commentInfoContainer: { flexDirection: 'row', marginTop: '3%', + justifyContent: 'space-between', + alignItems: 'center', }, - flexer: { - flex: 1, + likeCount: { + color: 'black', + marginRight: 5, + }, + row: { + flexDirection: 'row', }, repliesTextAndIconContainer: { flexDirection: 'row', alignItems: 'center', - marginTop: '5%', - marginLeft: 56, }, repliesText: { color: TAGG_LIGHT_BLUE, @@ -262,9 +275,6 @@ const styles = StyleSheet.create({ fontSize: normalize(12), marginRight: '1%', }, - repliesBody: { - width: SCREEN_WIDTH, - }, repliesDownArrow: { transform: [{rotate: '270deg'}], marginTop: '1%', |