From e51f3106dbbc80f2cfef0f8666312781d4655bb4 Mon Sep 17 00:00:00 2001
From: wess <me@wess.io>
Date: Thu, 29 Feb 2024 09:23:16 -0500
Subject: [PATCH] Color updates

Sentence Case

Update webhook button now takes to details view correctly

Shows actual webhook id instead of Webhook ID

Fixes spacing between Disabled toggle and Created
---
 .../console/project-[project]/settings/webhooks/+page.svelte | 2 +-
 .../settings/webhooks/[webhook]/details.svelte               | 3 ++-
 .../settings/webhooks/[webhook]/header.svelte                | 2 +-
 .../project-[project]/settings/webhooks/failedModal.svelte   | 5 +++--
 .../settings/webhooks/messageStatusPill.svelte               | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
index 057859cb0..4adbdffad 100644
--- a/src/routes/console/project-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
@@ -51,7 +51,7 @@
     <GridHeader title="Webhooks" {columns} view={data.view} hideColumns={false} hideView={true}>
         <Button on:click={openWizard} event="create_webhook">
             <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create Webhook</span>
+            <span class="text">Create webhook</span>
         </Button>
     </GridHeader>
 
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/details.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/details.svelte
index 9b7ffd46e..37424e263 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/details.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/details.svelte
@@ -66,7 +66,8 @@
                         id="enable-switch"
                         bind:value={enabled} />
                 </FormList>
-                <li>Created: {toLocaleDateTime($webhook.$createdAt)}</li>
+
+                <li style="margin-top:16px">Created: {toLocaleDateTime($webhook.$createdAt)}</li>
                 <li>Last updated: {toLocaleDateTime($webhook.$updatedAt)}</li>
             </ul>
             <MessageStatusPill enabled={$webhook.enabled} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
index 9a09cbb01..8debdc385 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
@@ -12,6 +12,6 @@
         <CoverTitle href={`/console/project-${projectId}/settings/webhooks`}>
             {$webhook?.name}
         </CoverTitle>
-        <Id value={$webhook?.$id} event="webhook">Webhook ID</Id>
+        <Id value={$webhook?.$id} event="webhook">{$webhook?.$id}</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte b/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
index a9d0342fd..67437a82b 100644
--- a/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
@@ -12,7 +12,8 @@
     export let showUpdateButton: boolean = true;
 
     const projectId = $page.params.project;
-    const webhookPath = webhook
+
+    $: webhookPath = webhook
         ? `${base}/console/project-${projectId}/settings/webhooks/` + (webhook['$id'] ?? '')
         : '';
 
@@ -31,7 +32,7 @@
             </p>
 
             {#if showUpdateButton}
-                <Button secondary href={webhookPath} event="update_webhook">Update Webhook</Button>
+                <Button secondary href={webhookPath} event="update_webhook">Update webhook</Button>
             {/if}
         </div>
 
diff --git a/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte b/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
index 9681c91a0..2c12a4ee0 100644
--- a/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
@@ -3,7 +3,7 @@
 
     export let enabled: boolean;
 
-    $: style = `color: ${enabled ? 'hsl(var(--color-success-100))' : 'hsl(var(--color-danger-100))'}`;
+    $: style = `color: ${enabled ? 'hsl(var(--color-success-120))' : 'hsl(var(--color-danger-120))'}`;
     $: iconClass = (enabled ? 'icon-check-circle' : 'icon-exclamation-circle') + ' u-font-size-12';
 </script>