Tune post controls

src/view/com/posts/FeedItem.tsx

@@ -310,10 +310,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     flexWrap: 'wrap',
-    paddingBottom: 8,
+    paddingBottom: 4,
   },
   postEmbeds: {
-    marginBottom: 10,
+    marginBottom: 0,
   },
   viewFullThread: {
     paddingTop: 12,

src/view/com/util/PostCtrls.tsx

@@ -3,7 +3,7 @@ import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
 import {Text} from './text/Text'
-import {UpIcon, UpIconSolid} from '../../lib/icons'
+import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
 
@@ -102,13 +102,13 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           style={styles.ctrl}
           hitSlop={HITSLOP}
           onPress={opts.onPressReply}>
-          <FontAwesomeIcon
+          <CommentBottomArrow
             style={styles.ctrlIcon}
-            icon={['far', 'comment']}
+            strokeWidth={3}
-            size={opts.big ? 20 : 14}
+            size={opts.big ? 20 : 15}
           />
           {typeof opts.replyCount !== 'undefined' ? (
-            <Text style={[sRedgray, s.ml5, s.f16]}>{opts.replyCount}</Text>
+            <Text style={[sRedgray, s.ml5, s.f15]}>{opts.replyCount}</Text>
           ) : undefined}
         </TouchableOpacity>
       </View>
@@ -123,15 +123,15 @@ export function PostCtrls(opts: PostCtrlsOpts) {
                 opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
               }
               icon="retweet"
-              size={opts.big ? 22 : 18}
+              size={opts.big ? 22 : 17}
             />
           </Animated.View>
           {typeof opts.repostCount !== 'undefined' ? (
             <Text
               style={
                 opts.isReposted
-                  ? [s.bold, s.green3, s.f16, s.ml5]
+                  ? [s.bold, s.green3, s.f15, s.ml5]
-                  : [sRedgray, s.f16, s.ml5]
+                  : [sRedgray, s.f15, s.ml5]
               }>
               {opts.repostCount}
             </Text>
@@ -147,12 +147,12 @@ export function PostCtrls(opts: PostCtrlsOpts) {
             {opts.isUpvoted ? (
               <UpIconSolid
                 style={[styles.ctrlIconUpvoted]}
-                size={opts.big ? 22 : 18}
+                size={opts.big ? 22 : 17}
               />
             ) : (
               <UpIcon
                 style={[styles.ctrlIcon]}
-                size={opts.big ? 22 : 18}
+                size={opts.big ? 22 : 17}
                 strokeWidth={1.5}
               />
             )}
@@ -161,8 +161,8 @@ export function PostCtrls(opts: PostCtrlsOpts) {
             <Text
               style={
                 opts.isUpvoted
-                  ? [s.bold, s.red3, s.f16, s.ml5]
+                  ? [s.bold, s.red3, s.f15, s.ml5]
-                  : [sRedgray, s.f16, s.ml5]
+                  : [sRedgray, s.f15, s.ml5]
               }>
               {opts.upvoteCount}
             </Text>

src/view/com/util/PostEmbeds.tsx

@@ -123,7 +123,7 @@ export function PostEmbeds({
 
 const styles = StyleSheet.create({
   imagesContainer: {
-    marginBottom: 10,
+    marginBottom: 6,
   },
   imagesWidthSpacer: {
     width: 5,

src/view/lib/icons.tsx

@@ -324,3 +324,32 @@ export function DownIconSolid({
     </Svg>
   )
 }
+
+// Copyright (c) 2020 Refactoring UI Inc.
+// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
+export function CommentBottomArrow({
+  style,
+  size,
+  strokeWidth = 1.3,
+}: {
+  style?: StyleProp<TextStyle>
+  size?: string | number
+  strokeWidth?: number
+}) {
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={strokeWidth || 2.5}
+      stroke={style?.color || 'currentColor'}
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+      />
+    </Svg>
+  )
+}