From da84e3bfacac0508dae39305f44cacbe3097725f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Sun, 20 Aug 2023 16:40:57 +0200
Subject: [PATCH] refactor: remove inline colors

---
 src/lib/components/box.svelte             |  2 +-
 src/lib/pages/domains/wizard/retry.svelte | 19 +++++++------------
 src/lib/pages/domains/wizard/step2.svelte | 15 +++------------
 3 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
index 272377152..d77ca8eb4 100644
--- a/src/lib/components/box.svelte
+++ b/src/lib/components/box.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     export let radius: keyof typeof radiuses = 'small';
     export let padding = 24;
-    let classes: string = '';
+    let classes = '';
     export { classes as class };
 
     enum radiuses {
diff --git a/src/lib/pages/domains/wizard/retry.svelte b/src/lib/pages/domains/wizard/retry.svelte
index e119d5d98..fe1056c94 100644
--- a/src/lib/pages/domains/wizard/retry.svelte
+++ b/src/lib/pages/domains/wizard/retry.svelte
@@ -24,26 +24,21 @@
 
 <Box radius="small">
     <div class="u-flex u-gap-8 u-cross-center">
-        <span
-            class="icon-exclamation-circle"
-            aria-hidden="true"
-            style="color: hsl(var(--color-danger-100))" />
+        <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />
         <p class="u-stretch">Verification failed</p>
         <Button secondary on:click={retry} disabled={retrying}>
             {#if retrying}
-                <div class="loader" style="color: hsl(var(--color-neutral-50))" />
+                <div class="loader u-text-color-gray" />
             {:else}
                 Retry
             {/if}
         </Button>
     </div>
-    <div class="u-margin-block-start-24">
-        <p>
-            In order to continue, set the following record on your DNS provider. Find a list of
-            domain providers and their DNS settings in our documentation. Changes may take time to
-            be effective.
-        </p>
-    </div>
+    <p class="text u-margin-block-start-24">
+        In order to continue, set the following record on your DNS provider. Find a list of domain
+        providers and their DNS settings in our documentation. Changes may take time to be
+        effective.
+    </p>
     <div class="u-margin-block-start-24">
         <CnameTable />
     </div>
diff --git a/src/lib/pages/domains/wizard/step2.svelte b/src/lib/pages/domains/wizard/step2.svelte
index bffbe6e92..40276e2d4 100644
--- a/src/lib/pages/domains/wizard/step2.svelte
+++ b/src/lib/pages/domains/wizard/step2.svelte
@@ -22,10 +22,7 @@
                 <Retry on:error={onRetryError} />
             {:else}
                 <div class="u-flex u-gap-8 u-cross-center">
-                    <span
-                        class="icon-check"
-                        aria-hidden="true"
-                        style="color: hsl(var(--color-success-100))" />
+                    <span class="icon-check u-color-text-success" aria-hidden="true" />
                     <p class="u-stretch">Domain verified</p>
                 </div>
             {/if}
@@ -38,16 +35,10 @@
                         style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
                     <p class="u-stretch">Generating certificate</p>
                 {:else if $domain.status === 'verified'}
-                    <span
-                        class="icon-check"
-                        aria-hidden="true"
-                        style="color: hsl(var(--color-success-100))" />
+                    <span class="icon-check u-color-text-success" aria-hidden="true" />
                     <p class="u-stretch">Certificate generated</p>
                 {:else}
-                    <span
-                        class="icon-clock"
-                        aria-hidden="true"
-                        style="color: hsl(var(--color-neutral-50))" />
+                    <span class="icon-clock u-text-color-gray" aria-hidden="true" />
                     <p class="u-stretch">
                         Certificate generation will begin after domain verification
                     </p>