refactor: update button sizes and improve layout in various components

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

@@ -96,7 +96,7 @@ export const AnnuncioActions = () => {
 									variant="destructive"
 								>
 									<Trash2 />
-									<span>Elimina Annuncio</span>
+									<span>Elimina</span>
 								</Button>
 							</Confirm>
 						</PopoverContent>

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

@@ -42,14 +42,14 @@ export const BasicAnnuncioCard = ({
 	const { t } = useTranslation();
 
 	return (
-		<Card className={cn("w-full border-white py-3", className)}>
+		<Card className={cn("w-full gap-2 border-white py-3", className)}>
 			<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-0">
 				<CardTitle className="text-2xl">Annuncio {data.codice}</CardTitle>
 				{actions}
 			</CardHeader>
 			<CardContent className="px-3">
-				<div className="flex w-full flex-col gap-4 md:gap-10">
-					<div className="grid grid-cols-[6rem_auto] gap-2 gap-x-4 rounded-md md:max-w-3xl md:grid-cols-[12rem_auto] md:gap-x-8 md:bg-[#e6e9ec]/50">
+				<div className="flex w-full flex-col gap-2">
+					<div className="grid grid-cols-[6rem_auto] gap-2 gap-x-4 rounded-md md:max-w-3xl md:grid-cols-[12rem_auto] md:border md:border-white md:bg-[#e6e9ec]/50 lg:gap-x-6 xl:gap-x-8 dark:md:border-primary dark:md:bg-card">
 						<div className="row-span-3">
 							<Image
 								alt={data.codice}
@@ -75,9 +75,9 @@ export const BasicAnnuncioCard = ({
 							<span className="text-wrap">{data.titolo_it}</span>
 						</div>
 
-						<div className="col-span-2 flex w-full max-w-xl flex-wrap items-center justify-between gap-3 md:col-span-1 md:pr-8">
-							<TipoBadge tipo={data.tipo} />
-							<span>
+						<div className="col-span-2 flex w-full max-w-xl items-center justify-between gap-2 md:col-span-1 md:pr-8">
+							<TipoBadge mini tipo={data.tipo} />
+							<span className="max-w-auto truncate">
 								{handleConsegna({
 									aggiornamento: t.card.in_aggiornamento,
 									consegna: data.consegna,

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

@@ -18,7 +18,13 @@ import {
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 
-export const TipoBadge = ({ tipo }: { tipo: Annunci["tipo"] }) => {
+export const TipoBadge = ({
+	tipo,
+	mini,
+}: {
+	tipo: Annunci["tipo"];
+	mini?: boolean;
+}) => {
 	return (
 		<Badge
 			className={cn(
@@ -29,7 +35,7 @@ export const TipoBadge = ({ tipo }: { tipo: Annunci["tipo"] }) => {
 				tipo === "Vendita" && "bg-green-400",
 			)}
 		>
-			Affitto {tipo}
+			{!mini && "Affitto"} {tipo}
 		</Badge>
 	);
 };
@@ -43,7 +49,6 @@ export const AnnuncioDettaglio = ({ data }: { data: AnnuncioRicerca }) => {
 				<Button
 					aria-label="Dettagli Annuncio"
 					className="w-full"
-					size="sm"
 					variant="outline"
 				>
 					<Expand /> Dettaglio

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

@@ -66,8 +66,8 @@ export const ConfermaAnnuncioModal = () => {
 		<>
 			<Credenza onOpenChange={setOpen} open={open}>
 				<CredenzaTrigger asChild>
-					<Button aria-label="Conferma immobile" className="w-fit">
-						<Handshake className="size-6" /> {t.richieste.cta}
+					<Button aria-label="Conferma immobile" className="w-full sm:w-fit">
+						<Handshake className="size-5" /> {t.richieste.cta}
 					</Button>
 				</CredenzaTrigger>
 				<CredenzaContent className="max-h-[90vh]">
@@ -213,8 +213,11 @@ export const ConfermaInLavorazioneModal = () => {
 	return (
 		<Credenza>
 			<CredenzaTrigger asChild>
-				<Button aria-label="Conferma in lavorazione" className="w-fit">
-					<CircleCheck className="size-7" />
+				<Button
+					aria-label="Conferma in lavorazione"
+					className="w-full sm:w-fit"
+				>
+					<CircleCheck className="size-5" />
 					Conferma in lavorazione
 				</Button>
 			</CredenzaTrigger>

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

@@ -38,8 +38,8 @@ const SezioneConferma = () => {
 				aria-label="Conferma immobile"
 				href={`/servizio/riapri-conferma/${servizioId}/${annuncioId}`}
 			>
-				<Button className="w-fit" variant="success">
-					<Pointer className="size-6" />
+				<Button className="w-full sm:w-fit" variant="success">
+					<Pointer className="size-5" />
 					Rivedi la conferma
 				</Button>
 			</Link>
@@ -52,8 +52,8 @@ const SezioneConferma = () => {
 					aria-label="Conferma immobile"
 					href={`/servizio/conferma-immobile/${servizioId}/${annuncioId}`}
 				>
-					<Button className="w-fit" variant="success">
-						<Pointer className="size-6" />
+					<Button className="w-full sm:w-fit" variant="success">
+						<Pointer className="size-5" />
 						Confermato - Procedi ora
 					</Button>
 				</Link>
@@ -64,10 +64,10 @@ const SezioneConferma = () => {
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<Button
-							className="w-fit cursor-not-allowed opacity-50"
+							className="w-full cursor-not-allowed opacity-50 sm:w-fit"
 							variant="success"
 						>
-							<Pointer className="size-6" />
+							<Pointer className="size-5" />
 							Confermato - Procedi ora
 						</Button>
 					</TooltipTrigger>
@@ -127,8 +127,8 @@ const PostConfermaSection = () => {
 						href={`/servizio/contratto/${servizioId}/${annuncioId}`}
 						target="_blank"
 					>
-						<Button className="w-fit">
-							<FileText className="size-6" />
+						<Button className="w-full sm:w-fit">
+							<FileText className="size-5" />
 							Visualizza il contratto
 						</Button>
 					</Link>
@@ -137,7 +137,7 @@ const PostConfermaSection = () => {
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<Button className="w-fit cursor-not-allowed opacity-50">
-									<FileText className="size-6" />
+									<FileText className="size-5" />
 									Visualizza il contratto
 								</Button>
 							</TooltipTrigger>
@@ -159,7 +159,7 @@ const PostConfermaSection = () => {
 							target="_blank"
 						>
 							<Button className="w-fit">
-								<FileBadge className="size-6" />
+								<FileBadge className="size-5" />
 								Visualizza la registrazione
 							</Button>
 						</Link>
@@ -168,7 +168,7 @@ const PostConfermaSection = () => {
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<Button className="w-fit cursor-not-allowed opacity-50">
-										<FileBadge className="size-6" />
+										<FileBadge className="size-5" />
 										Visualizza la registrazione
 									</Button>
 								</TooltipTrigger>
@@ -190,7 +190,7 @@ export const Interactions = () => {
 	const { data } = useServizioAnnuncio();
 
 	return (
-		<div className="flex w-full flex-col gap-3">
+		<div className="flex w-full flex-col flex-wrap gap-2 sm:flex-row">
 			<ContattiProprietarioModal />
 
 			<SezioneConferma />
@@ -236,7 +236,7 @@ export const SaldoButton = ({
 			}}
 			variant={variant}
 		>
-			<PackageCheck className="size-6" />
+			<PackageCheck className="size-5" />
 			Procedi al saldo
 		</Button>
 	);
@@ -277,7 +277,7 @@ const SaldoConsulenzaButton = ({
 			}}
 			variant={variant}
 		>
-			<PackageCheck className="size-6" />
+			<PackageCheck className="size-5" />
 			Procedi al saldo della consulenza
 		</Button>
 	);

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

@@ -22,10 +22,7 @@ import {
 import { api } from "~/utils/api";
 import { AlarmClockSVG } from "../svgs";
 import { AnnunciCompatibili } from "./compatibili_dialog";
-import {
-	AnnunciSelezionatiAccordion,
-	AnnunciSelezionatiDialog,
-} from "./servizio_annunci_accordions";
+import { AnnunciSelezionatiDialog } from "./servizio_annunci_accordions";
 
 const ServizioCard = ({
 	cardClassName,
@@ -43,7 +40,7 @@ const ServizioCard = ({
 	return (
 		<Card
 			className={cn(
-				"gap-2 rounded-none rounded-b-md border-primary border-t-0 pb-0",
+				"gap-0 rounded-none rounded-b-md border-primary border-t-0 pb-0",
 				cardClassName,
 			)}
 		>
@@ -270,8 +267,29 @@ export const ServizioContent = () => {
 							})}
 						</div>
 						{annunciSelezionati.length > 0 && (
-							<AnnunciSelezionatiAccordion annunci={annunciSelezionati} />
+							<div className="flex flex-col gap-3">
+								<h2 className="px-1 font-semibold text-xl">
+									Annunci selezionati:
+								</h2>
+								<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+									{annunciSelezionati.map((data) => {
+										return (
+											<ServizioAnnuncioProvider
+												data={data}
+												key={data.id}
+												servizioId={servizio.servizio_id}
+												userId={userId}
+											>
+												<AnnuncioCard className="rounded-md border-primary" />
+											</ServizioAnnuncioProvider>
+										);
+									})}
+								</div>
+							</div>
 						)}
+						{/* {annunciSelezionati.length > 0 && (
+							<AnnunciSelezionatiAccordion annunci={annunciSelezionati} />
+						)} */}
 						<div className="flex items-center justify-center">
 							<AnnunciCompatibili />
 						</div>

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

@@ -52,8 +52,8 @@ export const ContattiProprietarioModal = () => {
 						className="w-full md:w-fit"
 						variant="success"
 					>
-						<CircleUser className="size-7" />
-						Vedi i contatti
+						<CircleUser className="size-5" />
+						Contatti
 					</Button>
 				) : (
 					<Button
@@ -61,7 +61,7 @@ export const ContattiProprietarioModal = () => {
 						className="w-full md:w-fit"
 						variant="warning"
 					>
-						<CircleUser className="size-7" />
+						<CircleUser className="size-5" />
 						Ottieni i contatti
 					</Button>
 				)}