From 9642100d8cf5760480d29831342b8a4fb19ed3bb Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Thu, 28 Jul 2022 15:13:27 +0200
Subject: [PATCH] feat: set up start page layout

---
 client/src/assets/css/colors.scss  |  4 ++--
 client/src/components/LoginBox.vue | 23 +++++++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index 48164f2..a740b96 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -22,9 +22,9 @@ $button-background-color: #00a0e0;
 $button-text-color: #304048;
 $button-border: 4px solid #007098;
 
-$button-hover-background-color: $button-background-color;
+$button-hover-background-color: #00c0ff;
 $button-hover-text-color: #ffffff;
-$button-hover-border: $button-border;
+$button-hover-border: 4px solid #00a0c0;
 
 $button-disabled-background-color: #006080;
 $button-disabled-text-color: #102028;
diff --git a/client/src/components/LoginBox.vue b/client/src/components/LoginBox.vue
index eff22eb..69a13be 100644
--- a/client/src/components/LoginBox.vue
+++ b/client/src/components/LoginBox.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="login-box__container-outer">
-  <form class="login-box__container-inner" @submit.prevent="login">
-    <input v-model="authCode" v-focus class="login-box__authinput" type="text" size="6" maxlength="6"
-      placeholder="Code" />
-    <Button type="submit">Go!</Button>
-    <div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
-  </form>
-</div>
+  <div class="login-box__container-outer">
+    <form class="login-box__container-inner" @submit.prevent="login">
+      <input v-model="authCode" v-focus class="login-box__authinput" type="text" size="6" maxlength="6"
+        placeholder="Code" />
+      <Button type="submit">Go!</Button>
+      <div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
+    </form>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -16,14 +16,12 @@ import { watch, ref, Ref } from 'vue'
 const authCode: Ref<string> = ref('')
 const errorMessage: Ref<string> = ref('')
 
-const vFocus = {
-  mounted: (el: HTMLElement) => el.focus()
-}
+const vFocus = { mounted: (el: HTMLElement) => el.focus() }
 
 const login = (): void => {
   errorMessage.value = ''
 
-  const { data, pending, error } = useFetch(`/api/login?code=${authCode.value}`)
+  const { data, pending } = useFetch(`/api/login?code=${authCode.value}`)
 
   watch(pending, (newVal) => {
     if (!newVal && data.value === 'ok') {
@@ -44,6 +42,7 @@ const login = (): void => {
     display: flex;
     width: 240px;
   }
+
   &__container-inner {
     margin: 0 0 0 auto;
   }