Clean up left nav on web (#5488)

* Tweak nav item count style

* Fix nav item icon width and alignment

* Just refactor the thing

* New compose button

* Z index

* Rounded

* Tweak gradient

* Tweak gradient

* Tweak gradient

* Solid

* Adjust position of counter

* Always a circle

4 files changed, 68 insertions, 93 deletions

diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
index 3f30702e8..f3ac17e6a 100644
--- a/src/alf/tokens.ts
+++ b/src/alf/tokens.ts
@@ -60,6 +60,15 @@ export const fontWeight = {
 } as const
 
 export const gradients = {
+  primary: {
+    values: [
+      [0, '#054CFF'],
+      [0.4, '#1085FE'],
+      [0.6, '#1085FE'],
+      [1, '#59B9FF'],
+    ],
+    hover_value: '#1085FE',
+  },
   sky: {
     values: [
       [0, '#0A7AFF'],
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8728b88c2..17179994a 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -24,6 +24,7 @@ export type ButtonColor =
   | 'secondary'
   | 'secondary_inverted'
   | 'negative'
+  | 'gradient_primary'
   | 'gradient_sky'
   | 'gradient_midnight'
   | 'gradient_sunrise'
@@ -412,6 +413,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
           secondary: tokens.gradients.sky,
           secondary_inverted: tokens.gradients.sky,
           negative: tokens.gradients.sky,
+          gradient_primary: tokens.gradients.primary,
           gradient_sky: tokens.gradients.sky,
           gradient_midnight: tokens.gradients.midnight,
           gradient_sunrise: tokens.gradients.sunrise,
@@ -444,7 +446,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       [state, variant, color, size, disabled],
     )
 
-    const flattenedBaseStyles = flatten(baseStyles)
+    const flattenedBaseStyles = flatten([baseStyles, style])
 
     return (
       <Pressable
@@ -464,7 +466,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
           a.align_center,
           a.justify_center,
           flattenedBaseStyles,
-          flatten(style),
           ...(state.hovered || state.pressed
             ? [hoverStyles, flatten(hoverStyleProp)]
             : []),
@@ -626,9 +627,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)
     }
diff --git a/src/logger/index.ts b/src/logger/index.ts
index 98635c6a9..7bd812af0 100644
--- a/src/logger/index.ts
+++ b/src/logger/index.ts
@@ -1,10 +1,10 @@
 import format from 'date-fns/format'
 import {nanoid} from 'nanoid/non-secure'
 
+import {isNetworkError} from '#/lib/strings/errors'
 import {DebugContext} from '#/logger/debugContext'
 import {add} from '#/logger/logDump'
 import {Sentry} from '#/logger/sentry'
-import {isNetworkError} from 'lib/strings/errors'
 import * as env from '#/env'
 
 export enum LogLevel {
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index c36c4ae75..ecd00a919 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/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, s} from '#/lib/styles'
 import {emitSoftReset} from '#/state/events'
 import {useFetchHandle} from '#/state/queries/handle'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-converations'
@@ -29,9 +28,10 @@ import {useComposerControls} from '#/state/shell/composer'
 import {Link} from '#/view/com/util/Link'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
-import {Text} from '#/view/com/util/text/Text'
 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,
@@ -63,6 +63,7 @@ import {
   UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
   UserCircle_Stroke2_Corner0_Rounded as UserCircle,
 } from '#/components/icons/UserCircle'
+import {Text} from '#/components/Typography'
 import {router} from '../../../routes'
 
 const NAV_ICON_WIDTH = 28
@@ -149,9 +150,10 @@ interface NavItemProps {
   label: string
 }
 function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {currentAccount} = useSession()
-  const {isDesktop, isTablet} = useWebMediaQueries()
+  const {gtMobile, gtTablet} = useBreakpoints()
+  const isTablet = gtMobile && !gtTablet
   const [pathName] = React.useMemo(() => router.matchPath(href), [href])
   const currentRouteInfo = useNavigationState(state => {
     if (!state) {
@@ -183,8 +185,8 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
 
   return (
     <PressableWithHover
-      style={styles.navItemWrapper}
-      hoverStyle={pal.viewLight}
+      style={[a.flex_row, a.align_center, a.p_md, a.rounded_sm, a.gap_sm]}
+      hoverStyle={t.atoms.bg_contrast_25}
       // @ts-ignore the function signature differs on web -prf
       onPress={onPressWrapped}
       // @ts-ignore web only -prf
@@ -195,23 +197,50 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
       accessibilityHint="">
       <View
         style={[
-          styles.navItemIconWrapper,
-          isTablet && styles.navItemIconWrapperTablet,
+          a.align_center,
+          a.justify_center,
+          a.z_10,
+          {
+            width: 24,
+            height: 24,
+          },
+          isTablet && {
+            width: 40,
+            height: 40,
+          },
         ]}>
         {isCurrent ? iconFilled : icon}
         {typeof count === 'string' && count ? (
           <Text
-            type="button"
             style={[
-              styles.navItemCount,
-              isTablet && styles.navItemCountTablet,
+              a.absolute,
+              a.text_xs,
+              a.font_bold,
+              a.rounded_full,
+              a.text_center,
+              {
+                top: '-10%',
+                left: count.length === 1 ? '50%' : '40%',
+                backgroundColor: t.palette.primary_500,
+                color: t.palette.white,
+                lineHeight: a.text_sm.fontSize,
+                paddingHorizontal: 4,
+                paddingVertical: 1,
+                minWidth: 16,
+              },
+              isTablet && [
+                {
+                  top: '10%',
+                  left: count.length === 1 ? '50%' : '40%',
+                },
+              ],
             ]}>
             {count}
           </Text>
         ) : null}
       </View>
-      {isDesktop && (
-        <Text type="title" style={[isCurrent ? s.bold : s.normal, pal.text]}>
+      {gtTablet && (
+        <Text style={[a.text_xl, isCurrent ? a.font_heavy : a.font_normal]}>
           {label}
         </Text>
       )}
@@ -268,21 +297,20 @@ function ComposeBtn() {
     return null
   }
   return (
-    <View style={styles.newPostBtnContainer}>
-      <TouchableOpacity
+    <View style={[a.flex_row, a.pl_md, a.pt_xl]}>
+      <Button
         disabled={isFetchingHandle}
-        style={styles.newPostBtn}
+        label={_(msg`New post`)}
         onPress={onPressCompose}
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`New post`)}
-        accessibilityHint="">
-        <View style={styles.newPostBtnIconWrapper}>
-          <EditBig width={19} style={styles.newPostBtnLabel} />
-        </View>
-        <Text type="button" style={styles.newPostBtnLabel}>
+        size="large"
+        variant="solid"
+        color="primary"
+        style={[a.rounded_full]}>
+        <ButtonIcon icon={EditBig} position="left" />
+        <ButtonText>
           <Trans context="action">New Post</Trans>
-        </Text>
-      </TouchableOpacity>
+        </ButtonText>
+      </Button>
     </View>
   )
 }
@@ -440,67 +468,4 @@ const styles = StyleSheet.create({
     width: 30,
     height: 30,
   },
-
-  navItemWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    padding: 12,
-    borderRadius: 8,
-    gap: 10,
-  },
-  navItemIconWrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 28,
-    height: 24,
-    marginTop: 2,
-    zIndex: 1,
-  },
-  navItemIconWrapperTablet: {
-    width: 40,
-    height: 40,
-  },
-  navItemCount: {
-    position: 'absolute',
-    top: 0,
-    left: 15,
-    backgroundColor: colors.blue3,
-    color: colors.white,
-    fontSize: 12,
-    fontWeight: '600',
-    paddingHorizontal: 4,
-    borderRadius: 8,
-  },
-  navItemCountTablet: {
-    left: 18,
-    fontSize: 14,
-  },
-
-  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',
-  },
 })