Refactor components for improved styling and layout consistency

- Updated Layout component to enhance flex properties for better responsiveness.
- Adjusted CredenzaContent width in UserDashboard for improved layout.
- Modified Footer component for better spacing and logo size adjustments.
- Enhanced ServizioContent layout with new AlarmClockSVG and improved button styling.
- Updated Status500 and 404 pages to use muted foreground text for better readability.
- Added new PasswordSVG and AlarmClockSVG components for better icon representation.
- Refined table components to use muted foreground colors for icons.
- Improved form components by removing unnecessary classes and enhancing label styling.
- Cleaned up global CSS by removing unused CSS variables for better maintainability.

apps/infoalloggi/src/components/Layout.tsx

@@ -47,7 +47,9 @@ export const Layout = ({
 					{BannerFactory(banner)}
 				</div>
 			))}
-			<main className={cn("h-full flex-1 grow", containerClassName)}>
+			<main
+				className={cn("flex h-full flex-1 grow flex-col", containerClassName)}
+			>
 				{children}
 			</main>
 

apps/infoalloggi/src/components/area-riservata/dashboard.tsx

@@ -109,7 +109,7 @@ export const UserDashboard = ({ userId }: { userId: UsersId }) => {
 							<CircleHelp />
 						</Button>
 					</CredenzaTrigger>
-					<CredenzaContent className="max-h-[90vh]">
+					<CredenzaContent className="max-h-[90vh] w-full md:max-w-3xl">
 						<CredenzaHeader>
 							<CredenzaTitle className="text-center font-semibold text-2xl">
 								Domande frequenti

apps/infoalloggi/src/components/footer.tsx

@@ -12,23 +12,23 @@ export const Footer = ({ className }: FooterProps) => {
 	return (
 		<div className="mt-auto">
 			<footer className={cn("bottom-0 z-40 w-full", className)}>
-				<div className="mx-auto max-w-6xl px-4 py-6 sm:px-6 lg:px-8">
+				<div className="mx-auto max-w-6xl px-2 xs:px-4 py-4 xs:py-6 sm:px-6 lg:px-8">
 					<div className="text-center">
 						<Link
 							aria-label="footerLogo"
 							className="flex items-center justify-center font-bold text-3xl tracking-wide antialiased"
 							href="/"
 						>
-							<LogoSvg className="h-12 w-auto" />
+							<LogoSvg className="h-8 xs:h-12 w-auto" />
 						</Link>
 					</div>
 
-					<nav aria-label="Footer Nav" className="mt-6">
+					<nav aria-label="Footer Nav" className="mt-2 xs:mt-6">
-						<ul className="flex flex-wrap justify-center gap-6 md:gap-8 lg:gap-12">
+						<ul className="flex flex-wrap justify-center gap-4 xs:gap-6 md:gap-8 lg:gap-12">
 							<li>
 								<Link
 									aria-label="footerGuida"
-									className="text-sm"
+									className="text-xs xs:text-sm"
 									href="/guida"
 								>
 									{t.footer.Guida}
@@ -38,7 +38,7 @@ export const Footer = ({ className }: FooterProps) => {
 							<li>
 								<Link
 									aria-label="footerChiSiamo"
-									className="text-sm"
+									className="text-xs xs:text-sm"
 									href="/chi-siamo"
 								>
 									{t.footer["Chi Siamo"]}
@@ -48,7 +48,7 @@ export const Footer = ({ className }: FooterProps) => {
 							<li>
 								<Link
 									aria-label="footerTerminiCondizioni"
-									className="text-sm"
+									className="text-xs xs:text-sm"
 									href="/termini-condizioni"
 								>
 									{t.termini_condizioni_title}
@@ -57,7 +57,7 @@ export const Footer = ({ className }: FooterProps) => {
 							<li>
 								<Link
 									aria-label="footerPrivacyPolicy"
-									className="text-sm"
+									className="text-xs xs:text-sm"
 									href="/privacy-policy"
 								>
 									{t.privacy_policy_title}
@@ -65,7 +65,7 @@ export const Footer = ({ className }: FooterProps) => {
 							</li>
 						</ul>
 					</nav>
-					<div className="py-4">
+					<div className="py-2 xs:py-4">
 						<BlurryDivider />
 					</div>
 

apps/infoalloggi/src/components/servizio/main.tsx

@@ -20,6 +20,7 @@ import {
 	useServizio,
 } from "~/providers/ServizioProvider";
 import { api } from "~/utils/api";
+import { AlarmClockSVG } from "../svgs";
 import { AnnunciCompatibili } from "./compatibili_dialog";
 import {
 	AnnunciSelezionatiAccordion,
@@ -126,19 +127,24 @@ export const ServizioContent = () => {
 		return (
 			<ServizioCard
 				content={
-					<div className="flex flex-col gap-4">
+					<div className="flex w-full flex-col items-center justify-center gap-4">
-						<div className="flex flex-wrap gap-3">
+						<div className="flex w-full max-w-md flex-col items-center justify-center gap-4 text-center">
+							<AlarmClockSVG className="size-46" />
+							<h1 className="text-xl">Servizio non ancora attivato</h1>
 							<Link
 								aria-label="Attiva Servizio"
+								className="w-full"
 								href={`/servizio/onboard/${servizio.servizio_id}`}
 							>
-								<Button variant="success">
+								<Button className="w-full text-lg" variant="success">
 									<span>Attiva il Servizio Ora!</span>
 									<ArrowRight />
 								</Button>
 							</Link>
+
 							{isAdmin && (
 								<Button
+									className="w-full"
 									onClick={() =>
 										updateServizio({
 											data: {
@@ -154,15 +160,17 @@ export const ServizioContent = () => {
 								</Button>
 							)}
 						</div>
+
 						{isAdmin && <AnnunciSelezionatiDialog annunci={servizio.annunci} />}
 					</div>
 				}
+				contentClassName={cn(!isAdmin && "gap-0")}
 				header={
 					<div className="flex w-full flex-col gap-2">
-						<span className="text-lg">Servizio non ancora attivato</span>
 						<ServizioActions />
 					</div>
 				}
+				headerClassName={cn(!isAdmin && "pb-0")}
 			/>
 		);
 	}

apps/infoalloggi/src/components/status-page.tsx

@@ -13,7 +13,7 @@ export const Status500 = () => {
 				<h3 className="font-semibold text-4xl text-accent-foreground sm:text-5xl">
 					{t[500].titolo}
 				</h3>
-				<p className="text-neutral-600">{t[500].sottotitolo}</p>
+				<p className="text-muted-foreground">{t[500].sottotitolo}</p>
 				<div className="flex flex-wrap items-center justify-center gap-3">
 					<button
 						className="block rounded-lg bg-red-600 px-4 py-2 font-medium text-white duration-150 hover:bg-red-500 active:bg-red-700"
@@ -25,7 +25,7 @@ export const Status500 = () => {
 						{t[500].CTA}
 					</button>
 					<Link
-						className="block rounded-lg border px-4 py-2 font-medium text-neutral-700 duration-150 hover:bg-neutral-50 active:bg-neutral-100"
+						className="block rounded-lg border px-4 py-2 font-medium duration-150 hover:bg-neutral-50 active:bg-neutral-100"
 						href="/"
 					>
 						{t[500].home}

apps/infoalloggi/src/components/svgs.tsx

@@ -728,3 +728,73 @@ export const GoogleMapsIcon = (props: SVGProps<SVGSVGElement>) => (
 		/>
 	</svg>
 );
+
+export const PasswordSVG = (props: SVGProps<SVGSVGElement>) => (
+	<svg
+		height={800}
+		viewBox="0 0 290.626 290.626"
+		width={800}
+		xmlns="http://www.w3.org/2000/svg"
+		xmlSpace="preserve"
+		{...props}
+	>
+		<title>PswIcon</title>
+		<path
+			d="M234.375 150h-15l-3.75 9.375h-4.688l-3.75-9.375H191.25l-3.75 9.375h-4.688l-3.75-9.375h-15.938l-3.75 9.375h-4.687l-3.75-9.375H126.81c-6.909-13.88-21.197-23.438-37.748-23.438-23.302 0-42.187 18.886-42.187 42.188s18.886 42.188 42.187 42.188c16.556 0 30.844-9.558 37.748-23.438h107.564l14.063-18.75L234.375 150z"
+			style={{
+				fill: "#f9ba48",
+			}}
+		/>
+		<path
+			d="M290.625 56.25c0-31.017-25.233-56.25-56.25-56.25H56.25C25.233 0 0 25.233 0 56.25c0 18.816 9.319 35.461 23.55 45.68-.038.398-.112.797-.112 1.195V243.75c0 7.753 6.309 14.063 14.062 14.063h46.875v23.438H60.938v9.375H229.687v-9.375H206.25v-23.438h46.875c7.753 0 14.063-6.309 14.063-14.063V103.125c0-.398-.075-.797-.113-1.195 14.231-10.219 23.55-26.864 23.55-45.68zm-93.75 225H93.75v-23.438h103.125v23.438zm56.25-32.812H37.5a4.693 4.693 0 0 1-4.688-4.688v-9.375h225v9.375a4.692 4.692 0 0 1-4.687 4.688zM257.813 225h-225V107.32c7.144 3.291 15.066 5.18 23.437 5.18h178.125c8.372 0 16.294-1.889 23.438-5.18V225zm-23.438-121.875H56.25c-25.847 0-46.875-21.028-46.875-46.875S30.403 9.375 56.25 9.375h178.125c25.847 0 46.875 21.028 46.875 46.875s-21.028 46.875-46.875 46.875z"
+			style={{
+				fill: "#333",
+			}}
+		/>
+		<path
+			d="M103.125 42.188c0-15.511-12.614-28.125-28.125-28.125S46.875 26.677 46.875 42.188v4.688h-4.687v51.563h65.625V46.875h-4.688v-4.687zm-46.875 0c0-10.341 8.409-18.75 18.75-18.75s18.75 8.409 18.75 18.75v4.688h-37.5v-4.688zm42.188 46.875H51.563V56.25h46.875v32.813z"
+			style={{
+				fill: "#333",
+			}}
+		/>
+		<path
+			d="M70.313 78.384v5.991h9.375v-5.991c2.789-1.627 4.688-4.617 4.688-8.072 0-5.17-4.205-9.375-9.375-9.375s-9.375 4.205-9.375 9.375c-.001 3.455 1.897 6.446 4.687 8.072zM157.012 44.892l-11.699 3.802V37.5h-9.375v11.194l-11.7-3.802-2.893 8.916 11.696 3.801-7.228 9.947 7.579 5.513 7.233-9.952 7.233 9.952 7.58-5.513-7.229-9.947 11.696-3.801zM203.887 44.892l-11.7 3.802V37.5h-9.375v11.194l-11.7-3.802-2.892 8.916 11.696 3.801-7.229 9.947 7.58 5.513 7.233-9.952 7.233 9.952 7.579-5.513-7.228-9.947 11.696-3.801zM250.762 44.892l-11.7 3.802V37.5h-9.375v11.194l-11.7-3.802-2.892 8.916 11.696 3.801-7.229 9.947 7.58 5.513 7.233-9.952 7.233 9.952 7.579-5.513-7.228-9.947 11.696-3.801zM70.313 154.688c-7.753 0-14.062 6.309-14.062 14.063s6.309 14.063 14.062 14.063 14.062-6.309 14.062-14.063-6.309-14.063-14.062-14.063zm0 18.75c-2.588 0-4.688-2.105-4.688-4.688s2.1-4.688 4.688-4.688S75 166.167 75 168.75s-2.1 4.688-4.687 4.688z"
+			style={{
+				fill: "#333",
+			}}
+		/>
+	</svg>
+);
+
+export const AlarmClockSVG = (props: SVGProps<SVGSVGElement>) => (
+	<svg
+		className="icon"
+		height={800}
+		viewBox="0 0 1024 1024"
+		width={800}
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<title>AlarmClockIcon</title>
+		<path
+			d="M714.706 561.72c0 111.604-90.62 204.205-202.462 204.205s-203.887-89.75-203.887-201.592c0-111.843 90.459-201.592 201.038-201.592v90.76c-56.313 0-110.278 49.986-110.278 111.702s50.698 109.962 112.415 109.962c61.716 0 112.416-49.963 112.416-113.444h90.758z"
+			fill="#E0E0E0"
+		/>
+		<path
+			d="M121.282 621.055c-30.796 0-55.852-25.055-55.852-55.852s25.056-55.852 55.852-55.852 55.852 25.056 55.852 55.852-25.055 55.852-55.852 55.852zm0-83.777c-15.398 0-27.925 12.524-27.925 27.925s12.527 27.926 27.925 27.926c15.398 0 27.926-12.525 27.926-27.926s-12.527-27.925-27.926-27.925zm781.922 83.777c-30.796 0-55.852-25.055-55.852-55.852s25.056-55.852 55.852-55.852 55.852 25.056 55.852 55.852-25.056 55.852-55.852 55.852zm0-83.777c-15.401 0-27.925 12.524-27.925 27.925s12.524 27.926 27.925 27.926 27.926-12.525 27.926-27.926-12.524-27.925-27.926-27.925zm-474.738-376.65c-5.75 0-11.136-3.588-13.165-9.314-2.57-7.275 1.241-15.252 8.512-17.822a264.247 264.247 0 0 1 44.384-11.46c7.632-1.262 14.809 3.866 16.076 11.467 1.272 7.609-3.862 14.802-11.467 16.076a236.483 236.483 0 0 0-39.687 10.247 13.887 13.887 0 0 1-4.653.805zm166.573-.348c-1.527 0-3.075-.252-4.595-.784a236.411 236.411 0 0 0-38.76-9.92c-7.608-1.27-12.741-8.468-11.474-16.07 1.268-7.61 8.488-12.75 16.07-11.475a264.637 264.637 0 0 1 43.354 11.093c7.282 2.543 11.127 10.5 8.59 17.78-2.01 5.763-7.41 9.376-13.185 9.376zm-30.355 388.13H711.1v27.645H564.684zM495.06 358.992h26.62v148.463h-26.62z"
+			fill="#FFB612"
+		/>
+		<path
+			d="M231.148 382.78c40.78-62.725 102.025-110.544 172.45-134.653l13.888-4.759-5.444-13.629c-20.235-50.677-68.597-83.423-123.205-83.423-73.141 0-132.647 59.506-132.647 132.648 0 42.508 20.596 82.713 55.095 107.537l11.883 8.557 7.98-12.278zm-32.49-50.868c9.45-12.677 19.609-24.93 30.475-36.333a392.063 392.063 0 0 1 87.64-69.037l-13.983-24.176a420.1 420.1 0 0 0-93.875 73.946c-7.725 8.11-15.125 16.617-22.22 25.368-1.655-7.399-2.581-15-2.581-22.716 0-57.747 46.978-104.722 104.722-104.722 38.244 0 72.607 20.337 91.032 52.852-65.292 25.607-122.424 70.23-163.335 127.554-7.046-6.728-12.993-14.427-17.875-22.736z"
+			fill="#262626"
+		/>
+		<path
+			d="M812.446 565.204c0-165.53-134.673-300.202-300.202-300.202-165.534 0-300.202 134.673-300.202 300.202 0 83.113 33.966 158.431 88.727 212.844l-33.967 58.976c-19.28 33.469-7.793 76.434 25.607 95.763 10.786 6.245 22.758 9.436 34.894 9.436 6.065 0 12.173-.797 18.187-2.407 18.08-4.84 33.189-16.458 42.543-32.698l32.337-56.146a298.98 298.98 0 0 0 91.874 14.434c32.04 0 62.898-5.097 91.872-14.434l32.334 56.146c9.354 16.24 24.463 27.851 42.544 32.698a70.357 70.357 0 0 0 18.19 2.407c12.136 0 24.107-3.19 34.894-9.436 33.4-19.329 44.888-62.294 25.615-95.763l-33.97-58.98c54.757-54.413 88.723-129.73 88.723-212.84zm-575.7 0c0-145.453 118.043-264.63 258.315-271.922v65.71h26.62v-65.71c70.649 3.277 125.53 29.17 170.603 69.876l-47.882 49.013 20.31 19.745 49.295-50.429c40.707 45.072 66.882 103.444 70.16 166.924H711.1v27.645h73.065c-3.277 63.481-29.17 124.823-69.876 169.895l-49.013-48.236-19.745 20.134 46.75 49.208c-45.07 40.707-99.953 66.793-170.601 70.07v-72.675H495.06v72.676c-140.272-7.295-258.313-126.472-258.313-271.924zm101.52 347.634c-10.837 2.91-22.148 1.41-31.866-4.22-20.102-11.632-27.012-37.498-15.402-57.659l6.243-10.84c22.24 17.437 46.351 32.024 72.066 43.564l-5.47 9.5c-5.629 9.762-14.71 16.75-25.57 19.655zm45.034-53.45c-25.83-11.323-49.934-25.965-71.988-43.698l10.645-18.482a300.634 300.634 0 0 0 71.912 43.83l-10.57 18.35zm334.787 49.237c-9.709 5.618-21.033 7.118-31.867 4.213-10.867-2.911-19.942-9.893-25.566-19.656l-5.47-9.498a347.862 347.862 0 0 0 72.07-43.55l6.234 10.825c11.61 20.16 4.697 46.027-15.401 57.666zm-4.921-92.95c-22.018 17.694-46.146 32.37-71.976 43.71l-10.568-18.35a300.669 300.669 0 0 0 71.908-43.828l10.636 18.468z"
+			fill="#262626"
+		/>
+		<path
+			d="M735.65 146.317c-54.612 0-102.97 32.746-123.206 83.423l-5.44 13.63 13.887 4.758c70.422 24.108 131.666 71.928 172.45 134.653l7.983 12.278 11.877-8.557c34.498-24.83 55.096-65.028 55.096-107.537 0-73.143-59.505-132.648-132.648-132.648zm72.303 208.332c-40.907-57.324-98.04-101.947-163.334-127.554 18.421-32.515 52.783-52.852 91.031-52.852 57.747 0 104.722 46.975 104.722 104.722 0 8.198-1.075 16.256-2.938 24.088-7.422-9.237-15.194-18.208-23.323-26.74a420.063 420.063 0 0 0-93.881-73.946l-13.977 24.176a392.11 392.11 0 0 1 87.636 69.037c11.178 11.727 21.624 24.328 31.288 37.382-4.768 7.899-10.479 15.246-17.224 21.687zm-295.71-166.444c30.797 0 55.853-25.055 55.853-55.851s-25.056-55.852-55.852-55.852-55.852 25.055-55.852 55.852 25.055 55.851 55.852 55.851zm0-83.777c15.402 0 27.926 12.524 27.926 27.926s-12.524 27.925-27.925 27.925c-15.399 0-27.926-12.524-27.926-27.925s12.527-27.926 27.926-27.926zm0 530.59c38.494 0 69.815-31.32 69.815-69.814s-31.32-69.814-69.814-69.814c-38.497 0-69.815 31.32-69.815 69.814s31.318 69.815 69.815 69.815zm0-111.703c23.1 0 41.889 18.79 41.889 41.888 0 23.099-18.79 41.888-41.888 41.888-23.1 0-41.888-18.79-41.888-41.888-.002-23.098 18.789-41.888 41.888-41.888z"
+			fill="#262626"
+		/>
+	</svg>
+);

apps/infoalloggi/src/components/tables/prezziario-tables.tsx

@@ -175,7 +175,7 @@ export const PrezzarioTable = ({
 						}}
 						variant="ghost"
 					>
-						<Cog className="text-neutral-600" />
+						<Cog className="text-muted-foreground" />
 					</Button>
 				);
 			},

apps/infoalloggi/src/components/tables/users-table.tsx

@@ -201,7 +201,7 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 									className="flex w-full items-center gap-2"
 									href={`/area-riservata/admin/user-view/ricerca/${user.id}`}
 								>
-									<Search className="text-neutral-600" /> Ricerca
+									<Search className="text-muted-foreground" /> Ricerca
 								</Link>
 							</DropdownMenuItem>
 							<DropdownMenuItem>
@@ -210,7 +210,7 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 									className="flex w-full items-center gap-2"
 									href={`/area-riservata/admin/user-view/comunicazioni/${user.id}`}
 								>
-									<Mail className="text-neutral-600" /> Comunicazioni
+									<Mail className="text-muted-foreground" /> Comunicazioni
 								</Link>
 							</DropdownMenuItem>
 							<DropdownMenuItem>
@@ -219,7 +219,7 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 									className="flex w-full items-center gap-2"
 									href={`/area-riservata/admin/user-view/edit-user/${user.id}`}
 								>
-									<UserCog className="text-neutral-600" /> Profilo
+									<UserCog className="text-muted-foreground" /> Profilo
 								</Link>
 							</DropdownMenuItem>
 
@@ -229,7 +229,7 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 									className="flex w-full items-center gap-2"
 									href={`/area-riservata/admin/user-view/ordini/${user.id}`}
 								>
-									<ShoppingBag className="text-neutral-600" /> Ordini
+									<ShoppingBag className="text-muted-foreground" /> Ordini
 								</Link>
 							</DropdownMenuItem>
 							<DropdownMenuItem>
@@ -238,7 +238,7 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 									className="flex w-full items-center gap-2"
 									href={`/area-riservata/admin/user-view/allegati/${user.id}`}
 								>
-									<Paperclip className="text-neutral-600" /> Allegati
+									<Paperclip className="text-muted-foreground" /> Allegati
 								</Link>
 							</DropdownMenuItem>
 							<DropdownMenuSeparator />

apps/infoalloggi/src/forms/FormChangePassword.tsx

@@ -119,9 +119,7 @@ export const ChangePasswordForm = () => {
 					render={({ field }) => (
 						<FormItem>
 							<div className="flex flex-col gap-x-2">
-								<FormLabel className="text-neutral-600" htmlFor="newPsw">
+								<FormLabel htmlFor="newPsw">{t.pwReset.newPw}</FormLabel>
-									{t.pwReset.newPw}
-								</FormLabel>
 
 								<FormMessage
 									className={cn(

apps/infoalloggi/src/forms/FormContattoAnnuncio.tsx

@@ -98,7 +98,7 @@ export const FormContattoAnnucio = ({ codice }: { codice: string }) => {
 						<h3 className="font-semibold text-4xl text-accent-foreground sm:text-5xl">
 							Successo
 						</h3>
-						<p className="text-neutral-600">Email inviata correttamente</p>
+						<p className="text-muted-foreground">Email inviata correttamente</p>
 						<div className="flex flex-wrap items-center justify-center gap-3"></div>
 					</div>
 				</div>

apps/infoalloggi/src/forms/FormRstPwFromToken.tsx

@@ -121,7 +121,7 @@ export const FormRstPwFromToken = (props: { token: string }) => {
 						render={({ field }) => (
 							<FormItem>
 								<div className="flex flex-col gap-x-2">
-									<FormLabel className="text-neutral-600" htmlFor="password">
+									<FormLabel htmlFor="password">
 										{t.auth.signup.password}
 									</FormLabel>
 

apps/infoalloggi/src/pages/404.tsx

@@ -13,7 +13,7 @@ export default function Custom404() {
 					<h3 className="font-semibold text-4xl text-accent-foreground sm:text-5xl">
 						{t[404].titolo}
 					</h3>
-					<p className="text-neutral-600">{t[404].sottotitolo}</p>
+					<p className="text-muted-foreground">{t[404].sottotitolo}</p>
 					<div className="flex flex-wrap items-center justify-center gap-3">
 						<button
 							className="block rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white duration-150 hover:bg-indigo-500 active:bg-indigo-700"
@@ -25,7 +25,7 @@ export default function Custom404() {
 							{t[404].CTA}
 						</button>
 						<Link
-							className="block rounded-lg border px-4 py-2 font-medium text-neutral-700 duration-150 hover:bg-neutral-50 active:bg-neutral-100"
+							className="block rounded-lg border px-4 py-2 font-medium duration-150 hover:bg-neutral-50 active:bg-neutral-100"
 							href="/"
 						>
 							{t[404].home}

apps/infoalloggi/src/pages/500.tsx

@@ -13,7 +13,7 @@ export default function Custom500() {
 					<h3 className="font-semibold text-4xl text-accent-foreground sm:text-5xl">
 						{t[500].titolo}
 					</h3>
-					<p className="text-neutral-600">{t[500].sottotitolo}</p>
+					<p className="text-muted-foreground">{t[500].sottotitolo}</p>
 					<div className="flex flex-wrap items-center justify-center gap-3">
 						<button
 							className="block rounded-lg bg-red-600 px-4 py-2 font-medium text-white duration-150 hover:bg-red-500 active:bg-red-700"
@@ -25,7 +25,7 @@ export default function Custom500() {
 							{t[500].CTA}
 						</button>
 						<Link
-							className="block rounded-lg border px-4 py-2 font-medium text-neutral-700 duration-150 hover:bg-neutral-50 active:bg-neutral-100"
+							className="block rounded-lg border px-4 py-2 font-medium duration-150 hover:bg-neutral-50 active:bg-neutral-100"
 							href="/"
 						>
 							{t[500].home}

apps/infoalloggi/src/pages/500Auth.tsx

@@ -11,7 +11,7 @@ export default function Custom500Auth() {
 					<h3 className="font-semibold text-4xl text-accent-foreground sm:text-5xl">
 						{t[500].titolo}
 					</h3>
-					<p className="text-neutral-600">{t[500].sottotitolo}</p>
+					<p className="text-muted-foreground">{t[500].sottotitolo}</p>
 					<div className="flex flex-wrap items-center justify-center gap-3">
 						<Link
 							className="block rounded-lg bg-red-600 px-4 py-2 font-medium text-white duration-150 hover:bg-red-500 active:bg-red-700"
@@ -21,7 +21,7 @@ export default function Custom500Auth() {
 						</Link>
 
 						<Link
-							className="block rounded-lg border px-4 py-2 font-medium text-neutral-700 duration-150 hover:bg-neutral-50 active:bg-neutral-100"
+							className="block rounded-lg border px-4 py-2 font-medium duration-150 hover:bg-neutral-50 active:bg-neutral-100"
 							href="/"
 						>
 							{t[500].home}

apps/infoalloggi/src/pages/auth/accetta-invito/[token].tsx

@@ -13,6 +13,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "~/components/custom_ui/form";
+import { PasswordSVG } from "~/components/svgs";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { useStrongPassword } from "~/hooks/useStrongPassword";
@@ -96,38 +97,32 @@ const AcceptInvitePage: NextPageWithLayout<InviteTokenProps> = ({
 
 	if (!valid) {
 		return (
-			<div className="space-y-2 pt-20 text-center">
+			<div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
-				<Frown className="mx-auto mb-4 size-20 text-muted-foreground" />
+				<Frown className="mx-auto mb-4 size-28 text-muted-foreground" />
 
 				<h1 className="font-bold text-xl">Questo link non valido</h1>
-				<p className="text-muted-foreground">
+				<p>Il link è scaduto o è già stato utilizzato.</p>
-					Il link è scaduto o è già stato utilizzato.
-				</p>
 				<p>Contattaci per ricevere una nuova email.</p>
 			</div>
 		);
 	}
 
 	return (
-		<div className="mx-auto max-w-md space-y-6 p-6">
+		<div className="mx-auto w-full max-w-lg space-y-10 py-6 md:py-10">
-			<div>
+			<div className="flex w-full items-center justify-center">
-				<h1 className="font-bold text-2xl">Completa la registrazione</h1>
+				<PasswordSVG className="size-48" />
 			</div>
 
 			<Form {...form}>
-				<form
+				<form className="space-y-6 px-4" onSubmit={form.handleSubmit(onSubmit)}>
-					className="space-y-8 px-0.5"
+					<h1 className="font-bold text-2xl">Scegli la tua password</h1>
-					onSubmit={form.handleSubmit(onSubmit)}
-				>
 					<FormField
 						control={form.control}
 						name="newPsw"
 						render={({ field }) => (
 							<FormItem>
 								<div className="flex flex-col gap-x-2">
-									<FormLabel className="text-neutral-600" htmlFor="newPsw">
+									<FormLabel htmlFor="newPsw">Scegli una password</FormLabel>
-										Scegli una password
-									</FormLabel>
 
 									<FormMessage
 										className={cn(

apps/infoalloggi/src/styles/globals.css

@@ -274,77 +274,6 @@
 }
 
 
-/*
-:root {
-  
-  --radius: 0.625rem;
-  --backgroundbkp: oklch(1 0 0);
-  --background: oklch(70.716% 0.07403 219.01);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}*/
 
 @layer base {
   html {