Fix the login page

Author: AchoArnold

web/app/components/FirebaseAuth.vue

@@ -111,22 +111,25 @@ function handleError(error: unknown) {
   <div class="text-center">
     <v-btn
       block
+      color="white"
       size="large"
-      variant="outlined"
       class="mb-3"
       :loading="loading"
+      :disabled="loading"
       @click="signInWithGoogle"
     >
-      <v-icon :icon="mdiGoogle" class="mr-2" />
+      <v-icon  color="red" :icon="mdiGoogle" class="mr-2" />
       Continue with Google
     </v-btn>
 
     <v-btn
       block
       size="large"
-      variant="outlined"
+      variant="flat"
+      color="black"
       class="mb-3"
       :loading="loading"
+      :disabled="loading"
       @click="signInWithGithub"
     >
       <v-icon :icon="mdiGithub" class="mr-2" />
@@ -137,12 +140,14 @@ function handleError(error: unknown) {
       v-if="!showEmailForm"
       block
       size="large"
-      variant="outlined"
+      variant="flat"
+      color="red"
       class="mb-3"
+      :disabled="loading"
       @click="showEmailForm = true"
     >
       <v-icon :icon="mdiEmail" class="mr-2" />
-      Continue with Email
+      Continue with email
     </v-btn>
 
     <v-form v-if="showEmailForm" class="mt-4" @submit.prevent="submitEmail">
@@ -190,12 +195,17 @@ function handleError(error: unknown) {
     </v-form>
 
     <p class="text-body-small text-medium-emphasis mt-4">
-      By continuing, you agree to the
-      <a :href="appStore.appData.url + '/terms-and-conditions'">
-        Terms & Conditions
+      By continuing, you are indicating that you accept our
+      <a
+        :href="appStore.appData.url + '/terms-and-conditions'"
+        class="text-decoration-none"
+      >
+        Terms of Service
       </a>
       and
-      <a :href="appStore.appData.url + '/privacy-policy'">Privacy Policy</a>
+      <a :href="appStore.appData.url + '/privacy-policy'" class="text-decoration-none">
+        Privacy Policy.</a
+      >
     </p>
   </div>
 </template>

web/app/components/Toast.vue

@@ -13,6 +13,7 @@ const notificationActive = computed({
 
 <template>
   <v-snackbar
+      variant="tonal"
     v-model="notificationActive"
     :color="notificationsStore.notification.type"
     :timeout="notificationsStore.notification.timeout"

web/app/pages/login.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { mdiArrowLeft } from "@mdi/js";
-
 definePageMeta({
   middleware: ["guest"],
   layout: "blank",
 });
 
 useHead({
-  title: "Login To Your Account - HTTP SMS",
+  title: "Login To Your Account - httpSMS",
 });
 
 const route = useRoute();
@@ -19,18 +17,18 @@ const to = computed(() => (route.query.to as string) || "/threads");
     <VRow align="center" justify="center">
       <VCol cols="12" md="4" xl="3" class="mt-n16">
         <div class="text-center mb-5">
-          <VAvatar size="45" class="mt-n8 mr-4">
+          <VAvatar color="#121212" size="45" rounded="0" class="mt-n8 mr-4">
             <VImg :src="'/img/logo.svg'" />
           </VAvatar>
           <span class="text-display-small">Welcome</span>
         </div>
-        <p class="text-title-large text-center text-medium-emphasis mt-1 mb-4">
+        <p class="text-body-large text-center text-medium-emphasis mt-1 mb-4">
           Join <b>23,273+</b> users who send/receive more than
           <br />
           <b>500,000</b> messages per month
         </p>
-        <VCard max-width="360" class="mx-auto">
-          <VCardText class="px-0">
+        <VCard max-width="500" class="mx-auto pa-4">
+          <VCardText class="px-4 pt-2 pb-0">
             <ClientOnly>
               <FirebaseAuth :to="to" />
             </ClientOnly>