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

refactor: update styling for Sidebar, DataTable, SiteHeader, AnnuncioCard, and Tabs components

Browse source
This commit is contained in:
Marco Pedone 2026-02-24 12:02:02 +01:00
parent ad6fc849f7
commit 70736e4aa1
7 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/infoalloggi/src/components/area-riservata/sidebar.tsx
View file

@ -39,7 +39,7 @@ export const Sidebar = ({
animate={{ width: minimized ? 55 : 192 }} animate={{ width: minimized ? 55 : 192 }}
aria-label="Sidebar Menu" aria-label="Sidebar Menu"
className={cn( className={cn(
"relative z-30 hidden h-auto w-48 shrink-0 space-y-4 border-muted border-r bg-background pt-3 md:block", "relative z-30 hidden h-auto w-48 shrink-0 space-y-4 border-muted border-r bg-background pt-3 md:block dark:border-muted-foreground/15",
className, className,
minimized && "cursor-pointer", minimized && "cursor-pointer",
)} )}

5
apps/infoalloggi/src/components/custom_ui/data-table.tsx
View file

@ -127,7 +127,10 @@ export function DataTable<TData, TValue>({
searchColumn={searchColumn} searchColumn={searchColumn}
table={table} table={table}
/> />
<div className="rounded-md border" ref={parentRef}> <div
className="rounded-md border dark:border-muted-foreground/50"
ref={parentRef}
>
<Table> <Table>
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

2
apps/infoalloggi/src/components/navbar/site-header.tsx
View file

@ -22,7 +22,7 @@ export function SiteHeader() {
setOpenSidebar(status); setOpenSidebar(status);
}; };
return ( return (
<header className="sticky top-0 z-50 w-full border-muted border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60"> <header className="sticky top-0 z-50 w-full border-muted border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 dark:border-muted-foreground/15">
<div className="mx-auto flex h-14 w-full items-center gap-2 pr-3 pl-4 md:pr-4 md:pl-5"> <div className="mx-auto flex h-14 w-full items-center gap-2 pr-3 pl-4 md:pr-4 md:pl-5">
<MainNav /> <MainNav />
<MobileNav <MobileNav

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

@ -43,7 +43,7 @@ export const AnnuncioCard = ({ className }: { className?: string }) => {
<span>Azioni Utente</span> <span>Azioni Utente</span>
</Button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="rounded-md border border-border bg-muted p-2"> <CollapsibleContent className="rounded-md border border-card bg-card p-2">
<UserActions /> <UserActions />
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
@ -68,7 +68,12 @@ export const BasicAnnuncioCard = ({
data: AnnuncioRicerca; data: AnnuncioRicerca;
}) => { }) => {
return ( return (
<Card className={cn("w-full gap-2 border-white py-3", className)}> <Card
className={cn(
"w-full max-w-4xl gap-2 rounded-md border-none bg-muted py-3",
className,
)}
>
<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2"> <CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2">
<CardTitle className="text-2xl">Annuncio {data.codice}</CardTitle> <CardTitle className="text-2xl">Annuncio {data.codice}</CardTitle>
</CardHeader> </CardHeader>
@ -97,7 +102,7 @@ export const AnnuncioDisplay = ({
return ( return (
<div <div
className={cn( className={cn(
"grid @md:grid-cols-[12rem_1fr] grid-cols-[7rem_1fr] gap-x-4 gap-y-2 rounded-md bg-[#e6e9ec]/50 md:max-w-3xl md:border md:border-white lg:gap-x-4 xl:gap-x-6 dark:bg-[#1d1d1d] dark:md:border-primary dark:md:bg-card", "grid @md:grid-cols-[12rem_1fr] grid-cols-[7rem_1fr] gap-x-4 gap-y-2 rounded-md border border-card bg-card md:max-w-3xl lg:gap-x-4 xl:gap-x-6",
className, className,
)} )}
> >

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

@ -285,7 +285,7 @@ export const ServizioContent = () => {
servizioId={servizio.servizio_id} servizioId={servizio.servizio_id}
userId={userId} userId={userId}
> >
<AnnuncioCard className="max-w-4xl rounded-md border-primary" /> <AnnuncioCard />
</ServizioAnnuncioProvider> </ServizioAnnuncioProvider>
); );
})} })}
@ -350,7 +350,7 @@ export const ServizioContent = () => {
servizioId={servizio.servizio_id} servizioId={servizio.servizio_id}
userId={userId} userId={userId}
> >
<AnnuncioCard className="max-w-4xl rounded-md border-primary" /> <AnnuncioCard />
</ServizioAnnuncioProvider> </ServizioAnnuncioProvider>
); );
})} })}

6
apps/infoalloggi/src/components/ui/table.tsx
View file

@ -54,7 +54,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
return ( return (
<tr <tr
className={cn( className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted dark:border-muted-foreground/50",
className, className,
)} )}
data-slot="table-row" data-slot="table-row"
@ -67,7 +67,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
return ( return (
<th <th
className={cn( className={cn(
"h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", "h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
className, className,
)} )}
data-slot="table-head" data-slot="table-head"
@ -80,7 +80,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
return ( return (
<td <td
className={cn( className={cn(
"whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", "whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
className, className,
)} )}
data-slot="table-cell" data-slot="table-cell"

4
apps/infoalloggi/src/components/ui/tabs.tsx
View file

@ -25,7 +25,7 @@ function TabsList({
return ( return (
<TabsPrimitive.List <TabsPrimitive.List
className={cn( className={cn(
"inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground", "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-0.75 text-muted-foreground",
className, className,
)} )}
data-slot="tabs-list" data-slot="tabs-list"
@ -41,7 +41,7 @@ function TabsTrigger({
return ( return (
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
className={cn( className={cn(
"inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground text-sm transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground text-sm transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className, className,
)} )}
data-slot="tabs-trigger" data-slot="tabs-trigger"