From ff8d9408017d0317dea211c28bac86411fc303a4 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 02:23:32 +0100
Subject: [PATCH 01/17] alf the repost dropdown on web + import icons

---
 ...seQuote_filled_stroke2_corner0_rounded.svg |   1 +
 .../closeQuote_stroke2_corner0_rounded.svg    |   1 +
 ...enQuote_filled_stroke2_corner0_rounded.svg |   1 +
 .../openQuote_stroke2_corner0_rounded.svg     |   1 +
 .../icons/repost_stroke2_corner0_rounded.svg  |   1 +
 src/components/icons/Quote.tsx                |  17 ++
 src/components/icons/Repost.tsx               |   5 +
 .../com/util/post-ctrls/RepostButton.web.tsx  | 172 +++++++++---------
 8 files changed, 113 insertions(+), 86 deletions(-)
 create mode 100644 assets/icons/closeQuote_filled_stroke2_corner0_rounded.svg
 create mode 100644 assets/icons/closeQuote_stroke2_corner0_rounded.svg
 create mode 100644 assets/icons/openQuote_filled_stroke2_corner0_rounded.svg
 create mode 100644 assets/icons/openQuote_stroke2_corner0_rounded.svg
 create mode 100644 assets/icons/repost_stroke2_corner0_rounded.svg
 create mode 100644 src/components/icons/Quote.tsx
 create mode 100644 src/components/icons/Repost.tsx

diff --git a/assets/icons/closeQuote_filled_stroke2_corner0_rounded.svg b/assets/icons/closeQuote_filled_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..41e75887c0
--- /dev/null
+++ b/assets/icons/closeQuote_filled_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M3.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7ZM14.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7Z"/></svg>
diff --git a/assets/icons/closeQuote_stroke2_corner0_rounded.svg b/assets/icons/closeQuote_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..3c76c73920
--- /dev/null
+++ b/assets/icons/closeQuote_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2.004 5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936A1 1 0 0 1 5.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234c.104-.085.21-.177.316-.276.846-.793 1.684-2.043 1.684-3.958V6h-5v6h2a1 1 0 0 1 1 1v4.234Zm6-12.234a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234V13a1 1 0 0 0-1-1h-2V6h5v7c0 1.915-.838 3.165-1.684 3.958-.106.1-.212.191-.316.276Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/assets/icons/openQuote_filled_stroke2_corner0_rounded.svg b/assets/icons/openQuote_filled_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..e8141a1128
--- /dev/null
+++ b/assets/icons/openQuote_filled_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M8.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15C3.166 6.665 2.004 8.415 2.004 11v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5ZM19.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15-1.154 1.082-2.316 2.832-2.316 5.417v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5Z"/></svg>
diff --git a/assets/icons/openQuote_stroke2_corner0_rounded.svg b/assets/icons/openQuote_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..eee6344cee
--- /dev/null
+++ b/assets/icons/openQuote_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.574 4.178a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.163 8.163 0 0 1 1.569-1.15 7.029 7.029 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588a5.99 5.99 0 0 0-.316.276C4.842 7.835 4.004 9.085 4.004 11v7h5v-6h-2a1 1 0 0 1-1-1V6.766Zm12.57-2.588a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.166 8.166 0 0 1 1.569-1.15 7.038 7.038 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588c-.105.085-.21.177-.316.276-.846.793-1.684 2.043-1.684 3.958v7h5v-6h-2a1 1 0 0 1-1-1V6.766Z" clip-rule="evenodd"/></svg>
diff --git a/assets/icons/repost_stroke2_corner0_rounded.svg b/assets/icons/repost_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..a3cff9c62d
--- /dev/null
+++ b/assets/icons/repost_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H5v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1h13.586l-1.293-1.293a1 1 0 0 1 0-1.414ZM21 13v5a1 1 0 0 1-1 1H6.414l1.293 1.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 0 1 1.414 1.414L6.414 17H19v-4a1 1 0 1 1 2 0Z" clip-rule="evenodd"/></svg>
diff --git a/src/components/icons/Quote.tsx b/src/components/icons/Quote.tsx
new file mode 100644
index 0000000000..28a1aea65a
--- /dev/null
+++ b/src/components/icons/Quote.tsx
@@ -0,0 +1,17 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const OpenQuote_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M7.574 4.178a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.163 8.163 0 0 1 1.569-1.15 7.029 7.029 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588a5.99 5.99 0 0 0-.316.276C4.842 7.835 4.004 9.085 4.004 11v7h5v-6h-2a1 1 0 0 1-1-1V6.766Zm12.57-2.588a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.166 8.166 0 0 1 1.569-1.15 7.038 7.038 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588c-.105.085-.21.177-.316.276-.846.793-1.684 2.043-1.684 3.958v7h5v-6h-2a1 1 0 0 1-1-1V6.766Z',
+})
+
+export const OpenQuote_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M8.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15C3.166 6.665 2.004 8.415 2.004 11v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5ZM19.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15-1.154 1.082-2.316 2.832-2.316 5.417v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5Z"',
+})
+
+export const CloseQuote_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M2.004 5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936A1 1 0 0 1 5.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234c.104-.085.21-.177.316-.276.846-.793 1.684-2.043 1.684-3.958V6h-5v6h2a1 1 0 0 1 1 1v4.234Zm6-12.234a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234V13a1 1 0 0 0-1-1h-2V6h5v7c0 1.915-.838 3.165-1.684 3.958-.106.1-.212.191-.316.276Z',
+})
+
+export const CloseQuote_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7ZM14.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7Z',
+})
diff --git a/src/components/icons/Repost.tsx b/src/components/icons/Repost.tsx
new file mode 100644
index 0000000000..5c1843aa0b
--- /dev/null
+++ b/src/components/icons/Repost.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Repost_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H5v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1h13.586l-1.293-1.293a1 1 0 0 1 0-1.414ZM21 13v5a1 1 0 0 1-1 1H6.414l1.293 1.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 0 1 1.414 1.414L6.414 17H19v-4a1 1 0 1 1 2 0Z',
+})
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index bbe5869feb..ca546be9a2 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -1,19 +1,16 @@
 import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle, Pressable} from 'react-native'
-import {RepostIcon} from 'lib/icons'
-import {colors} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {Text} from '../text/Text'
-
-import {
-  NativeDropdown,
-  DropdownItem as NativeDropdownItem,
-} from '../forms/NativeDropdown'
-import {EventStopper} from '../EventStopper'
-import {useLingui} from '@lingui/react'
+import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
 import {useRequireAuth} from '#/state/session'
 import {useSession} from '#/state/session'
+import {atoms as a, useTheme} from '#/alf'
+import {OpenQuote_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
+import {Repost_Stroke2_Corner0_Rounded as Repost} from '#/components/icons/Repost'
+import * as Menu from '#/components/Menu'
+import {Text} from '#/components/Typography'
+import {EventStopper} from '../EventStopper'
 
 interface Props {
   isReposted: boolean
@@ -31,70 +28,65 @@ export const RepostButton = ({
   onRepost,
   onQuote,
 }: Props) => {
-  const theme = useTheme()
+  const t = useTheme()
   const {_} = useLingui()
   const {hasSession} = useSession()
   const requireAuth = useRequireAuth()
 
-  const defaultControlColor = React.useMemo(
+  const color = React.useMemo(
     () => ({
-      color: theme.palette.default.postCtrl,
+      color: isReposted ? t.palette.positive_600 : t.palette.contrast_500,
     }),
-    [theme],
-  )
-
-  const dropdownItems: NativeDropdownItem[] = [
-    {
-      label: isReposted ? _(msg`Undo repost`) : _(msg`Repost`),
-      testID: 'repostDropdownRepostBtn',
-      icon: {
-        ios: {name: 'repeat'},
-        android: '',
-        web: 'retweet',
-      },
-      onPress: onRepost,
-    },
-    {
-      label: _(msg`Quote post`),
-      testID: 'repostDropdownQuoteBtn',
-      icon: {
-        ios: {name: 'quote.bubble'},
-        android: '',
-        web: 'quote-left',
-      },
-      onPress: onQuote,
-    },
-  ]
-
-  const inner = (
-    <View
-      style={[
-        styles.btn,
-        !big && styles.btnPad,
-        (isReposted
-          ? styles.reposted
-          : defaultControlColor) as StyleProp<ViewStyle>,
-      ]}>
-      <RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
-      {typeof repostCount !== 'undefined' && repostCount > 0 ? (
-        <Text
-          testID="repostCount"
-          type={isReposted ? 'md-bold' : 'md'}
-          style={styles.repostCount}>
-          {repostCount}
-        </Text>
-      ) : undefined}
-    </View>
+    [t, isReposted],
   )
 
   return hasSession ? (
     <EventStopper>
-      <NativeDropdown
-        items={dropdownItems}
-        accessibilityLabel={_(msg`Repost or quote post`)}
-        accessibilityHint="">
-        {inner}
-      </NativeDropdown>
+      <Menu.Root>
+        <Menu.Trigger label={_(msg`Repost or quote post`)}>
+          {({props, state}) => {
+            return (
+              <Pressable
+                {...props}
+                style={[
+                  a.rounded_full,
+                  (state.hovered || state.pressed) && {
+                    backgroundColor: t.palette.positive_100,
+                  },
+                ]}>
+                <RepostInner
+                  big={big}
+                  isReposted={isReposted}
+                  color={
+                    state.hovered || state.pressed
+                      ? {color: t.palette.positive_600}
+                      : color
+                  }
+                  repostCount={repostCount}
+                />
+              </Pressable>
+            )
+          }}
+        </Menu.Trigger>
+        <Menu.Outer style={{minWidth: 170}}>
+          <Menu.Item
+            label={isReposted ? _(msg`Undo repost`) : _(msg`Repost`)}
+            testID="repostDropdownRepostBtn"
+            onPress={onRepost}>
+            <Menu.ItemText>
+              {isReposted ? _(msg`Undo repost`) : _(msg`Repost`)}
+            </Menu.ItemText>
+            <Menu.ItemIcon icon={Repost} position="right" />
+          </Menu.Item>
+          <Menu.Item
+            label={_(msg`Quote post`)}
+            testID="repostDropdownQuoteBtn"
+            onPress={onQuote}>
+            <Menu.ItemText>{_(msg`Quote post`)}</Menu.ItemText>
+            <Menu.ItemIcon icon={Quote} position="right" />
+          </Menu.Item>
+        </Menu.Outer>
+      </Menu.Root>
     </EventStopper>
   ) : (
     <Pressable
@@ -104,27 +96,35 @@ export const RepostButton = ({
       }}
       accessibilityLabel={_(msg`Repost or quote post`)}
       accessibilityHint="">
-      {inner}
+      <RepostInner
+        big={big}
+        isReposted={isReposted}
+        color={color}
+        repostCount={repostCount}
+      />
     </Pressable>
   )
 }
 
-const styles = StyleSheet.create({
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
-  btnPad: {
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 5,
-    paddingRight: 5,
-  },
-  reposted: {
-    color: colors.green3,
-  },
-  repostCount: {
-    color: 'currentColor',
-  },
-})
+const RepostInner = ({
+  big,
+  isReposted,
+  color,
+  repostCount,
+}: {
+  big?: boolean
+  isReposted: boolean
+  color: {color: string}
+  repostCount?: number
+}) => (
+  <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
+    <Repost size={big ? 'lg' : 'md'} style={color} />
+    {typeof repostCount !== 'undefined' && repostCount > 0 ? (
+      <Text
+        testID="repostCount"
+        style={[color, a.text_md, isReposted && [a.font_bold]]}>
+        {repostCount}
+      </Text>
+    ) : undefined}
+  </View>
+)

From 0f77877a82b0bc5363e3a68af9600a8230109ab8 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 02:47:38 +0100
Subject: [PATCH 02/17] alf like icon

---
 src/view/com/util/post-ctrls/PostCtrls.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index b6c07d5735..43402fd8a4 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -16,7 +16,7 @@ import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10, HITSLOP_20} from '#/lib/constants'
-import {CommentBottomArrow, HeartIcon, HeartIconSolid} from '#/lib/icons'
+import {CommentBottomArrow} from '#/lib/icons'
 import {makeProfileLink} from '#/lib/routes/links'
 import {shareUrl} from '#/lib/sharing'
 import {toShareUrl} from '#/lib/strings/url-helpers'
@@ -34,6 +34,10 @@ import {useComposerControls} from '#/state/shell/composer'
 import {useHaptics} from 'lib/haptics'
 import {useDialogControl} from '#/components/Dialog'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
+import {
+  Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
+  Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
+} from '#/components/icons/Heart2'
 import * as Prompt from '#/components/Prompt'
 import {PostDropdownBtn} from '../forms/PostDropdownBtn'
 import {Text} from '../text/Text'
@@ -250,12 +254,11 @@ let PostCtrls = ({
           accessibilityHint=""
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
           {post.viewer?.like ? (
-            <HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
+            <HeartIconFilled style={s.likeColor} size={big ? 'lg' : 'md'} />
           ) : (
-            <HeartIcon
+            <HeartIconOutline
               style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
-              strokeWidth={3}
-              size={big ? 20 : 16}
+              size={big ? 'lg' : 'md'}
             />
           )}
           {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (

From 52cc449ca7607b3fa25a694cfca5c2a895f4143d Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 15:48:03 +0100
Subject: [PATCH 03/17] convert other post controls

---
 .../icons/repost_stroke2_corner3_rounded.svg  |   1 +
 src/components/Button.tsx                     |   4 +-
 src/components/icons/Quote.tsx                |   2 +-
 src/components/icons/Repost.tsx               |   4 +
 src/view/com/util/forms/PostDropdownBtn.tsx   |   8 +-
 src/view/com/util/post-ctrls/PostCtrls.tsx    | 136 +++++---------
 src/view/com/util/post-ctrls/RepostButton.tsx | 172 ++++++++++--------
 .../com/util/post-ctrls/RepostButton.web.tsx  |  18 +-
 8 files changed, 160 insertions(+), 185 deletions(-)
 create mode 100644 assets/icons/repost_stroke2_corner3_rounded.svg

diff --git a/assets/icons/repost_stroke2_corner3_rounded.svg b/assets/icons/repost_stroke2_corner3_rounded.svg
new file mode 100644
index 0000000000..8aa7f727bd
--- /dev/null
+++ b/assets/icons/repost_stroke2_corner3_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M16.793 2.293a1 1 0 0 1 1.414 0L20.5 4.586a2 2 0 0 1 0 2.828l-2.293 2.293a1 1 0 0 1-1.414-1.414L18.086 7H7a2 2 0 0 0-2 2v2a1 1 0 1 1-2 0V9a4 4 0 0 1 4-4h11.086l-1.293-1.293a1 1 0 0 1 0-1.414ZM20 12a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H5.914l1.293 1.293a1 1 0 1 1-1.414 1.414L3.5 19.414a2 2 0 0 1 0-2.828l2.293-2.293a1 1 0 0 1 1.414 1.414L5.914 17H17a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a008c8605c..4b9ed17324 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -533,10 +533,12 @@ export function ButtonIcon({
   icon: Comp,
   position,
   size: iconSize,
+  color,
 }: {
   icon: React.ComponentType<SVGIconProps>
   position?: 'left' | 'right'
   size?: SVGIconProps['size']
+  color?: string
 }) {
   const {size, disabled} = useButtonContext()
   const textStyles = useSharedButtonTextStyles()
@@ -555,7 +557,7 @@ export function ButtonIcon({
         size={
           iconSize ?? (size === 'large' ? 'md' : size === 'tiny' ? 'xs' : 'sm')
         }
-        style={[{color: textStyles.color, pointerEvents: 'none'}]}
+        style={[{color: color ?? textStyles.color, pointerEvents: 'none'}]}
       />
     </View>
   )
diff --git a/src/components/icons/Quote.tsx b/src/components/icons/Quote.tsx
index 28a1aea65a..cfecb9b92d 100644
--- a/src/components/icons/Quote.tsx
+++ b/src/components/icons/Quote.tsx
@@ -5,7 +5,7 @@ export const OpenQuote_Stroke2_Corner0_Rounded = createSinglePathSVG({
 })
 
 export const OpenQuote_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M8.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15C3.166 6.665 2.004 8.415 2.004 11v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5ZM19.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15-1.154 1.082-2.316 2.832-2.316 5.417v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5Z"',
+  path: 'M8.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15C3.166 6.665 2.004 8.415 2.004 11v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5ZM19.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15-1.154 1.082-2.316 2.832-2.316 5.417v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5Z',
 })
 
 export const CloseQuote_Stroke2_Corner0_Rounded = createSinglePathSVG({
diff --git a/src/components/icons/Repost.tsx b/src/components/icons/Repost.tsx
index 5c1843aa0b..c18551617c 100644
--- a/src/components/icons/Repost.tsx
+++ b/src/components/icons/Repost.tsx
@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const Repost_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H5v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1h13.586l-1.293-1.293a1 1 0 0 1 0-1.414ZM21 13v5a1 1 0 0 1-1 1H6.414l1.293 1.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 0 1 1.414 1.414L6.414 17H19v-4a1 1 0 1 1 2 0Z',
 })
+
+export const Repost_Stroke2_Corner3_Rounded = createSinglePathSVG({
+  path: 'M16.793 2.293a1 1 0 0 1 1.414 0L20.5 4.586a2 2 0 0 1 0 2.828l-2.293 2.293a1 1 0 0 1-1.414-1.414L18.086 7H7a2 2 0 0 0-2 2v2a1 1 0 1 1-2 0V9a4 4 0 0 1 4-4h11.086l-1.293-1.293a1 1 0 0 1 0-1.414ZM20 12a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H5.914l1.293 1.293a1 1 0 1 1-1.414 1.414L3.5 19.414a2 2 0 0 1 0-2.828l2.293-2.293a1 1 0 0 1 1.414 1.414L5.914 17H17a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1Z',
+})
diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx
index 50677ee8a6..249e667ed1 100644
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@@ -7,7 +7,6 @@ import {
   AtUri,
   RichText as RichTextAPI,
 } from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -37,6 +36,7 @@ import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons
 import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets'
+import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
 import {
   EmojiSad_Stroke2_Corner0_Rounded as EmojiSad,
   EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile,
@@ -241,10 +241,8 @@ let PostDropdownBtn = ({
                     alf.atoms.bg_contrast_50,
                   ],
                 ]}>
-                <FontAwesomeIcon
-                  icon="ellipsis"
-                  size={20}
-                  color={defaultCtrlColor}
+                <DotsHorizontal
+                  fill={defaultCtrlColor}
                   style={{pointerEvents: 'none'}}
                 />
               </Pressable>
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 43402fd8a4..02eb5bcb82 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -1,11 +1,5 @@
 import React, {memo, useCallback} from 'react'
-import {
-  StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {
   AppBskyFeedDefs,
   AppBskyFeedPost,
@@ -16,7 +10,7 @@ import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10, HITSLOP_20} from '#/lib/constants'
-import {CommentBottomArrow} from '#/lib/icons'
+import {useHaptics} from '#/lib/haptics'
 import {makeProfileLink} from '#/lib/routes/links'
 import {shareUrl} from '#/lib/sharing'
 import {toShareUrl} from '#/lib/strings/url-helpers'
@@ -31,9 +25,11 @@ import {
 } from '#/state/queries/post'
 import {useRequireAuth} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
-import {useHaptics} from 'lib/haptics'
+import {atoms as a} from '#/alf'
+import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
+import {Bubble_Stroke2_Corner3_Rounded as Bubble} from '#/components/icons/Bubble'
 import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
   Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
@@ -190,40 +186,39 @@ let PostCtrls = ({
   }, [post.uri, post.author, sendInteraction, feedContext])
 
   return (
-    <View style={[styles.ctrls, style]}>
+    <View style={[a.flex_row, a.justify_between, a.align_center, style]}>
       <View
         style={[
-          big ? styles.ctrlBig : styles.ctrl,
+          big ? a.align_center : [a.flex_1, a.align_start],
           post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
         ]}>
-        <TouchableOpacity
+        <Button
           testID="replyBtn"
-          style={[styles.btn, !big && styles.btnPad, {paddingLeft: 0}]}
+          style={{padding: 5, marginLeft: -5}}
           onPress={() => {
             if (!post.viewer?.replyDisabled) {
               requireAuth(() => onPressReply())
             }
           }}
-          accessibilityRole="button"
-          accessibilityLabel={plural(post.replyCount || 0, {
+          label={plural(post.replyCount || 0, {
             one: 'Reply (# reply)',
             other: 'Reply (# replies)',
           })}
-          accessibilityHint=""
-          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-          <CommentBottomArrow
-            style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
-            strokeWidth={3}
-            size={big ? 20 : 15}
+          shape="round"
+          variant="ghost"
+          color="secondary">
+          <Bubble
+            style={[defaultCtrlColor, big ? s.mt2 : {marginTop: 1}]}
+            size="md"
           />
           {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
             <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
               {post.replyCount}
             </Text>
           ) : undefined}
-        </TouchableOpacity>
+        </Button>
       </View>
-      <View style={big ? styles.ctrlBig : styles.ctrl}>
+      <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
         <RepostButton
           big={big}
           isReposted={!!post.viewer?.repost}
@@ -232,33 +227,29 @@ let PostCtrls = ({
           onQuote={onQuote}
         />
       </View>
-      <View style={big ? styles.ctrlBig : styles.ctrl}>
-        <TouchableOpacity
+      <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
+        <Button
           testID="likeBtn"
-          style={[styles.btn, !big && styles.btnPad]}
-          onPress={() => {
-            requireAuth(() => onPressToggleLike())
-          }}
-          accessibilityRole="button"
-          accessibilityLabel={
-            post.viewer?.like
-              ? plural(post.likeCount || 0, {
-                  one: 'Unlike (# like)',
-                  other: 'Unlike (# likes)',
-                })
-              : plural(post.likeCount || 0, {
-                  one: 'Like (# like)',
-                  other: 'Like (# likes)',
-                })
-          }
-          accessibilityHint=""
-          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+          style={{padding: 5}}
+          onPress={() => requireAuth(() => onPressToggleLike())}
+          label={post.viewer?.like
+            ? plural(post.likeCount || 0, {
+                one: 'Unlike (# like)',
+                other: 'Unlike (# likes)',
+              })
+            : plural(post.likeCount || 0, {
+                one: 'Like (# like)',
+                other: 'Like (# likes)',
+              })}
+          shape="round"
+          variant="ghost"
+          color="secondary">
           {post.viewer?.like ? (
-            <HeartIconFilled style={s.likeColor} size={big ? 'lg' : 'md'} />
+            <HeartIconFilled style={s.likeColor} size="md" />
           ) : (
             <HeartIconOutline
-              style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
-              size={big ? 'lg' : 'md'}
+              style={[defaultCtrlColor, big ? {marginTop: 1} : undefined]}
+              size="md"
             />
           )}
           {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
@@ -272,14 +263,13 @@ let PostCtrls = ({
               {post.likeCount}
             </Text>
           ) : undefined}
-        </TouchableOpacity>
+        </Button>
       </View>
       {big && (
         <>
-          <View style={styles.ctrlBig}>
-            <TouchableOpacity
+          <View style={a.align_center}>
+            <Button
               testID="shareBtn"
-              style={[styles.btn]}
               onPress={() => {
                 if (shouldShowLoggedOutWarning) {
                   loggedOutWarningPromptControl.open()
@@ -287,15 +277,15 @@ let PostCtrls = ({
                   onShare()
                 }
               }}
-              accessibilityRole="button"
-              accessibilityLabel={`${_(msg`Share`)}`}
-              accessibilityHint=""
-              hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+              label={_(msg`Share`)}
+              shape="round"
+              variant="ghost"
+              color="secondary">
               <ArrowOutOfBox
-                style={[defaultCtrlColor, styles.mt1]}
-                width={22}
+                style={[defaultCtrlColor, {marginTop: 1}]}
+                size="md"
               />
-            </TouchableOpacity>
+            </Button>
           </View>
           <Prompt.Basic
             control={loggedOutWarningPromptControl}
@@ -308,7 +298,7 @@ let PostCtrls = ({
           />
         </>
       )}
-      <View style={big ? styles.ctrlBig : styles.ctrl}>
+      <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
         <PostDropdownBtn
           testID="postDropdownBtn"
           postAuthor={post.author}
@@ -317,7 +307,7 @@ let PostCtrls = ({
           postFeedContext={feedContext}
           record={record}
           richText={richText}
-          style={styles.btnPad}
+          style={{padding: 5}}
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}
           timestamp={post.indexedAt}
         />
@@ -327,31 +317,3 @@ let PostCtrls = ({
 }
 PostCtrls = memo(PostCtrls)
 export {PostCtrls}
-
-const styles = StyleSheet.create({
-  ctrls: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  ctrl: {
-    flex: 1,
-    alignItems: 'flex-start',
-  },
-  ctrlBig: {
-    alignItems: 'center',
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  btnPad: {
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 5,
-    paddingRight: 5,
-  },
-  mt1: {
-    marginTop: 1,
-  },
-})
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index f584178874..139dd34d97 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -1,20 +1,19 @@
-import React, {memo, useCallback} from 'react'
-import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
+import React, {memo} from 'react'
+import {View} from 'react-native'
 import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useModalControls} from '#/state/modals'
 import {useRequireAuth} from '#/state/session'
-import {HITSLOP_10, HITSLOP_20} from 'lib/constants'
-import {RepostIcon} from 'lib/icons'
-import {colors, s} from 'lib/styles'
-import {useTheme} from 'lib/ThemeContext'
-import {Text} from '../text/Text'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {OpenQuote_Filled_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
+import {Repost_Stroke2_Corner3_Rounded as Repost} from '#/components/icons/Repost'
+import {Text} from '#/components/Typography'
 
 interface Props {
   isReposted: boolean
   repostCount?: number
-  big?: boolean
   onRepost: () => void
   onQuote: () => void
 }
@@ -22,87 +21,106 @@ interface Props {
 let RepostButton = ({
   isReposted,
   repostCount,
-  big,
   onRepost,
   onQuote,
 }: Props): React.ReactNode => {
-  const theme = useTheme()
+  const t = useTheme()
   const {_} = useLingui()
-  const {openModal} = useModalControls()
   const requireAuth = useRequireAuth()
+  const dialogControl = Dialog.useDialogControl()
 
-  const defaultControlColor = React.useMemo(
+  const color = React.useMemo(
     () => ({
-      color: theme.palette.default.postCtrl,
+      color: isReposted ? t.palette.positive_600 : t.palette.contrast_500,
     }),
-    [theme],
+    [t, isReposted],
   )
 
-  const onPressToggleRepostWrapper = useCallback(() => {
-    openModal({
-      name: 'repost',
-      onRepost: onRepost,
-      onQuote: onQuote,
-      isReposted,
-    })
-  }, [onRepost, onQuote, isReposted, openModal])
-
   return (
-    <TouchableOpacity
-      testID="repostBtn"
-      onPress={() => {
-        requireAuth(() => onPressToggleRepostWrapper())
-      }}
-      style={[styles.btn, !big && styles.btnPad]}
-      accessibilityRole="button"
-      accessibilityLabel={`${
-        isReposted
-          ? _(msg`Undo repost`)
-          : _(msg({message: 'Repost', context: 'action'}))
-      } (${plural(repostCount || 0, {one: '# repost', other: '# reposts'})})`}
-      accessibilityHint=""
-      hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-      <RepostIcon
-        style={
+    <>
+      <Button
+        testID="repostBtn"
+        onPress={() => {
+          requireAuth(() => dialogControl.open())
+        }}
+        style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}
+        label={`${
           isReposted
-            ? (styles.reposted as StyleProp<ViewStyle>)
-            : defaultControlColor
-        }
-        strokeWidth={2.4}
-        size={big ? 24 : 20}
-      />
-      {typeof repostCount !== 'undefined' && repostCount > 0 ? (
-        <Text
-          testID="repostCount"
-          style={
-            isReposted
-              ? [s.bold, s.green3, s.f15, s.ml5]
-              : [defaultControlColor, s.f15, s.ml5]
-          }>
-          {repostCount}
-        </Text>
-      ) : undefined}
-    </TouchableOpacity>
+            ? _(msg`Undo repost`)
+            : _(msg({message: 'Repost', context: 'action'}))
+        } (${plural(repostCount || 0, {one: '# repost', other: '# reposts'})})`}
+        shape="round"
+        variant="ghost"
+        color="secondary">
+        <Repost style={color} />
+        {typeof repostCount !== 'undefined' && repostCount > 0 ? (
+          <Text
+            testID="repostCount"
+            style={[color, a.text_md, isReposted && a.font_bold]}>
+            {repostCount}
+          </Text>
+        ) : undefined}
+      </Button>
+      <Dialog.Outer control={dialogControl}>
+        <Dialog.Handle />
+        <Dialog.Inner label={_(msg`Repost or quote post`)}>
+          <View style={a.gap_xl}>
+            <View style={a.gap_xs}>
+              <Button
+                style={[a.justify_start, a.px_sm]}
+                label={
+                  isReposted
+                    ? _(msg`Remove repost`)
+                    : _(msg({message: `Repost`, context: 'action'}))
+                }
+                onPress={() => {
+                  dialogControl.close()
+                  onRepost()
+                }}
+                size="large"
+                variant="outline">
+                <ButtonIcon
+                  icon={Repost}
+                  size="lg"
+                  color={t.palette.primary_500}
+                />
+                <ButtonText style={a.text_xl}>
+                  {isReposted
+                    ? _(msg`Remove repost`)
+                    : _(msg({message: `Repost`, context: 'action'}))}
+                </ButtonText>
+              </Button>
+              <Button
+                style={[a.justify_start, a.px_sm]}
+                label={_(msg`Quote post`)}
+                onPress={() => {
+                  dialogControl.close()
+                  onQuote()
+                }}
+                size="large"
+                variant="outline">
+                <ButtonIcon
+                  icon={Quote}
+                  size="lg"
+                  color={t.palette.primary_500}
+                />
+                <ButtonText style={a.text_xl}>{_(msg`Quote post`)}</ButtonText>
+              </Button>
+            </View>
+            <Button
+              label={_(msg`Cancel quote post`)}
+              onAccessibilityEscape={() => dialogControl.close()}
+              onPress={() => dialogControl.close()}
+              size="medium"
+              variant="solid"
+              color="primary">
+              <ButtonText>{_(msg`Cancel`)}</ButtonText>
+            </Button>
+          </View>
+        </Dialog.Inner>
+      </Dialog.Outer>
+    </>
   )
 }
 RepostButton = memo(RepostButton)
 export {RepostButton}
-
-const styles = StyleSheet.create({
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  btnPad: {
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 5,
-    paddingRight: 5,
-  },
-  reposted: {
-    color: colors.green3,
-  },
-  repostCount: {
-    color: 'currentColor',
-  },
-})
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index ca546be9a2..85022f1b0e 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -7,7 +7,7 @@ import {useRequireAuth} from '#/state/session'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {OpenQuote_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
-import {Repost_Stroke2_Corner0_Rounded as Repost} from '#/components/icons/Repost'
+import {Repost_Stroke2_Corner3_Rounded as Repost} from '#/components/icons/Repost'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
 import {EventStopper} from '../EventStopper'
@@ -15,7 +15,6 @@ import {EventStopper} from '../EventStopper'
 interface Props {
   isReposted: boolean
   repostCount?: number
-  big?: boolean
   onRepost: () => void
   onQuote: () => void
   style?: StyleProp<ViewStyle>
@@ -24,7 +23,6 @@ interface Props {
 export const RepostButton = ({
   isReposted,
   repostCount,
-  big,
   onRepost,
   onQuote,
 }: Props) => {
@@ -51,17 +49,12 @@ export const RepostButton = ({
                 style={[
                   a.rounded_full,
                   (state.hovered || state.pressed) && {
-                    backgroundColor: t.palette.positive_100,
+                    backgroundColor: t.palette.contrast_50,
                   },
                 ]}>
                 <RepostInner
-                  big={big}
                   isReposted={isReposted}
-                  color={
-                    state.hovered || state.pressed
-                      ? {color: t.palette.positive_600}
-                      : color
-                  }
+                  color={color}
                   repostCount={repostCount}
                 />
               </Pressable>
@@ -97,7 +90,6 @@ export const RepostButton = ({
       accessibilityLabel={_(msg`Repost or quote post`)}
       accessibilityHint="">
       <RepostInner
-        big={big}
         isReposted={isReposted}
         color={color}
         repostCount={repostCount}
@@ -107,18 +99,16 @@ export const RepostButton = ({
 }
 
 const RepostInner = ({
-  big,
   isReposted,
   color,
   repostCount,
 }: {
-  big?: boolean
   isReposted: boolean
   color: {color: string}
   repostCount?: number
 }) => (
   <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
-    <Repost size={big ? 'lg' : 'md'} style={color} />
+    <Repost style={color} />
     {typeof repostCount !== 'undefined' && repostCount > 0 ? (
       <Text
         testID="repostCount"

From 4cd4a782f47c182a19153b0fd9fea3816d18f299 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 15:53:40 +0100
Subject: [PATCH 04/17] add missing padding to share button

---
 src/view/com/util/post-ctrls/PostCtrls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 02eb5bcb82..21f12c030a 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -220,7 +220,6 @@ let PostCtrls = ({
       </View>
       <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
         <RepostButton
-          big={big}
           isReposted={!!post.viewer?.repost}
           repostCount={post.repostCount}
           onRepost={onRepost}
@@ -270,6 +269,7 @@ let PostCtrls = ({
           <View style={a.align_center}>
             <Button
               testID="shareBtn"
+              style={{padding: 5}}
               onPress={() => {
                 if (shouldShowLoggedOutWarning) {
                   loggedOutWarningPromptControl.open()

From f77e231da5857217e7b1a7d8858bb197321fad79 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 20:24:27 +0100
Subject: [PATCH 05/17] refine buttons and use better icons

---
 .../closeQuote_stroke2_corner1_rounded.svg    |   1 +
 src/components/icons/Quote.tsx                |   4 +
 src/components/icons/Repost.tsx               |   4 +
 src/view/com/post-thread/PostThreadItem.tsx   |   4 +-
 src/view/com/util/forms/PostDropdownBtn.tsx   |  10 +-
 src/view/com/util/post-ctrls/PostCtrls.tsx    | 108 ++++++++++--------
 src/view/com/util/post-ctrls/RepostButton.tsx |   8 +-
 .../com/util/post-ctrls/RepostButton.web.tsx  |  15 ++-
 8 files changed, 94 insertions(+), 60 deletions(-)
 create mode 100644 assets/icons/closeQuote_stroke2_corner1_rounded.svg

diff --git a/assets/icons/closeQuote_stroke2_corner1_rounded.svg b/assets/icons/closeQuote_stroke2_corner1_rounded.svg
new file mode 100644
index 0000000000..b27eb94f23
--- /dev/null
+++ b/assets/icons/closeQuote_stroke2_corner1_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2.003 5.999a2 2 0 0 1 2-1.999h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936a1 1 0 0 1-1.351-.935L5 14H4a2 2 0 0 1-2-2.001l.002-6Zm5 11.236L7 12.999A1 1 0 0 0 6 12H4l.003-6h5v7c0 1.915-.837 3.165-1.683 3.958-.106.1-.213.192-.317.277Zm6-11.235a2 2 0 0 1 2-2h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-1a2 2 0 0 1-2-2V6Zm7 0h-5v6h2a1 1 0 0 1 1 1v4.234c.105-.085.211-.177.317-.276.846-.793 1.684-2.043 1.684-3.958V6Z" clip-rule="evenodd"/></svg>
diff --git a/src/components/icons/Quote.tsx b/src/components/icons/Quote.tsx
index cfecb9b92d..ec53cfc460 100644
--- a/src/components/icons/Quote.tsx
+++ b/src/components/icons/Quote.tsx
@@ -12,6 +12,10 @@ export const CloseQuote_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M2.004 5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936A1 1 0 0 1 5.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234c.104-.085.21-.177.316-.276.846-.793 1.684-2.043 1.684-3.958V6h-5v6h2a1 1 0 0 1 1 1v4.234Zm6-12.234a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234V13a1 1 0 0 0-1-1h-2V6h5v7c0 1.915-.838 3.165-1.684 3.958-.106.1-.212.191-.316.276Z',
 })
 
+export const CloseQuote_Stroke2_Corner1_Rounded = createSinglePathSVG({
+  path: 'M2.003 5.999a2 2 0 0 1 2-1.999h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936a1 1 0 0 1-1.351-.935L5 14H4a2 2 0 0 1-2-2.001l.002-6Zm5 11.236L7 12.999A1 1 0 0 0 6 12H4l.003-6h5v7c0 1.915-.837 3.165-1.683 3.958-.106.1-.213.192-.317.277Zm6-11.235a2 2 0 0 1 2-2h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-1a2 2 0 0 1-2-2V6Zm7 0h-5v6h2a1 1 0 0 1 1 1v4.234c.105-.085.211-.177.317-.276.846-.793 1.684-2.043 1.684-3.958V6Z',
+})
+
 export const CloseQuote_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M3.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7ZM14.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7Z',
 })
diff --git a/src/components/icons/Repost.tsx b/src/components/icons/Repost.tsx
index c18551617c..01214bca71 100644
--- a/src/components/icons/Repost.tsx
+++ b/src/components/icons/Repost.tsx
@@ -4,6 +4,10 @@ export const Repost_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H5v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1h13.586l-1.293-1.293a1 1 0 0 1 0-1.414ZM21 13v5a1 1 0 0 1-1 1H6.414l1.293 1.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 0 1 1.414 1.414L6.414 17H19v-4a1 1 0 1 1 2 0Z',
 })
 
+export const Repost_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M17.957 2.293a1 1 0 1 0-1.414 1.414L17.836 5H6a3 3 0 0 0-3 3v3a1 1 0 1 0 2 0V8a1 1 0 0 1 1-1h11.836l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.47-2.47a1.75 1.75 0 0 0 0-2.474l-2.47-2.47ZM20 12a1 1 0 0 1 1 1v3a3 3 0 0 1-3 3H6.164l1.293 1.293a1 1 0 1 1-1.414 1.414l-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47a1 1 0 0 1 1.414 1.414L6.164 17H18a1 1 0 0 0 1-1v-3a1 1 0 0 1 1-1Z',
+})
+
 export const Repost_Stroke2_Corner3_Rounded = createSinglePathSVG({
   path: 'M16.793 2.293a1 1 0 0 1 1.414 0L20.5 4.586a2 2 0 0 1 0 2.828l-2.293 2.293a1 1 0 0 1-1.414-1.414L18.086 7H7a2 2 0 0 0-2 2v2a1 1 0 1 1-2 0V9a4 4 0 0 1 4-4h11.086l-1.293-1.293a1 1 0 0 1 0-1.414ZM20 12a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H5.914l1.293 1.293a1 1 0 1 1-1.414 1.414L3.5 19.414a2 2 0 0 1 0-2.828l2.293-2.293a1 1 0 0 1 1.414 1.414L5.914 17H17a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1Z',
 })
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 548b73af6c..0ff040b9c8 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -367,7 +367,7 @@ let PostThreadItemLoaded = ({
                 ) : null}
               </View>
             ) : null}
-            <View style={[s.pl10, s.pr10, s.pb5]}>
+            <View style={[s.pl10, s.pr10]}>
               <PostCtrls
                 big
                 post={post}
@@ -733,7 +733,7 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderBottomWidth: 1,
     marginTop: 5,
-    marginBottom: 15,
+    marginBottom: 10,
   },
   expandedInfoItem: {
     marginRight: 10,
diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx
index 249e667ed1..d30449f351 100644
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@@ -1,5 +1,10 @@
 import React, {memo} from 'react'
-import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
 import * as Clipboard from 'expo-clipboard'
 import {
   AppBskyActorDefs,
@@ -68,6 +73,7 @@ let PostDropdownBtn = ({
   richText,
   style,
   hitSlop,
+  size,
   timestamp,
 }: {
   testID: string
@@ -79,6 +85,7 @@ let PostDropdownBtn = ({
   richText: RichTextAPI
   style?: StyleProp<ViewStyle>
   hitSlop?: PressableProps['hitSlop']
+  size?: 'lg' | 'md' | 'sm'
   timestamp: string
 }): React.ReactNode => {
   const {hasSession, currentAccount} = useSession()
@@ -244,6 +251,7 @@ let PostDropdownBtn = ({
                 <DotsHorizontal
                   fill={defaultCtrlColor}
                   style={{pointerEvents: 'none'}}
+                  size={size}
                 />
               </Pressable>
             )
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 21f12c030a..91ccda88eb 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -1,5 +1,11 @@
 import React, {memo, useCallback} from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {
+  Pressable,
+  type PressableStateCallbackType,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {
   AppBskyFeedDefs,
   AppBskyFeedPost,
@@ -15,7 +21,6 @@ import {makeProfileLink} from '#/lib/routes/links'
 import {shareUrl} from '#/lib/sharing'
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {s} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
 import {Shadow} from '#/state/cache/types'
 import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useModalControls} from '#/state/modals'
@@ -25,11 +30,10 @@ import {
 } from '#/state/queries/post'
 import {useRequireAuth} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
-import {atoms as a} from '#/alf'
-import {Button} from '#/components/Button'
+import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
-import {Bubble_Stroke2_Corner3_Rounded as Bubble} from '#/components/icons/Bubble'
+import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
 import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
   Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
@@ -58,7 +62,7 @@ let PostCtrls = ({
   onPressReply: () => void
   logContext: 'FeedItem' | 'PostThreadItem' | 'Post'
 }): React.ReactNode => {
-  const theme = useTheme()
+  const t = useTheme()
   const {_} = useLingui()
   const {openComposer} = useComposerControls()
   const {closeModal} = useModalControls()
@@ -80,9 +84,9 @@ let PostCtrls = ({
 
   const defaultCtrlColor = React.useMemo(
     () => ({
-      color: theme.palette.default.postCtrl,
+      color: t.palette.contrast_500,
     }),
-    [theme],
+    [t],
   ) as StyleProp<ViewStyle>
 
   const onPressToggleLike = React.useCallback(async () => {
@@ -185,38 +189,45 @@ let PostCtrls = ({
     })
   }, [post.uri, post.author, sendInteraction, feedContext])
 
+  const btnStyle = React.useCallback(
+    ({pressed, hovered}: PressableStateCallbackType) => [
+      a.gap_xs,
+      a.rounded_full,
+      a.flex_row,
+      a.align_center,
+      a.justify_center,
+      {padding: 5},
+      (pressed || hovered) && t.atoms.bg_contrast_50,
+    ],
+    [t.atoms.bg_contrast_50],
+  )
+
   return (
     <View style={[a.flex_row, a.justify_between, a.align_center, style]}>
       <View
         style={[
-          big ? a.align_center : [a.flex_1, a.align_start],
+          big ? a.align_center : [a.flex_1, a.align_start, {marginLeft: -5}],
           post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
         ]}>
-        <Button
+        <Pressable
           testID="replyBtn"
-          style={{padding: 5, marginLeft: -5}}
+          style={btnStyle}
           onPress={() => {
             if (!post.viewer?.replyDisabled) {
               requireAuth(() => onPressReply())
             }
           }}
-          label={plural(post.replyCount || 0, {
+          accessibilityLabel={plural(post.replyCount || 0, {
             one: 'Reply (# reply)',
             other: 'Reply (# replies)',
           })}
-          shape="round"
-          variant="ghost"
-          color="secondary">
-          <Bubble
-            style={[defaultCtrlColor, big ? s.mt2 : {marginTop: 1}]}
-            size="md"
-          />
+          accessibilityHint=""
+          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+          <Bubble style={defaultCtrlColor} size={big ? 'lg' : 'md'} />
           {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
-            <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
-              {post.replyCount}
-            </Text>
+            <Text style={[defaultCtrlColor, a.text_md]}>{post.replyCount}</Text>
           ) : undefined}
-        </Button>
+        </Pressable>
       </View>
       <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
         <RepostButton
@@ -224,14 +235,15 @@ let PostCtrls = ({
           repostCount={post.repostCount}
           onRepost={onRepost}
           onQuote={onQuote}
+          size={big ? 'lg' : 'md'}
         />
       </View>
       <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
-        <Button
+        <Pressable
           testID="likeBtn"
-          style={{padding: 5}}
+          style={btnStyle}
           onPress={() => requireAuth(() => onPressToggleLike())}
-          label={post.viewer?.like
+          accessibilityLabel={post.viewer?.like
             ? plural(post.likeCount || 0, {
                 one: 'Unlike (# like)',
                 other: 'Unlike (# likes)',
@@ -240,36 +252,38 @@ let PostCtrls = ({
                 one: 'Like (# like)',
                 other: 'Like (# likes)',
               })}
-          shape="round"
-          variant="ghost"
-          color="secondary">
+          accessibilityHint=""
+          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
           {post.viewer?.like ? (
-            <HeartIconFilled style={s.likeColor} size="md" />
+            <HeartIconFilled style={s.likeColor} size={big ? 'lg' : 'md'} />
           ) : (
             <HeartIconOutline
-              style={[defaultCtrlColor, big ? {marginTop: 1} : undefined]}
-              size="md"
+              style={defaultCtrlColor}
+              size={big ? 'lg' : 'md'}
             />
           )}
           {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
             <Text
               testID="likeCount"
-              style={
-                post.viewer?.like
-                  ? [s.bold, s.likeColor, s.f15, s.ml5]
-                  : [defaultCtrlColor, s.f15, s.ml5]
-              }>
+              style={[
+                [
+                  a.text_md,
+                  post.viewer?.like
+                    ? [a.font_bold, s.likeColor]
+                    : defaultCtrlColor,
+                ],
+              ]}>
               {post.likeCount}
             </Text>
           ) : undefined}
-        </Button>
+        </Pressable>
       </View>
       {big && (
         <>
           <View style={a.align_center}>
-            <Button
+            <Pressable
               testID="shareBtn"
-              style={{padding: 5}}
+              style={btnStyle}
               onPress={() => {
                 if (shouldShowLoggedOutWarning) {
                   loggedOutWarningPromptControl.open()
@@ -277,15 +291,11 @@ let PostCtrls = ({
                   onShare()
                 }
               }}
-              label={_(msg`Share`)}
-              shape="round"
-              variant="ghost"
-              color="secondary">
-              <ArrowOutOfBox
-                style={[defaultCtrlColor, {marginTop: 1}]}
-                size="md"
-              />
-            </Button>
+              accessibilityLabel={_(msg`Share`)}
+              accessibilityHint=""
+              hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+              <ArrowOutOfBox style={defaultCtrlColor} size="lg" />
+            </Pressable>
           </View>
           <Prompt.Basic
             control={loggedOutWarningPromptControl}
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 139dd34d97..5eb262038e 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -7,8 +7,8 @@ import {useRequireAuth} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {OpenQuote_Filled_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
-import {Repost_Stroke2_Corner3_Rounded as Repost} from '#/components/icons/Repost'
+import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
+import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import {Text} from '#/components/Typography'
 
 interface Props {
@@ -16,6 +16,7 @@ interface Props {
   repostCount?: number
   onRepost: () => void
   onQuote: () => void
+  size?: 'lg' | 'md' | 'sm'
 }
 
 let RepostButton = ({
@@ -23,6 +24,7 @@ let RepostButton = ({
   repostCount,
   onRepost,
   onQuote,
+  size,
 }: Props): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
@@ -52,7 +54,7 @@ let RepostButton = ({
         shape="round"
         variant="ghost"
         color="secondary">
-        <Repost style={color} />
+        <Repost style={color} size={size} />
         {typeof repostCount !== 'undefined' && repostCount > 0 ? (
           <Text
             testID="repostCount"
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index 85022f1b0e..ba3f5cdc1b 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useRequireAuth} from '#/state/session'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {OpenQuote_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
-import {Repost_Stroke2_Corner3_Rounded as Repost} from '#/components/icons/Repost'
+import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
+import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
 import {EventStopper} from '../EventStopper'
@@ -17,7 +17,7 @@ interface Props {
   repostCount?: number
   onRepost: () => void
   onQuote: () => void
-  style?: StyleProp<ViewStyle>
+  size?: 'lg' | 'md' | 'sm'
 }
 
 export const RepostButton = ({
@@ -25,6 +25,7 @@ export const RepostButton = ({
   repostCount,
   onRepost,
   onQuote,
+  size,
 }: Props) => {
   const t = useTheme()
   const {_} = useLingui()
@@ -56,6 +57,7 @@ export const RepostButton = ({
                   isReposted={isReposted}
                   color={color}
                   repostCount={repostCount}
+                  size={size}
                 />
               </Pressable>
             )
@@ -93,6 +95,7 @@ export const RepostButton = ({
         isReposted={isReposted}
         color={color}
         repostCount={repostCount}
+        size={size}
       />
     </Pressable>
   )
@@ -102,13 +105,15 @@ const RepostInner = ({
   isReposted,
   color,
   repostCount,
+  size,
 }: {
   isReposted: boolean
   color: {color: string}
   repostCount?: number
+  size?: 'lg' | 'md' | 'sm'
 }) => (
   <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
-    <Repost style={color} />
+    <Repost style={color} size={size} />
     {typeof repostCount !== 'undefined' && repostCount > 0 ? (
       <Text
         testID="repostCount"

From 14047a292125bc2c52aadf6ebeb1f7e12f7141b2 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 21:46:31 +0100
Subject: [PATCH 06/17] revert buttonicon changes

---
 src/components/Button.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 4b9ed17324..a008c8605c 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -533,12 +533,10 @@ export function ButtonIcon({
   icon: Comp,
   position,
   size: iconSize,
-  color,
 }: {
   icon: React.ComponentType<SVGIconProps>
   position?: 'left' | 'right'
   size?: SVGIconProps['size']
-  color?: string
 }) {
   const {size, disabled} = useButtonContext()
   const textStyles = useSharedButtonTextStyles()
@@ -557,7 +555,7 @@ export function ButtonIcon({
         size={
           iconSize ?? (size === 'large' ? 'md' : size === 'tiny' ? 'xs' : 'sm')
         }
-        style={[{color: color ?? textStyles.color, pointerEvents: 'none'}]}
+        style={[{color: textStyles.color, pointerEvents: 'none'}]}
       />
     </View>
   )

From 732218bafeae651788920228a374c00c39417806 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 21:49:40 +0100
Subject: [PATCH 07/17] remove ButtonIcon and ButtonText from repost dialog

---
 src/view/com/util/post-ctrls/RepostButton.tsx | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 5eb262038e..411a08fa93 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
 
 import {useRequireAuth} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
@@ -81,16 +81,12 @@ let RepostButton = ({
                 }}
                 size="large"
                 variant="outline">
-                <ButtonIcon
-                  icon={Repost}
-                  size="lg"
-                  color={t.palette.primary_500}
-                />
-                <ButtonText style={a.text_xl}>
+                <Repost size="lg" fill={t.palette.primary_500} />
+                <Text style={[a.font_bold, a.text_xl]}>
                   {isReposted
                     ? _(msg`Remove repost`)
                     : _(msg({message: `Repost`, context: 'action'}))}
-                </ButtonText>
+                </Text>
               </Button>
               <Button
                 style={[a.justify_start, a.px_sm]}
@@ -101,12 +97,10 @@ let RepostButton = ({
                 }}
                 size="large"
                 variant="outline">
-                <ButtonIcon
-                  icon={Quote}
-                  size="lg"
-                  color={t.palette.primary_500}
-                />
-                <ButtonText style={a.text_xl}>{_(msg`Quote post`)}</ButtonText>
+                <Quote size="lg" fill={t.palette.primary_500} />
+                <Text style={[a.font_bold, a.text_xl]}>
+                  {_(msg`Quote post`)}
+                </Text>
               </Button>
             </View>
             <Button

From 07d822129880d8f87d75f608632f8786eb18d896 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Apr 2024 22:17:15 +0100
Subject: [PATCH 08/17] use 15px font size when not big

---
 src/view/com/util/post-ctrls/PostCtrls.tsx        | 6 ++++--
 src/view/com/util/post-ctrls/RepostButton.tsx     | 6 +++++-
 src/view/com/util/post-ctrls/RepostButton.web.tsx | 6 +++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 91ccda88eb..15abdeb548 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -225,7 +225,9 @@ let PostCtrls = ({
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
           <Bubble style={defaultCtrlColor} size={big ? 'lg' : 'md'} />
           {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
-            <Text style={[defaultCtrlColor, a.text_md]}>{post.replyCount}</Text>
+            <Text style={[defaultCtrlColor, big ? a.text_md : {fontSize: 15}]}>
+              {post.replyCount}
+            </Text>
           ) : undefined}
         </Pressable>
       </View>
@@ -267,7 +269,7 @@ let PostCtrls = ({
               testID="likeCount"
               style={[
                 [
-                  a.text_md,
+                  big ? a.text_md : {fontSize: 15},
                   post.viewer?.like
                     ? [a.font_bold, s.likeColor]
                     : defaultCtrlColor,
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 411a08fa93..3417c881b4 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -58,7 +58,11 @@ let RepostButton = ({
         {typeof repostCount !== 'undefined' && repostCount > 0 ? (
           <Text
             testID="repostCount"
-            style={[color, a.text_md, isReposted && a.font_bold]}>
+            style={[
+              color,
+              size === 'lg' ? a.text_md : {fontSize: 15},
+              isReposted && a.font_bold,
+            ]}>
             {repostCount}
           </Text>
         ) : undefined}
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index ba3f5cdc1b..834c4b3498 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -117,7 +117,11 @@ const RepostInner = ({
     {typeof repostCount !== 'undefined' && repostCount > 0 ? (
       <Text
         testID="repostCount"
-        style={[color, a.text_md, isReposted && [a.font_bold]]}>
+        style={[
+          color,
+          size === 'lg' ? a.text_md : {fontSize: 15},
+          isReposted && [a.font_bold],
+        ]}>
         {repostCount}
       </Text>
     ) : undefined}

From 48b81300f4738377192dcd794e5cc3917214927f Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 23 Apr 2024 18:07:00 +0100
Subject: [PATCH 09/17] reduce size and use contrast_25

---
 src/components/Button.tsx                     |  6 ++++-
 src/view/com/util/forms/PostDropdownBtn.tsx   |  2 +-
 src/view/com/util/post-ctrls/PostCtrls.tsx    | 22 ++++++++++++-------
 src/view/com/util/post-ctrls/RepostButton.tsx | 19 +++++++++-------
 .../com/util/post-ctrls/RepostButton.web.tsx  |  2 +-
 5 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a008c8605c..3db8033997 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -71,6 +71,7 @@ export type ButtonProps = Pick<
     testID?: string
     label: string
     style?: StyleProp<ViewStyle>
+    hoverStyle?: StyleProp<ViewStyle>
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
   }
 
@@ -96,6 +97,7 @@ export function Button({
   label,
   disabled = false,
   style,
+  hoverStyle: hoverStyleProp,
   ...rest
 }: ButtonProps) {
   const t = useTheme()
@@ -374,7 +376,9 @@ export function Button({
         a.align_center,
         a.justify_center,
         flattenedBaseStyles,
-        ...(state.hovered || state.pressed ? hoverStyles : []),
+        ...(state.hovered || state.pressed
+          ? [hoverStyles, flatten(hoverStyleProp)]
+          : []),
         flatten(style),
       ]}
       onPressIn={onPressIn}
diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx
index d30449f351..cd82ec98f0 100644
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@@ -245,7 +245,7 @@ let PostDropdownBtn = ({
                   style,
                   a.rounded_full,
                   (state.hovered || state.pressed) && [
-                    alf.atoms.bg_contrast_50,
+                    alf.atoms.bg_contrast_25,
                   ],
                 ]}>
                 <DotsHorizontal
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 15abdeb548..256511f1ea 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -197,9 +197,9 @@ let PostCtrls = ({
       a.align_center,
       a.justify_center,
       {padding: 5},
-      (pressed || hovered) && t.atoms.bg_contrast_50,
+      (pressed || hovered) && t.atoms.bg_contrast_25,
     ],
-    [t.atoms.bg_contrast_50],
+    [t.atoms.bg_contrast_25],
   )
 
   return (
@@ -223,7 +223,10 @@ let PostCtrls = ({
           })}
           accessibilityHint=""
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-          <Bubble style={defaultCtrlColor} size={big ? 'lg' : 'md'} />
+          <Bubble
+            style={[defaultCtrlColor, {pointerEvents: 'none'}]}
+            height={big ? 22 : 18}
+          />
           {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
             <Text style={[defaultCtrlColor, big ? a.text_md : {fontSize: 15}]}>
               {post.replyCount}
@@ -237,7 +240,7 @@ let PostCtrls = ({
           repostCount={post.repostCount}
           onRepost={onRepost}
           onQuote={onQuote}
-          size={big ? 'lg' : 'md'}
+          big={big}
         />
       </View>
       <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
@@ -257,11 +260,11 @@ let PostCtrls = ({
           accessibilityHint=""
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
           {post.viewer?.like ? (
-            <HeartIconFilled style={s.likeColor} size={big ? 'lg' : 'md'} />
+            <HeartIconFilled style={s.likeColor} height={big ? 22 : 18} />
           ) : (
             <HeartIconOutline
-              style={defaultCtrlColor}
-              size={big ? 'lg' : 'md'}
+              style={[defaultCtrlColor, {pointerEvents: 'none'}]}
+              height={big ? 22 : 18}
             />
           )}
           {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
@@ -296,7 +299,10 @@ let PostCtrls = ({
               accessibilityLabel={_(msg`Share`)}
               accessibilityHint=""
               hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-              <ArrowOutOfBox style={defaultCtrlColor} size="lg" />
+              <ArrowOutOfBox
+                style={[defaultCtrlColor, {pointerEvents: 'none'}]}
+                height={22}
+              />
             </Pressable>
           </View>
           <Prompt.Basic
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 3417c881b4..1efa0eb451 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -16,7 +16,7 @@ interface Props {
   repostCount?: number
   onRepost: () => void
   onQuote: () => void
-  size?: 'lg' | 'md' | 'sm'
+  big?: boolean
 }
 
 let RepostButton = ({
@@ -24,7 +24,7 @@ let RepostButton = ({
   repostCount,
   onRepost,
   onQuote,
-  size,
+  big,
 }: Props): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
@@ -46,6 +46,7 @@ let RepostButton = ({
           requireAuth(() => dialogControl.open())
         }}
         style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}
+        hoverStyle={t.atoms.bg_contrast_25}
         label={`${
           isReposted
             ? _(msg`Undo repost`)
@@ -54,13 +55,13 @@ let RepostButton = ({
         shape="round"
         variant="ghost"
         color="secondary">
-        <Repost style={color} size={size} />
+        <Repost style={color} height={big ? 22 : 18} />
         {typeof repostCount !== 'undefined' && repostCount > 0 ? (
           <Text
             testID="repostCount"
             style={[
               color,
-              size === 'lg' ? a.text_md : {fontSize: 15},
+              big ? a.text_md : {fontSize: 15},
               isReposted && a.font_bold,
             ]}>
             {repostCount}
@@ -73,7 +74,7 @@ let RepostButton = ({
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
               <Button
-                style={[a.justify_start, a.px_sm]}
+                style={[a.justify_start, a.px_md]}
                 label={
                   isReposted
                     ? _(msg`Remove repost`)
@@ -84,7 +85,8 @@ let RepostButton = ({
                   onRepost()
                 }}
                 size="large"
-                variant="outline">
+                variant="ghost"
+                color="primary">
                 <Repost size="lg" fill={t.palette.primary_500} />
                 <Text style={[a.font_bold, a.text_xl]}>
                   {isReposted
@@ -93,14 +95,15 @@ let RepostButton = ({
                 </Text>
               </Button>
               <Button
-                style={[a.justify_start, a.px_sm]}
+                style={[a.justify_start, a.px_md]}
                 label={_(msg`Quote post`)}
                 onPress={() => {
                   dialogControl.close()
                   onQuote()
                 }}
                 size="large"
-                variant="outline">
+                variant="ghost"
+                color="primary">
                 <Quote size="lg" fill={t.palette.primary_500} />
                 <Text style={[a.font_bold, a.text_xl]}>
                   {_(msg`Quote post`)}
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index 834c4b3498..9f05f684e5 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -50,7 +50,7 @@ export const RepostButton = ({
                 style={[
                   a.rounded_full,
                   (state.hovered || state.pressed) && {
-                    backgroundColor: t.palette.contrast_50,
+                    backgroundColor: t.palette.contrast_25,
                   },
                 ]}>
                 <RepostInner

From 1f13bfd8ae906325977c43ef4e3f2e0a1a09dba0 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 23 Apr 2024 18:15:36 +0100
Subject: [PATCH 10/17] add hover state to logged out view

---
 src/view/com/util/post-ctrls/RepostButton.web.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index 9f05f684e5..430739fb73 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -6,6 +6,7 @@ import {useLingui} from '@lingui/react'
 import {useRequireAuth} from '#/state/session'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import * as Menu from '#/components/Menu'
@@ -84,20 +85,23 @@ export const RepostButton = ({
       </Menu.Root>
     </EventStopper>
   ) : (
-    <Pressable
-      accessibilityRole="button"
+    <Button
       onPress={() => {
         requireAuth(() => {})
       }}
-      accessibilityLabel={_(msg`Repost or quote post`)}
-      accessibilityHint="">
+      label={_(msg`Repost or quote post`)}
+      style={{padding: 0}}
+      hoverStyle={t.atoms.bg_contrast_25}
+      shape="round"
+      variant="ghost"
+      color="secondary">
       <RepostInner
         isReposted={isReposted}
         color={color}
         repostCount={repostCount}
         size={size}
       />
-    </Pressable>
+    </Button>
   )
 }
 

From 6bbe713423985eefc356407c7a1908e553852ba3 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 23 Apr 2024 18:24:09 +0100
Subject: [PATCH 11/17] add `userSelect: 'none'` to buttons

---
 src/alf/atoms.ts                                  | 11 ++++++++++-
 src/view/com/util/post-ctrls/PostCtrls.tsx        |  8 +++++++-
 src/view/com/util/post-ctrls/RepostButton.web.tsx |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 3e5ddf049b..158bb6ec5b 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -841,7 +841,7 @@ export const atoms = {
     marginRight: 'auto',
   },
   /*
-   * Pointer events
+   * Pointer events & user select
    */
   pointer_events_none: {
     pointerEvents: 'none',
@@ -849,6 +849,15 @@ export const atoms = {
   pointer_events_auto: {
     pointerEvents: 'auto',
   },
+  user_select_none: {
+    userSelect: 'none',
+  },
+  user_select_text: {
+    userSelect: 'text',
+  },
+  user_select_all: {
+    userSelect: 'all',
+  },
   /*
    * Text decoration
    */
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 256511f1ea..6aab2a9a04 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -228,7 +228,12 @@ let PostCtrls = ({
             height={big ? 22 : 18}
           />
           {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
-            <Text style={[defaultCtrlColor, big ? a.text_md : {fontSize: 15}]}>
+            <Text
+              style={[
+                defaultCtrlColor,
+                big ? a.text_md : {fontSize: 15},
+                a.user_select_none,
+              ]}>
               {post.replyCount}
             </Text>
           ) : undefined}
@@ -273,6 +278,7 @@ let PostCtrls = ({
               style={[
                 [
                   big ? a.text_md : {fontSize: 15},
+                  a.user_select_none,
                   post.viewer?.like
                     ? [a.font_bold, s.likeColor]
                     : defaultCtrlColor,
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index 430739fb73..17cb1217a0 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -125,6 +125,7 @@ const RepostInner = ({
           color,
           size === 'lg' ? a.text_md : {fontSize: 15},
           isReposted && [a.font_bold],
+          a.user_select_none,
         ]}>
         {repostCount}
       </Text>

From 8a754f9af3f64d65478f35f88fec177956753a4e Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 23 Apr 2024 18:54:01 +0100
Subject: [PATCH 12/17] use width rather than height

---
 src/view/com/util/post-ctrls/PostCtrls.tsx       |  8 ++++----
 src/view/com/util/post-ctrls/RepostButton.tsx    |  2 +-
 .../com/util/post-ctrls/RepostButton.web.tsx     | 16 ++++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 6aab2a9a04..c81e41c0f6 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -225,7 +225,7 @@ let PostCtrls = ({
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
           <Bubble
             style={[defaultCtrlColor, {pointerEvents: 'none'}]}
-            height={big ? 22 : 18}
+            width={big ? 22 : 18}
           />
           {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
             <Text
@@ -265,11 +265,11 @@ let PostCtrls = ({
           accessibilityHint=""
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
           {post.viewer?.like ? (
-            <HeartIconFilled style={s.likeColor} height={big ? 22 : 18} />
+            <HeartIconFilled style={s.likeColor} width={big ? 22 : 18} />
           ) : (
             <HeartIconOutline
               style={[defaultCtrlColor, {pointerEvents: 'none'}]}
-              height={big ? 22 : 18}
+              width={big ? 22 : 18}
             />
           )}
           {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
@@ -307,7 +307,7 @@ let PostCtrls = ({
               hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
               <ArrowOutOfBox
                 style={[defaultCtrlColor, {pointerEvents: 'none'}]}
-                height={22}
+                width={22}
               />
             </Pressable>
           </View>
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 1efa0eb451..49ce6e52df 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -55,7 +55,7 @@ let RepostButton = ({
         shape="round"
         variant="ghost"
         color="secondary">
-        <Repost style={color} height={big ? 22 : 18} />
+        <Repost style={color} width={big ? 22 : 18} />
         {typeof repostCount !== 'undefined' && repostCount > 0 ? (
           <Text
             testID="repostCount"
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index 17cb1217a0..e70077586b 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -18,7 +18,7 @@ interface Props {
   repostCount?: number
   onRepost: () => void
   onQuote: () => void
-  size?: 'lg' | 'md' | 'sm'
+  big?: boolean
 }
 
 export const RepostButton = ({
@@ -26,7 +26,7 @@ export const RepostButton = ({
   repostCount,
   onRepost,
   onQuote,
-  size,
+  big,
 }: Props) => {
   const t = useTheme()
   const {_} = useLingui()
@@ -58,7 +58,7 @@ export const RepostButton = ({
                   isReposted={isReposted}
                   color={color}
                   repostCount={repostCount}
-                  size={size}
+                  big={big}
                 />
               </Pressable>
             )
@@ -99,7 +99,7 @@ export const RepostButton = ({
         isReposted={isReposted}
         color={color}
         repostCount={repostCount}
-        size={size}
+        big={big}
       />
     </Button>
   )
@@ -109,21 +109,21 @@ const RepostInner = ({
   isReposted,
   color,
   repostCount,
-  size,
+  big,
 }: {
   isReposted: boolean
   color: {color: string}
   repostCount?: number
-  size?: 'lg' | 'md' | 'sm'
+  big?: boolean
 }) => (
   <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
-    <Repost style={color} size={size} />
+    <Repost style={color} width={big ? 22 : 18} />
     {typeof repostCount !== 'undefined' && repostCount > 0 ? (
       <Text
         testID="repostCount"
         style={[
           color,
-          size === 'lg' ? a.text_md : {fontSize: 15},
+          big ? a.text_md : {fontSize: 15},
           isReposted && [a.font_bold],
           a.user_select_none,
         ]}>

From 7db7320fbe12b2a3474fa165f141662f1c58984c Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 29 May 2024 15:09:17 +0300
Subject: [PATCH 13/17] fix quote close behaviour

---
 src/view/com/util/post-ctrls/RepostButton.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 49ce6e52df..1124cb4059 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -1,4 +1,4 @@
-import React, {memo} from 'react'
+import React, {memo, useCallback} from 'react'
 import {View} from 'react-native'
 import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -38,6 +38,8 @@ let RepostButton = ({
     [t, isReposted],
   )
 
+  const close = useCallback(() => dialogControl.close(), [dialogControl])
+
   return (
     <>
       <Button
@@ -98,8 +100,9 @@ let RepostButton = ({
                 style={[a.justify_start, a.px_md]}
                 label={_(msg`Quote post`)}
                 onPress={() => {
-                  dialogControl.close()
-                  onQuote()
+                  dialogControl.close(() => {
+                    onQuote()
+                  })
                 }}
                 size="large"
                 variant="ghost"
@@ -112,8 +115,8 @@ let RepostButton = ({
             </View>
             <Button
               label={_(msg`Cancel quote post`)}
-              onAccessibilityEscape={() => dialogControl.close()}
-              onPress={() => dialogControl.close()}
+              onAccessibilityEscape={close}
+              onPress={close}
               size="medium"
               variant="solid"
               color="primary">

From 78c94614ad40bf50dad95260b2daf98f8e2f62bd Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 29 May 2024 15:10:36 +0300
Subject: [PATCH 14/17] prettier

---
 src/view/com/util/post-ctrls/PostCtrls.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index c81e41c0f6..2b0220842e 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -253,15 +253,17 @@ let PostCtrls = ({
           testID="likeBtn"
           style={btnStyle}
           onPress={() => requireAuth(() => onPressToggleLike())}
-          accessibilityLabel={post.viewer?.like
-            ? plural(post.likeCount || 0, {
-                one: 'Unlike (# like)',
-                other: 'Unlike (# likes)',
-              })
-            : plural(post.likeCount || 0, {
-                one: 'Like (# like)',
-                other: 'Like (# likes)',
-              })}
+          accessibilityLabel={
+            post.viewer?.like
+              ? plural(post.likeCount || 0, {
+                  one: 'Unlike (# like)',
+                  other: 'Unlike (# likes)',
+                })
+              : plural(post.likeCount || 0, {
+                  one: 'Like (# like)',
+                  other: 'Like (# likes)',
+                })
+          }
           accessibilityHint=""
           hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
           {post.viewer?.like ? (

From 1ec3b293090cfaed5c27db3c8070e7afc06c9cca Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 29 May 2024 22:35:14 +0100
Subject: [PATCH 15/17] Fix Esc on repost

---
 src/view/com/util/post-ctrls/RepostButton.web.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index e70077586b..0898981419 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx
@@ -41,7 +41,7 @@ export const RepostButton = ({
   )
 
   return hasSession ? (
-    <EventStopper>
+    <EventStopper onKeyDown={false}>
       <Menu.Root>
         <Menu.Trigger label={_(msg`Repost or quote post`)}>
           {({props, state}) => {

From 33fb9870cc29c0016357e2d6fdcbc44694d08b24 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 30 May 2024 00:20:37 +0100
Subject: [PATCH 16/17] Use new icons for placeholder

---
 src/view/com/util/LoadingPlaceholder.tsx | 65 ++++++++++++++----------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index 6dfe125985..aa93689de7 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -1,20 +1,20 @@
 import React from 'react'
 import {
-  StyleSheet,
+  DimensionValue,
   StyleProp,
+  StyleSheet,
   View,
   ViewStyle,
-  DimensionValue,
 } from 'react-native'
-import {
-  HeartIcon,
-  HeartIconSolid,
-  CommentBottomArrow,
-  RepostIcon,
-} from 'lib/icons'
+
+import {usePalette} from 'lib/hooks/usePalette'
+import {HeartIconSolid} from 'lib/icons'
 import {s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme as useTheme_NEW} from '#/alf'
+import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
+import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2'
+import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 
 export function LoadingPlaceholder({
   width,
@@ -46,7 +46,7 @@ export function PostLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const theme = useTheme()
+  const t = useTheme_NEW()
   const pal = usePalette('default')
   return (
     <View style={[styles.post, pal.view, style]}>
@@ -67,35 +67,47 @@ export function PostLoadingPlaceholder({
         <LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
         <LoadingPlaceholder width="80%" height={6} style={{marginBottom: 11}} />
         <View style={styles.postCtrls}>
-          <View style={styles.postCtrl}>
-            <View style={[styles.postBtn, {paddingLeft: 0}]}>
-              <CommentBottomArrow
-                style={[{color: theme.palette.default.icon, marginTop: 1}]}
-                strokeWidth={3}
-                size={15}
+          <View style={[styles.postCtrl, {marginLeft: -5}]}>
+            <View style={[styles.postBtn]}>
+              <Bubble
+                style={[
+                  {
+                    color: t.palette.contrast_500,
+                  },
+                  {pointerEvents: 'none', padding: 5},
+                ]}
+                width={18}
               />
             </View>
           </View>
           <View style={styles.postCtrl}>
             <View style={styles.postBtn}>
-              <RepostIcon
-                style={{color: theme.palette.default.icon}}
-                strokeWidth={3}
-                size={20}
+              <Repost
+                style={[
+                  {
+                    color: t.palette.contrast_500,
+                  },
+                  {pointerEvents: 'none', padding: 5},
+                ]}
+                width={18}
               />
             </View>
           </View>
           <View style={styles.postCtrl}>
-            <View style={styles.postBtn}>
-              <HeartIcon
-                style={{color: theme.palette.default.icon} as ViewStyle}
-                size={16}
-                strokeWidth={3}
+            <View style={[styles.postBtn, {padding: 5}]}>
+              <HeartIconOutline
+                style={[
+                  {
+                    color: t.palette.contrast_500,
+                  },
+                  {pointerEvents: 'none'},
+                ]}
+                width={18}
               />
             </View>
           </View>
           <View style={styles.postCtrl}>
-            <View style={styles.postBtn} />
+            <View style={[styles.postBtn, {minHeight: 30, padding: 5}]} />
           </View>
         </View>
       </View>
@@ -290,7 +302,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   postBtn: {
-    padding: 5,
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',

From 4839114f9c9550fefef9afae5c4e00f6b34aeb93 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 30 May 2024 01:16:47 +0100
Subject: [PATCH 17/17] Fix placeholder

---
 src/view/com/util/LoadingPlaceholder.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index aa93689de7..882f7216b0 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -68,13 +68,13 @@ export function PostLoadingPlaceholder({
         <LoadingPlaceholder width="80%" height={6} style={{marginBottom: 11}} />
         <View style={styles.postCtrls}>
           <View style={[styles.postCtrl, {marginLeft: -5}]}>
-            <View style={[styles.postBtn]}>
+            <View style={styles.postBtn}>
               <Bubble
                 style={[
                   {
                     color: t.palette.contrast_500,
                   },
-                  {pointerEvents: 'none', padding: 5},
+                  {pointerEvents: 'none'},
                 ]}
                 width={18}
               />
@@ -87,14 +87,14 @@ export function PostLoadingPlaceholder({
                   {
                     color: t.palette.contrast_500,
                   },
-                  {pointerEvents: 'none', padding: 5},
+                  {pointerEvents: 'none'},
                 ]}
                 width={18}
               />
             </View>
           </View>
           <View style={styles.postCtrl}>
-            <View style={[styles.postBtn, {padding: 5}]}>
+            <View style={styles.postBtn}>
               <HeartIconOutline
                 style={[
                   {
@@ -107,7 +107,7 @@ export function PostLoadingPlaceholder({
             </View>
           </View>
           <View style={styles.postCtrl}>
-            <View style={[styles.postBtn, {minHeight: 30, padding: 5}]} />
+            <View style={[styles.postBtn, {minHeight: 30}]} />
           </View>
         </View>
       </View>
@@ -305,6 +305,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
+    padding: 5,
   },
   avatar: {
     borderRadius: 26,