Add link to feeds to home screen header

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -1,22 +1,18 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import Animated from 'react-native-reanimated'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {CogIcon} from '#/lib/icons'
 import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
-import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Logo} from '#/view/icons/Logo'
+import {atoms as a, useTheme} from '#/alf'
+import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
+import {Link} from '#/components/Link'
 import {useKawaiiMode} from '../../../state/preferences/kawaii'
-import {Link} from '../util/Link'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
 
 export function HomeHeaderLayout(props: {
@@ -38,7 +34,7 @@ function HomeHeaderLayoutDesktopAndTablet({
   children: React.ReactNode
   tabBarAnchor: JSX.Element | null | undefined
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {headerMinimalShellTransform} = useMinimalShellMode()
   const {headerHeight} = useShellLayout()
   const {hasSession} = useSession()
@@ -51,31 +47,24 @@ function HomeHeaderLayoutDesktopAndTablet({
       {hasSession && (
         <View
           style={[
-            pal.view,
-            pal.border,
+            a.relative,
+            a.flex_row,
+            a.justify_between,
+            a.align_center,
+            a.pt_lg,
+            a.px_lg,
+            a.pb_sm,
+            t.atoms.bg,
+            t.atoms.border_contrast_low,
             styles.bar,
-            styles.topBar,
-            kawaii && {paddingTop: 4, paddingBottom: 0},
+            kawaii && {paddingTop: 4, paddingBottom: 0, paddingLeft: 10},
           ]}>
+          <Logo width={kawaii ? 60 : 22} />
           <Link
-            href="/settings/following-feed"
+            to="/feeds"
             hitSlop={10}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Following Feed Preferences`)}
-            accessibilityHint="">
-            <FontAwesomeIcon
-              icon="sliders"
-              style={pal.textLight as FontAwesomeIconStyle}
-            />
-          </Link>
-          <Logo width={kawaii ? 60 : 28} />
-          <Link
-            href="/settings/saved-feeds"
-            hitSlop={10}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Edit Saved Feeds`)}
-            accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}>
-            <CogIcon size={22} strokeWidth={2} style={pal.textLight} />
+            label={_(msg`View your feeds and explore more`)}>
+            <ListSparkle size="lg" fill={t.atoms.text_contrast_medium.color} />
           </Link>
         </View>
       )}
@@ -85,8 +74,8 @@ function HomeHeaderLayoutDesktopAndTablet({
           headerHeight.value = e.nativeEvent.layout.height
         }}
         style={[
-          pal.view,
-          pal.border,
+          t.atoms.bg,
+          t.atoms.border_contrast_low,
           styles.bar,
           styles.tabBar,
           headerMinimalShellTransform,

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -15,10 +14,11 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
 import {Logo} from '#/view/icons/Logo'
 import {atoms} from '#/alf'
+import {useTheme} from '#/alf'
 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
-import {Link as Link2} from '#/components/Link'
+import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
+import {Link} from '#/components/Link'
 import {IS_DEV} from '#/env'
-import {Link} from '../util/Link'
 
 export function HomeHeaderLayoutMobile({
   children,
@@ -26,6 +26,7 @@ export function HomeHeaderLayoutMobile({
   children: React.ReactNode
   tabBarAnchor: JSX.Element | null | undefined
 }) {
+  const t = useTheme()
   const pal = usePalette('default')
   const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
@@ -74,21 +75,19 @@ export function HomeHeaderLayoutMobile({
             {width: 100},
           ]}>
           {IS_DEV && (
-            <Link2 to="/sys/debug">
+            <Link to="/sys/debug">
               <ColorPalette size="md" />
-            </Link2>
+            </Link>
           )}
           {hasSession && (
             <Link
               testID="viewHeaderHomeFeedPrefsBtn"
-              href="/settings/following-feed"
+              to="/feeds"
               hitSlop={HITSLOP_10}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Following Feed Preferences`)}
-              accessibilityHint="">
-              <FontAwesomeIcon
-                icon="sliders"
-                style={pal.textLight as FontAwesomeIconStyle}
+              label={_(msg`View your feeds and explore more`)}>
+              <ListSparkle
+                size="lg"
+                fill={t.atoms.text_contrast_medium.color}
               />
             </Link>
           )}