From 7c88d0af86e64d8107a20cc2a2afa65cac212ba5 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Mon, 17 Nov 2025 18:35:30 +0100
Subject: [PATCH] refactor: update styling for various components to enhance
 visual consistency and user experience

---
 .../src/components/annuncio_card.tsx          |  2 +-
 .../src/components/servizio/annuncio_card.tsx |  2 +-
 .../src/components/servizio/main.tsx          |  4 ++--
 .../servizio/servizio_annunci_accordions.tsx  | 10 ++++----
 .../src/components/tables/ricerca-table.tsx   | 24 ++++++++++++-------
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/apps/infoalloggi/src/components/annuncio_card.tsx b/apps/infoalloggi/src/components/annuncio_card.tsx
index c9e56ea..579749b 100644
--- a/apps/infoalloggi/src/components/annuncio_card.tsx
+++ b/apps/infoalloggi/src/components/annuncio_card.tsx
@@ -283,7 +283,7 @@ export const CardAnnuncio = ({
 								<ImageFlbk
 									alt={t.card.alt_immagine}
 									blurDataURL={`/storage-api/get/${images[0].thumb}?image=true`}
-									className={"h-64 w-full object-cover"}
+									className={"h-64 w-full bg-[#e6e9ec] object-cover"}
 									height={1080}
 									priority={true}
 									src={`/storage-api/get/${images[0].img}?image=true`}
diff --git a/apps/infoalloggi/src/components/servizio/annuncio_card.tsx b/apps/infoalloggi/src/components/servizio/annuncio_card.tsx
index 2efa9a0..1440257 100644
--- a/apps/infoalloggi/src/components/servizio/annuncio_card.tsx
+++ b/apps/infoalloggi/src/components/servizio/annuncio_card.tsx
@@ -88,7 +88,7 @@ export const BasicAnnuncioCard = ({
 				<div className="flex w-full flex-col gap-4 md:flex-row md:gap-10">
 					<ImageFlbk
 						alt={data.codice}
-						className="h-auto max-h-72 w-full rounded-md object-contain sm:max-w-xs"
+						className="h-auto max-h-72 w-full rounded-md bg-[#e6e9ec] object-contain sm:max-w-xs"
 						height={1080}
 						priority
 						src={
diff --git a/apps/infoalloggi/src/components/servizio/main.tsx b/apps/infoalloggi/src/components/servizio/main.tsx
index 1bb9e68..8c8793a 100644
--- a/apps/infoalloggi/src/components/servizio/main.tsx
+++ b/apps/infoalloggi/src/components/servizio/main.tsx
@@ -44,7 +44,7 @@ const ServizioCard = ({
 	return (
 		<Card
 			className={cn(
-				"gap-2 rounded-md border-neutral-200 bg-neutral-200",
+				"gap-2 rounded-t-none border-primary border-t-0",
 				cardClassName,
 			)}
 		>
@@ -89,7 +89,7 @@ export const ServizioContent = () => {
 	if (servizio.isInterrotto) {
 		return (
 			<ServizioCard
-				cardClassName="bg-neutral-100 border-neutral-300"
+				//cardClassName="bg-neutral-100 border-neutral-300"
 				content={
 					<>
 						<p className="font-medium text-lg">Servizio interrotto</p>
diff --git a/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx b/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
index c1835ac..551e9ae 100644
--- a/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
+++ b/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
@@ -169,7 +169,7 @@ export const AnnunciInConfermaAccordion = ({
 	return (
 		<Accordion collapsible defaultValue="in-conferma" type="single">
 			<AccordionItem className="space-y-4" value="in-conferma">
-				<AccordionTrigger className="rounded-md border-2 border-green-500 bg-white p-2">
+				<AccordionTrigger className="rounded-md border-2 border-green-500 bg-muted p-2">
 					Annunci in conferma:
 				</AccordionTrigger>
 				<AccordionContent>
@@ -202,7 +202,7 @@ export const AnnunciSelezionatiAccordion = ({
 	return (
 		<Accordion collapsible defaultValue="open" type="single">
 			<AccordionItem className="space-y-4" value="open">
-				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-sky-500 bg-white p-2">
+				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-sky-500 bg-muted p-2">
 					Annunci Selezionati:
 				</AccordionTrigger>
 				<AccordionContent>
@@ -221,7 +221,7 @@ export const AnnunciSelezionatiAccordion = ({
 								);
 							})
 						) : (
-							<div className="flex items-center justify-center gap-1 rounded-md bg-white p-4 sm:flex">
+							<div className="flex items-center justify-center gap-1 rounded-md bg-muted p-4 sm:flex">
 								<span>
 									Nessun annuncio selezionato, fai una ricerca nella pagina{" "}
 									<Link
@@ -262,13 +262,13 @@ export const AnnunciRichiesti = ({ userId }: { userId: UsersId }) => {
 	return (
 		<Accordion collapsible type="single">
 			<AccordionItem className="space-y-4" value="compatibili">
-				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-pink-500 bg-white p-2">
+				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-pink-500 bg-muted p-2">
 					Annunci Richiesti:
 				</AccordionTrigger>
 				<AccordionContent>
 					<div className="flex flex-col flex-wrap gap-5">
 						{!data || data.length === 0 ? (
-							<div className="flex items-center justify-center gap-1 rounded-md bg-white p-4 sm:flex">
+							<div className="flex items-center justify-center gap-1 rounded-md bg-muted p-4 sm:flex">
 								<span>
 									Nessun annuncio compatibile trovato. Amplia la ricerca per
 									trovare annunci compatibili.
diff --git a/apps/infoalloggi/src/components/tables/ricerca-table.tsx b/apps/infoalloggi/src/components/tables/ricerca-table.tsx
index b150fad..2f7b3f3 100644
--- a/apps/infoalloggi/src/components/tables/ricerca-table.tsx
+++ b/apps/infoalloggi/src/components/tables/ricerca-table.tsx
@@ -1,4 +1,4 @@
-import { Package } from "lucide-react";
+import { ChevronDownCircle, ChevronRightCircle, Package } from "lucide-react";
 import { useState } from "react";
 import { LoadingPage } from "~/components/loading";
 import { ServizioContent } from "~/components/servizio/main";
@@ -7,6 +7,7 @@ import {
 	CollapsibleContent,
 	CollapsibleTrigger,
 } from "~/components/ui/collapsible";
+import { cn } from "~/lib/utils";
 import { ServizioProvider } from "~/providers/ServizioProvider";
 import type { UsersId } from "~/schemas/public/Users";
 import type { ServizioData } from "~/server/controllers/servizio.controller";
@@ -41,7 +42,7 @@ export const TabRicerca = ({
 	};
 
 	return (
-		<div className="flex flex-col gap-2">
+		<div className="flex flex-col gap-8">
 			{data.map((servizio, idx) => {
 				return (
 					<Row
@@ -77,12 +78,19 @@ const Row = ({
 			userId={userId}
 		>
 			<Collapsible onOpenChange={setIsOpen} open={isOpen}>
-				<div className="flex items-center rounded-md border border-border py-2 shadow-sm hover:shadow-md">
+				<div
+					className={cn(
+						"flex items-center rounded-md border border-primary bg-secondary py-2 shadow-sm hover:shadow-md",
+						isOpen && "rounded-b-none",
+					)}
+				>
 					<CollapsibleTrigger className="grid w-full cursor-pointer grid-cols-10 items-center">
-						<div className="col-span-2 sm:col-span-1">
-							<span className="text-xl transition-all duration-300 ease-in-out">
-								{isOpen ? "👇" : "👉"}
-							</span>
+						<div className="col-span-2 flex items-center justify-center text-primary sm:col-span-1">
+							{isOpen ? (
+								<ChevronDownCircle className="fill-background" />
+							) : (
+								<ChevronRightCircle className="fill-background" />
+							)}
 						</div>
 						<div className="col-span-6 flex items-center gap-2 font-semibold sm:text-lg">
 							<Package className="size-6 text-primary" />
@@ -107,7 +115,7 @@ const Row = ({
 					</CollapsibleTrigger>
 				</div>
 
-				<CollapsibleContent className="mt-2 overflow-hidden transition-all duration-300 ease-in-out data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+				<CollapsibleContent className="mt-0 overflow-hidden transition-all duration-300 ease-in-out data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
 					<ServizioContent />
 				</CollapsibleContent>
 			</Collapsible>