From a94a99bb4065004618a4f0854935f8b0792cbcf8 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 4 Mar 2025 00:02:44 +0000 Subject: [PATCH] add glassy effect to headers --- src/components/Button.tsx | 8 ++--- .../Layout/Header/GlassyBackdrop.tsx | 13 ++++++++ .../Layout/Header/GlassyBackdrop.web.tsx | 31 +++++++++++++++++++ src/components/Layout/Header/index.tsx | 10 +++--- .../Profile/components/ProfileFeedHeader.tsx | 3 +- src/view/com/home/HomeHeaderLayout.web.tsx | 2 +- src/view/com/home/HomeHeaderLayoutMobile.tsx | 4 +-- src/view/com/pager/TabBar.tsx | 1 + src/view/com/pager/TabBar.web.tsx | 6 +++- 9 files changed, 62 insertions(+), 16 deletions(-) create mode 100644 src/components/Layout/Header/GlassyBackdrop.tsx create mode 100644 src/components/Layout/Header/GlassyBackdrop.web.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 42eb648443..3966f919d9 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -240,7 +240,7 @@ export const Button = React.forwardRef( } } else if (variant === 'ghost') { if (!disabled) { - baseStyles.push(t.atoms.bg) + baseStyles.push(a.bg_transparent) hoverStyles.push({ backgroundColor: t.palette.primary_100, }) @@ -271,7 +271,7 @@ export const Button = React.forwardRef( } } else if (variant === 'ghost') { if (!disabled) { - baseStyles.push(t.atoms.bg) + baseStyles.push(a.bg_transparent) hoverStyles.push({ backgroundColor: t.palette.contrast_25, }) @@ -308,7 +308,7 @@ export const Button = React.forwardRef( } } else if (variant === 'ghost') { if (!disabled) { - baseStyles.push(t.atoms.bg) + baseStyles.push(a.bg_transparent) hoverStyles.push({ backgroundColor: t.palette.contrast_25, }) @@ -351,7 +351,7 @@ export const Button = React.forwardRef( } } else if (variant === 'ghost') { if (!disabled) { - baseStyles.push(t.atoms.bg) + baseStyles.push(a.bg_transparent) hoverStyles.push({ backgroundColor: t.palette.negative_100, }) diff --git a/src/components/Layout/Header/GlassyBackdrop.tsx b/src/components/Layout/Header/GlassyBackdrop.tsx new file mode 100644 index 0000000000..3c43e04c00 --- /dev/null +++ b/src/components/Layout/Header/GlassyBackdrop.tsx @@ -0,0 +1,13 @@ +import {View} from 'react-native' + +import {atoms as a, useTheme} from '#/alf' + +/** + * GlassyBackdrop component + * On web, it applies a backdrop filter to create a glassy effect. + * On native and non-safari mobile web, it's just a solid color. + */ +export function GlassyBackdrop() { + const t = useTheme() + return +} diff --git a/src/components/Layout/Header/GlassyBackdrop.web.tsx b/src/components/Layout/Header/GlassyBackdrop.web.tsx new file mode 100644 index 0000000000..4c2bab12aa --- /dev/null +++ b/src/components/Layout/Header/GlassyBackdrop.web.tsx @@ -0,0 +1,31 @@ +import {View} from 'react-native' + +import {isAndroidWeb} from '#/lib/browser' +import {atoms as a, useTheme} from '#/alf' + +/** + * GlassyBackdrop component + * On web, it applies a backdrop filter to create a glassy effect. + * On native and non-safari mobile web, it's just a solid color. + */ +export function GlassyBackdrop() { + const t = useTheme() + + if (isAndroidWeb) { + return + } + + return ( + <> + + + + ) +} diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index d68f4bd1d2..43dd2e6f0c 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -29,6 +29,7 @@ import { } from '#/components/Layout/const' import {ScrollbarOffsetContext} from '#/components/Layout/context' import {Text} from '#/components/Typography' +import {GlassyBackdrop} from './GlassyBackdrop' export function Outer({ children, @@ -56,7 +57,7 @@ export function Outer({ a.flex_row, a.align_center, a.gap_sm, - sticky && web([a.sticky, {top: 0}, a.z_10, t.atoms.bg]), + sticky && web([a.sticky, {top: 0}, a.z_10]), gutters, platform({ native: [a.pb_xs, {minHeight: 48}], @@ -71,6 +72,7 @@ export function Outer({ ], }, ]}> + {sticky && } {children} ) @@ -131,11 +133,7 @@ export function BackButton({onPress, style, ...props}: Partial) { shape="square" onPress={onPressBack} hitSlop={HITSLOP_30} - style={[ - {marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, - a.bg_transparent, - style, - ]} + style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, style]} {...props}> diff --git a/src/screens/Profile/components/ProfileFeedHeader.tsx b/src/screens/Profile/components/ProfileFeedHeader.tsx index 5bc05ec56a..13a6430cc9 100644 --- a/src/screens/Profile/components/ProfileFeedHeader.tsx +++ b/src/screens/Profile/components/ProfileFeedHeader.tsx @@ -182,8 +182,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) { return ( <> - + diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index d8bbe19e68..14db924455 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -66,7 +66,7 @@ function HomeHeaderLayoutDesktopAndTablet({ )} {tabBarAnchor} { headerHeight.set(e.nativeEvent.layout.height) }}> diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 7a40604f43..9dc442f8a7 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -11,7 +11,7 @@ import {emitSoftReset} from '#/state/events' import {useSession} from '#/state/session' import {useShellLayout} from '#/state/shell/shell-layout' import {Logo} from '#/view/icons/Logo' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, native, useTheme} from '#/alf' import {ButtonIcon} from '#/components/Button' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' import * as Layout from '#/components/Layout' @@ -35,7 +35,7 @@ export function HomeHeaderLayoutMobile({ style={[ a.fixed, a.z_10, - t.atoms.bg, + native(t.atoms.bg), { top: 0, left: 0, diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index 04803fa9bf..0941f4e994 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -30,6 +30,7 @@ export interface TabBarProps { onPressSelected?: (index: number) => void dragProgress: SharedValue dragState: SharedValue<'idle' | 'dragging' | 'settling'> + glassEffect?: boolean } const ITEM_PADDING = 10 diff --git a/src/view/com/pager/TabBar.web.tsx b/src/view/com/pager/TabBar.web.tsx index 8afea00196..f293e6ca14 100644 --- a/src/view/com/pager/TabBar.web.tsx +++ b/src/view/com/pager/TabBar.web.tsx @@ -2,6 +2,7 @@ import {useCallback, useEffect, useRef} from 'react' import {type ScrollView, StyleSheet, View} from 'react-native' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' +import {GlassyBackdrop} from '#/components/Layout/Header/GlassyBackdrop' import {Text} from '#/components/Typography' import {PressableWithHover} from '../util/PressableWithHover' import {DraggableScrollView} from './DraggableScrollView' @@ -15,6 +16,7 @@ export interface TabBarProps { onSelect?: (index: number) => void onPressSelected?: (index: number) => void + glassEffect?: boolean } // How much of the previous/next item we're showing @@ -27,6 +29,7 @@ export function TabBar({ items, onSelect, onPressSelected, + glassEffect = true, }: TabBarProps) { const t = useTheme() const scrollElRef = useRef(null) @@ -92,8 +95,9 @@ export function TabBar({ return ( + {glassEffect && }