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

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>
 

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} />

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>

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>
 

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>