Skip to content

Commit 5c9694c

Browse files
thevuongthevuong
committed
refactor: replace space-x-* with gap-x-* for layout consistency
Updated various components to use gap-x-* instead of space-x-* for better layout consistency and readability. Also refined some Badge and input component adjustments.
1 parent 351ba9b commit 5c9694c

File tree

10 files changed

+29
-30
lines changed

10 files changed

+29
-30
lines changed

‎apps/docs/app/examples/cards/_components/cookie-settings.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function CookieSettings(): JSX.Element {
1919
<CardDescription>Manage your cookie settings here.</CardDescription>
2020
</CardHeader>
2121
<CardContent className="grid gap-6">
22-
<div className="flex items-center justify-between space-x-2">
22+
<div className="flex items-center justify-between gap-x-2">
2323
<Label className="flex flex-col space-y-1" htmlFor="necessary">
2424
<span>Strictly Necessary</span>
2525
<span className="text-muted-foreground font-normal leading-snug">
@@ -29,7 +29,7 @@ export function CookieSettings(): JSX.Element {
2929
</Label>
3030
<Switch defaultChecked id="necessary" />
3131
</div>
32-
<div className="flex items-center justify-between space-x-2">
32+
<div className="flex items-center justify-between gap-x-2">
3333
<Label className="flex flex-col space-y-1" htmlFor="functional">
3434
<span>Functional Cookies</span>
3535
<span className="text-muted-foreground font-normal leading-snug">
@@ -39,7 +39,7 @@ export function CookieSettings(): JSX.Element {
3939
</Label>
4040
<Switch id="functional" />
4141
</div>
42-
<div className="flex items-center justify-between space-x-2">
42+
<div className="flex items-center justify-between gap-x-2">
4343
<Label className="flex flex-col space-y-1" htmlFor="performance">
4444
<span>Performance Cookies</span>
4545
<span className="text-muted-foreground font-normal leading-snug">

‎apps/docs/app/examples/cards/_components/share-document.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function ShareDocument(): JSX.Element {
3838
<div className="space-y-4">
3939
<h4 className="text-sm font-medium">People with access</h4>
4040
<div className="grid gap-6">
41-
<div className="flex items-center justify-between space-x-4">
41+
<div className="flex items-center justify-between gap-x-4">
4242
<div className="flex items-center space-x-4">
4343
<Avatar>
4444
<AvatarImage src="/avatars/03.png" />
@@ -61,7 +61,7 @@ export function ShareDocument(): JSX.Element {
6161
</SelectContent>
6262
</Select>
6363
</div>
64-
<div className="flex items-center justify-between space-x-4">
64+
<div className="flex items-center justify-between gap-x-4">
6565
<div className="flex items-center space-x-4">
6666
<Avatar>
6767
<AvatarImage src="/avatars/05.png" />
@@ -84,7 +84,7 @@ export function ShareDocument(): JSX.Element {
8484
</SelectContent>
8585
</Select>
8686
</div>
87-
<div className="flex items-center justify-between space-x-4">
87+
<div className="flex items-center justify-between gap-x-4">
8888
<div className="flex items-center space-x-4">
8989
<Avatar>
9090
<AvatarImage src="/avatars/01.png" />

‎apps/docs/app/examples/cards/_components/team-members.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function TeamMembers(): JSX.Element {
3131
</CardDescription>
3232
</CardHeader>
3333
<CardContent className="grid gap-6">
34-
<div className="flex items-center justify-between space-x-4">
34+
<div className="flex items-center justify-between gap-x-4">
3535
<div className="flex items-center space-x-4">
3636
<Avatar>
3737
<AvatarImage src="/avatars/01.png" />
@@ -88,7 +88,7 @@ export function TeamMembers(): JSX.Element {
8888
</PopoverContent>
8989
</Popover>
9090
</div>
91-
<div className="flex items-center justify-between space-x-4">
91+
<div className="flex items-center justify-between gap-x-4">
9292
<div className="flex items-center space-x-4">
9393
<Avatar>
9494
<AvatarImage src="/avatars/02.png" />

‎apps/docs/app/examples/mail/_components/mail-list.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,7 @@ export function MailList({ items }: MailListProps): JSX.Element {
5858
{item.labels.length ? (
5959
<div className="flex items-center gap-2">
6060
{item.labels.map((label) => (
61-
<Badge
62-
key={label}
63-
size="xs"
64-
variant={getBadgeVariantFromLabel(label)}
65-
>
61+
<Badge key={label} variant={getBadgeVariantFromLabel(label)}>
6662
{label}
6763
</Badge>
6864
))}

‎apps/docs/app/examples/tasks/_components/columns.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,7 @@ export const columns: ColumnDef<Task>[] = [
5454

5555
return (
5656
<div className="flex items-center gap-x-2">
57-
{label ? (
58-
<Badge size="sm" variant="outline">
59-
{label.label}
60-
</Badge>
61-
) : null}
57+
{label ? <Badge variant="outline">{label.label}</Badge> : null}
6258
<span className="max-w-[500px] truncate font-medium">
6359
{row.getValue('title')}
6460
</span>

‎apps/docs/app/examples/tasks/_components/data-table-toolbar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ export function DataTableToolbar<TData>({
1515
const isFiltered = table.getState().columnFilters.length > 0;
1616

1717
return (
18-
<div className="flex items-center justify-between">
19-
<div className="flex flex-1 items-center space-x-2">
18+
<div className="flex items-center justify-between gap-x-4">
19+
<div className="flex max-w-screen-sm flex-1 items-center space-x-2">
2020
<TextInput
21-
className="h-8 w-[150px] lg:w-64"
21+
className="h-8 lg:w-64"
2222
placeholder="Filter tasks..."
2323
value={String(table.getColumn('title')?.getFilterValue() ?? '')}
2424
onChange={(event) =>

‎apps/docs/app/examples/tasks/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default async function TaskPage(): Promise<JSX.Element> {
4747
/>
4848
</div>
4949
<div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
50-
<div className="flex items-center justify-between space-y-2">
50+
<div className="flex items-center justify-between gap-y-2">
5151
<div>
5252
<h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
5353
<p className="text-muted-foreground">

‎apps/docs/app/globals.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,14 @@
176176
|---------------------------------------------------------------------------
177177
| Used for accents such as hover effects and active state.
178178
--------------------------------------------------------------------------*/
179-
--accent: var(--slate-200);
179+
--accent: var(--slate-100);
180180
--accent-foreground: var(--slate-950);
181181

182182
/*--------------------------------------------------------------------------
183183
| Muted Colors
184184
|---------------------------------------------------------------------------
185-
| Used for muted states such as placeholder, description, separator.
185+
| Used for muted states such as placeholder, description, separator,
186+
| table header.
186187
--------------------------------------------------------------------------*/
187188
--muted: var(--slate-200);
188189
--muted-foreground: var(--slate-500);

‎apps/docs/stories/misc/badge.stories.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,6 @@ export const Default: Story = {
3232
export const Sizes: Story = {
3333
render: (args) => (
3434
<div className="flex flex-wrap items-center gap-4">
35-
<Badge {...args} prefix={<ShieldCheckIcon />} size="xs">
36-
xs badge
37-
</Badge>
3835
<Badge {...args} prefix={<ShieldCheckIcon />} size="sm">
3936
sm badge
4037
</Badge>
@@ -47,9 +44,10 @@ export const Sizes: Story = {
4744
<Badge {...args} prefix={<ShieldCheckIcon />} size="xl">
4845
xl badge
4946
</Badge>
50-
<Badge {...args} prefix={<ShieldCheckIcon />} size="xs" variant="outline">
51-
xs badge
47+
<Badge {...args} prefix={<ShieldCheckIcon />} size="2xl">
48+
2xl badge
5249
</Badge>
50+
5351
<Badge {...args} prefix={<ShieldCheckIcon />} size="sm" variant="outline">
5452
sm badge
5553
</Badge>
@@ -62,6 +60,14 @@ export const Sizes: Story = {
6260
<Badge {...args} prefix={<ShieldCheckIcon />} size="xl" variant="outline">
6361
xl badge
6462
</Badge>
63+
<Badge
64+
{...args}
65+
prefix={<ShieldCheckIcon />}
66+
size="2xl"
67+
variant="outline"
68+
>
69+
2xl badge
70+
</Badge>
6571
</div>
6672
),
6773
};

‎apps/docs/stories/misc/collapsible.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const Default: Story = {
3333
onOpenChange={setIsOpen}
3434
{...args}
3535
>
36-
<div className="flex items-center justify-between space-x-4 px-3">
36+
<div className="flex items-center justify-between gap-x-4 px-3">
3737
<h4 className="text-sm font-semibold">
3838
@peduarte starred 3 repositories
3939
</h4>

0 commit comments

Comments
 (0)