style: update component styles to use bg-card and adjust heights for consistency

apps/infoalloggi/src/components/counter.tsx

@@ -19,7 +19,7 @@ export const Counter = ({
 		setValue(newValue);
 	};
 	return (
-		<div className="w-38">
+		<div className="w-38 bg-card">
 			<label className="sr-only" htmlFor={name}>
 				{name}
 			</label>

apps/infoalloggi/src/components/custom_ui/InputNumber.tsx

@@ -38,7 +38,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 			prefix,
 			value: controlledValue,
 			className,
-			height = "h-9",
+			height = "h-10",
 			...props
 		},
 		externalRef,
@@ -121,7 +121,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 		};
 
 		return (
-			<div className={cn("flex items-stretch", height)}>
+			<div className={cn("flex items-stretch bg-card", height)}>
 				<NumericFormat
 					allowNegative={min < 0}
 					className={cn(
@@ -149,7 +149,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 				<div className="flex flex-col self-stretch">
 					<Button
 						aria-label="Increase value"
-						className="h-1/2 rounded-l-none rounded-br-none border-input border-b-[0.5px] border-l-0 px-2 focus-visible:relative"
+						className="h-1/2 rounded-l-none rounded-br-none border-input border-b-[0.5px] border-l-0 bg-card px-2 focus-visible:relative"
 						disabled={value === max}
 						onClick={handleIncrement}
 						type="button"
@@ -159,7 +159,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 					</Button>
 					<Button
 						aria-label="Decrease value"
-						className="h-1/2 rounded-l-none rounded-tr-none border-input border-t-[0.5px] border-l-0 px-2 focus-visible:relative"
+						className="h-1/2 rounded-l-none rounded-tr-none border-input border-t-[0.5px] border-l-0 bg-card px-2 focus-visible:relative"
 						disabled={value === min}
 						onClick={handleDecrement}
 						type="button"

apps/infoalloggi/src/components/custom_ui/input.tsx

@@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 				type={type}
 				{...props}
 				className={cn(
-					`w-full rounded-lg border border-border bg-background px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50`,
+					`h-10 w-full rounded-lg border border-border bg-card px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50`,
 					className,
 				)}
 			/>

apps/infoalloggi/src/components/custom_ui/multiselect.tsx

@@ -133,7 +133,7 @@ export const MultiSelect = ({
 			classNames={{
 				control: () =>
 					cn(
-						"mt-2 w-full rounded-lg h-min-[42px] bg-card shadow-xs outline-hidden text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+						"mt-2 w-full rounded-lg h-10 min-h-10! bg-card shadow-xs outline-hidden text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
 						disabled && "bg-muted opacity-50 cursor-not-allowed",
 					),
 				input: () => cn("*:ring-0 focus:*:ring-0"),
@@ -159,7 +159,7 @@ export const MultiSelect = ({
 						"bg-card dark:bg-input border-b border-foreground/50 shadow-xs outline-hidden hover:text-primary hover:bg-neutral-200 dark:hover:bg-neutral-700",
 					),
 				singleValue: () => cn("text-primary font-medium"),
-				valueContainer: () => cn("min-h-[38px]"),
+				valueContainer: () => cn("min-h-[36px]"),
 			}}
 			components={{ MenuList: VirtualizedMenuList }}
 			defaultValue={defaultValue}

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

@@ -23,6 +23,7 @@ import {
 	useServizio,
 } from "~/providers/ServizioProvider";
 import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
+import type { Rinnovi } from "~/schemas/public/Rinnovi";
 import type { UsersId } from "~/schemas/public/Users";
 import type { ServizioData } from "~/server/controllers/servizio.controller";
 import { api } from "~/utils/api";
@@ -53,39 +54,96 @@ import { AnnunciCompatibili } from "./compatibili_dialog";
 import { ServizioInfos } from "./servizio_actions";
 
 export const ServizioList = ({
-	servizi,
+	data,
 	isAdmin,
 	userId,
 }: {
-	servizi: ServizioData[];
+	data: (
+		| { d: Date; type: "servizio"; data: ServizioData }
+		| { d: Date; type: "rinnovo"; data: Rinnovi }
+	)[];
 	isAdmin: boolean;
 	userId: UsersId;
 }) => {
 	const { t } = useTranslation();
-	if (servizi.length === 0) {
+	if (data.length === 0) {
 		return (
 			<div className="m-4 rounded-md bg-yellow-100 p-4 text-yellow-900">
 				{t.servizio.nessun_servizio}
 			</div>
 		);
 	}
-	// if (servizi.length === 1 && servizi[0]) {
+
-	// 	return <Servizio isAdmin={isAdmin} servizio={servizi[0]} userId={userId} />;
-	// }
 	return (
 		<div className="flex flex-col gap-4">
-			{servizi.map((servizio) => (
+			{data.map(({ d: _d, type, data: s }) => {
-				<ServizioLinkCard
+				if (type === "rinnovo") {
+					return (
+						<RinnovoLinkCard
+							data={s}
 							isAdmin={isAdmin}
-					key={servizio.servizio_id}
+							key={s.id}
-					servizio={servizio}
 							userId={userId}
 						/>
-			))}
+					);
+				}
+				return (
+					<ServizioLinkCard
+						isAdmin={isAdmin}
+						key={s.servizio_id}
+						servizio={s}
+						userId={userId}
+					/>
+				);
+			})}
 		</div>
 	);
 };
 
+const RinnovoLinkCard = ({
+	data,
+	isAdmin,
+	userId,
+}: {
+	data: Rinnovi;
+	isAdmin: boolean;
+	userId: UsersId;
+}) => {
+	return (
+		<Link
+			className="group"
+			href={
+				isAdmin
+					? `/area-riservata/admin/user-view/rinnovo/${userId}/${data.id}`
+					: `/area-riservata/rinnovo/${data.id}`
+			}
+			key={data.id}
+		>
+			<Card
+				className={cn(
+					"transition-shadow hover:bg-muted/15 hover:shadow-md",
+				)}
+			>
+				<CardHeader>
+					<CardTitle className="group-hover:underline">
+						Rinnovo {data.codice}
+					</CardTitle>
+					<CardDescription className="">
+						Data rinnovo: {data.decorrenza.toLocaleDateString("it-IT")}
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
+					
+					<div className="flex items-center gap-2 rounded-md text-muted-foreground group-hover:text-foreground">
+						<span>Vai al rinnovo</span>
+						<ArrowRight />
+					</div>
+				</CardContent>
+			</Card>
+		</Link>
+	);
+};
+
 const ServizioLinkCard = ({
 	servizio,
 	isAdmin,

apps/infoalloggi/src/components/ui/select.tsx

@@ -35,7 +35,7 @@ function SelectTrigger({
 	return (
 		<SelectPrimitive.Trigger
 			className={cn(
-				"flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs outline-hidden transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-card px-3 py-2 text-sm shadow-xs outline-hidden transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-10 data-[size=sm]:h-8 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				className,
 			)}
 			data-size={size}

apps/infoalloggi/src/forms/comps.tsx

@@ -8,7 +8,10 @@ export const FieldResetButton = (
 	return (
 		<button
 			{...rest}
-			className={cn("flex items-center gap-2 text-sm leading-none", className)}
+			className={cn(
+				"flex cursor-pointer items-center gap-2 text-sm leading-none",
+				className,
+			)}
 			type="button"
 		>
 			Reset