From e8e6a425dd4a055e98d26513d7e9c130793920c3 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 16 Feb 2023 10:28:52 -0900
Subject: [PATCH] fix: button display on light mode (#293)

---
 frontend/pages/index.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index a7846e2..46fee87 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -212,14 +212,22 @@
             </form>
           </Transition>
           <div class="text-center mt-6">
-            <button
+            <BaseButton
               v-if="status && status.allowRegistration"
-              class="btn text-base-content text-lg hover:bg-primary hover:text-primary-content transition-colors duration-200"
+              class="btn-primary btn-wide"
               @click="() => toggleLogin()"
             >
+              <template #icon>
+                <Icon v-if="!registerForm" name="mdi-account-plus-outline" class="w-5 h-5 swap-off" />
+                <Icon v-else name="mdi-login" class="w-5 h-5 swap-off" />
+                <Icon name="mdi-arrow-right" class="w-5 h-5 swap-on" />
+              </template>
               {{ registerForm ? "Login" : "Register" }}
-            </button>
-            <p v-else class="text-base-content italic text-sm">Registration Disabled</p>
+            </BaseButton>
+            <p v-else class="text-base-content italic text-sm inline-flex items-center gap-2">
+              <Icon name="mdi-lock" class="w-4 h-4 inline-block" />
+              Registration Disabled
+            </p>
           </div>
         </div>
       </div>