style: update component styles to use bg-card and adjust heights for consistency
This commit is contained in:
parent
f8aea2446e
commit
db63591bcb
7 changed files with 85 additions and 24 deletions
|
|
@ -19,7 +19,7 @@ export const Counter = ({
|
|||
setValue(newValue);
|
||||
};
|
||||
return (
|
||||
<div className="w-38">
|
||||
<div className="w-38 bg-card">
|
||||
<label className="sr-only" htmlFor={name}>
|
||||
{name}
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
|
|||
prefix,
|
||||
value: controlledValue,
|
||||
className,
|
||||
height = "h-9",
|
||||
height = "h-10",
|
||||
...props
|
||||
},
|
||||
externalRef,
|
||||
|
|
@ -121,7 +121,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={cn("flex items-stretch", height)}>
|
||||
<div className={cn("flex items-stretch bg-card", height)}>
|
||||
<NumericFormat
|
||||
allowNegative={min < 0}
|
||||
className={cn(
|
||||
|
|
@ -149,7 +149,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
|
|||
<div className="flex flex-col self-stretch">
|
||||
<Button
|
||||
aria-label="Increase value"
|
||||
className="h-1/2 rounded-l-none rounded-br-none border-input border-b-[0.5px] border-l-0 px-2 focus-visible:relative"
|
||||
className="h-1/2 rounded-l-none rounded-br-none border-input border-b-[0.5px] border-l-0 bg-card px-2 focus-visible:relative"
|
||||
disabled={value === max}
|
||||
onClick={handleIncrement}
|
||||
type="button"
|
||||
|
|
@ -159,7 +159,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
|
|||
</Button>
|
||||
<Button
|
||||
aria-label="Decrease value"
|
||||
className="h-1/2 rounded-l-none rounded-tr-none border-input border-t-[0.5px] border-l-0 px-2 focus-visible:relative"
|
||||
className="h-1/2 rounded-l-none rounded-tr-none border-input border-t-[0.5px] border-l-0 bg-card px-2 focus-visible:relative"
|
||||
disabled={value === min}
|
||||
onClick={handleDecrement}
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|||
type={type}
|
||||
{...props}
|
||||
className={cn(
|
||||
`w-full rounded-lg border border-border bg-background px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50`,
|
||||
`h-10 w-full rounded-lg border border-border bg-card px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50`,
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export const MultiSelect = ({
|
|||
classNames={{
|
||||
control: () =>
|
||||
cn(
|
||||
"mt-2 w-full rounded-lg h-min-[42px] bg-card shadow-xs outline-hidden text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
"mt-2 w-full rounded-lg h-10 min-h-10! bg-card shadow-xs outline-hidden text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
disabled && "bg-muted opacity-50 cursor-not-allowed",
|
||||
),
|
||||
input: () => cn("*:ring-0 focus:*:ring-0"),
|
||||
|
|
@ -159,7 +159,7 @@ export const MultiSelect = ({
|
|||
"bg-card dark:bg-input border-b border-foreground/50 shadow-xs outline-hidden hover:text-primary hover:bg-neutral-200 dark:hover:bg-neutral-700",
|
||||
),
|
||||
singleValue: () => cn("text-primary font-medium"),
|
||||
valueContainer: () => cn("min-h-[38px]"),
|
||||
valueContainer: () => cn("min-h-[36px]"),
|
||||
}}
|
||||
components={{ MenuList: VirtualizedMenuList }}
|
||||
defaultValue={defaultValue}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {
|
|||
useServizio,
|
||||
} from "~/providers/ServizioProvider";
|
||||
import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
|
||||
import type { Rinnovi } from "~/schemas/public/Rinnovi";
|
||||
import type { UsersId } from "~/schemas/public/Users";
|
||||
import type { ServizioData } from "~/server/controllers/servizio.controller";
|
||||
import { api } from "~/utils/api";
|
||||
|
|
@ -53,39 +54,96 @@ import { AnnunciCompatibili } from "./compatibili_dialog";
|
|||
import { ServizioInfos } from "./servizio_actions";
|
||||
|
||||
export const ServizioList = ({
|
||||
servizi,
|
||||
data,
|
||||
isAdmin,
|
||||
userId,
|
||||
}: {
|
||||
servizi: ServizioData[];
|
||||
data: (
|
||||
| { d: Date; type: "servizio"; data: ServizioData }
|
||||
| { d: Date; type: "rinnovo"; data: Rinnovi }
|
||||
)[];
|
||||
isAdmin: boolean;
|
||||
userId: UsersId;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
if (servizi.length === 0) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className="m-4 rounded-md bg-yellow-100 p-4 text-yellow-900">
|
||||
{t.servizio.nessun_servizio}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// if (servizi.length === 1 && servizi[0]) {
|
||||
// return <Servizio isAdmin={isAdmin} servizio={servizi[0]} userId={userId} />;
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{servizi.map((servizio) => (
|
||||
<ServizioLinkCard
|
||||
isAdmin={isAdmin}
|
||||
key={servizio.servizio_id}
|
||||
servizio={servizio}
|
||||
userId={userId}
|
||||
/>
|
||||
))}
|
||||
{data.map(({ d: _d, type, data: s }) => {
|
||||
if (type === "rinnovo") {
|
||||
return (
|
||||
<RinnovoLinkCard
|
||||
data={s}
|
||||
isAdmin={isAdmin}
|
||||
key={s.id}
|
||||
userId={userId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ServizioLinkCard
|
||||
isAdmin={isAdmin}
|
||||
key={s.servizio_id}
|
||||
servizio={s}
|
||||
userId={userId}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RinnovoLinkCard = ({
|
||||
data,
|
||||
isAdmin,
|
||||
userId,
|
||||
}: {
|
||||
data: Rinnovi;
|
||||
isAdmin: boolean;
|
||||
userId: UsersId;
|
||||
}) => {
|
||||
return (
|
||||
<Link
|
||||
className="group"
|
||||
href={
|
||||
isAdmin
|
||||
? `/area-riservata/admin/user-view/rinnovo/${userId}/${data.id}`
|
||||
: `/area-riservata/rinnovo/${data.id}`
|
||||
}
|
||||
key={data.id}
|
||||
>
|
||||
<Card
|
||||
className={cn(
|
||||
"transition-shadow hover:bg-muted/15 hover:shadow-md",
|
||||
)}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="group-hover:underline">
|
||||
Rinnovo {data.codice}
|
||||
</CardTitle>
|
||||
<CardDescription className="">
|
||||
Data rinnovo: {data.decorrenza.toLocaleDateString("it-IT")}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
|
||||
|
||||
<div className="flex items-center gap-2 rounded-md text-muted-foreground group-hover:text-foreground">
|
||||
<span>Vai al rinnovo</span>
|
||||
<ArrowRight />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const ServizioLinkCard = ({
|
||||
servizio,
|
||||
isAdmin,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function SelectTrigger({
|
|||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
className={cn(
|
||||
"flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs outline-hidden transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
"flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-card px-3 py-2 text-sm shadow-xs outline-hidden transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-10 data-[size=sm]:h-8 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className,
|
||||
)}
|
||||
data-size={size}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@ export const FieldResetButton = (
|
|||
return (
|
||||
<button
|
||||
{...rest}
|
||||
className={cn("flex items-center gap-2 text-sm leading-none", className)}
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-2 text-sm leading-none",
|
||||
className,
|
||||
)}
|
||||
type="button"
|
||||
>
|
||||
Reset
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue