Skip to content

Commit 8f32bf2

Browse files
committed
refactor: improve styling and structure of WebhooksTable and WebhookRowActions components
- Introduced consistent class names for table row and cell styling to enhance readability and maintainability. - Updated the WebhookRowActions component to use the new class names for action icons, improving visual consistency. - Adjusted the WebhooksTable header styling for better alignment and presentation of table data. These changes aim to streamline the UI and improve the overall user experience in the webhook management interface.
1 parent a6eaccf commit 8f32bf2

2 files changed

Lines changed: 21 additions & 15 deletions

File tree

src/features/dashboard/settings/webhooks/table-row.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ type WebhookRowActionsProps = {
3636
webhook: Webhook
3737
}
3838

39+
const rowCellClassName = 'h-11 p-0 align-middle'
40+
const actionIconClassName = 'size-4 text-fg-tertiary'
41+
3942
const getWebhookEventLabel = (event: string): string => {
4043
const matchedEvent = WEBHOOK_EVENTS.find(
4144
(webhookEvent) => webhookEvent === event
@@ -58,12 +61,12 @@ const WebhookRowActions = ({ webhook }: WebhookRowActionsProps) => {
5861
<DropdownMenuGroup>
5962
<WebhookAddEditDialog mode="edit" webhook={webhook}>
6063
<DropdownMenuItem inset onSelect={(e) => e.preventDefault()}>
61-
<EditIcon className="size-4 text-fg-tertiary" /> Edit
64+
<EditIcon className={actionIconClassName} /> Edit
6265
</DropdownMenuItem>
6366
</WebhookAddEditDialog>
6467
<WebhookEditSecretDialog webhook={webhook}>
6568
<DropdownMenuItem inset onSelect={(e) => e.preventDefault()}>
66-
<PrivateIcon className="size-4 text-fg-tertiary" /> Rotate Secret
69+
<PrivateIcon className={actionIconClassName} /> Rotate Secret
6770
</DropdownMenuItem>
6871
</WebhookEditSecretDialog>
6972
<WebhookDeleteDialog webhook={webhook}>
@@ -95,7 +98,7 @@ export const WebhookTableRow = ({ webhook, className }: WebhookRowProps) => {
9598

9699
return (
97100
<TableRow className={cn('h-11 bg-bg hover:bg-transparent', className)}>
98-
<TableCell className="h-11 max-w-0 p-0 pr-12 align-middle">
101+
<TableCell className={cn(rowCellClassName, 'max-w-0 pr-12')}>
99102
<div className="flex min-w-0 items-center gap-3">
100103
<div className="border-stroke flex size-8 shrink-0 items-center justify-center border">
101104
<WebhookIcon className="size-4 text-fg-secondary" />
@@ -112,7 +115,9 @@ export const WebhookTableRow = ({ webhook, className }: WebhookRowProps) => {
112115
</div>
113116
</TableCell>
114117

115-
<TableCell className="h-11 w-[216px] max-w-[216px] p-0 pr-12 align-middle">
118+
<TableCell
119+
className={cn(rowCellClassName, 'w-[216px] max-w-[216px] pr-12')}
120+
>
116121
<div className="flex w-[216px] items-center gap-1 overflow-hidden">
117122
{webhook.events.map((event) => (
118123
<Badge key={event} variant="default" className="px-1">
@@ -122,7 +127,7 @@ export const WebhookTableRow = ({ webhook, className }: WebhookRowProps) => {
122127
</div>
123128
</TableCell>
124129

125-
<TableCell className="h-11 w-[136px] p-0 align-middle">
130+
<TableCell className={cn(rowCellClassName, 'w-[136px]')}>
126131
<div className="flex items-center justify-end gap-6">
127132
<p className="w-[92px] text-left text-fg-tertiary prose-body">
128133
{createdAt}
@@ -137,7 +142,7 @@ export const WebhookTableRow = ({ webhook, className }: WebhookRowProps) => {
137142
</div>
138143
</TableCell>
139144

140-
<TableCell className="h-11 w-10 p-0 pl-6 text-right align-middle">
145+
<TableCell className={cn(rowCellClassName, 'w-10 pl-6 text-right')}>
141146
<WebhookRowActions webhook={webhook} />
142147
</TableCell>
143148
</TableRow>

src/features/dashboard/settings/webhooks/table.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ interface WebhooksTableProps {
1717
className?: string
1818
}
1919

20+
const headerCellClassName =
21+
'h-[17px] p-0 pb-2 align-top font-sans! text-[12px] leading-[17px] font-normal text-fg-tertiary uppercase'
22+
2023
const WebhooksTable = ({
2124
webhooks,
2225
totalWebhookCount,
@@ -36,17 +39,15 @@ const WebhooksTable = ({
3639
<col className="w-10" />
3740
</colgroup>
3841
<TableHeader className="border-b-0">
39-
<TableRow className="border-stroke/80 hover:bg-transparent">
40-
<TableHead className="h-auto py-0 pb-2 align-top text-fg-tertiary font-sans! normal-case!">
41-
Name & URL
42-
</TableHead>
43-
<TableHead className="h-auto py-0 pb-2 align-top text-fg-tertiary font-sans! normal-case!">
44-
Events
42+
<TableRow className="h-[25px] border-0 hover:bg-transparent">
43+
<TableHead className={headerCellClassName}>NAME & URL</TableHead>
44+
<TableHead className={cn(headerCellClassName, 'pr-12')}>
45+
EVENTS
4546
</TableHead>
46-
<TableHead className="h-auto py-0 pb-2 align-top text-right text-fg-tertiary font-sans! normal-case!">
47-
Added
47+
<TableHead className={cn(headerCellClassName, 'text-left')}>
48+
ADDED
4849
</TableHead>
49-
<TableHead className="h-auto py-0 pb-2 align-top text-fg-tertiary font-sans! normal-case!">
50+
<TableHead className={headerCellClassName}>
5051
<span className="sr-only">Actions</span>
5152
</TableHead>
5253
</TableRow>

0 commit comments

Comments
 (0)