aimond/sapiens-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme and language settings to the user profile menu

Browse Source 
Introduces a new settings dropdown in the Home page header, containing theme (light, dark, system) and language selection options.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/9tQ591o
This commit is contained in:
kimjaehyeon0101
2025-09-29 22:19:45 +00:00
parent 3428c9ecac
commit bf78a25773
1 changed files with 114 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
client/src/pages/Home.tsx
View File

@ -144,6 +144,60 @@ export default function Home() {
Admin Dashboard Admin Dashboard
</Button> </Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="sm"
data-testid="button-settings"
>
<Settings className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>Theme</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => handleThemeChange('light')}
className="cursor-pointer"
data-testid="theme-light"
>
<Sun className="h-4 w-4 mr-2" />
Light
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleThemeChange('dark')}
className="cursor-pointer"
data-testid="theme-dark"
>
<Moon className="h-4 w-4 mr-2" />
Dark
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleThemeChange('system')}
className="cursor-pointer"
data-testid="theme-system"
>
<Monitor className="h-4 w-4 mr-2" />
System
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>Language</DropdownMenuLabel>
{languages.map((lang) => (
<DropdownMenuItem
key={lang.code}
onClick={() => handleLanguageChange(lang.code)}
className="cursor-pointer"
data-testid={`language-${lang.code}`}
>
<Globe className="h-4 w-4 mr-2" />
{lang.name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md cursor-pointer hover:bg-gray-200 transition-colors" data-testid="user-profile-chip"> <div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md cursor-pointer hover:bg-gray-200 transition-colors" data-testid="user-profile-chip">
@ -168,69 +222,71 @@ export default function Home() {
</DropdownMenu> </DropdownMenu>
</> </>
) : ( ) : (
<Button <>
variant="ghost" <DropdownMenu>
size="sm" <DropdownMenuTrigger asChild>
onClick={() => setIsLoginModalOpen(true)} <Button
data-testid="button-login" variant="ghost"
> size="sm"
<User className="h-4 w-4" /> data-testid="button-settings"
</Button> >
)} <Settings className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>Theme</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => handleThemeChange('light')}
className="cursor-pointer"
data-testid="theme-light"
>
<Sun className="h-4 w-4 mr-2" />
Light
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleThemeChange('dark')}
className="cursor-pointer"
data-testid="theme-dark"
>
<Moon className="h-4 w-4 mr-2" />
Dark
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleThemeChange('system')}
className="cursor-pointer"
data-testid="theme-system"
>
<Monitor className="h-4 w-4 mr-2" />
System
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>Language</DropdownMenuLabel>
{languages.map((lang) => (
<DropdownMenuItem
key={lang.code}
onClick={() => handleLanguageChange(lang.code)}
className="cursor-pointer"
data-testid={`language-${lang.code}`}
>
<Globe className="h-4 w-4 mr-2" />
{lang.name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
data-testid="button-settings" onClick={() => setIsLoginModalOpen(true)}
data-testid="button-login"
> >
<Settings className="h-4 w-4" /> <User className="h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </>
<DropdownMenuContent align="end" className="w-56"> )}
<DropdownMenuLabel>Theme</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => handleThemeChange('light')}
className="cursor-pointer"
data-testid="theme-light"
>
<Sun className="h-4 w-4 mr-2" />
Light
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleThemeChange('dark')}
className="cursor-pointer"
data-testid="theme-dark"
>
<Moon className="h-4 w-4 mr-2" />
Dark
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleThemeChange('system')}
className="cursor-pointer"
data-testid="theme-system"
>
<Monitor className="h-4 w-4 mr-2" />
System
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>Language</DropdownMenuLabel>
{languages.map((lang) => (
<DropdownMenuItem
key={lang.code}
onClick={() => handleLanguageChange(lang.code)}
className="cursor-pointer"
data-testid={`language-${lang.code}`}
>
<Globe className="h-4 w-4 mr-2" />
{lang.name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div> </div>
</div> </div>
</div> </div>