refactor: update styling for various components to enhance visual consistency and user experience

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`}

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={

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>

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.

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">
+						<div className="col-span-2 flex items-center justify-center text-primary sm:col-span-1">
-							<span className="text-xl transition-all duration-300 ease-in-out">
+							{isOpen ? (
-								{isOpen ? "👇" : "👉"}
+								<ChevronDownCircle className="fill-background" />
-							</span>
+							) : (
+								<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>