gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Refactor user navigation and theme button styles for improved layout and consistency. Adjusted padding and margins in user dropdown, updated button sizes in theme selection.

Browse source
This commit is contained in:
Deon Sanchez 2025-09-30 13:56:04 -06:00
parent e94e6bb5a8
commit d1b6ff7429
2 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/ui/buttonTheme.tsx
View file

@ -19,10 +19,10 @@ export const ThemeButtons = () => {
}; };
return ( return (
<div className="flex items-center gap-1 border border-border rounded-full"> <div className="flex items-center border border-border rounded-full">
{/* Light Theme Button */} {/* Light Theme Button */}
<button <button
className={`h-7 w-7 rounded-full flex items-center justify-center ${ className={`h-6 w-6 rounded-full flex items-center justify-center ${
selectedTheme === "light" selectedTheme === "light"
? "bg-amber-400 text-primary" ? "bg-amber-400 text-primary"
: "text-foreground hover:bg-amber-400 hover:text-background" : "text-foreground hover:bg-amber-400 hover:text-background"
@ -36,7 +36,7 @@ export const ThemeButtons = () => {
{/* Dark Theme Button */} {/* Dark Theme Button */}
<button <button
className={`h-7 w-7 rounded-full flex items-center justify-center ${ className={`h-6 w-6 rounded-full flex items-center justify-center ${
selectedTheme === "dark" selectedTheme === "dark"
? "bg-purple-500/20 text-purple-500 hover:bg-purple-500/20 hover:text-purple-500" ? "bg-purple-500/20 text-purple-500 hover:bg-purple-500/20 hover:text-purple-500"
: "text-foreground hover:bg-purple-500/20 hover:text-purple-500" : "text-foreground hover:bg-purple-500/20 hover:text-purple-500"
@ -50,7 +50,7 @@ export const ThemeButtons = () => {
{/* System Theme Button */} {/* System Theme Button */}
<button <button
className={`h-7 w-7 rounded-full flex items-center justify-center ${ className={`h-6 w-6 rounded-full flex items-center justify-center ${
selectedTheme === "system" selectedTheme === "system"
? "bg-foreground text-background" ? "bg-foreground text-background"
: "hover:bg-foreground hover:text-background" : "hover:bg-foreground hover:text-background"

22
frontend/src/components/user-nav.tsx
View file

@ -79,30 +79,28 @@ export function UserNav() {
<ChevronsUpDown size={16} className="text-muted-foreground mx-2" /> <ChevronsUpDown size={16} className="text-muted-foreground mx-2" />
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount> <DropdownMenuContent className="w-56 p-0" align="end" forceMount>
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2 px-1 py-1">
<p className="text-sm font-medium leading-none">{user?.name}</p> <p className="text-sm font-medium leading-none">{user?.name}</p>
<p className="text-xs leading-none text-muted-foreground"> <p className="text-xs leading-none text-muted-foreground">
{user?.email} {user?.email}
</p> </p>
</div> </div>
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator className="m-0" />
{/* <DropdownMenuItem className="flex items-center justify-between"> */} <div className="flex items-center justify-between pl-3 pr-2 h-9">
<div className="flex items-center justify-between px-2 h-8">
<span className="text-sm">Theme</span> <span className="text-sm">Theme</span>
<ThemeButtons /> <ThemeButtons />
</div> </div>
{/* </DropdownMenuItem> */} <DropdownMenuSeparator className="m-0" />
<DropdownMenuSeparator /> <button
<DropdownMenuItem
onClick={logout} onClick={logout}
className="text-red-600 focus:text-red-600" className="flex items-center hover:bg-muted w-full h-9 px-3"
> >
<LogOut className="mr-2 h-4 w-4" /> <LogOut className="mr-2 h-4 w-4 text-muted-foreground" />
<span>Log out</span> <span className="text-sm">Logout</span>
</DropdownMenuItem> </button>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );