Skip to content

Commit 37eaeda

Browse files
Barata-RibeiroBarata-Ribeiro
committed
refactor(ui): improve styling and structure of various components for consistency
1 parent bfed571 commit 37eaeda

17 files changed

Lines changed: 60 additions & 54 deletions

‎resources/js/components/application/app-page-alert.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ interface AppPageAlertProps {
66
message: string;
77
}
88

9-
const alertVariants = cva('mb-4 rounded flex gap-2 items-start border-l-4 p-3 text-sm', {
9+
const alertVariants = cva('mb-4 flex items-start gap-2 rounded border-l-4 p-3 text-sm', {
1010
variants: {
1111
variant: {
1212
default:
13-
'text-gray-800 border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600',
14-
info: 'border-blue-300 text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800',
13+
'border-gray-300 bg-gray-50 text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300',
14+
info: 'border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-gray-800 dark:text-blue-400',
1515
warning:
16-
'text-yellow-800 border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-800',
17-
error: 'text-red-800 border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800',
16+
'border-yellow-300 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-gray-800 dark:text-yellow-300',
17+
error: 'border-red-300 bg-red-50 text-red-800 dark:border-red-800 dark:bg-gray-800 dark:text-red-400',
1818
success:
19-
'text-green-800 border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800',
19+
'border-green-300 bg-green-50 text-green-800 dark:border-green-800 dark:bg-gray-800 dark:text-green-400',
2020
},
2121
},
2222
defaultVariants: { variant: 'default' },
@@ -29,7 +29,7 @@ export default function AppPageAlert({
2929
}: Readonly<AppPageAlertProps & VariantProps<typeof alertVariants>>) {
3030
return (
3131
<div role="alert" className={alertVariants({ variant })}>
32-
<CircleAlertIcon aria-hidden size={14} className="mt-[2px] inline shrink-0" />
32+
<CircleAlertIcon aria-hidden size={14} className="mt-0.5 inline shrink-0" />
3333
<div>
3434
<strong className="font-semibold">{title}</strong>
3535
<p className="text-balance">{message}</p>

‎resources/js/components/ui/alert.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import * as React from 'react';
44
import { cn } from '@/lib/utils';
55

66
const alertVariants = cva(
7-
"grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
7+
"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
88
{
99
variants: {
1010
variant: {
1111
default: 'bg-card text-card-foreground',
1212
destructive:
13-
'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
13+
'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
1414
},
1515
},
1616
defaultVariants: {

‎resources/js/components/ui/animated-modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { useOnClickOutside } from '@/hooks/use-on-click-outside';
12
import { cn } from '@/lib/utils';
2-
import { useOnClickOutside } from '@/packages/hooks';
33
import { AnimatePresence, motion } from 'framer-motion';
44
import type React from 'react';
55
import { createContext, type ReactNode, useContext, useEffect, useRef, useState } from 'react';
@@ -68,7 +68,7 @@ export const ModalBody = ({ children, className }: { children: ReactNode; classN
6868
opacity: 1,
6969
backdropFilter: 'blur(10px)',
7070
}}
71-
className="fixed inset-0 z-50 flex h-full w-full items-center justify-center [perspective:800px] [transform-style:preserve-3d]"
71+
className="fixed inset-0 z-50 flex h-full w-full items-center justify-center perspective-midrange transform-3d"
7272
exit={{
7373
opacity: 0,
7474
backdropFilter: 'blur(0px)',

‎resources/js/components/ui/badge.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import * as React from 'react';
55
import { cn } from '@/lib/utils';
66

77
const badgeVariants = cva(
8-
'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge',
8+
'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
99
{
1010
variants: {
1111
variant: {
1212
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
1313
secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
1414
destructive:
15-
'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
16-
outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30',
15+
'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
16+
outline: 'border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
1717
ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
1818
link: 'text-primary underline-offset-4 hover:underline',
1919
},

‎resources/js/components/ui/button-group.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { Separator } from '@/components/ui/separator';
55
import { cn } from '@/lib/utils';
66

77
const buttonGroupVariants = cva(
8-
"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
8+
"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
99
{
1010
variants: {
1111
orientation: {
1212
horizontal:
13-
'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
13+
'[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!',
1414
vertical:
15-
'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
15+
'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!',
1616
},
1717
},
1818
defaultVariants: {

‎resources/js/components/ui/button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as React from 'react';
55
import { cn } from '@/lib/utils';
66

77
const buttonVariants = cva(
8-
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
8+
"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
99
{
1010
variants: {
1111
variant: {
@@ -14,9 +14,9 @@ const buttonVariants = cva(
1414
'border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
1515
secondary:
1616
'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
17-
ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
17+
ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
1818
destructive:
19-
'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
19+
'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
2020
link: 'text-primary underline-offset-4 hover:underline',
2121
},
2222
size: {

‎resources/js/components/ui/empty.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const emptyMediaVariants = cva(
3131
variants: {
3232
variant: {
3333
default: 'bg-transparent',
34-
icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
34+
icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
3535
},
3636
},
3737
defaultVariants: {

‎resources/js/components/ui/field.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
4646
);
4747
}
4848

49-
const fieldVariants = cva('data-[invalid=true]:text-destructive gap-3 group/field flex w-full', {
49+
const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
5050
variants: {
5151
orientation: {
5252
vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
5353
horizontal:
54-
'flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
54+
'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
5555
responsive:
56-
'flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
56+
'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
5757
},
5858
},
5959
defaultVariants: {

‎resources/js/components/ui/image-zoom.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const ImageZoom = ({ className, backdropClassName, ...props }: ImageZoomP
3838
'motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none',
3939
backdropClassName,
4040
)}
41-
{...(props as any)}
41+
{...props}
4242
/>
4343
</div>
4444
);

‎resources/js/components/ui/input-group.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
2121
}
2222

2323
const inputGroupAddonVariants = cva(
24-
"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
24+
"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
2525
{
2626
variants: {
2727
align: {
28-
'inline-start': 'pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first',
29-
'inline-end': 'pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last',
28+
'inline-start': 'order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]',
29+
'inline-end': 'order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]',
3030
'block-start':
31-
'px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start',
31+
'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3',
3232
'block-end':
33-
'px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start',
33+
'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3',
3434
},
3535
},
3636
defaultVariants: {
@@ -61,7 +61,7 @@ function InputGroupAddon({
6161
);
6262
}
6363

64-
const inputGroupButtonVariants = cva('gap-2 rounded-4xl text-sm shadow-none flex items-center', {
64+
const inputGroupButtonVariants = cva('flex items-center gap-2 rounded-4xl text-sm shadow-none', {
6565
variants: {
6666
size: {
6767
xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",

0 commit comments

Comments
 (0)