From a2bf574d8ffffd40ff767732e26991d9e230cbbd Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 21 Aug 2023 13:23:37 +0200
Subject: [PATCH] fix: domain tagles

---
 src/lib/pages/domains/index.svelte | 35 ++++++++++++++++++------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index c1af86986..2e676baf7 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -26,6 +26,7 @@
     import Create from './create.svelte';
     import Delete from './delete.svelte';
     import Retry from './wizard/retry.svelte';
+    import { Pill } from '$lib/elements';
 
     export let rules: Models.ProxyRuleList;
     export let type: ProxyTypes;
@@ -87,21 +88,23 @@
                     <TableCell title="Status">
                         {#if domain.status === 'created'}
                             <div class="u-flex u-gap-8 u-cross-center">
-                                <span
-                                    class="icon-x-circle u-color-text-danger"
-                                    aria-hidden="true" />
-                                <span class="u-text">Failed</span>
+                                <Pill danger>
+                                    <span
+                                        class="icon-exclamation-circle u-color-text-danger"
+                                        aria-hidden="true" />
+                                    <span class="u-text">Failed</span>
+                                </Pill>
                                 <button on:click={() => openRetry(domain)}>
                                     <span class="link">Retry</span>
                                 </button>
                             </div>
                         {:else}
-                            <div class="u-flex u-gap-8 u-cross-center">
+                            <Pill success>
                                 <span
                                     class="icon-check-circle u-color-text-success"
                                     aria-hidden="true" />
-                                <p class="u-stretch">Verified</p>
-                            </div>
+                                <p class="text">Verified</p>
+                            </Pill>
                         {/if}
                     </TableCell>
                     <TableCell title="Name">
@@ -110,14 +113,16 @@
                                 <span
                                     class="icon-x-circle u-color-text-danger"
                                     aria-hidden="true" />
-                                <p class="u-stretch">Failed</p>
+                                <p class="text">Failed</p>
                             </div>
                         {:else if domain.status === 'verified'}
                             <div class="u-flex u-gap-8 u-cross-center">
-                                <span
-                                    class="icon-check-circle u-color-text-success"
-                                    aria-hidden="true" />
-                                <span>Generated</span>
+                                <Pill success>
+                                    <span
+                                        class="icon-check-circle u-color-text-success"
+                                        aria-hidden="true" />
+                                    <span>Generated</span>
+                                </Pill>
                                 {#if domain.renewAt}
                                     <span class="u-text-color-gray">
                                         Auto-renewal: {toLocaleDate(domain.renewAt)}
@@ -126,8 +131,10 @@
                             </div>
                         {:else}
                             <div class="u-flex u-gap-8 u-cross-center">
-                                <span class="icon-clock u-text-color-gray" aria-hidden="true" />
-                                <p class="u-stretch">Waiting to run</p>
+                                <Pill>
+                                    <span class="icon-clock u-text-color-gray" aria-hidden="true" />
+                                    <p class="text">Waiting to run</p>
+                                </Pill>
                             </div>
                         {/if}
                     </TableCell>