From bb3bc4c042e4820bcaea1cae139669ee343e2c0e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 30 Sep 2022 11:28:16 +0200
Subject: [PATCH] fix: broken empty components

---
 .../project-[project]/functions/+page.svelte  | 37 +++---------
 .../function/[function]/+page.svelte          | 59 ++++++-------------
 .../[function]/executions/+page.svelte        | 17 +-----
 .../functions/wizard/step2.svelte             |  2 +-
 .../functions/wizard/step3.svelte             |  2 +-
 5 files changed, 31 insertions(+), 86 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte
index 124329a10..e1f66545e 100644
--- a/src/routes/console/project-[project]/functions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1 } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './createFunction.svelte';
@@ -102,16 +102,9 @@
                 </GridItem1>
             {/each}
             {#if ($functionList.total % 2 !== 0 || $functionList.total % 4 === 0) && $functionList.total - offset <= limit}
-                <EmptyGridItem on:click={openWizard}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new function</p>
-                    </div>
-                </EmptyGridItem>
+                <Empty on:click={openWizard}>
+                    <p>Create a new function</p>
+                </Empty>
             {/if}
         </div>
 
@@ -120,24 +113,10 @@
             <Pagination {limit} bind:offset sum={$functionList.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={openWizard}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first function to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button
-                        external
-                        secondary
-                        href="https://appwrite.io/docs/functions#createFunction"
-                        >Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton on:click={openWizard}>
+            <p>Create your first function to get started</p>
+            <Button external secondary href="https://appwrite.io/docs/functions#createFunction"
+                >Documentation</Button>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/+page.svelte
index e5a3077e5..c9b202bbb 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/+page.svelte
@@ -95,29 +95,20 @@
                 </svelte:fragment>
             </CardGrid>
         {:else}
-            <Empty dashed centered>
-                <div class="u-flex u-flex-vertical u-cross-center">
-                    <div class="common-section">
-                        <Button secondary round on:click={() => (showCreate = true)}>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p class="u-text-center">
-                            Add a new deployment, or activate an existing one to see your function
-                            in action.
-                        </p>
-                        <p class="u-text-center">
-                            Learn more about deployments in our <a
-                                class="link"
-                                href="https://appwrite.io/docs/functions#build"
-                                target="_blank"
-                                rel="noopener noreferrer">
-                                Documentation</a
-                            >.
-                        </p>
-                    </div>
-                </div>
+            <Empty isButton on:click={() => (showCreate = true)}>
+                <p class="u-text-center">
+                    Add a new deployment, or activate an existing one to see your function in
+                    action.
+                </p>
+                <p class="u-text-center">
+                    Learn more about deployments in our <a
+                        class="link"
+                        href="https://appwrite.io/docs/functions#build"
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Documentation</a
+                    >.
+                </p>
             </Empty>
         {/if}
 
@@ -210,24 +201,10 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first deployment to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button
-                        external
-                        secondary
-                        href="https://appwrite.io/docs/functions#createFunction"
-                        >Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton single>
+            <p>Create your first deployment to get started</p>
+            <Button external secondary href="https://appwrite.io/docs/functions#createFunction"
+                >Documentation</Button>
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
diff --git a/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte
index f2ea91ff5..2287eb230 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte
@@ -70,20 +70,9 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => console.log('showCreate = true')}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Execute your function to view execution logs</p>
-                </div>
-                <div class="common-section">
-                    <Button external secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton on:click={() => console.log('showCreate = true')}>
+            <p>Execute your function to view execution logs</p>
+            <Button external secondary href="#">Documentation</Button>
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
diff --git a/src/routes/console/project-[project]/functions/wizard/step2.svelte b/src/routes/console/project-[project]/functions/wizard/step2.svelte
index 41361eadb..61173ca82 100644
--- a/src/routes/console/project-[project]/functions/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step2.svelte
@@ -63,7 +63,7 @@
             </div>
         </div>
     {:else}
-        <Empty dashed centered>Add a role to get started</Empty>
+        <Empty single>Add a role to get started</Empty>
     {/if}
 
     <DropList bind:show={showDropdown} position="bottom" arrow={false}>
diff --git a/src/routes/console/project-[project]/functions/wizard/step3.svelte b/src/routes/console/project-[project]/functions/wizard/step3.svelte
index 8f08a781f..39ad56b91 100644
--- a/src/routes/console/project-[project]/functions/wizard/step3.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step3.svelte
@@ -48,7 +48,7 @@
             </div>
         </div>
     {:else}
-        <Empty dashed centered>Add a role to get started</Empty>
+        <Empty single>Add a role to get started</Empty>
     {/if}
 
     <Button text on:click={() => (showCreate = !showCreate)}>