refactor: adjust styles for LangToggle, SiteHeader, and ThemeSwitch components

This commit is contained in:
Marco Pedone 2025-11-21 11:53:10 +01:00
parent 0eb12f5152
commit 1fae92dbaf
4 changed files with 8 additions and 8 deletions

View file

@ -25,18 +25,18 @@ export const LangToggle = () => {
return ( return (
<LoadingButton <LoadingButton
aria-label="Change Language" aria-label="Change Language"
className="flex w-fit items-center gap-2 text-primary" className="flex h-8 w-fit items-center gap-2 px-3 text-primary"
loading={busy} loading={busy}
onClick={() => handleLangChange(locale === "it" ? "en" : "it")} onClick={() => handleLangChange(locale === "it" ? "en" : "it")}
variant="outline" variant="outline"
> >
{locale === "it" ? ( {locale === "it" ? (
<> <>
<ItaFlag className="size-5" /> <ItaFlag className="size-4" />
</> </>
) : ( ) : (
<> <>
<EngFlag className="size-5" /> <EngFlag className="size-4" />
</> </>
)} )}
</LoadingButton> </LoadingButton>

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-2.5"> <div className="float-end flex flex-1 items-center justify-end gap-2">
<RicercaCommand /> <RicercaCommand />
<div className="hidden w-fit items-center gap-2.5 md:flex"> <div className="hidden w-fit items-center gap-2 md:flex">
<LangToggle /> <LangToggle />
<ThemeSwitch /> <ThemeSwitch />
</div> </div>

View file

@ -37,7 +37,7 @@ const ThemeSwitchContent = () => {
<button <button
aria-label="Toggle Theme" aria-label="Toggle Theme"
className={cn( className={cn(
`flex h-9 w-16 items-center rounded-full bg-muted p-[5px] shadow-inner hover:cursor-pointer`, `flex h-7 w-12 items-center rounded-full bg-muted p-[5px] shadow-inner hover:cursor-pointer`,
theme === "light" theme === "light"
? "place-content-end bg-sky-400 hover:bg-sky-500" ? "place-content-end bg-sky-400 hover:bg-sky-500"
: "bg-sky-900 hover:bg-sky-800", : "bg-sky-900 hover:bg-sky-800",
@ -48,7 +48,7 @@ const ThemeSwitchContent = () => {
<motion.div <motion.div
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
className={cn( className={cn(
"flex size-7 items-center justify-center rounded-full bg-black", "flex size-5.5 items-center justify-center rounded-full bg-black",
theme === "light" ? "bg-yellow-300" : "bg-gray-800/60", theme === "light" ? "bg-yellow-300" : "bg-gray-800/60",
)} )}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}

View file

@ -323,7 +323,7 @@ const RicercaHeader = () => {
<div className="flex w-full items-center justify-between gap-2 sm:justify-between"> <div className="flex w-full items-center justify-between gap-2 sm:justify-between">
<div className="relative z-35 flex w-full gap-1 sm:w-auto"> <div className="relative z-35 flex w-full gap-1 sm:w-auto">
<CodiceBox <CodiceBox
className="h-9 w-full border-0" className="h-9 w-full"
inputId="annunci-search" inputId="annunci-search"
optionBoxClassName="top-11 " optionBoxClassName="top-11 "
/> />