updated for design

src/components/basicUIElements/view/textWithIcon/textWithIconView.js

@@ -4,12 +4,20 @@ import { Icon } from '../../../icon';
 import styles from './textWithIconStyles';
 
 const TextWithIcon = ({
-  iconName, text, isClickable, onPress, iconStyle, iconType, iconSize,
+  iconName,
+  text,
+  isClickable,
+  onPress,
+  iconStyle,
+  iconType,
+  iconSize,
+  wrapperStyle,
+  textStyle,
 }) => (
   <View style={styles.container}>
     {isClickable || onPress ? (
       <TouchableHighlight
-        style={styles.wrapper}
+        style={[styles.wrapper, wrapperStyle]}
         underlayColor="transparent"
         onPress={() => onPress && onPress()}
       >
@@ -19,7 +27,7 @@ const TextWithIcon = ({
             name={iconName}
             iconType={iconType}
           />
-          <Text style={[styles.text]}>{text}</Text>
+          <Text style={[styles.text, textStyle]}>{text}</Text>
         </Fragment>
       </TouchableHighlight>
     ) : (

src/components/comment/view/commentStyles.js

@@ -8,23 +8,32 @@ export default EStyleSheet.create({
     marginLeft: 10,
   },
   rightButton: {
-    flexGrow: 1,
-    alignSelf: 'flex-end',
-    position: 'absolute',
-    right: 10,
     backgroundColor: '$iconColor',
-    height: 15,
-    width: 25,
+    height: 18,
+    flexDirection: 'row-reverse',
+    borderRadius: 20,
   },
-  moreIcon: {
+  moreText: {
     color: '$white',
-    marginTop: -1,
+    fontSize: 10,
+    marginLeft: 12,
+    marginRight: 2,
   },
   bodyWrapper: {
     marginTop: -10,
   },
+  iconStyle: {
+    color: '$white',
+    marginRight: 12,
+    marginTop: 1,
+  },
   footerWrapper: {
     flex: 1,
     flexDirection: 'row',
   },
+  rightButtonWrapper: {
+    alignSelf: 'flex-end',
+    position: 'absolute',
+    right: 0,
+  },
 });

src/components/comment/view/commentView.js

@@ -9,6 +9,7 @@ import { PostBody, PostHeaderDescription } from '../../postElements';
 import { Upvote } from '../../upvote';
 import { IconButton } from '../../iconButton';
 import { Comments } from '../../comments';
+import { TextWithIcon } from '../../basicUIElements';
 
 // Styles
 import styles from './commentStyles';
@@ -88,14 +89,19 @@ class CommentView extends PureComponent {
               </Fragment>
             )}
             {isShowMoreButton && (
-              <IconButton
-                size={18}
-                iconStyle={styles.moreIcon}
-                style={styles.rightButton}
-                name={isShowSubComments ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}
-                onPress={() => this._showSubCommentsToggle()}
-                iconType="MaterialIcons"
-              />
+              <View style={styles.rightButtonWrapper}>
+                <TextWithIcon
+                  wrapperStyle={styles.rightButton}
+                  iconName={isShowSubComments ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}
+                  textStyle={styles.moreText}
+                  iconType="MaterialIcons"
+                  isClickable
+                  iconStyle={styles.iconStyle}
+                  iconSize={16}
+                  onPress={() => this._showSubCommentsToggle()}
+                  text={`${comment.children} more replies`}
+                />
+              </View>
             )}
           </View>
           {isShowSubComments && commentNumber > 0 && (