Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

refactor: update button sizes and improve layout in various components

Browse source
This commit is contained in:
Marco Pedone 2025-12-16 12:16:16 +01:00
parent 74f2d996ba
commit 94e4913a88
7 changed files with 63 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/infoalloggi/src/components/servizio/annuncio_actions.tsx
View file

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

12
apps/infoalloggi/src/components/servizio/annuncio_card.tsx
View file

@ -42,14 +42,14 @@ export const BasicAnnuncioCard = ({
const { t } = useTranslation(); const { t } = useTranslation();
return ( 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"> <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> <CardTitle className="text-2xl">Annuncio {data.codice}</CardTitle>
{actions} {actions}
</CardHeader> </CardHeader>
<CardContent className="px-3"> <CardContent className="px-3">
<div className="flex w-full flex-col gap-4 md:gap-10"> <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:gap-x-8 md:bg-[#e6e9ec]/50"> <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"> <div className="row-span-3">
<Image <Image
alt={data.codice} alt={data.codice}
@ -75,9 +75,9 @@ export const BasicAnnuncioCard = ({
<span className="text-wrap">{data.titolo_it}</span> <span className="text-wrap">{data.titolo_it}</span>
</div> </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"> <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 tipo={data.tipo} /> <TipoBadge mini tipo={data.tipo} />
<span> <span className="max-w-auto truncate">
{handleConsegna({ {handleConsegna({
aggiornamento: t.card.in_aggiornamento, aggiornamento: t.card.in_aggiornamento,
consegna: data.consegna, consegna: data.consegna,

11
apps/infoalloggi/src/components/servizio/annuncio_dettaglio.tsx
View file

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

11
apps/infoalloggi/src/components/servizio/conferma.tsx
View file

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

28
apps/infoalloggi/src/components/servizio/interactions.tsx
View file

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

30
apps/infoalloggi/src/components/servizio/main.tsx
View file

@ -22,10 +22,7 @@ import {
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { AlarmClockSVG } from "../svgs"; import { AlarmClockSVG } from "../svgs";
import { AnnunciCompatibili } from "./compatibili_dialog"; import { AnnunciCompatibili } from "./compatibili_dialog";
import { import { AnnunciSelezionatiDialog } from "./servizio_annunci_accordions";
AnnunciSelezionatiAccordion,
AnnunciSelezionatiDialog,
} from "./servizio_annunci_accordions";
const ServizioCard = ({ const ServizioCard = ({
cardClassName, cardClassName,
@ -43,7 +40,7 @@ const ServizioCard = ({
return ( return (
<Card <Card
className={cn( 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, cardClassName,
)} )}
> >
@ -270,8 +267,29 @@ export const ServizioContent = () => {
})} })}
</div> </div>
{annunciSelezionati.length > 0 && ( {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"> <div className="flex items-center justify-center">
<AnnunciCompatibili /> <AnnunciCompatibili />
</div> </div>

6
apps/infoalloggi/src/components/servizio/modale_contatti.tsx
View file

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