Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

refactor: update styles and improve layout in navbar components

Browse source
This commit is contained in:
Marco Pedone 2025-11-17 17:00:09 +01:00
parent 803ccfe67b
commit 80835879ea
4 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/infoalloggi/src/components/navbar/login-button.tsx
View file

@ -83,7 +83,7 @@ export const UserHeaderSection = ({
<DropdownMenuTrigger asChild>
<Button
aria-label="User Profile Button"
className="flex h-[46px] w-full items-center justify-center gap-x-1 rounded-full p-2 font-medium"
className="flex h-10 w-full items-center justify-center gap-x-1 rounded-full py-2 pr-0 pl-0 font-medium md:pr-2"
variant="ghost"
>
<UserAvatar

4
apps/infoalloggi/src/components/navbar/ricerca_command.tsx
View file

@ -26,8 +26,8 @@ export function RicercaCommand() {
<>
<Dialog onOpenChange={setOpen} open={open}>
<DialogTrigger asChild>
<Button aria-label="ricercaBtn" className="p-2" variant="ghost">
<Search className="size-5" />
<Button aria-label="ricercaBtn" variant="ghost">
<Search className="size-6" />
</Button>
</DialogTrigger>
<DialogContent className="border-none bg-transparent sm:max-w-xl [&_[data-slot=dialog-close]]:hidden">

4
apps/infoalloggi/src/components/navbar/site-header.tsx
View file

@ -33,10 +33,10 @@ export function SiteHeader() {
userOpen={openUserMenuSidebar}
/>
<div className="float-end flex flex-1 items-center justify-end gap-0.5">
<div className="float-end flex flex-1 items-center justify-end gap-2.5">
<RicercaCommand />
<div className="hidden w-fit items-center gap-4 md:flex">
<div className="hidden w-fit items-center gap-2.5 md:flex">
<LangToggle />
<ThemeSwitch />
</div>

18
apps/infoalloggi/src/components/navbar/theme-toggle.tsx
View file

@ -7,8 +7,8 @@ export const ThemeSwitch = () => {
const { theme, setTheme } = useTheme();
const spring: Transition = {
damping: 30,
stiffness: 700,
damping: 20,
stiffness: 300,
type: "spring",
};
@ -16,25 +16,27 @@ export const ThemeSwitch = () => {
<button
aria-label="Toggle Theme"
className={cn(
`flex h-10 w-20 rounded-full bg-muted p-[5px] shadow-inner hover:cursor-pointer`,
theme === "light" && "place-content-end",
`flex h-9 w-16 items-center rounded-full bg-muted p-[5px] shadow-inner hover:cursor-pointer`,
theme === "light"
? "place-content-end bg-sky-400 hover:bg-sky-500"
: "bg-sky-900 hover:bg-sky-800",
)}
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
type="button"
>
<motion.div
className={cn(
"flex size-8 items-center justify-center rounded-full bg-black/90",
//theme == "light" && "bg-sky-500",
"flex size-7 items-center justify-center rounded-full bg-black",
theme === "light" ? "bg-yellow-300" : "bg-gray-800/60",
)}
layout
transition={spring}
>
<motion.div whileTap={{ rotate: 360 }}>
{theme === "light" ? (
<Sun className="size-6 stroke-yellow-300" />
<Sun className="size-5 fill-yellow-500 stroke-yellow-500" />
) : (
<Moon className="size-6 stroke-slate-200" />
<Moon className="size-5 fill-yellow-200 stroke-yellow-200" />
)}
</motion.div>
</motion.div>