New compose button

src/components/Button.tsx

@@ -626,9 +626,9 @@ export function useSharedButtonTextStyles() {
     }
 
     if (size === 'large') {
-      baseStyles.push(a.text_md, a.leading_tight, web({paddingTop: 1}))
+      baseStyles.push(a.text_md, a.leading_tight, web({top: -0.4}))
     } else if (size === 'small') {
-      baseStyles.push(a.text_sm, a.leading_tight, web({paddingTop: 1}))
+      baseStyles.push(a.text_sm, a.leading_tight, web({top: -0.4}))
     } else if (size === 'tiny') {
       baseStyles.push(a.text_xs, a.leading_tight)
     }

src/view/shell/desktop/LeftNav.tsx

@@ -18,7 +18,6 @@ import {getCurrentRoute, isStateAtTabRoot, isTab} from '#/lib/routes/helpers'
 import {makeProfileLink} from '#/lib/routes/links'
 import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {isInvalidHandle} from '#/lib/strings/handles'
-import {colors} from '#/lib/styles'
 import {emitSoftReset} from '#/state/events'
 import {useFetchHandle} from '#/state/queries/handle'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-converations'
@@ -32,6 +31,7 @@ import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {
   Bell_Filled_Corner0_Rounded as BellFilled,
   Bell_Stroke2_Corner0_Rounded as Bell,
@@ -294,21 +294,19 @@ function ComposeBtn() {
     return null
   }
   return (
-    <View style={styles.newPostBtnContainer}>
+    <View style={[a.flex_row, a.pl_md, a.pt_xl]}>
-      <TouchableOpacity
+      <Button
         disabled={isFetchingHandle}
-        style={styles.newPostBtn}
+        label={_(msg`New post`)}
         onPress={onPressCompose}
-        accessibilityRole="button"
+        size="large"
-        accessibilityLabel={_(msg`New post`)}
+        variant="gradient"
-        accessibilityHint="">
+        color="gradient_sky">
-        <View style={styles.newPostBtnIconWrapper}>
+        <ButtonIcon icon={EditBig} position="left" />
-          <EditBig width={19} style={styles.newPostBtnLabel} />
+        <ButtonText>
-        </View>
-        <Text type="button" style={styles.newPostBtnLabel}>
           <Trans context="action">New Post</Trans>
-        </Text>
+        </ButtonText>
-      </TouchableOpacity>
+      </Button>
     </View>
   )
 }
@@ -466,31 +464,4 @@ const styles = StyleSheet.create({
     width: 30,
     height: 30,
   },
-
-  newPostBtnContainer: {
-    flexDirection: 'row',
-  },
-  newPostBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 24,
-    paddingTop: 10,
-    paddingBottom: 12, // visually aligns the text vertically inside the button
-    paddingLeft: 16,
-    paddingRight: 18, // looks nicer like this
-    backgroundColor: colors.blue3,
-    marginLeft: 12,
-    marginTop: 20,
-    marginBottom: 10,
-    gap: 8,
-  },
-  newPostBtnIconWrapper: {
-    marginTop: 2, // aligns the icon visually with the text
-  },
-  newPostBtnLabel: {
-    color: colors.white,
-    fontSize: 16,
-    fontWeight: '600',
-  },
 })