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 && ( - + )}