From ba60a38d2d25f6f172a42db6692e09ec2c65b4ad Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 15 Jun 2024 14:04:17 -1000
Subject: [PATCH] fix: :bug: Fix registration button missing on mobile, improve
 spacing

---
 components/sidebars/account-picker.vue | 14 ++++++++++++++
 components/sidebars/navigation.vue     |  4 ++--
 pages/oauth/authorize.vue              |  2 +-
 pages/register/index.vue               |  4 ++--
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/sidebars/account-picker.vue b/components/sidebars/account-picker.vue
index 06764f2..7c45b25 100644
--- a/components/sidebars/account-picker.vue
+++ b/components/sidebars/account-picker.vue
@@ -74,6 +74,20 @@
                         </div>
                     </button>
                 </Menu.Item>
+                <Menu.Item value="" v-if="!currentIdentity">
+                    <NuxtLink href="/register" class="w-full">
+                        <div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
+                            <div
+                                class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
+                                <iconify-icon icon="tabler:certificate" class="size-6 text-gray-200" width="none" />
+                            </div>
+                            <div
+                                class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
+                                Create new account
+                            </div>
+                        </div>
+                    </NuxtLink>
+                </Menu.Item>
             </div>
         </template>
     </DropdownsAdaptiveDropdown>
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 8d751c2..3f8470d 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -57,7 +57,7 @@
     </aside>
     <!-- Mobile bottom navbar -->
     <nav
-        class="fixed bottom-0 left-0 right-0 z-20 md:hidden grid grid-cols-4 gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200">
+        :class="['fixed bottom-0 left-0 right-0 z-20 md:hidden grid gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
 
         <DropdownsAdaptiveDropdown>
             <template #button>
@@ -206,7 +206,7 @@ const signOut = async (id?: string) => {
             identityToRevoke.tokens.access_token,
             identityToRevoke.tokens.access_token,
         )
-        .catch(() => { });
+        .catch(() => {});
 
     if (id === identity.value.id) {
         identity.value = null;
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index fb73e7e..ba3f79c 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex min-h-screen relative flex-col justify-center py-12 px-8">
+    <div class="flex min-h-screen relative flex-col justify-center py-12 sm:px-8">
         <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
             class="mx-auto h-24 hidden md:block mb-10" />
         <div v-if="validUrlParameters"
diff --git a/pages/register/index.vue b/pages/register/index.vue
index b7d351e..af4906a 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -2,7 +2,7 @@
     <div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
         <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
             class="mx-auto h-24 hidden md:block" />
-        <div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md">
+        <div v-if="true" class="mx-auto w-full max-w-md">
             <div v-if="Object.keys(errors).length > 0"
                 class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
                 <h2 class="font-bold text-lg">Error</h2>
@@ -69,7 +69,7 @@
                 </VeeField>
 
                 <ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
-            "Register" }}</ButtonsPrimary>
+                    "Register" }}</ButtonsPrimary>
             </VeeForm>
         </div>
         <div v-else>