fix: Improve log-in page UI

app/src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="bg-background-primary h-screen">
     <!--header-->
-    <div id="header" class="bg-background-secondary content-center h-[6vh] p-1">
+    <!-- <div id="header" class="bg-background-secondary content-center h-[6vh] p-1">
       <HeaderPart />
-    </div>
+    </div> -->
     <!-- route outlet -->
     <!-- component matched by the route will render here -->
     <router-view></router-view>

app/src/components/AuthForm.vue

@@ -88,54 +88,70 @@ const handleChange = () => {
   <div
     class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
-    <h1 class="text-text-primary text-3xl font-black mb-8">{{ title }}</h1>
+    <h1 class="text-text-primary text-3xl font-black mb-2">{{ title }}</h1>
     <form @submit.prevent="handleSubmit()" class="w-full">
+      <div v-if="socialLogin && hasSocialLogins">
+        <a
+          v-if="availableMethods.google"
+          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-background-primary text-text-secondary w-full border-text-secondary border-2"
+          href="/api/v1/auth/google"
+        >
+          <font-awesome-icon
+            :icon="['fab', 'google']"
+            class="text-text-secondary px-3 text-lg"
+          />
+          <span class="font-medium">Continue with Google</span>
+        </a>
+        <a
+          v-if="availableMethods.github"
+          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-background-primary text-text-secondary w-full border-text-secondary border-2"
+          href="/api/v1/auth/github"
+        >
+          <font-awesome-icon
+            :icon="['fab', 'github']"
+            class="text-text-secondary px-3 text-lg"
+          />
+          <span class="font-medium">Continue with GitHub</span>
+        </a>
+      </div>
+      <p class="text-text-secondary flex justify-center mt-3">or</p>
       <div class="mb-6">
-        <label for="username" class="text-sm font-semibold text-text">{{
-          type === 'login' ? 'Email / Username' : 'Username'
-        }}</label
-        ><input
+        <input
           type="text"
           id="username"
           ref="usernameInput"
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
-          :placeholder="
-            type === 'login'
-              ? 'Enter your email or username'
-              : 'Enter your username'
-          "
+          :placeholder="type === 'login' ? 'Email / Username' : 'Username'"
           v-model="username"
           @input="handleChange()"
           autocomplete="username"
         />
         <label
-          class="text-sm font-semibold text-text-secondary"
+          class="text-sm font-normal text-text-secondary"
           v-if="type === 'username' || type === 'register'"
-          >Username should start with lowercase and consist of lowercase,
-          numbers, '_' and '-'
+        >
+          <p>Username must begin with lowercase letter</p>
+          <p>Username can consist of lowercase, numbers, "_", and "-"</p>
         </label>
       </div>
       <div class="mb-6" v-if="type === 'register'">
-        <label for="email" class="text-sm font-semibold text-text">Email</label
-        ><input
+        <input
           type="email"
           id="email"
           ref="emailInput"
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
-          placeholder="Enter your email"
+          placeholder="Email"
           v-model="email"
           @input="handleChange()"
           autocomplete="email"
         />
       </div>
       <div class="mb-6" v-if="type === 'login' || type === 'register'">
-        <label for="password" class="text-sm font-semibold leading-6 text-text"
-          >Password</label
-        ><input
+        <input
           type="password"
           id="password"
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
-          placeholder="Enter your password"
+          placeholder="Password"
           v-model="password"
           @input="handleChange()"
         />
@@ -144,48 +160,27 @@ const handleChange = () => {
         {{ errorMessage }}
       </p>
       <button
-        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
+        class="inline-flex justify-center rounded-lg font-black py-2 bg-text-primary text-background w-full"
         type="submit"
       >
-        <span v-if="type === 'login'">Log in</span>
-        <span v-else>Register</span>
+        <span v-if="type === 'login'">Log In</span>
+        <span v-else>Sign Up</span>
       </button>
 
       <p class="text-text flex justify-center mt-3">
         <span v-if="type === 'register'"
           >Already have an account?
-          <RouterLink class="text-text-primary" to="/login"
-            >Log in</RouterLink
-          ></span
+          <RouterLink class="text-text-primary font-bold" to="/login">
+            <u>Log in</u>
+          </RouterLink></span
         >
         <span v-else-if="type === 'login'"
           >Don't have an account?
-          <RouterLink class="text-text-primary" to="/register"
-            >Register</RouterLink
-          ></span
+          <RouterLink class="text-text-primary font-bold" to="/register">
+            <u>Sign up</u>
+          </RouterLink></span
         >
       </p>
-
-      <div v-if="socialLogin && hasSocialLogins">
-        <hr class="my-8" />
-        <p class="flex justify-center font-semibold text-text text-base">
-          Log in with social account
-        </p>
-        <a
-          v-if="availableMethods.google"
-          class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-icon-google text-text w-full"
-          href="/api/v1/auth/google"
-        >
-          <span>Google</span>
-        </a>
-        <a
-          v-if="availableMethods.github"
-          class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-icon-github text-text w-full"
-          href="/api/v1/auth/github"
-        >
-          <span>GitHub</span>
-        </a>
-      </div>
     </form>
   </div>
 </template>

app/src/library.js

@@ -14,12 +14,12 @@ import {
   faArrowRightFromBracket,
   faArrowRight,
 } from '@fortawesome/free-solid-svg-icons'
-
 import {
   faLightbulb,
   faCircleQuestion,
   faCircleRight,
 } from '@fortawesome/free-regular-svg-icons'
+import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
 
 /* add icons to the library */
 library.add(
@@ -35,5 +35,7 @@ library.add(
   faCircleRight,
   faTerminal,
   faArrowRightFromBracket,
-  faArrowRight
+  faArrowRight,
+  faGithub,
+  faGoogle
 )

app/src/views/LoginPage.vue

@@ -20,7 +20,7 @@ const handleLogin = async ({ username, password, success, error }) => {
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="h-2/3 w-1/3">
+      <div class="w-1/3">
         <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
     </div>

app/src/views/RegisterPage.vue

@@ -63,7 +63,7 @@ async function check({ username, email, error }) {
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="h-2/3 w-1/3">
+      <div class="w-1/3">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"

app/tailwind.config.js

@@ -22,10 +22,6 @@ export default {
         border: {
           DEFAULT: '#526B4E',
         },
-        icon: {
-          google: '#DB4437',
-          github: '#171515',
-        },
       },
     },
   },

yarn.lock

@@ -5899,6 +5899,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.1.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"