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

apps/infoalloggi/src/components/InformationBubble.tsx

@@ -63,12 +63,15 @@ const InformationBubble = ({
           />
         </HybridTooltipTrigger>
 
-        <HybridTooltipContent side={side}>
+        <HybridTooltipContent
+          side={side}
+          className="border-border -mb-1.5 bg-white shadow-sm [&>span>svg]:invisible"
+        >
           {href ? (
             <Link
               href={href}
               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" />
               <p>{txt}</p>

apps/infoalloggi/src/components/annunci_tutorial.tsx

@@ -72,32 +72,30 @@ export const CTA_TipologiaModal = () => {
           </DialogDescription>
         </DialogHeader>
         <div className="flex flex-col gap-8">
-          <div className="space-y-2 rounded-md border border-orange-500 p-2">
-            <h3 className="text-lg font-semibold text-orange-500">
+          <div className="border-transitorio space-y-2 rounded-md border p-2">
+            <h3 className="text-transitorio text-lg font-semibold">
               {t.tipologia_tutorial.transitorio}
             </h3>
             <p>{t.tipologia_tutorial.transitorio_desc}</p>
             <Button
               aria-label={t.tipologia_tutorial.transitorio_cta}
-              variant="orange"
               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}
 
               <ArrowRight className="size-4" />
             </Button>
           </div>
-          <div className="space-y-2 rounded-md border border-red-500 p-2">
-            <h3 className="text-lg font-semibold text-red-500">
+          <div className="border-stabile space-y-2 rounded-md border p-2">
+            <h3 className="text-stabile text-lg font-semibold">
               {t.tipologia_tutorial.stabile}
             </h3>
             <p>{t.tipologia_tutorial.stabile_desc}</p>
             <Button
               aria-label={t.tipologia_tutorial.stabile_cta}
-              variant="destructive"
               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}
 

apps/infoalloggi/src/components/annuncio-interactions/contatto_modal.tsx

@@ -18,7 +18,10 @@ export const ContattoAnnuncio = () => {
   return (
     <Credenza>
       <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
         </Button>
       </CredenzaTrigger>

apps/infoalloggi/src/components/annuncio_card.tsx

@@ -57,7 +57,7 @@ const CardAnnuncio = ({
   return (
     <div
       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,
       )}
       id={`card-annuncio-${id}`}
@@ -65,7 +65,7 @@ const CardAnnuncio = ({
       <Link
         href={`/annuncio/${codice}`}
         //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">
           {stato == "Trattativa" && (
@@ -117,76 +117,76 @@ const CardAnnuncio = ({
         </div>
         <div
           className={cn(
-            "mt-1 flex w-full items-center justify-center rounded-lg",
-            tipo === "Transitorio" && "bg-orange-400",
-            tipo === "Stabile" && "bg-red-400",
+            "mt-2 flex w-full items-center justify-center rounded-md",
+            tipo === "Transitorio" && "bg-transitorio",
+            tipo === "Stabile" && "bg-stabile",
             tipo === "Cessione" && "bg-blue-400",
             tipo === "Vendita" && "bg-green-400",
           )}
         >
           <div className="font-semibold text-white">{tipo}</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="text-center">
               <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}
               </span>
             </div>
             <div className="text-center">
               <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)}
               </span>
             </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="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}
             </span>
           </div>
-          <div className="text-center">
+          <div className="text-muted-foreground text-center">
             <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})`}
             </span>
           </div>
         </div>
 
-        <div className="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="text-muted-foreground mt-4 flex items-center justify-around gap-2 text-xs">
+          <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" />
 
             <div>
-              <p className="font-medium text-neutral-700">
+              <p className="font-medium">
                 {mq ? Number.parseFloat(mq) : 0}{" "}
-                <span className="text-neutral-500">
+                <span>
                   m<sup>2</sup>
                 </span>
               </p>
             </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" />
 
             <div>
-              <p className="font-medium text-neutral-700">
+              <p className="font-medium">
                 {camereTesti({ camere: camere, testi: t.card })}
               </p>
             </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" />
 
             <div>
-              <p className="truncate font-medium text-neutral-700">
+              <p className="truncate font-medium">
                 {handleConsegna({
                   consegna: consegna,
                   consegna_da: t.card.consegna_da,

apps/infoalloggi/src/components/prezzi.tsx

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

apps/infoalloggi/src/pages/annunci.tsx

@@ -250,7 +250,7 @@ const RicercaFilters = () => {
             )}
           </Button>
         </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">
             <CodiceBox className="h-10 w-full" optionBoxClassName="top-11 " />
           </div>

apps/infoalloggi/src/pages/annuncio/[cod].tsx

@@ -4,6 +4,7 @@ import {
   BedDouble,
   Building2,
   Car,
+  Clock,
   Copy,
   Edit,
   ExternalLink,
@@ -262,8 +263,8 @@ const Pricing = ({
 
   const style =
     tipologia == TipologiaPosizioneEnum.Transitorio
-      ? "border-rose-400 bg-rose-400"
-      : "border-indigo-400 bg-indigo-400";
+      ? "border-transitorio bg-transitorio"
+      : "border-stabile bg-stabile";
 
   const pricing = prezziario.saldi.map((s) => ({
     downPayment: prezziario.acconto.prezzo_cent / 100,
@@ -396,7 +397,7 @@ const CardInfos = ({ data }: { data: Annunci }) => {
         </CardTitle>
       </CardHeader>
       <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="rounded-md bg-neutral-100 p-2 text-center">
               {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"
               >
                 <div>
-                  <span className="text-sm font-semibold">
+                  <span className="text-primary text-sm font-semibold">
                     Prezzo al giorno
                   </span>
                   <div className="text-muted-foreground text-sm">
@@ -419,7 +420,13 @@ const CardInfos = ({ data }: { data: Annunci }) => {
             )}
           </div>
           <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}{" "}
             </div>
             {data.tipo == "Transitorio" && (
@@ -433,7 +440,7 @@ const CardInfos = ({ data }: { data: Annunci }) => {
         </div>
         <div className="flex flex-col gap-2">
           <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">
               <BedDouble />
               {data.numero_camere && data.numero_camere
@@ -458,7 +465,7 @@ const CardInfos = ({ data }: { data: Annunci }) => {
         </div>
         <div className="flex flex-col gap-2">
           <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">
               <Ruler />
               <span>
@@ -482,7 +489,21 @@ const CardInfos = ({ data }: { data: Annunci }) => {
           {data.stato === "Trattativa" ? (
             "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à:{" "}
               <span className="text-red-500">
                 {handleConsegna({
@@ -493,10 +514,10 @@ const CardInfos = ({ data }: { data: Annunci }) => {
                   aggiornamento: t.card.in_aggiornamento,
                 })}
               </span>
-            </>
+            </div>
           )}
         </div>
-        <div className="flex flex-row justify-around gap-4">
+        <div className="flex flex-row justify-around gap-3">
           <MappaDialogFullscreen
             lat={data.lat_secondario}
             long={data.lon_secondario}
@@ -632,12 +653,10 @@ const AnnuncioFooter = ({
           },
         }}
         target="_blank"
-        className={cn(
-          buttonVariants({ variant: "default" }),
-          "my-10 flex flex-row items-center gap-2 bg-purple-500 text-center text-xl",
-        )}
       >
-        Cerca annunci simili <ExternalLink className="size-6" />
+        <Button className="my-10 flex w-full items-center gap-2 bg-neutral-500 text-xl">
+          Cerca annunci simili <ExternalLink className="size-6" />
+        </Button>
       </Link>
     </div>
   );

apps/infoalloggi/src/pages/prezzi.tsx

@@ -65,7 +65,7 @@ const Prezzi: NextPage = () => {
                 t.pricing_cmp.breve_option5,
               ]}
               statico
-              className="border-rose-400 bg-rose-400"
+              className="border-transitorio bg-transitorio"
               title={t.prezzi.titolo_transitori}
               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">
                 {t.prezzi.cta_transitori.map((item, idx) => (
                   <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} />
                     </div>
                     <div>
@@ -111,7 +111,7 @@ const Prezzi: NextPage = () => {
                 t.pricing_cmp.stabile_option2,
               ]}
               statico
-              className="border-indigo-400 bg-indigo-400"
+              className="border-stabile bg-stabile"
               title={t.prezzi.titolo_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">
                 {t.prezzi.cta_stabile.map((item, idx) => (
                   <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} />
                     </div>
                     <div>

apps/infoalloggi/src/styles/globals.css

@@ -72,6 +72,9 @@
   --color-sidebar-border: var(--sidebar-border);
   --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-up: accordion-up 0.2s ease-out;
   --caret-blink: caret-blink 1.25s ease-out infinite;