diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx index d0bb83bc3262f..d76cb4c5f221f 100644 --- a/frontend/src/layout/navigation/TopBar/SitePopover.tsx +++ b/frontend/src/layout/navigation/TopBar/SitePopover.tsx @@ -1,5 +1,5 @@ -import { IconChevronDown, IconDay, IconFeatures, IconLaptop, IconLive, IconNight } from '@posthog/icons' -import { LemonButtonPropsBase, LemonSelect } from '@posthog/lemon-ui' +import { IconChevronDown, IconFeatures, IconLive } from '@posthog/icons' +import { LemonButtonPropsBase } from '@posthog/lemon-ui' import clsx from 'clsx' import { useActions, useValues } from 'kea' import { FlaggedFeature } from 'lib/components/FlaggedFeature' @@ -25,6 +25,7 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip' import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import { billingLogic } from 'scenes/billing/billingLogic' import { inviteLogic } from 'scenes/settings/organization/inviteLogic' +import { ThemeSwitcher } from 'scenes/settings/user/ThemeSwitcher' import { featurePreviewsLogic } from '~/layout/FeaturePreviews/featurePreviewsLogic' import { @@ -224,36 +225,6 @@ function FeaturePreviewsButton(): JSX.Element { ) } -function ThemeSwitcher(): JSX.Element { - const { user } = useValues(userLogic) - const { updateUser } = useActions(userLogic) - - return ( - , value: null, label: `Sync with system` }, - { icon: , value: 'light', label: 'Light mode' }, - { icon: , value: 'dark', label: 'Dark mode' }, - ]} - value={user?.theme_mode} - renderButtonContent={(leaf) => { - return ( - <> - - Color theme - {leaf ? leaf.label : 'Sync with system'} - - - ) - }} - onChange={(value) => updateUser({ theme_mode: value })} - type="tertiary" - fullWidth - dropdownPlacement="right-start" - /> - ) -} - function SignOutButton(): JSX.Element { const { logout } = useActions(userLogic) @@ -312,7 +283,7 @@ export function SitePopoverOverlay(): JSX.Element { )} - + , + }, { id: 'notifications', title: 'Notifications', diff --git a/frontend/src/scenes/settings/types.ts b/frontend/src/scenes/settings/types.ts index 038da8dd71126..d57e2273fc765 100644 --- a/frontend/src/scenes/settings/types.ts +++ b/frontend/src/scenes/settings/types.ts @@ -30,7 +30,7 @@ export type SettingSectionId = | 'organization-danger-zone' | 'user-profile' | 'user-api-keys' - | 'user-notifications' + | 'user-customization' export type SettingId = | 'display-name' @@ -70,6 +70,7 @@ export type SettingId = | 'personal-api-keys' | 'notifications' | 'optout' + | 'theme' export type Setting = { id: SettingId diff --git a/frontend/src/scenes/settings/user/ThemeSwitcher.tsx b/frontend/src/scenes/settings/user/ThemeSwitcher.tsx new file mode 100644 index 0000000000000..106713a616793 --- /dev/null +++ b/frontend/src/scenes/settings/user/ThemeSwitcher.tsx @@ -0,0 +1,40 @@ +import { IconDay, IconLaptop, IconNight } from '@posthog/icons' +import { LemonSelect, LemonSelectProps } from '@posthog/lemon-ui' +import { useActions, useValues } from 'kea' +import { userLogic } from 'scenes/userLogic' + +export function ThemeSwitcher({ + onlyLabel, + ...props +}: Partial> & { onlyLabel?: boolean }): JSX.Element { + const { user } = useValues(userLogic) + const { updateUser } = useActions(userLogic) + + return ( + , value: null, label: `Sync with system` }, + { icon: , value: 'light', label: 'Light mode' }, + { icon: , value: 'dark', label: 'Dark mode' }, + ]} + value={user?.theme_mode} + renderButtonContent={(leaf) => { + const labelText = leaf ? leaf.label : 'Sync with system' + return onlyLabel ? ( + labelText + ) : ( + <> + + Color theme + {leaf ? leaf.label : 'Sync with system'} + + + ) + }} + onChange={(value) => updateUser({ theme_mode: value })} + dropdownPlacement="right-start" + dropdownMatchSelectWidth={false} + {...props} + /> + ) +}