Style user authentication component

src/components/UserAuthentication.vue

 <template>
   <div>
-    <button v-show="!loggingIn" @click="loggingIn = true">Authenticate</button>
+    <button
+      v-show="!loggingIn"
+      @click="loggingIn = true"
+      class="
+        hover:text-gray-600
+        focus:outline-none
+        text-gray-800
+        font-sans font-semibold
+        p-2
+      "
+    >
+      Authenticate
+    </button>
+    <div>
       <input
         v-show="loggingIn"
         type="text"
         placeholder="Secret token"
         v-model="secret"
         @keyup.enter="authenticate(secret.trim())"
+        class="
+          border border-transparent
+          rounded
+          m-4
+          p-1
+          shadow-inner
+          bg-gray-200
+          focus:ring-2 focus:ring-gray-400
+        "
       />
-    <button v-show="loggingIn" @click="authenticate(secret.trim())">
-      Authenticate
+      <span>
+        <button v-if="loggingIn" @click="authenticate(secret.trim())">
+          <Checkmark width="30" height="30" class="login-button"></Checkmark>
+        </button>
+        <button v-show="loggingIn" @click="loggingIn = false">
+          <XCircle width="30" height="30" class="login-button"></XCircle>
         </button>
-    <button v-show="loggingIn" @click="loggingIn = false">Back</button>
+      </span>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
+import Checkmark from "@/components/icons/IconCheckmark.vue";
+import XCircle from "@/components/icons/IconXCircle.vue";
 export default {
+  components: {
+    Checkmark,
+    XCircle,
+  },
   data: function () {
     return {
       loggingIn: false,
@@ -50,3 +83,9 @@ export default {
   },
 };
 </script>
+
+<style lang="postcss" scoped>
+.login-button {
+  @apply stroke-current text-gray-600 hover:text-gray-800 inline-block ml-2;
+}
+</style>
\ No newline at end of file

src/components/icons/IconCheckmark.vue

+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#000000"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: Number,
+      default: 24,
+    },
+    height: {
+      type: Number,
+      default: 24,
+    },
+  },
+};
+</script>
\ No newline at end of file

src/components/icons/IconXCircle.vue

+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#000000"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="15" y1="9" x2="9" y2="15"></line>
+    <line x1="9" y1="9" x2="15" y2="15"></line>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: 24,
+    },
+    height: {
+      type: String,
+      default: 24,
+    },
+  },
+};
+</script>
\ No newline at end of file

src/views/Home.vue

@@ -4,8 +4,7 @@
       <div>
         <TagCreation></TagCreation>
         <ImageUpload @image-submitted="updateHashArray"></ImageUpload>
-        <!-- <router-link id="user-settings" to="/user">User settings</router-link> -->
-        <UserAuthentication id="auth"></UserAuthentication>
+        <UserAuthentication class="absolute bottom-0"></UserAuthentication>
       </div>
     </section>
     <ImageList :hashArray="stateHashArray"></ImageList>
@@ -53,14 +52,10 @@ export default {
   position: sticky;
   top: 0;
   height: 100vh;
-  width: 25%;
+  /* width: 25%; */
 }
 #home-container {
   display: flex;
   flex-flow: row;
 }
-#auth {
-  position: absolute;
-  bottom: 0;
-}
 </style>
\ No newline at end of file