diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx
index f00a15b3f4..28bb9c2d5f 100644
--- a/src/view/com/home/HomeHeaderLayout.web.tsx
+++ b/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 && (
+
-
-
-
-
-
+ label={_(msg`View your feeds and explore more`)}>
+
)}
@@ -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,
diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx
index 78fa9af865..1f6817ef30 100644
--- a/src/view/com/home/HomeHeaderLayoutMobile.tsx
+++ b/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 && (
-
+
-
+
)}
{hasSession && (
-
+
)}