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

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

Browse source
This commit is contained in:
Marco Pedone 2025-11-17 18:35:30 +01:00
parent f94312dcaa
commit 7c88d0af86
5 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

@ -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>

10
apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
View file

@ -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.

24
apps/infoalloggi/src/components/tables/ricerca-table.tsx
View file

@ -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>