From 719b5cd16b778d95ed4dfad74ad5768ee81a401f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 22 Sep 2022 14:36:37 +0200
Subject: [PATCH 1/3] refactor: empty grid item

---
 src/lib/components/emptyGridItem.svelte               | 11 +++++++++++
 src/lib/images/empty-dark.svg                         |  1 +
 src/lib/images/empty-light.svg                        |  1 +
 src/routes/console/account/organizations/+page.svelte |  9 +--------
 .../console/organization-[organization]/+page.svelte  |  9 +--------
 .../console/project-[project]/databases/+page.svelte  |  9 +--------
 .../databases/database/[database]/+page.svelte        |  9 +--------
 .../console/project-[project]/storage/+page.svelte    |  9 +--------
 8 files changed, 18 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/images/empty-dark.svg
 create mode 100644 src/lib/images/empty-light.svg

diff --git a/src/lib/components/emptyGridItem.svelte b/src/lib/components/emptyGridItem.svelte
index 7678addac..ab0126619 100644
--- a/src/lib/components/emptyGridItem.svelte
+++ b/src/lib/components/emptyGridItem.svelte
@@ -1,5 +1,16 @@
+<script lang="ts">
+    import { app } from '$lib/stores/app';
+    import EmptyLight from '$lib/images/empty-light.svg';
+    import EmptyDark from '$lib/images/empty-dark.svg';
+</script>
+
 <button on:click class="card is-border-dashed u-grid u-cross-center">
     <div class="u-flex u-flex-vertical u-cross-center">
+        {#if $app.themeInUse === 'dark'}
+            <img src={EmptyDark} alt="create" aria-hidden="true" />
+        {:else}
+            <img src={EmptyLight} alt="create" aria-hidden="true" />
+        {/if}
         <slot />
     </div>
 </button>
diff --git a/src/lib/images/empty-dark.svg b/src/lib/images/empty-dark.svg
new file mode 100644
index 000000000..9babf164b
--- /dev/null
+++ b/src/lib/images/empty-dark.svg
@@ -0,0 +1 @@
+<svg width="148" height="105" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M38.51 23.233a4.012 4.012 0 0 1 3.407-4.568l24.203-3.399a3.99 3.99 0 0 1 2.932.746l5.139 3.812a3.99 3.99 0 0 1 1.576 2.673l5.38 39.95a4.012 4.012 0 0 1-3.41 4.506l-28.033 3.995a3.988 3.988 0 0 1-4.508-3.355l-6.686-44.36Z" fill="#fff"/></g><path d="m43.643 23.837 23.556-3.523a3.988 3.988 0 0 1 4.549 3.445l1.943 15.343-27.278 3.888-2.77-19.153Z" fill="url(#b)"/><path d="m49.09 26.97 2.732-.358 1.666 12.379-2.73.358L49.09 26.97Z" fill="url(#c)"/><path d="m54.31 30.946 2.731-.358 1.06 7.835-2.73.359-1.06-7.836Z" fill="url(#d)"/><path d="m58.79 28.826 2.73-.359 1.148 9.366-2.73.358-1.149-9.365Z" fill="url(#e)"/><path d="m63.839 32.53 2.73-.358.688 4.966-2.73.359-.688-4.967Z" fill="url(#f)"/><path d="m68.395 22.448-.656-7.41 8.032 5.866-7.376 1.544Z" fill="#DFE1EE"/><path d="m76.953 83.571 30.488 6.946H35.578L.5 83.571h76.453Z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.995 53.8c-.774-.608-1.715-.94-2.63-.928l-20.301.26c-2.172.029-3.526 1.927-2.886 4.046.536 1.775 2.302 3.089 4.121 3.065l20.3-.27c3.266-.044 4.162-4.004 1.396-6.173Zm53.289 9.991c-.051-2.388-2.297-4.507-4.743-4.475l-68.852.917c-2.417.032-3.917 2.153-3.19 4.51l6.938 22.468c.604 1.959 2.559 3.401 4.567 3.371l62.391-.934c1.975-.03 3.405-1.477 3.364-3.406l-.475-22.45Z" fill="#C4C6D7"/><path d="m76.92 24.531-2.066 27.784-6.884-.926-2.754-3.705 2.634-16.48a6 6 0 0 1 5.925-5.052h2.227l.918-1.62Z" fill="url(#h)" fill-opacity=".6"/><g filter="url(#i)"><path d="M71.955 27.705a3.975 3.975 0 0 1 4.343-3.602l28.228 2.718a4.024 4.024 0 0 1 3.616 4.369l-3.97 43.59a3.976 3.976 0 0 1-4.343 3.603l-28.228-2.718a4.025 4.025 0 0 1-3.616-4.369l3.97-43.59Z" fill="#fff"/></g><rect width="26.622" height="1.389" rx=".695" transform="rotate(4.056 -376.174 1105.033) skewX(.071)" fill="#E8E9F0"/><rect width="13.33" height="1.389" rx=".695" transform="rotate(4.056 -428.89 1100.632) skewX(.071)" fill="#E8E9F0"/><path d="m106.608 47.684-36.114-1.389-.459 4.4h36.573v-3.01Z" fill="url(#j)" fill-opacity=".5"/><path d="M60.826 41.236a1.83 1.83 0 0 0-1.46-.73H37.218c-1.014 0-1.836.83-1.836 1.853l3.672 46.306c0 1.023.822 1.852 1.836 1.852h67.01c1.014 0 1.836-.83 1.836-1.852l3.672-36.119a1.844 1.844 0 0 0-1.836-1.852H68.878a1.83 1.83 0 0 1-1.46-.73l-6.592-8.728Z" fill="url(#k)"/><ellipse cx="74.166" cy="85.655" rx="11.245" ry="11.345" fill="url(#l)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.395 81.997c.305 0 .551.249.551.556v2.778H77.7c.304 0 .55.249.55.556a.553.553 0 0 1-.55.555h-2.754v2.779a.553.553 0 0 1-.55.555.553.553 0 0 1-.551-.555v-2.779H71.09a.553.553 0 0 1-.551-.555c0-.307.247-.556.55-.556h2.755v-2.778c0-.307.246-.556.55-.556Z" fill="#FCFCFF"/><defs><linearGradient id="b" x1="44.102" y1="4.157" x2="36.884" y2="51.275" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#B4B6CA"/></linearGradient><linearGradient id="c" x1="50.491" y1="26.786" x2="52.116" y2="39.171" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="d" x1="55.7" y1="30.764" x2="56.729" y2="38.603" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="e" x1="60.125" y1="28.651" x2="61.353" y2="38.006" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="f" x1="65.227" y1="32.348" x2="65.88" y2="37.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="g" x1="90.689" y1="96.769" x2="24.23" y2="74.494" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset=".992" stop-color="#C4C6D7" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="65.216" y1="47.453" x2="69.652" y2="17.597" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#A3A8BD" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="98.951" y1="-33.583" x2="84.242" y2="51.577" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#C4C6D7" stop-opacity=".37"/></linearGradient><linearGradient id="k" x1="4.171" y1="9.482" x2="114.21" y2="101.365" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#F2F2F8"/></linearGradient><linearGradient id="l" x1="58.561" y1="78.246" x2="77.573" y2="100.538" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#C4C6D7"/></linearGradient><filter id="a" x="15.465" y="4.227" width="74.718" height="87.761" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-7" dy="5"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.52 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1037_50782" result="shape"/></filter><filter id="i" x="55.968" y=".084" width="90.191" height="104.318" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="13" dy="1"/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="5" dy="3"/><feGaussianBlur stdDeviation="7.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="effect1_dropShadow_1037_50782" result="effect2_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_1037_50782" result="shape"/></filter></defs></svg>
\ No newline at end of file
diff --git a/src/lib/images/empty-light.svg b/src/lib/images/empty-light.svg
new file mode 100644
index 000000000..9babf164b
--- /dev/null
+++ b/src/lib/images/empty-light.svg
@@ -0,0 +1 @@
+<svg width="148" height="105" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><path d="M38.51 23.233a4.012 4.012 0 0 1 3.407-4.568l24.203-3.399a3.99 3.99 0 0 1 2.932.746l5.139 3.812a3.99 3.99 0 0 1 1.576 2.673l5.38 39.95a4.012 4.012 0 0 1-3.41 4.506l-28.033 3.995a3.988 3.988 0 0 1-4.508-3.355l-6.686-44.36Z" fill="#fff"/></g><path d="m43.643 23.837 23.556-3.523a3.988 3.988 0 0 1 4.549 3.445l1.943 15.343-27.278 3.888-2.77-19.153Z" fill="url(#b)"/><path d="m49.09 26.97 2.732-.358 1.666 12.379-2.73.358L49.09 26.97Z" fill="url(#c)"/><path d="m54.31 30.946 2.731-.358 1.06 7.835-2.73.359-1.06-7.836Z" fill="url(#d)"/><path d="m58.79 28.826 2.73-.359 1.148 9.366-2.73.358-1.149-9.365Z" fill="url(#e)"/><path d="m63.839 32.53 2.73-.358.688 4.966-2.73.359-.688-4.967Z" fill="url(#f)"/><path d="m68.395 22.448-.656-7.41 8.032 5.866-7.376 1.544Z" fill="#DFE1EE"/><path d="m76.953 83.571 30.488 6.946H35.578L.5 83.571h76.453Z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.995 53.8c-.774-.608-1.715-.94-2.63-.928l-20.301.26c-2.172.029-3.526 1.927-2.886 4.046.536 1.775 2.302 3.089 4.121 3.065l20.3-.27c3.266-.044 4.162-4.004 1.396-6.173Zm53.289 9.991c-.051-2.388-2.297-4.507-4.743-4.475l-68.852.917c-2.417.032-3.917 2.153-3.19 4.51l6.938 22.468c.604 1.959 2.559 3.401 4.567 3.371l62.391-.934c1.975-.03 3.405-1.477 3.364-3.406l-.475-22.45Z" fill="#C4C6D7"/><path d="m76.92 24.531-2.066 27.784-6.884-.926-2.754-3.705 2.634-16.48a6 6 0 0 1 5.925-5.052h2.227l.918-1.62Z" fill="url(#h)" fill-opacity=".6"/><g filter="url(#i)"><path d="M71.955 27.705a3.975 3.975 0 0 1 4.343-3.602l28.228 2.718a4.024 4.024 0 0 1 3.616 4.369l-3.97 43.59a3.976 3.976 0 0 1-4.343 3.603l-28.228-2.718a4.025 4.025 0 0 1-3.616-4.369l3.97-43.59Z" fill="#fff"/></g><rect width="26.622" height="1.389" rx=".695" transform="rotate(4.056 -376.174 1105.033) skewX(.071)" fill="#E8E9F0"/><rect width="13.33" height="1.389" rx=".695" transform="rotate(4.056 -428.89 1100.632) skewX(.071)" fill="#E8E9F0"/><path d="m106.608 47.684-36.114-1.389-.459 4.4h36.573v-3.01Z" fill="url(#j)" fill-opacity=".5"/><path d="M60.826 41.236a1.83 1.83 0 0 0-1.46-.73H37.218c-1.014 0-1.836.83-1.836 1.853l3.672 46.306c0 1.023.822 1.852 1.836 1.852h67.01c1.014 0 1.836-.83 1.836-1.852l3.672-36.119a1.844 1.844 0 0 0-1.836-1.852H68.878a1.83 1.83 0 0 1-1.46-.73l-6.592-8.728Z" fill="url(#k)"/><ellipse cx="74.166" cy="85.655" rx="11.245" ry="11.345" fill="url(#l)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.395 81.997c.305 0 .551.249.551.556v2.778H77.7c.304 0 .55.249.55.556a.553.553 0 0 1-.55.555h-2.754v2.779a.553.553 0 0 1-.55.555.553.553 0 0 1-.551-.555v-2.779H71.09a.553.553 0 0 1-.551-.555c0-.307.247-.556.55-.556h2.755v-2.778c0-.307.246-.556.55-.556Z" fill="#FCFCFF"/><defs><linearGradient id="b" x1="44.102" y1="4.157" x2="36.884" y2="51.275" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#B4B6CA"/></linearGradient><linearGradient id="c" x1="50.491" y1="26.786" x2="52.116" y2="39.171" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="d" x1="55.7" y1="30.764" x2="56.729" y2="38.603" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="e" x1="60.125" y1="28.651" x2="61.353" y2="38.006" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="f" x1="65.227" y1="32.348" x2="65.88" y2="37.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".31"/></linearGradient><linearGradient id="g" x1="90.689" y1="96.769" x2="24.23" y2="74.494" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset=".992" stop-color="#C4C6D7" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="65.216" y1="47.453" x2="69.652" y2="17.597" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#A3A8BD" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="98.951" y1="-33.583" x2="84.242" y2="51.577" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#C4C6D7" stop-opacity=".37"/></linearGradient><linearGradient id="k" x1="4.171" y1="9.482" x2="114.21" y2="101.365" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C6D7"/><stop offset="1" stop-color="#F2F2F8"/></linearGradient><linearGradient id="l" x1="58.561" y1="78.246" x2="77.573" y2="100.538" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A8BD"/><stop offset="1" stop-color="#C4C6D7"/></linearGradient><filter id="a" x="15.465" y="4.227" width="74.718" height="87.761" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-7" dy="5"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.52 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1037_50782" result="shape"/></filter><filter id="i" x="55.968" y=".084" width="90.191" height="104.318" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="13" dy="1"/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1037_50782"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="5" dy="3"/><feGaussianBlur stdDeviation="7.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.768627 0 0 0 0 0.776471 0 0 0 0 0.843137 0 0 0 0.2 0"/><feBlend in2="effect1_dropShadow_1037_50782" result="effect2_dropShadow_1037_50782"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_1037_50782" result="shape"/></filter></defs></svg>
\ No newline at end of file
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index 61ce8f694..3f38b0dfb 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -69,14 +69,7 @@
             {/each}
             {#if $organizationList?.total < limit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
                 <EmptyGridItem on:click={() => (addOrganization = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new organization</p>
-                    </div>
+                    <p>Create a new organization</p>
                 </EmptyGridItem>
             {/if}
         </ul>
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 8e8921b34..f369322a6 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -107,14 +107,7 @@
             {/each}
             {#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
                 <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new project</p>
-                    </div>
+                    <p>Create a new project</p>
                 </EmptyGridItem>
             {/if}
         </ul>
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index a45485191..661b0b9ad 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -50,14 +50,7 @@
             {/each}
             {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
                 <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new database</p>
-                    </div>
+                    <p>Create a new database</p>
                 </EmptyGridItem>
             {/if}
         </div>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index 6c294fda6..995c8d9c2 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -64,14 +64,7 @@
             {/each}
             {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
                 <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new collection</p>
-                    </div>
+                    <p>Create a new collection</p>
                 </EmptyGridItem>
             {/if}
         </div>
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index dff6be811..7087a4ae4 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -83,14 +83,7 @@
             {/each}
             {#if $bucketList.total % 2 !== 0}
                 <EmptyGridItem on:click={() => (showCreate = true)}>
-                    <div class="common-section">
-                        <Button secondary round>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Add a new bucket</p>
-                    </div>
+                    <p>Add a new bucket</p>
                 </EmptyGridItem>
             {/if}
         </ul>

From e32837611270d08446fee93a3d13075aa6437f91 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 22 Sep 2022 16:04:36 +0200
Subject: [PATCH 2/3] feat: merge `empty` & `emptyGridItem` + update istances

---
 src/lib/components/empty.svelte               | 37 ++++++++++++++-----
 src/lib/components/emptyGridItem.svelte       | 16 --------
 src/lib/components/index.ts                   |  1 -
 .../console/account/activity/+page.svelte     |  2 +-
 .../account/organizations/+page.svelte        | 21 +++--------
 .../console/account/sessions/+page.svelte     |  2 +-
 .../organization-[organization]/+page.svelte  | 21 +++--------
 .../authentication/+page.svelte               | 32 ++++++----------
 .../authentication/teams/+page.svelte         | 10 +----
 .../teams/[team]/activity/+page.svelte        |  2 +-
 .../teams/[team]/members/+page.svelte         | 16 +-------
 .../user/[user]/activity/+page.svelte         |  2 +-
 .../user/[user]/memberships/+page.svelte      |  2 +-
 .../user/[user]/sessions/+page.svelte         |  2 +-
 .../project-[project]/databases/+page.svelte  | 22 +++--------
 .../database/[database]/+page.svelte          | 22 +++--------
 .../collection/[collection]/+page.svelte      | 16 +-------
 .../[collection]/attributes/+page.svelte      | 16 +-------
 .../[collection]/indexes/+page.svelte         | 32 ++--------------
 .../project-[project]/functions/+page.svelte  | 13 +++++--
 .../project-[project]/keys/+page.svelte       |  8 +++-
 .../project-[project]/storage/+page.svelte    | 24 +++---------
 .../storage/bucket/[bucket]/+page.svelte      | 16 +-------
 .../project-[project]/webhooks/+page.svelte   |  8 +++-
 24 files changed, 104 insertions(+), 239 deletions(-)
 delete mode 100644 src/lib/components/emptyGridItem.svelte

diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 4e2763563..01e0e7eb1 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -1,11 +1,30 @@
-<script>
-    export let dashed = false;
-    export let centered = false;
+<script lang="ts">
+    import { app } from '$lib/stores/app';
+    import EmptyLight from '$lib/images/empty-light.svg';
+    import EmptyDark from '$lib/images/empty-dark.svg';
+
+    export let isButton = false;
+    export let commonSection = false;
 </script>
 
-<article
-    class="card common-section u-flex u-flex-vertical"
-    class:is-border-dashed={dashed}
-    class:u-cross-center={centered}>
-    <slot />
-</article>
+{#if isButton}
+    <button
+        on:click
+        class="card u-grid u-cross-center u-width-full-line dashed"
+        class:common-section={commonSection}>
+        <div class="u-flex u-flex-vertical u-cross-center">
+            {#if $app.themeInUse === 'dark'}
+                <img src={EmptyDark} alt="create" aria-hidden="true" />
+            {:else}
+                <img src={EmptyLight} alt="create" aria-hidden="true" />
+            {/if}
+            <slot />
+        </div>
+    </button>
+{:else}
+    <article
+        class="card u-grid u-cross-center u-width-full-line"
+        class:common-section={commonSection}>
+        <slot />
+    </article>
+{/if}
diff --git a/src/lib/components/emptyGridItem.svelte b/src/lib/components/emptyGridItem.svelte
deleted file mode 100644
index ab0126619..000000000
--- a/src/lib/components/emptyGridItem.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { app } from '$lib/stores/app';
-    import EmptyLight from '$lib/images/empty-light.svg';
-    import EmptyDark from '$lib/images/empty-dark.svg';
-</script>
-
-<button on:click class="card is-border-dashed u-grid u-cross-center">
-    <div class="u-flex u-flex-vertical u-cross-center">
-        {#if $app.themeInUse === 'dark'}
-            <img src={EmptyDark} alt="create" aria-hidden="true" />
-        {:else}
-            <img src={EmptyLight} alt="create" aria-hidden="true" />
-        {/if}
-        <slot />
-    </div>
-</button>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index c45bd5cec..b6f4ffb8b 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -24,6 +24,5 @@ export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
-export { default as EmptyGridItem } from './emptyGridItem.svelte';
 export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
diff --git a/src/routes/console/account/activity/+page.svelte b/src/routes/console/account/activity/+page.svelte
index 54173f68f..909e94e22 100644
--- a/src/routes/console/account/activity/+page.svelte
+++ b/src/routes/console/account/activity/+page.svelte
@@ -86,7 +86,7 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty centered>
+        <Empty>
             <div class="u-flex u-flex-vertical u-cross-center">
                 <div class="common-section">
                     <p>No logs available</p>
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index 3f38b0dfb..19da34bba 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { GridItem1, EmptyGridItem, Empty, Pagination, AvatarGroup } from '$lib/components';
+    import { GridItem1, Empty, Pagination, AvatarGroup } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateOrganization from '../../_createOrganization.svelte';
@@ -68,9 +68,9 @@
                 {/if}
             {/each}
             {#if $organizationList?.total < limit + offset && ($organizationList?.total % 2 !== 0 || $organizationList?.total % 4 === 0)}
-                <EmptyGridItem on:click={() => (addOrganization = true)}>
+                <Empty isButton on:click={() => (addOrganization = true)}>
                     <p>Create a new organization</p>
-                </EmptyGridItem>
+                </Empty>
             {/if}
         </ul>
 
@@ -79,19 +79,8 @@
             <Pagination {limit} bind:offset sum={$organizationList?.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="grid-item-1">
-                <div class="u-flex u-flex-vertical u-cross-center ">
-                    <div class="common-section">
-                        <Button secondary round on:click={() => (addOrganization = true)}>
-                            <i class="icon-plus" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Create a new organization</p>
-                    </div>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (addOrganization = true)}>
+            <p>Create a new organization</p>
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$organizationList?.total}</p>
diff --git a/src/routes/console/account/sessions/+page.svelte b/src/routes/console/account/sessions/+page.svelte
index fa5906556..a0b90e1e5 100644
--- a/src/routes/console/account/sessions/+page.svelte
+++ b/src/routes/console/account/sessions/+page.svelte
@@ -103,7 +103,7 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty centered>
+        <Empty>
             <div class="u-flex u-flex-vertical u-cross-center">
                 <div class="common-section">
                     <p>No sessions available</p>
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index f369322a6..66310d89f 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { GridItem1, EmptyGridItem, Empty, Pagination } from '$lib/components';
+    import { GridItem1, Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -106,9 +106,9 @@
                 {/if}
             {/each}
             {#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
+                <Empty isButton on:click={() => (showCreate = true)}>
                     <p>Create a new project</p>
-                </EmptyGridItem>
+                </Empty>
             {/if}
         </ul>
 
@@ -117,19 +117,8 @@
             <Pagination {limit} bind:offset sum={projects.length} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="grid-item-1">
-                <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 a new project</p>
-                    </div>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <p>Create a new project</p>
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {projects?.length}</p>
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte
index 83e6162c1..d778d542f 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/+page.svelte
@@ -118,27 +118,17 @@
             <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div
-                    class="common-section"
-                    use:event={{
-                        name: 'console_users',
-                        action: 'click_create',
-                        parameters: {
-                            type: 'user'
-                        }
-                    }}>
-                    <Button secondary round on:click={() => (showCreate = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Add Your First User To Get Started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <div
+                class="common-section"
+                use:event={{
+                    name: 'console_users',
+                    action: 'click_create',
+                    parameters: {
+                        type: 'user'
+                    }
+                }}>
+                <p>Add Your First User To Get Started</p>
             </div>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte
index 6bed8c232..28a168c39 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte
@@ -97,7 +97,7 @@
             <Pagination {limit} bind:offset sum={$teamsList.total} />
         </div>
     {:else}
-        <Empty dashed centered>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
             <div
                 class="common-section"
                 use:event={{
@@ -107,16 +107,8 @@
                         type: 'team'
                     }
                 }}>
-                <Button secondary round on:click={() => (showCreate = true)}>
-                    <span class="icon-plus" aria-hidden="true" />
-                </Button>
-            </div>
-            <div class="common-section">
                 <p>Create your first team to get started</p>
             </div>
-            <div class="common-section">
-                <Button secondary href="#">Documentation</Button>
-            </div>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
index 15a0d0541..82d5dcf76 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
@@ -84,7 +84,7 @@
                 </TableBody>
             </Table>
         {:else}
-            <Empty centered>
+            <Empty>
                 <div class="u-flex u-flex-vertical u-cross-center">
                     <div class="common-section">
                         <p>No logs available</p>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
index a79059c3d..1de11a819 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
@@ -115,20 +115,8 @@
             <Pagination limit={$pageLimit} bind:offset sum={$memberships.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={() => (showCreate = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Add your first member to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button external secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <p>Add your first member to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
index 2bc84cf89..acf5c9ea1 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
@@ -84,7 +84,7 @@
                 </TableBody>
             </Table>
         {:else}
-            <Empty centered>
+            <Empty>
                 <div class="u-flex u-flex-vertical u-cross-center">
                     <div class="common-section">
                         <p>No logs available</p>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
index 67e9f5bf1..d779bafe8 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
@@ -78,7 +78,7 @@
                 </TableBody>
             </Table>
         {:else}
-            <Empty centered>
+            <Empty>
                 <div class="u-flex u-flex-vertical u-cross-center">
                     <div class="common-section">
                         <p>No memberships available</p>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
index 4e026535b..2dbf6ff33 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
@@ -91,7 +91,7 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty centered>
+        <Empty>
             <div class="u-flex u-flex-vertical u-cross-center">
                 <div class="common-section">
                     <p>No session available</p>
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index 661b0b9ad..ea3a36108 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     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 './_create.svelte';
@@ -49,9 +49,9 @@
                 </GridItem1>
             {/each}
             {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
+                <Empty isButton on:click={() => (showCreate = true)}>
                     <p>Create a new database</p>
-                </EmptyGridItem>
+                </Empty>
             {/if}
         </div>
 
@@ -60,20 +60,8 @@
             <Pagination {limit} bind:offset sum={$databaseList.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={() => (showCreate = true)}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first Database to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <p>Create your first Database to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index 995c8d9c2..57814316a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     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 './_create.svelte';
@@ -63,9 +63,9 @@
                 </GridItem1>
             {/each}
             {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
+                <Empty isButton on:click={() => (showCreate = true)}>
                     <p>Create a new collection</p>
-                </EmptyGridItem>
+                </Empty>
             {/if}
         </div>
 
@@ -90,20 +90,8 @@
             <Pagination {limit} bind:offset sum={$collections?.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={() => (showCreate = true)}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first collection to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <p>Create your first collection to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
index cc3fa7241..795a63170 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
@@ -81,20 +81,8 @@
             <Pagination {limit} bind:offset sum={$documentList.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}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Crate your first document to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={openWizard}>
+            <p>Crate your first document to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
index 406ffb0b5..65f028e5c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
@@ -115,20 +115,8 @@
             <Pagination {limit} bind:offset sum={$collection?.attributes?.length} />
         </div>
     {: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)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Crate your first attribute to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <p>Crate your first attribute to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
index 28660c810..5c1f3c9ea 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
@@ -157,36 +157,12 @@
             <Pagination {limit} bind:offset sum={$indexList?.total} />
         </div>
     {:else if $collection.indexes?.length}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreateIndex = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first attribute to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#?">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreateIndex = true)}>
+            <p>Create your first attribute to get started</p>
         </Empty>
     {:else}
-        <Empty dashed centered>
-            <div class="u-flex u-flex-vertical u-cross-center">
-                <div class="common-section">
-                    <Button secondary round on:click={() => (showCreateIndex = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Create your first index to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreateIndex = true)}>
+            <p>Create your first index to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte
index 623fcd87b..7d9cd3288 100644
--- a/src/routes/console/project-[project]/functions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/+page.svelte
@@ -40,13 +40,18 @@
             <Pagination {limit} bind:offset sum={response.total} />
         {:else if search}
             <Empty>
-                <svelte:fragment slot="header"
-                    >No results found for <b>{search}</b></svelte:fragment>
+                <div class="u-flex u-flex-vertical">
+                    No results found for <b>{search}</b>
+                </div>
             </Empty>
         {:else}
             <Empty>
-                <svelte:fragment slot="header">No Functions Found</svelte:fragment>
-                You haven't created any functions for your project yet.
+                <div class="u-flex u-flex-vertical">
+                    <div class="common-section">No Functions Found</div>
+                    <div class="common-section">
+                        You haven't created any functions for your project yet.
+                    </div>
+                </div>
             </Empty>
         {/if}
     {/await}
diff --git a/src/routes/console/project-[project]/keys/+page.svelte b/src/routes/console/project-[project]/keys/+page.svelte
index 7a35ca087..05f59eee2 100644
--- a/src/routes/console/project-[project]/keys/+page.svelte
+++ b/src/routes/console/project-[project]/keys/+page.svelte
@@ -48,8 +48,12 @@
             </Table>
         {:else}
             <Empty>
-                <svelte:fragment slot="header">No API Keys Found</svelte:fragment>
-                You haven't created any API keys for your project yet.
+                <div class="u-flex u-flex-vertical">
+                    <div class="common-section">No API Keys Found</div>
+                    <div class="common-section">
+                        You haven't created any API keys for your project yet.
+                    </div>
+                </div>
             </Empty>
         {/if}
         <Button on:click={() => (showCreate = true)}>Add API Key</Button>
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 7087a4ae4..22a11b2aa 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1, EmptyGridItem } 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 './_create.svelte';
@@ -82,9 +82,9 @@
                 </GridItem1>
             {/each}
             {#if $bucketList.total % 2 !== 0}
-                <EmptyGridItem on:click={() => (showCreate = true)}>
+                <Empty isButton on:click={() => (showCreate = true)}>
                     <p>Add a new bucket</p>
-                </EmptyGridItem>
+                </Empty>
             {/if}
         </ul>
 
@@ -109,22 +109,8 @@
             <Pagination limit={$pageLimit} bind:offset sum={$bucketList?.total} />
         </div>
     {:else}
-        <Empty dashed centered>
-            <div class="grid-item-1">
-                <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>Add your first bucket to get started</p>
-                    </div>
-                    <div class="common-section">
-                        <Button secondary href="#">Documentation</Button>
-                    </div>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <p>Add your first bucket to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
index ba201bce0..4215c4674 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
@@ -195,20 +195,8 @@
             <Pagination limit={$pageLimit} bind:offset sum={$files?.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={() => (showCreate = true)}>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <p>Upload some files to get started</p>
-                </div>
-                <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
-                </div>
-            </div>
+        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+            <p>Upload some files to get started</p>
         </Empty>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/webhooks/+page.svelte b/src/routes/console/project-[project]/webhooks/+page.svelte
index 66f1242d7..cf6d0ecfa 100644
--- a/src/routes/console/project-[project]/webhooks/+page.svelte
+++ b/src/routes/console/project-[project]/webhooks/+page.svelte
@@ -46,8 +46,12 @@
             </Table>
         {:else}
             <Empty>
-                <svelte:fragment slot="header">No Webhooks Found</svelte:fragment>
-                You haven't created any webhooks for your project yet.
+                <div class="u-flex u-flex-vertical">
+                    <div class="common-section">No Webhooks Found</div>
+                    <div class="common-section">
+                        You haven't created any webhooks for your project yet.
+                    </div>
+                </div>
             </Empty>
         {/if}
     {/await}

From adb2af00ee91904cb806cde631e9226863c00739 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 28 Sep 2022 13:38:39 +0200
Subject: [PATCH 3/3] renamed `commonSection` var to `single`

---
 src/lib/components/empty.svelte                           | 8 +++-----
 src/routes/console/account/organizations/+page.svelte     | 2 +-
 .../console/organization-[organization]/+page.svelte      | 2 +-
 .../console/project-[project]/authentication/+page.svelte | 2 +-
 .../project-[project]/authentication/teams/+page.svelte   | 2 +-
 .../authentication/teams/[team]/members/+page.svelte      | 2 +-
 .../console/project-[project]/databases/+page.svelte      | 2 +-
 .../databases/database/[database]/+page.svelte            | 2 +-
 .../[database]/collection/[collection]/+page.svelte       | 2 +-
 .../collection/[collection]/attributes/+page.svelte       | 2 +-
 .../collection/[collection]/indexes/+page.svelte          | 4 ++--
 src/routes/console/project-[project]/storage/+page.svelte | 2 +-
 .../storage/bucket/[bucket]/+page.svelte                  | 2 +-
 13 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 01e0e7eb1..f15300212 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -4,14 +4,14 @@
     import EmptyDark from '$lib/images/empty-dark.svg';
 
     export let isButton = false;
-    export let commonSection = false;
+    export let single = false;
 </script>
 
 {#if isButton}
     <button
         on:click
         class="card u-grid u-cross-center u-width-full-line dashed"
-        class:common-section={commonSection}>
+        class:common-section={single}>
         <div class="u-flex u-flex-vertical u-cross-center">
             {#if $app.themeInUse === 'dark'}
                 <img src={EmptyDark} alt="create" aria-hidden="true" />
@@ -22,9 +22,7 @@
         </div>
     </button>
 {:else}
-    <article
-        class="card u-grid u-cross-center u-width-full-line"
-        class:common-section={commonSection}>
+    <article class="card u-grid u-cross-center u-width-full-line" class:common-section={single}>
         <slot />
     </article>
 {/if}
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index 19da34bba..2635cd0c6 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -79,7 +79,7 @@
             <Pagination {limit} bind:offset sum={$organizationList?.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (addOrganization = true)}>
+        <Empty isButton single on:click={() => (addOrganization = true)}>
             <p>Create a new organization</p>
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 66310d89f..541f239fe 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -117,7 +117,7 @@
             <Pagination {limit} bind:offset sum={projects.length} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Create a new project</p>
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte
index d778d542f..58c6089bc 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/+page.svelte
@@ -118,7 +118,7 @@
             <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <div
                 class="common-section"
                 use:event={{
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte
index 28a168c39..50f5e61a0 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte
@@ -97,7 +97,7 @@
             <Pagination {limit} bind:offset sum={$teamsList.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <div
                 class="common-section"
                 use:event={{
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
index 1de11a819..99c50ddc2 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
@@ -115,7 +115,7 @@
             <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Add your first member to get started</p>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index ea3a36108..ec24fe429 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -60,7 +60,7 @@
             <Pagination {limit} bind:offset sum={$databaseList.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Create your first Database to get started</p>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index 57814316a..66995db00 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -90,7 +90,7 @@
             <Pagination {limit} bind:offset sum={$collections?.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Create your first collection to get started</p>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
index 795a63170..a2369f16a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
@@ -81,7 +81,7 @@
             <Pagination {limit} bind:offset sum={$documentList.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={openWizard}>
+        <Empty isButton single on:click={openWizard}>
             <p>Crate your first document to get started</p>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
index 65f028e5c..e99c9e8b8 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
@@ -115,7 +115,7 @@
             <Pagination {limit} bind:offset sum={$collection?.attributes?.length} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Crate your first attribute to get started</p>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
index 5c1f3c9ea..33a3bf604 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
@@ -157,11 +157,11 @@
             <Pagination {limit} bind:offset sum={$indexList?.total} />
         </div>
     {:else if $collection.indexes?.length}
-        <Empty isButton commonSection on:click={() => (showCreateIndex = true)}>
+        <Empty isButton single on:click={() => (showCreateIndex = true)}>
             <p>Create your first attribute to get started</p>
         </Empty>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreateIndex = true)}>
+        <Empty isButton single on:click={() => (showCreateIndex = true)}>
             <p>Create your first index to get started</p>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 22a11b2aa..18457d01b 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -109,7 +109,7 @@
             <Pagination limit={$pageLimit} bind:offset sum={$bucketList?.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Add your first bucket to get started</p>
         </Empty>
     {/if}
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
index 4215c4674..4a3cff400 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
@@ -195,7 +195,7 @@
             <Pagination limit={$pageLimit} bind:offset sum={$files?.total} />
         </div>
     {:else}
-        <Empty isButton commonSection on:click={() => (showCreate = true)}>
+        <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Upload some files to get started</p>
         </Empty>
     {/if}