Clean up the post controls UI (#2614)

* Hide zeros on post ctrls

* Align buttons between posts

* Update loading placeholders

* Remove unused

4 files changed, 52 insertions, 41 deletions

diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index b7f133774..8941bfb9c 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -6,8 +6,12 @@ import {
   ViewStyle,
   DimensionValue,
 } from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {HeartIcon, HeartIconSolid} from 'lib/icons'
+import {
+  HeartIcon,
+  HeartIconSolid,
+  CommentBottomArrow,
+  RepostIcon,
+} from 'lib/icons'
 import {s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -61,30 +65,30 @@ export function PostLoadingPlaceholder({
         <LoadingPlaceholder width={100} height={6} style={{marginBottom: 10}} />
         <LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
         <LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
-        <LoadingPlaceholder width="80%" height={6} style={{marginBottom: 15}} />
-        <View style={s.flexRow}>
-          <View style={s.flex1}>
-            <FontAwesomeIcon
-              style={{color: theme.palette.default.icon}}
-              icon={['far', 'comment']}
-              size={14}
+        <LoadingPlaceholder width="80%" height={6} style={{marginBottom: 11}} />
+        <View style={styles.postCtrls}>
+          <View style={[styles.postCtrl, {paddingLeft: 0}]}>
+            <CommentBottomArrow
+              style={[{color: theme.palette.default.icon, marginTop: 1}]}
+              strokeWidth={3}
+              size={15}
             />
           </View>
-          <View style={s.flex1}>
-            <FontAwesomeIcon
+          <View style={styles.postCtrl}>
+            <RepostIcon
               style={{color: theme.palette.default.icon}}
-              icon="retweet"
-              size={18}
+              strokeWidth={3}
+              size={20}
             />
           </View>
-          <View style={s.flex1}>
+          <View style={styles.postCtrl}>
             <HeartIcon
               style={{color: theme.palette.default.icon} as ViewStyle}
-              size={17}
-              strokeWidth={1.7}
+              size={16}
+              strokeWidth={3}
             />
           </View>
-          <View style={s.flex1} />
+          <View style={{width: 30, height: 30}} />
         </View>
       </View>
     </View>
@@ -267,6 +271,18 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingTop: 20,
     paddingBottom: 5,
+    paddingRight: 15,
+  },
+  postCtrls: {
+    opacity: 0.5,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  postCtrl: {
+    padding: 5,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   avatar: {
     borderRadius: 26,
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 50ef8a875..9ef83b26d 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -165,19 +165,21 @@ let PostCtrls = ({
           strokeWidth={3}
           size={big ? 20 : 15}
         />
-        {typeof post.replyCount !== 'undefined' ? (
+        {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
           <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
             {post.replyCount}
           </Text>
         ) : undefined}
       </TouchableOpacity>
-      <RepostButton
-        big={big}
-        isReposted={!!post.viewer?.repost}
-        repostCount={post.repostCount}
-        onRepost={onRepost}
-        onQuote={onQuote}
-      />
+      <View style={[styles.ctrl, !big && styles.ctrlPad]}>
+        <RepostButton
+          big={big}
+          isReposted={!!post.viewer?.repost}
+          repostCount={post.repostCount}
+          onRepost={onRepost}
+          onQuote={onQuote}
+        />
+      </View>
       <TouchableOpacity
         testID="likeBtn"
         style={[styles.ctrl, !big && styles.ctrlPad]}
@@ -199,7 +201,7 @@ let PostCtrls = ({
             size={big ? 20 : 16}
           />
         )}
-        {typeof post.likeCount !== 'undefined' ? (
+        {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
           <Text
             testID="likeCount"
             style={
@@ -237,6 +239,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   ctrl: {
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index d45bf1d87..8e70534dc 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -53,7 +53,7 @@ let RepostButton = ({
       onPress={() => {
         requireAuth(() => onPressToggleRepostWrapper())
       }}
-      style={[styles.control, !big && styles.controlPad]}
+      style={[styles.container]}
       accessibilityRole="button"
       accessibilityLabel={`${
         isReposted
@@ -71,7 +71,7 @@ let RepostButton = ({
         strokeWidth={2.4}
         size={big ? 24 : 20}
       />
-      {typeof repostCount !== 'undefined' ? (
+      {typeof repostCount !== 'undefined' && repostCount > 0 ? (
         <Text
           testID="repostCount"
           style={
@@ -89,13 +89,10 @@ RepostButton = memo(RepostButton)
 export {RepostButton}
 
 const styles = StyleSheet.create({
-  control: {
+  container: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  controlPad: {
-    padding: 5,
-  },
   reposted: {
     color: colors.green3,
   },
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index 329382132..a888178a3 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -69,19 +69,18 @@ export const RepostButton = ({
   const inner = (
     <View
       style={[
-        styles.control,
-        !big && styles.controlPad,
+        styles.container,
         (isReposted
           ? styles.reposted
           : defaultControlColor) as StyleProp<ViewStyle>,
       ]}>
       <RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
-      {typeof repostCount !== 'undefined' ? (
+      {typeof repostCount !== 'undefined' && repostCount > 0 ? (
         <Text
           testID="repostCount"
           type={isReposted ? 'md-bold' : 'md'}
           style={styles.repostCount}>
-          {repostCount ?? 0}
+          {repostCount}
         </Text>
       ) : undefined}
     </View>
@@ -110,15 +109,11 @@ export const RepostButton = ({
 }
 
 const styles = StyleSheet.create({
-  control: {
-    display: 'flex',
+  container: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
   },
-  controlPad: {
-    padding: 5,
-  },
   reposted: {
     color: colors.green3,
   },