From 8a587488922972d8bb4e4bf1bb9e9e2bf8dbe511 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 15 Feb 2023 12:19:04 +0100
Subject: [PATCH] fix: positioning

---
 src/lib/admin.svelte | 112 +++++++++++++++++++++++++------------------
 1 file changed, 65 insertions(+), 47 deletions(-)

diff --git a/src/lib/admin.svelte b/src/lib/admin.svelte
index 3f642ecac..5c2d186f5 100644
--- a/src/lib/admin.svelte
+++ b/src/lib/admin.svelte
@@ -8,58 +8,76 @@
 </script>
 
 <div class="admin">
-    <div class="box u-flex u-gap-24 u-flex-vertical" class:u-hide={show}>
-        <h1 class="heading-level-6">Admin</h1>
-        <div>
-            <p>Mode:</p>
-            <SecondaryTabs>
-                <SecondaryTabsItem
-                    disabled={$modeOverwrite === 'self-hosted'}
-                    on:click={() => modeOverwrite.set('self-hosted')}>
-                    Self
-                </SecondaryTabsItem>
-                <SecondaryTabsItem
-                    disabled={$modeOverwrite === 'cloud'}
-                    on:click={() => modeOverwrite.set('cloud')}>
-                    Cloud
-                </SecondaryTabsItem>
-            </SecondaryTabs>
+    {#if show}
+        <div class="box u-flex u-gap-24 u-flex-vertical">
+            <div class="u-flex u-cross-center">
+                <h1 class="heading-level-6">Admin Panel</h1>
+
+                <button
+                    type="button"
+                    class="button is-text is-only-icon u-margin-inline-start-auto"
+                    style="--button-size:1.5rem;"
+                    aria-label="Close Admin"
+                    title="Close Admin"
+                    on:click={() => (show = false)}>
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            </div>
+            <div>
+                <p>Mode:</p>
+                <SecondaryTabs>
+                    <SecondaryTabsItem
+                        disabled={$modeOverwrite === 'self-hosted'}
+                        on:click={() => modeOverwrite.set('self-hosted')}>
+                        Self
+                    </SecondaryTabsItem>
+                    <SecondaryTabsItem
+                        disabled={$modeOverwrite === 'cloud'}
+                        on:click={() => modeOverwrite.set('cloud')}>
+                        Cloud
+                    </SecondaryTabsItem>
+                </SecondaryTabs>
+            </div>
+            <div>
+                <p>Tier:</p>
+                <SecondaryTabs>
+                    <SecondaryTabsItem
+                        disabled={$modeTier === 'base'}
+                        on:click={() => modeTier.set('base')}>
+                        Base
+                    </SecondaryTabsItem>
+                    <SecondaryTabsItem
+                        disabled={$modeTier === 'premium'}
+                        on:click={() => modeTier.set('premium')}>
+                        Premium
+                    </SecondaryTabsItem>
+                    <SecondaryTabsItem
+                        disabled={$modeTier === 'enterprise'}
+                        on:click={() => modeTier.set('enterprise')}>
+                        Enterprise
+                    </SecondaryTabsItem>
+                </SecondaryTabs>
+            </div>
+            <Button
+                secondary
+                on:click={() => {
+                    $feedback.type === 'general'
+                        ? feedback.switchType('nps')
+                        : feedback.switchType('general');
+                }}>Switch Feedback</Button>
         </div>
-        <div>
-            <p>Tier:</p>
-            <SecondaryTabs>
-                <SecondaryTabsItem
-                    disabled={$modeTier === 'base'}
-                    on:click={() => modeTier.set('base')}>
-                    Base
-                </SecondaryTabsItem>
-                <SecondaryTabsItem
-                    disabled={$modeTier === 'premium'}
-                    on:click={() => modeTier.set('premium')}>
-                    Premium
-                </SecondaryTabsItem>
-                <SecondaryTabsItem
-                    disabled={$modeTier === 'enterprise'}
-                    on:click={() => modeTier.set('enterprise')}>
-                    Enterprise
-                </SecondaryTabsItem>
-            </SecondaryTabs>
-        </div>
-        <Button
-            secondary
-            on:click={() => {
-                $feedback.type === 'general'
-                    ? feedback.switchType('nps')
-                    : feedback.switchType('general');
-            }}>Switch Feedback</Button>
-    </div>
+    {:else}
+        <Button round text secondary on:click={() => (show = true)}>
+            <span class="icon-academic-cap" />
+        </Button>
+    {/if}
 </div>
 
 <style lang="scss">
     .admin {
         position: fixed;
-        inset: 50% 100%;
-        min-width: 20rem;
-        transform: translate(-100%);
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
     }
 </style>