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> <DropdownMenuTrigger asChild>
<Button <Button
aria-label="User Profile 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" variant="ghost"
> >
<UserAvatar <UserAvatar

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

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

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

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