From 63fbdede42fe28846e552dd64ff7f0fce829a3f8 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Thu, 25 Jan 2024 01:38:23 +0000
Subject: Clean up the post controls UI (#2614)

* Hide zeros on post ctrls

* Align buttons between posts

* Update loading placeholders

* Remove unused
---
 src/view/com/util/LoadingPlaceholder.tsx | 50 +++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 17 deletions(-)

(limited to 'src/view/com/util/LoadingPlaceholder.tsx')

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,
-- 
cgit 1.4.1