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

Enhance styling and structure: update component styles for better visual consistency and usability across various components

Browse source
This commit is contained in:
Marco Pedone 2025-08-20 17:00:36 +02:00
parent aaea1eb6bb
commit 2b0efdfc32
9 changed files with 86 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/infoalloggi/src/components/InformationBubble.tsx
View file

@ -63,12 +63,15 @@ const InformationBubble = ({
/> />
</HybridTooltipTrigger> </HybridTooltipTrigger>
<HybridTooltipContent side={side}> <HybridTooltipContent
side={side}
className="border-border -mb-1.5 bg-white shadow-sm [&>span>svg]:invisible"
>
{href ? ( {href ? (
<Link <Link
href={href} href={href}
target={target} target={target}
className="flex items-center justify-center text-blue-600 underline-offset-2 hover:underline" className="flex items-center justify-center text-sm text-blue-500 underline-offset-2 hover:underline"
> >
<ExternalLink className="mr-1 size-4" /> <ExternalLink className="mr-1 size-4" />
<p>{txt}</p> <p>{txt}</p>

14
apps/infoalloggi/src/components/annunci_tutorial.tsx
View file

@ -72,32 +72,30 @@ export const CTA_TipologiaModal = () => {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="space-y-2 rounded-md border border-orange-500 p-2"> <div className="border-transitorio space-y-2 rounded-md border p-2">
<h3 className="text-lg font-semibold text-orange-500"> <h3 className="text-transitorio text-lg font-semibold">
{t.tipologia_tutorial.transitorio} {t.tipologia_tutorial.transitorio}
</h3> </h3>
<p>{t.tipologia_tutorial.transitorio_desc}</p> <p>{t.tipologia_tutorial.transitorio_desc}</p>
<Button <Button
aria-label={t.tipologia_tutorial.transitorio_cta} aria-label={t.tipologia_tutorial.transitorio_cta}
variant="orange"
onClick={async () => await update("Transitorio")} onClick={async () => await update("Transitorio")}
className="flex w-full items-center gap-2" className="bg-transitorio flex w-full items-center gap-2"
> >
{t.tipologia_tutorial.transitorio_cta} {t.tipologia_tutorial.transitorio_cta}
<ArrowRight className="size-4" /> <ArrowRight className="size-4" />
</Button> </Button>
</div> </div>
<div className="space-y-2 rounded-md border border-red-500 p-2"> <div className="border-stabile space-y-2 rounded-md border p-2">
<h3 className="text-lg font-semibold text-red-500"> <h3 className="text-stabile text-lg font-semibold">
{t.tipologia_tutorial.stabile} {t.tipologia_tutorial.stabile}
</h3> </h3>
<p>{t.tipologia_tutorial.stabile_desc}</p> <p>{t.tipologia_tutorial.stabile_desc}</p>
<Button <Button
aria-label={t.tipologia_tutorial.stabile_cta} aria-label={t.tipologia_tutorial.stabile_cta}
variant="destructive"
onClick={async () => await update("Stabile")} onClick={async () => await update("Stabile")}
className="flex w-full items-center gap-2" className="bg-stabile flex w-full items-center gap-2"
> >
{t.tipologia_tutorial.stabile_cta} {t.tipologia_tutorial.stabile_cta}

5
apps/infoalloggi/src/components/annuncio-interactions/contatto_modal.tsx
View file

@ -18,7 +18,10 @@ export const ContattoAnnuncio = () => {
return ( return (
<Credenza> <Credenza>
<CredenzaTrigger asChild> <CredenzaTrigger asChild>
<Button variant="info" className="flex w-full items-center gap-2"> <Button
variant="destructive"
className="flex w-full items-center gap-2"
>
<MessageCircleQuestion className="size-6" /> Contattaci <MessageCircleQuestion className="size-6" /> Contattaci
</Button> </Button>
</CredenzaTrigger> </CredenzaTrigger>

40
apps/infoalloggi/src/components/annuncio_card.tsx
View file

@ -57,7 +57,7 @@ const CardAnnuncio = ({
return ( return (
<div <div
className={cn( className={cn(
"h-[464px] rounded-xl bg-white shadow-xs shadow-neutral-100 outline outline-neutral-300 hover:shadow-md", "h-[464px] rounded-xl bg-white shadow-sm shadow-neutral-100 outline outline-neutral-200 hover:shadow-md hover:outline-neutral-300",
className, className,
)} )}
id={`card-annuncio-${id}`} id={`card-annuncio-${id}`}
@ -65,7 +65,7 @@ const CardAnnuncio = ({
<Link <Link
href={`/annuncio/${codice}`} href={`/annuncio/${codice}`}
//target="_blank" //target="_blank"
className="block p-4" //duration-700 ease-in-out animate-in fade-in className="block p-2" //duration-700 ease-in-out animate-in fade-in
> >
<div className="group relative rounded-xl text-clip"> <div className="group relative rounded-xl text-clip">
{stato == "Trattativa" && ( {stato == "Trattativa" && (
@ -117,76 +117,76 @@ const CardAnnuncio = ({
</div> </div>
<div <div
className={cn( className={cn(
"mt-1 flex w-full items-center justify-center rounded-lg", "mt-2 flex w-full items-center justify-center rounded-md",
tipo === "Transitorio" && "bg-orange-400", tipo === "Transitorio" && "bg-transitorio",
tipo === "Stabile" && "bg-red-400", tipo === "Stabile" && "bg-stabile",
tipo === "Cessione" && "bg-blue-400", tipo === "Cessione" && "bg-blue-400",
tipo === "Vendita" && "bg-green-400", tipo === "Vendita" && "bg-green-400",
)} )}
> >
<div className="font-semibold text-white">{tipo}</div> <div className="font-semibold text-white">{tipo}</div>
</div> </div>
<div className="mt-1 space-y-2"> <div className="mt-2 space-y-2">
<div className="flex flex-row justify-around"> <div className="flex flex-row justify-around">
<div className="text-center"> <div className="text-center">
<span className="sr-only">{t.card.codice}</span> <span className="sr-only">{t.card.codice}</span>
<span className="text-lg font-semibold text-neutral-500"> <span className="text-xl font-semibold text-red-600">
Cod: {codice} Cod: {codice}
</span> </span>
</div> </div>
<div className="text-center"> <div className="text-center">
<span className="sr-only">{t.card.prezzo}</span> <span className="sr-only">{t.card.prezzo}</span>
<span className="text-lg font-semibold text-neutral-500"> <span className="text-xl font-semibold">
{formatCurrency(prezzo / 1e2)} {formatCurrency(prezzo / 1e2)}
</span> </span>
</div> </div>
</div> </div>
<div className="mb-3 text-center"> <div className="text-muted-foreground mb-3 text-center">
<span className="sr-only">{t.card.titolo}</span> <span className="sr-only">{t.card.titolo}</span>
<span className="line-clamp-2 min-h-[3.5rem] text-base font-medium text-neutral-500 md:text-lg"> <span className="line-clamp-2 min-h-[3.5rem] text-base font-medium md:text-lg">
{titolo} {titolo}
</span> </span>
</div> </div>
<div className="text-center"> <div className="text-muted-foreground text-center">
<span className="sr-only">{t.card.indirizzo}</span> <span className="sr-only">{t.card.indirizzo}</span>
<span className="text-sm font-medium text-neutral-500"> <span className="text-sm font-medium">
{comune && provincia && `${comune} (${provincia})`} {comune && provincia && `${comune} (${provincia})`}
</span> </span>
</div> </div>
</div> </div>
<div className="mt-4 flex items-center justify-around gap-2 text-xs"> <div className="text-muted-foreground mt-4 flex items-center justify-around gap-2 text-xs">
<div className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-100 py-3"> <div className="flex w-full items-center justify-center gap-1 rounded-md bg-neutral-100 py-3">
<Ruler className="size-4 text-indigo-700" /> <Ruler className="size-4 text-indigo-700" />
<div> <div>
<p className="font-medium text-neutral-700"> <p className="font-medium">
{mq ? Number.parseFloat(mq) : 0}{" "} {mq ? Number.parseFloat(mq) : 0}{" "}
<span className="text-neutral-500"> <span>
m<sup>2</sup> m<sup>2</sup>
</span> </span>
</p> </p>
</div> </div>
</div> </div>
<div className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-100 py-3"> <div className="flex w-full items-center justify-center gap-1 rounded-md bg-neutral-100 py-3">
<BedDouble className="size-4 text-indigo-700" /> <BedDouble className="size-4 text-indigo-700" />
<div> <div>
<p className="font-medium text-neutral-700"> <p className="font-medium">
{camereTesti({ camere: camere, testi: t.card })} {camereTesti({ camere: camere, testi: t.card })}
</p> </p>
</div> </div>
</div> </div>
<div className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-100 py-3"> <div className="flex w-full items-center justify-center gap-1 rounded-md bg-neutral-100 py-3">
<CalendarClock className="size-4 text-indigo-700" /> <CalendarClock className="size-4 text-indigo-700" />
<div> <div>
<p className="truncate font-medium text-neutral-700"> <p className="truncate font-medium">
{handleConsegna({ {handleConsegna({
consegna: consegna, consegna: consegna,
consegna_da: t.card.consegna_da, consegna_da: t.card.consegna_da,

28
apps/infoalloggi/src/components/prezzi.tsx
View file

@ -38,16 +38,16 @@ export const PricingChoice = () => {
<div className="text-primary flex flex-col items-center justify-center gap-4"> <div className="text-primary flex flex-col items-center justify-center gap-4">
<h2 className="text-3xl font-semibold">Scegli il tuo servizio</h2> <h2 className="text-3xl font-semibold">Scegli il tuo servizio</h2>
<Tabs defaultValue="transitorio" className="mb-2 w-full max-w-xl"> <Tabs defaultValue="transitorio" className="mb-2 w-full max-w-xl">
<TabsList className="flex h-auto w-full items-center justify-between"> <TabsList className="flex h-auto w-full items-center justify-between gap-1 p-1">
<TabsTrigger <TabsTrigger
value="transitorio" value="transitorio"
className="w-full cursor-pointer px-2 text-xl sm:px-3" className="bg-transitorio [&[data-state=active]]:bg-transitorio w-full cursor-pointer px-2 text-xl sm:px-3"
> >
Transitorio Transitorio
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="stabile" value="stabile"
className="w-full cursor-pointer px-2 text-xl sm:px-3" className="bg-stabile [&[data-state=active]]:bg-stabile w-full cursor-pointer px-2 text-xl sm:px-3"
> >
Stabile Stabile
</TabsTrigger> </TabsTrigger>
@ -64,7 +64,7 @@ export const PricingChoice = () => {
t.pricing_cmp.breve_option4, t.pricing_cmp.breve_option4,
t.pricing_cmp.breve_option5, t.pricing_cmp.breve_option5,
]} ]}
className="border-rose-400 bg-rose-400" className="border-transitorio bg-transitorio"
tipo={TipologiaPosizioneEnum.Transitorio} tipo={TipologiaPosizioneEnum.Transitorio}
/> />
</TabsContent> </TabsContent>
@ -77,7 +77,7 @@ export const PricingChoice = () => {
t.pricing_cmp.stabile_option1, t.pricing_cmp.stabile_option1,
t.pricing_cmp.stabile_option2, t.pricing_cmp.stabile_option2,
]} ]}
className="border-indigo-400 bg-indigo-400" className="border-stabile bg-stabile"
tipo={TipologiaPosizioneEnum.Stabile} tipo={TipologiaPosizioneEnum.Stabile}
/> />
</TabsContent> </TabsContent>
@ -138,12 +138,7 @@ export const PricingComponent = ({
}; };
return ( return (
<Card <Card className={cn("w-full max-w-xl gap-4 py-4", className)}>
className={cn(
"w-full max-w-xl gap-4 border-orange-500 bg-orange-500 py-4",
className,
)}
>
<CardHeader className="py-2"> <CardHeader className="py-2">
<CardTitle className="pt-1 text-center text-3xl font-semibold"> <CardTitle className="pt-1 text-center text-3xl font-semibold">
{title} {title}
@ -270,12 +265,7 @@ export const PricingComponentConsulenza = ({
}; };
return ( return (
<Card <Card className={cn("w-full max-w-xl", className)}>
className={cn(
"w-full max-w-xl border-orange-500 bg-orange-500",
className,
)}
>
<CardHeader className="p-3 px-5"> <CardHeader className="p-3 px-5">
<CardTitle className="pt-1 text-center text-3xl font-semibold"> <CardTitle className="pt-1 text-center text-3xl font-semibold">
{title} {title}
@ -368,7 +358,7 @@ export const PrezziShow = () => {
t.pricing_cmp.breve_option5, t.pricing_cmp.breve_option5,
]} ]}
tipo={TipologiaPosizioneEnum.Transitorio} tipo={TipologiaPosizioneEnum.Transitorio}
className="border-rose-400 bg-rose-400" className="border-transitorio bg-transitorio"
/> />
</TabsContent> </TabsContent>
<TabsContent value="stabile"> <TabsContent value="stabile">
@ -380,7 +370,7 @@ export const PrezziShow = () => {
t.pricing_cmp.stabile_option1, t.pricing_cmp.stabile_option1,
t.pricing_cmp.stabile_option2, t.pricing_cmp.stabile_option2,
]} ]}
className="border-indigo-400 bg-indigo-400" className="border-stabile bg-stabile"
tipo={TipologiaPosizioneEnum.Stabile} tipo={TipologiaPosizioneEnum.Stabile}
/> />
</TabsContent> </TabsContent>

2
apps/infoalloggi/src/pages/annunci.tsx
View file

@ -250,7 +250,7 @@ const RicercaFilters = () => {
)} )}
</Button> </Button>
</div> </div>
<div className="flex w-full items-center justify-between gap-2 sm:w-auto"> <div className="flex w-full items-center justify-between gap-2 sm:justify-between">
<div className="relative z-20 flex w-full gap-1 sm:w-auto"> <div className="relative z-20 flex w-full gap-1 sm:w-auto">
<CodiceBox className="h-10 w-full" optionBoxClassName="top-11 " /> <CodiceBox className="h-10 w-full" optionBoxClassName="top-11 " />
</div> </div>

47
apps/infoalloggi/src/pages/annuncio/[cod].tsx
View file

@ -4,6 +4,7 @@ import {
BedDouble, BedDouble,
Building2, Building2,
Car, Car,
Clock,
Copy, Copy,
Edit, Edit,
ExternalLink, ExternalLink,
@ -262,8 +263,8 @@ const Pricing = ({
const style = const style =
tipologia == TipologiaPosizioneEnum.Transitorio tipologia == TipologiaPosizioneEnum.Transitorio
? "border-rose-400 bg-rose-400" ? "border-transitorio bg-transitorio"
: "border-indigo-400 bg-indigo-400"; : "border-stabile bg-stabile";
const pricing = prezziario.saldi.map((s) => ({ const pricing = prezziario.saldi.map((s) => ({
downPayment: prezziario.acconto.prezzo_cent / 100, downPayment: prezziario.acconto.prezzo_cent / 100,
@ -396,7 +397,7 @@ const CardInfos = ({ data }: { data: Annunci }) => {
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="flex flex-col gap-4 p-4 py-0"> <CardContent className="flex flex-col gap-4 p-4 py-0">
<div className="grid grid-cols-2 gap-2 font-semibold"> <div className="grid grid-cols-2 gap-3 font-semibold">
<div className="relative"> <div className="relative">
<div className="rounded-md bg-neutral-100 p-2 text-center"> <div className="rounded-md bg-neutral-100 p-2 text-center">
{data.prezzo && (data.prezzo / 1e2).toFixed(2).replace(".", ",")}{" "} {data.prezzo && (data.prezzo / 1e2).toFixed(2).replace(".", ",")}{" "}
@ -408,7 +409,7 @@ const CardInfos = ({ data }: { data: Annunci }) => {
iconClassName="h-[19.5px] w-[19.5px] bg-orange-500 text-white rounded-full" iconClassName="h-[19.5px] w-[19.5px] bg-orange-500 text-white rounded-full"
> >
<div> <div>
<span className="text-sm font-semibold"> <span className="text-primary text-sm font-semibold">
Prezzo al giorno Prezzo al giorno
</span> </span>
<div className="text-muted-foreground text-sm"> <div className="text-muted-foreground text-sm">
@ -419,7 +420,13 @@ const CardInfos = ({ data }: { data: Annunci }) => {
)} )}
</div> </div>
<div className="relative"> <div className="relative">
<div className="rounded-md bg-neutral-100 p-2 text-center"> <div
className={cn(
"rounded-md bg-neutral-100 p-2 text-center outline-2",
data.tipo == "Transitorio" && "outline-transitorio",
data.tipo == "Stabile" && "outline-stabile",
)}
>
Affitto {data.tipo}{" "} Affitto {data.tipo}{" "}
</div> </div>
{data.tipo == "Transitorio" && ( {data.tipo == "Transitorio" && (
@ -433,7 +440,7 @@ const CardInfos = ({ data }: { data: Annunci }) => {
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h3 className="px-2">Fornitura:</h3> <h3 className="px-2">Fornitura:</h3>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-3">
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2"> <div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
<BedDouble /> <BedDouble />
{data.numero_camere && data.numero_camere {data.numero_camere && data.numero_camere
@ -458,7 +465,7 @@ const CardInfos = ({ data }: { data: Annunci }) => {
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h3 className="px-2">Dati immobile:</h3> <h3 className="px-2">Dati immobile:</h3>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-3">
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2"> <div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
<Ruler /> <Ruler />
<span> <span>
@ -482,7 +489,21 @@ const CardInfos = ({ data }: { data: Annunci }) => {
{data.stato === "Trattativa" ? ( {data.stato === "Trattativa" ? (
"Annuncio in aggiornamento" "Annuncio in aggiornamento"
) : ( ) : (
<> // <span className="flex items-center justify-center gap-1">
// <Clock className="inline-block size-5" />
// Disponibilità:{" "}
// <span className="text-red-500">
// {handleConsegna({
// consegna: data.consegna,
// consegna_da: t.card.consegna_da,
// mesi: t.preferenze.mesi,
// subito: t.card.consegna_subito,
// aggiornamento: t.card.in_aggiornamento,
// })}
// </span>
// </span>
<div className="flex items-center justify-center gap-1 rounded-md py-1.5 outline-2 outline-neutral-500">
<Clock className="inline-block size-5" />
Disponibilità:{" "} Disponibilità:{" "}
<span className="text-red-500"> <span className="text-red-500">
{handleConsegna({ {handleConsegna({
@ -493,10 +514,10 @@ const CardInfos = ({ data }: { data: Annunci }) => {
aggiornamento: t.card.in_aggiornamento, aggiornamento: t.card.in_aggiornamento,
})} })}
</span> </span>
</> </div>
)} )}
</div> </div>
<div className="flex flex-row justify-around gap-4"> <div className="flex flex-row justify-around gap-3">
<MappaDialogFullscreen <MappaDialogFullscreen
lat={data.lat_secondario} lat={data.lat_secondario}
long={data.lon_secondario} long={data.lon_secondario}
@ -632,12 +653,10 @@ const AnnuncioFooter = ({
}, },
}} }}
target="_blank" target="_blank"
className={cn(
buttonVariants({ variant: "default" }),
"my-10 flex flex-row items-center gap-2 bg-purple-500 text-center text-xl",
)}
> >
<Button className="my-10 flex w-full items-center gap-2 bg-neutral-500 text-xl">
Cerca annunci simili <ExternalLink className="size-6" /> Cerca annunci simili <ExternalLink className="size-6" />
</Button>
</Link> </Link>
</div> </div>
); );

8
apps/infoalloggi/src/pages/prezzi.tsx
View file

@ -65,7 +65,7 @@ const Prezzi: NextPage = () => {
t.pricing_cmp.breve_option5, t.pricing_cmp.breve_option5,
]} ]}
statico statico
className="border-rose-400 bg-rose-400" className="border-transitorio bg-transitorio"
title={t.prezzi.titolo_transitori} title={t.prezzi.titolo_transitori}
tipo={TipologiaPosizioneEnum.Transitorio} tipo={TipologiaPosizioneEnum.Transitorio}
/> />
@ -75,7 +75,7 @@ const Prezzi: NextPage = () => {
<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2"> <ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
{t.prezzi.cta_transitori.map((item, idx) => ( {t.prezzi.cta_transitori.map((item, idx) => (
<li key={idx} className="flex gap-x-4"> <li key={idx} className="flex gap-x-4">
<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-rose-50 text-rose-600"> <div className="flex size-12 flex-none items-center justify-center rounded-lg bg-sky-50 text-sky-600">
<IconMatrix type={item.icon} /> <IconMatrix type={item.icon} />
</div> </div>
<div> <div>
@ -111,7 +111,7 @@ const Prezzi: NextPage = () => {
t.pricing_cmp.stabile_option2, t.pricing_cmp.stabile_option2,
]} ]}
statico statico
className="border-indigo-400 bg-indigo-400" className="border-stabile bg-stabile"
title={t.prezzi.titolo_stabile} title={t.prezzi.titolo_stabile}
tipo={TipologiaPosizioneEnum.Stabile} tipo={TipologiaPosizioneEnum.Stabile}
/> />
@ -120,7 +120,7 @@ const Prezzi: NextPage = () => {
<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2"> <ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
{t.prezzi.cta_stabile.map((item, idx) => ( {t.prezzi.cta_stabile.map((item, idx) => (
<li key={idx} className="flex gap-x-4"> <li key={idx} className="flex gap-x-4">
<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-indigo-50 text-indigo-600"> <div className="flex size-12 flex-none items-center justify-center rounded-lg bg-orange-50 text-orange-600">
<IconMatrix type={item.icon} /> <IconMatrix type={item.icon} />
</div> </div>
<div> <div>

3
apps/infoalloggi/src/styles/globals.css
View file

@ -72,6 +72,9 @@
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--color-transitorio: var(--color-sky-500);
--color-stabile: var(--color-orange-500);
--accordion-down: accordion-down 0.2s ease-out; --accordion-down: accordion-down 0.2s ease-out;
--accordion-up: accordion-up 0.2s ease-out; --accordion-up: accordion-up 0.2s ease-out;
--caret-blink: caret-blink 1.25s ease-out infinite; --caret-blink: caret-blink 1.25s ease-out infinite;