Adjust post control sizing and alignment

3 files changed, 14 insertions, 14 deletions

diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index b08e11595..ed94c5502 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -93,14 +93,14 @@ export function PostLoadingPlaceholder({
             <FontAwesomeIcon
               style={s.gray3}
               icon={['far', 'comment']}
-              size={14}
+              size={16}
             />
           </View>
           <View style={s.flex1}>
-            <FontAwesomeIcon style={s.gray3} icon="retweet" size={18} />
+            <FontAwesomeIcon style={s.gray3} icon="retweet" size={20} />
           </View>
           <View style={s.flex1}>
-            <UpIcon style={s.gray3} size={18} />
+            <UpIcon style={s.gray3} size={18} strokeWidth={1.7} />
           </View>
           <View style={s.flex1}></View>
         </View>
diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx
index 6d766951f..b22475086 100644
--- a/src/view/com/util/PostCtrls.tsx
+++ b/src/view/com/util/PostCtrls.tsx
@@ -59,9 +59,9 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           <FontAwesomeIcon
             style={styles.ctrlIcon}
             icon={['far', 'comment']}
-            size={14}
+            size={16}
           />
-          <Text style={[s.gray5, s.ml5, s.f13]}>{opts.replyCount}</Text>
+          <Text style={[s.gray5, s.ml5, s.f16]}>{opts.replyCount}</Text>
         </TouchableOpacity>
       </View>
       <View style={s.flex1}>
@@ -74,14 +74,14 @@ export function PostCtrls(opts: PostCtrlsOpts) {
                 opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
               }
               icon="retweet"
-              size={18}
+              size={20}
             />
           </Animated.View>
           <Text
             style={
               opts.isReposted
-                ? [s.bold, s.green3, s.f13, s.ml5]
-                : [s.gray5, s.f13, s.ml5]
+                ? [s.bold, s.green3, s.f16, s.ml5]
+                : [s.gray5, s.f16, s.ml5]
             }>
             {opts.repostCount}
           </Text>
@@ -95,14 +95,14 @@ export function PostCtrls(opts: PostCtrlsOpts) {
             {opts.isUpvoted ? (
               <UpIconSolid style={styles.ctrlIconUpvoted} size={18} />
             ) : (
-              <UpIcon style={styles.ctrlIcon} size={18} />
+              <UpIcon style={styles.ctrlIcon} size={18} strokeWidth={1.7} />
             )}
           </Animated.View>
           <Text
             style={
               opts.isUpvoted
-                ? [s.bold, s.red3, s.f13, s.ml5]
-                : [s.gray5, s.f13, s.ml5]
+                ? [s.bold, s.red3, s.f16, s.ml5]
+                : [s.gray5, s.f16, s.ml5]
             }>
             {opts.upvoteCount}
           </Text>
@@ -116,12 +116,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
 const styles = StyleSheet.create({
   ctrls: {
     flexDirection: 'row',
-    paddingRight: 20,
   },
   ctrl: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingLeft: 4,
     paddingRight: 4,
   },
   ctrlIcon: {
diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx
index c160df3cc..b3f52a62e 100644
--- a/src/view/lib/icons.tsx
+++ b/src/view/lib/icons.tsx
@@ -221,9 +221,11 @@ export function UserGroupIcon({
 export function UpIcon({
   style,
   size,
+  strokeWidth = 1.3,
 }: {
   style?: StyleProp<ViewStyle>
   size?: string | number
+  strokeWidth: number
 }) {
   return (
     <Svg
@@ -232,7 +234,7 @@ export function UpIcon({
       height={size || 24}
       style={style}>
       <Path
-        strokeWidth={1.3}
+        strokeWidth={strokeWidth}
         stroke="currentColor"
         d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z"
       />