From 28c764e6ca037c4313884f01f3047a01fecca572 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Nov 2024 16:22:10 +0000 Subject: [PATCH] remove useProfileTheme in favour of nesting main provider --- src/App.native.tsx | 2 +- src/App.web.tsx | 2 +- src/alf/index.tsx | 15 ++++-- .../Profile/Header/ProfileHeaderLabeler.tsx | 4 +- .../Profile/Header/ProfileHeaderStandard.tsx | 21 +++------ src/screens/Profile/Header/Shell.tsx | 16 ++----- src/screens/Profile/Header/index.tsx | 1 + src/view/com/profile/ProfileMenu.tsx | 6 +-- src/view/screens/Profile.tsx | 46 +++++++++++-------- src/view/screens/Storybook/index.tsx | 6 +-- 10 files changed, 60 insertions(+), 59 deletions(-) diff --git a/src/App.native.tsx b/src/App.native.tsx index 0d8d7a92e6..bc59110e64 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -122,7 +122,7 @@ function InnerApp() { }, [_]) return ( - + diff --git a/src/App.web.tsx b/src/App.web.tsx index 808b0fc278..d3be9e3a10 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -101,7 +101,7 @@ function InnerApp() { if (!isReady || !hasCheckedReferrer) return null return ( - + diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 5d08722ff4..fd64176614 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -63,8 +63,12 @@ export const Context = React.createContext({ export function ThemeProvider({ children, - theme: themeName, -}: React.PropsWithChildren<{theme: ThemeName}>) { + themeName, + theme, +}: React.PropsWithChildren<{ + themeName: ThemeName + theme?: ReturnType +}>) { const [fontScale, setFontScale] = React.useState(() => getFontScale(), ) @@ -74,6 +78,7 @@ export function ThemeProvider({ const setFontScaleAndPersist = React.useCallback< Alf['fonts']['setFontScale'] >( + // eslint-disable-next-line @typescript-eslint/no-shadow fontScale => { setFontScale(fontScale) persistFontScale(fontScale) @@ -87,6 +92,7 @@ export function ThemeProvider({ const setFontFamilyAndPersist = React.useCallback< Alf['fonts']['setFontFamily'] >( + // eslint-disable-next-line @typescript-eslint/no-shadow fontFamily => { setFontFamily(fontFamily) persistFontFamily(fontFamily) @@ -94,6 +100,9 @@ export function ThemeProvider({ [setFontFamily], ) const themes = React.useMemo(() => { + if (theme) { + return theme + } return createThemes({ hues: { primary: BLUE_HUE, @@ -101,7 +110,7 @@ export function ThemeProvider({ positive: GREEN_HUE, }, }) - }, []) + }, [theme]) const value = React.useMemo( () => ({ diff --git a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx index ca0cb1e626..ec583236b3 100644 --- a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx +++ b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx @@ -49,6 +49,7 @@ interface Props { moderationOpts: ModerationOpts hideBackButton?: boolean isPlaceholderProfile?: boolean + backgroundColor: string } let ProfileHeaderLabeler = ({ @@ -168,7 +169,8 @@ let ProfileHeaderLabeler = ({ profile={profile} moderation={moderation} hideBackButton={hideBackButton} - isPlaceholderProfile={isPlaceholderProfile}> + isPlaceholderProfile={isPlaceholderProfile} + backgroundColor={backgroundColor}> diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx index 67408ea9ea..97a125b8e8 100644 --- a/src/screens/Profile/Header/ProfileHeaderStandard.tsx +++ b/src/screens/Profile/Header/ProfileHeaderStandard.tsx @@ -22,7 +22,6 @@ import { import {useRequireAuth, useSession} from '#/state/session' import {ProfileMenu} from '#/view/com/profile/ProfileMenu' import * as Toast from '#/view/com/util/Toast' -import {useProfileTheme} from '#/view/screens/Profile' import {atoms as a} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' @@ -47,6 +46,7 @@ interface Props { moderationOpts: ModerationOpts hideBackButton?: boolean isPlaceholderProfile?: boolean + backgroundColor: string } let ProfileHeaderStandard = ({ @@ -55,6 +55,7 @@ let ProfileHeaderStandard = ({ moderationOpts, hideBackButton = false, isPlaceholderProfile, + backgroundColor, }: Props): React.ReactNode => { const profile: Shadow = useProfileShadow(profileUnshadowed) @@ -149,14 +150,13 @@ let ProfileHeaderStandard = ({ [currentAccount, profile], ) - const pTheme = useProfileTheme() - return ( + isPlaceholderProfile={isPlaceholderProfile} + backgroundColor={backgroundColor}> @@ -179,8 +179,7 @@ let ProfileHeaderStandard = ({ color="secondary" variant="solid" onPress={onPressEditProfile} - label={_(msg`Edit profile`)} - style={[{backgroundColor: pTheme.lightPalette.primary_50}]}> + label={_(msg`Edit profile`)}> Edit Profile @@ -200,10 +199,7 @@ let ProfileHeaderStandard = ({ label={_(msg`Unblock`)} disabled={!hasSession} onPress={() => unblockPromptControl.open()} - style={[ - a.rounded_full, - {backgroundColor: pTheme.lightPalette.primary_50}, - ]}> + style={[a.rounded_full]}> Unblock @@ -226,10 +222,7 @@ let ProfileHeaderStandard = ({ onPress={ profile.viewer?.following ? onPressUnfollow : onPressFollow } - style={[ - a.rounded_full, - {backgroundColor: pTheme.lightPalette.primary_50}, - ]}> + style={[a.rounded_full]}> ): React.ReactNode => { const t = useTheme() const {currentAccount} = useSession() @@ -97,20 +98,11 @@ let ProfileHeaderShell = ({ [currentAccount, profile], ) - const pTheme = useProfileTheme() - - const palette = t.name === 'light' ? pTheme.lightPalette : pTheme.darkPalette - return ( diff --git a/src/screens/Profile/Header/index.tsx b/src/screens/Profile/Header/index.tsx index deb8063d99..e147b4d244 100644 --- a/src/screens/Profile/Header/index.tsx +++ b/src/screens/Profile/Header/index.tsx @@ -43,6 +43,7 @@ interface Props { moderationOpts: ModerationOpts hideBackButton?: boolean isPlaceholderProfile?: boolean + backgroundColor: string } let ProfileHeader = (props: Props): React.ReactNode => { diff --git a/src/view/com/profile/ProfileMenu.tsx b/src/view/com/profile/ProfileMenu.tsx index 7af85aaaef..f01fb5e172 100644 --- a/src/view/com/profile/ProfileMenu.tsx +++ b/src/view/com/profile/ProfileMenu.tsx @@ -20,7 +20,6 @@ import { import {useSession} from '#/state/session' import {EventStopper} from '#/view/com/util/EventStopper' import * as Toast from '#/view/com/util/Toast' -import {useProfileTheme} from '#/view/screens/Profile' import {Button, ButtonIcon} from '#/components/Button' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' @@ -168,8 +167,6 @@ let ProfileMenu = ({ reportDialogControl.open() }, [reportDialogControl]) - const pTheme = useProfileTheme() - return ( @@ -184,8 +181,7 @@ let ProfileMenu = ({ variant="solid" color="secondary" size="small" - shape="round" - style={{backgroundColor: pTheme.lightPalette.primary_50}}> + shape="round"> ) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index e60ee9b424..d2de0d5bd3 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -44,7 +44,7 @@ import {CenteredView} from '#/view/com/util/Views' import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels' -import {Palette, Theme, web} from '#/alf' +import {ThemeProvider as Alf, useTheme, web} from '#/alf' import {createThemes} from '#/alf/themes' import * as Layout from '#/components/Layout' import {ScreenHider} from '#/components/moderation/ScreenHider' @@ -52,18 +52,6 @@ import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks' import {navigate} from '#/Navigation' import {ExpoScrollForwarderView} from '../../../modules/expo-scroll-forwarder' -type ThemeType = { - lightPalette: Palette - darkPalette: Palette - dimPalette: Palette - light: Theme - dark: Theme - dim: Theme -} - -const ProfileThemeContext = React.createContext({} as ThemeType) -export const useProfileTheme = () => React.useContext(ProfileThemeContext) - interface SectionRef { scrollToTop: () => void } @@ -354,18 +342,37 @@ function ProfileScreenLoaded({ // rendering // = + const [hue, setHue] = React.useState(0) + React.useEffect(() => { + const id = setInterval(() => { + setHue(h => { + const next = h + 1 + if (next >= 360) { + return 0 + } + return next + }) + }, 100) + return () => clearInterval(id) + }, []) + + const t = useTheme() + const theme = createThemes({ hues: { - primary: 350, + primary: hue, negative: 0, positive: 0, }, + scales: { + // graySaturation: [30, 30, 30, 30, 30, 30, 30, 30, 34, 34, 38, 38, 38, 38], + }, }) const renderHeader = () => { return ( - + - + ) } @@ -539,10 +547,10 @@ function useRichText(text: string): [RichTextAPI, boolean] { let ignore = false async function resolveRTFacets() { // new each time - const resolvedRT = new RichTextAPI({text}) - await resolvedRT.detectFacets(agent) + const newRT = new RichTextAPI({text}) + await newRT.detectFacets(agent) if (!ignore) { - setResolvedRT(resolvedRT) + setResolvedRT(newRT) } } resolveRTFacets() diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index de3d46533b..df3804ee59 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -104,13 +104,13 @@ function StorybookInner() { - + - + - +