Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 16:51:38 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: added a better theme change ability for user

Browse Source
This commit is contained in:
captain-Akshay
2023-09-19 13:38:37 +05:30
committed by Mythie
parent 1ec91f6c68
commit eec48e48ef
1 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
View File

@ -1,5 +1,7 @@
'use client'; 'use client';
import { useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { import {
@ -8,7 +10,6 @@ import {
Key, Key,
LogOut, LogOut,
User as LucideUser, User as LucideUser,
Monitor,
Moon, Moon,
Sun, Sun,
UserCog, UserCog,
@ -25,9 +26,17 @@ import {
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@documenso/ui/primitives/dropdown-menu'; } from '@documenso/ui/primitives/dropdown-menu';
import { Label } from '@documenso/ui/primitives/label';
import { Switch } from '@documenso/ui/primitives/switch';
import { useFeatureFlags } from '~/providers/feature-flag'; import { useFeatureFlags } from '~/providers/feature-flag';
@ -36,10 +45,15 @@ export type ProfileDropdownProps = {
}; };
export const ProfileDropdown = ({ user }: ProfileDropdownProps) => { export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
const { theme, setTheme } = useTheme();
const { getFlag } = useFeatureFlags(); const { getFlag } = useFeatureFlags();
const { theme, setTheme } = useTheme();
const isUserAdmin = isAdmin(user); const isUserAdmin = isAdmin(user);
const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
const toggleDarkMode = () => {
setIsDarkMode(!isDarkMode);
setTheme(isDarkMode ? 'light' : 'dark');
};
const isBillingEnabled = getFlag('app_billing'); const isBillingEnabled = getFlag('app_billing');
const avatarFallback = user.name const avatarFallback = user.name
@ -97,28 +111,19 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{theme === 'light' ? null : ( <DropdownMenuSub>
<DropdownMenuItem onClick={() => setTheme('light')}> <DropdownMenuSubTrigger>Themes</DropdownMenuSubTrigger>
<Sun className="mr-2 h-4 w-4" /> <DropdownMenuPortal>
Light Mode <DropdownMenuSubContent>
</DropdownMenuItem> <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
)} <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
{theme === 'dark' ? null : ( <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
<DropdownMenuItem onClick={() => setTheme('dark')}> <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
<Moon className="mr-2 h-4 w-4" /> </DropdownMenuRadioGroup>
Dark Mode </DropdownMenuSubContent>
</DropdownMenuItem> </DropdownMenuPortal>
)} </DropdownMenuSub>
{theme === 'system' ? null : (
<DropdownMenuItem onClick={() => setTheme('system')}>
<Monitor className="mr-2 h-4 w-4" />
System Theme
</DropdownMenuItem>
)}
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link href="https://github.com/documenso/documenso" className="cursor-pointer"> <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
<Github className="mr-2 h-4 w-4" /> <Github className="mr-2 h-4 w-4" />