making the sign in page simple

web/src/pages/SignInPage.vue

@@ -12,24 +12,24 @@
             class="px-8"
             style="max-width: 500px"
           >
-            <img
+            <!-- <img
               class="d-inline-block d-lg-none"
               src="@/assets/app_logo_small.png"
               style="height: 66px; transform: rotate(-12deg)"
-            />
+            /> -->
             <h2
               class="text-h1 textPrimary font-weight-semibold mb-0"
               style="font-size: 2.5rem !important"
             >
-              CALEBBURKEDEV
+              {{ APPLICATION_NAME }}
             </h2>
             <h6 class="text-h6 text-medium-emphasis d-flex align-center mt-6 font-weight-medium">
               <v-btn
                 block
                 color="primary"
+                text="Sign in"
                 @click="doLogin"
-                >Sign in</v-btn
+              />
-              >
             </h6>
 
             <!--
@@ -59,7 +59,7 @@
           </div>
         </div>
       </v-col>
-      <v-col
+      <!-- <v-col
         cols="12"
         lg="7"
         xl="8"
@@ -72,7 +72,7 @@
             style="opacity: 0.15; width: 80%"
           />
         </div>
-      </v-col>
+      </v-col> -->
     </v-row>
   </div>
 </template>
@@ -81,6 +81,7 @@
 import { onMounted } from "vue"
 import { useAuth0 } from "@auth0/auth0-vue"
 
+import { APPLICATION_NAME } from "@/config"
 import useCurrentUser from "@/use/use-current-user"
 
 const { reset: resetCurrentUser } = useCurrentUser()

web/src/scss/pages/_authentication.scss

@@ -8,7 +8,8 @@
     left: 0;
     top: 0;
     bottom: 0;
-        background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% / 400% 400%;
+    background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% /
+      400% 400%;
   }
 
   @media screen and (max-width: 1280px) {
@@ -19,7 +20,7 @@
 }
 .mw-450 {
   max-width: 450px;
-    width: 100%;;
+  width: 100%;
 }
 .auth-header {
   position: absolute;
@@ -44,8 +45,7 @@
     transform: translateY(50%);
     left: 0;
   }
-    &::after
+  &::after {
-    {
     position: absolute;
     width: 100%;
     border-top: thin solid rgb(var(--v-theme-borderColor));
@@ -67,7 +67,6 @@
       max-width: 33.33%;
     }
   }
-   
 }
 @media screen and (max-width: 1280px) {
   .mh-100 {
@@ -83,7 +82,8 @@
 }
 
 .auth {
-    .v-switch .v-label, .v-checkbox .v-label {
+  .v-switch .v-label,
+  .v-checkbox .v-label {
     opacity: 0.7;
     font-weight: 400 !important;
   }