aimond/sapiens-web3
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
</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>
<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">
@ -168,69 +222,71 @@ export default function Home() {
</DropdownMenu>
</>
) : (
<Button
variant="ghost"
size="sm"
onClick={() => setIsLoginModalOpen(true)}
data-testid="button-login"
>
<User className="h-4 w-4" />
</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>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
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>
</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>