fix: Matched styling of Webhooks just like api keys page. (#27116)

* fixed text issue

* fixed text issue

* matched style of api keys page

apps/web/modules/webhooks/views/webhooks-skeleton.tsx

@@ -11,10 +11,10 @@ export const SkeletonLoader = () => {
     <SettingsHeader
       title={t("webhooks")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={false}
+      borderInShellHeader={true}
       CTA={null}>
       <SkeletonContainer>
-        <div className="divide-subtle border-subtle mt-6 stack-y-6 rounded-lg border px-6 py-4">
+        <div className="divide-subtle border-subtle stack-y-6 rounded-b-lg border border-t-0 px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>

apps/web/modules/webhooks/views/webhooks-view.tsx

@@ -39,10 +39,10 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
     <SettingsHeader
       title={t("webhooks")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      CTA={webhooksByViewer.webhookGroups.length > 0 ? <CreateNewWebhookButton /> : null}
-      borderInShellHeader={false}>
+      CTA={<CreateNewWebhookButton />}
+      borderInShellHeader={true}>
       {webhookGroups.length ? (
-        <div className={classNames("mt-6")}>
+        <div>
           {webhookGroups.map((group) => (
             <div key={group.teamId}>
               {hasTeams && (
@@ -59,7 +59,7 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
                 </div>
               )}
               <div className="flex flex-col" key={group.profile.slug}>
-                <div className={classNames("border-subtle mb-8 mt-3 rounded-lg border border-t")}>
+                <div className={classNames("border-subtle mb-8 rounded-b-lg border border-t-0", hasTeams && "mt-3")}>
                   {group.webhooks.map((webhook, index) => (
                     <WebhookListItem
                       key={webhook.id}
@@ -84,9 +84,8 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
           Icon="link"
           headline={t("create_your_first_webhook")}
           description={t("create_your_first_webhook_description", { appName: APP_NAME })}
-          className="mt-6 rounded-b-lg"
+          className="rounded-b-lg rounded-t-none border-t-0"
           buttonRaw={<CreateNewWebhookButton />}
-          border={true}
         />
       )}
     </SettingsHeader>