refactor: enhance webhook dialogs and table layout for improved usability

- Updated the DiscardWebhookChangesDialog to include a size property for the Stay button, enhancing its appearance.
- Refined the rowCellClassName in WebhookTableRow to improve styling consistency.
- Adjusted headerCellClassName in WebhooksTable to ensure proper padding and alignment.
- Modified UpsertWebhookDialog to handle dialog state changes more accurately, preventing accidental discards when in update mode.

These changes aim to enhance the user experience and maintainability of the webhook management interface.

Author: sarimrmalik

src/features/dashboard/settings/webhooks/discard-webhook-changes-dialog.tsx

@@ -34,7 +34,11 @@ export const DiscardWebhookChangesDialog = ({
         </DialogDescription>
       </DialogHeader>
       <DialogFooter className="shrink-0 gap-5 sm:gap-5">
-        <Button variant="quaternary" onClick={() => onOpenChange(false)}>
+        <Button
+          variant="quaternary"
+          size="none"
+          onClick={() => onOpenChange(false)}
+        >
           Stay
         </Button>
         <Button variant="primary" onClick={onDiscard}>

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

@@ -102,7 +102,7 @@ const WebhookNameAndUrl = ({ name, url }: WebhookNameAndUrlProps) => {
   )
 }
 
-const rowCellClassName = 'p-0 py-1.5 align-middle'
+const rowCellClassName = 'p-0 py-1.5 align-middle [tr:first-child>&]:pt-0'
 const rowContentClassName = 'flex items-center'
 const actionIconClassName = 'size-4 text-fg-tertiary'
 

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

@@ -18,7 +18,7 @@ interface WebhooksTableProps {
 }
 
 const headerCellClassName =
-  'h-[17px] p-0 align-top font-sans! text-[12px] leading-[17px] text-left font-normal text-fg-tertiary uppercase'
+  'h-[17px] p-0 pb-2 align-top font-sans! text-[12px] leading-[17px] text-left font-normal text-fg-tertiary uppercase'
 
 export const WebhooksTable = ({
   webhooks,
@@ -41,8 +41,8 @@ export const WebhooksTable = ({
       <TableHeader className="border-b-0">
         <TableRow className="border-0">
           <TableHead className={headerCellClassName}>NAME & URL</TableHead>
-          <TableHead className={cn(headerCellClassName)}>EVENTS</TableHead>
-          <TableHead className={cn(headerCellClassName)}>ADDED</TableHead>
+          <TableHead className={headerCellClassName}>EVENTS</TableHead>
+          <TableHead className={headerCellClassName}>ADDED</TableHead>
           <TableHead className={headerCellClassName}>
             <span className="sr-only">Actions</span>
           </TableHead>

src/features/dashboard/settings/webhooks/upsert-webhook-dialog.tsx

@@ -132,7 +132,12 @@ export function UpsertWebhookDialog({
   }
 
   const handleDialogChange = (value: boolean) => {
-    if (!value && hasChanges && !upsertMutation.isPending) {
+    if (
+      !value &&
+      isUpdateMode &&
+      hasChanges &&
+      !upsertMutation.isPending
+    ) {
       setDiscardConfirmOpen(true)
       return
     }
@@ -171,7 +176,7 @@ export function UpsertWebhookDialog({
       selectedEvents.length !== webhook.events.length ||
       [...selectedEvents].sort().join('|') !==
         [...webhook.events].sort().join('|')
-    : true
+    : false
 
   const { errors } = form.formState