refactor: adjust styles for LangToggle, SiteHeader, and ThemeSwitch components
This commit is contained in:
parent
0eb12f5152
commit
1fae92dbaf
4 changed files with 8 additions and 8 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 }}
|
||||||
|
|
|
||||||
|
|
@ -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 "
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue