From 80835879ea85775d43d33a8544876ddf0dce810b Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Mon, 17 Nov 2025 17:00:09 +0100
Subject: [PATCH] refactor: update styles and improve layout in navbar
 components

---
 .../src/components/navbar/login-button.tsx     |  2 +-
 .../src/components/navbar/ricerca_command.tsx  |  4 ++--
 .../src/components/navbar/site-header.tsx      |  4 ++--
 .../src/components/navbar/theme-toggle.tsx     | 18 ++++++++++--------
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/infoalloggi/src/components/navbar/login-button.tsx b/apps/infoalloggi/src/components/navbar/login-button.tsx
index 033bcf8..a487daa 100644
--- a/apps/infoalloggi/src/components/navbar/login-button.tsx
+++ b/apps/infoalloggi/src/components/navbar/login-button.tsx
@@ -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
diff --git a/apps/infoalloggi/src/components/navbar/ricerca_command.tsx b/apps/infoalloggi/src/components/navbar/ricerca_command.tsx
index ced587c..5862297 100644
--- a/apps/infoalloggi/src/components/navbar/ricerca_command.tsx
+++ b/apps/infoalloggi/src/components/navbar/ricerca_command.tsx
@@ -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">
diff --git a/apps/infoalloggi/src/components/navbar/site-header.tsx b/apps/infoalloggi/src/components/navbar/site-header.tsx
index 8442d6a..4e83fa9 100644
--- a/apps/infoalloggi/src/components/navbar/site-header.tsx
+++ b/apps/infoalloggi/src/components/navbar/site-header.tsx
@@ -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>
diff --git a/apps/infoalloggi/src/components/navbar/theme-toggle.tsx b/apps/infoalloggi/src/components/navbar/theme-toggle.tsx
index e1aab68..5f3c76c 100644
--- a/apps/infoalloggi/src/components/navbar/theme-toggle.tsx
+++ b/apps/infoalloggi/src/components/navbar/theme-toggle.tsx
@@ -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>