styled comment

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%',