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

@@ -1,5 +1,5 @@
-.authentication{
+.authentication {
-    &::before{
+  &::before {
     content: "";
     position: absolute;
     height: 100%;
@@ -8,34 +8,35 @@
     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){
+  @media screen and (max-width: 1280px) {
-        .auth-header{
+    .auth-header {
       position: unset;
     }
   }
 }
-.mw-450{
+.mw-450 {
   max-width: 450px;
-    width: 100%;;
+  width: 100%;
 }
-.auth-header{
+.auth-header {
   position: absolute;
   top: 0;
   left: 0;
 }
-.verification{
+.verification {
-    .v-field__input{
+  .v-field__input {
     text-align: center;
   }
 }
-.auth-divider{
+.auth-divider {
-    span{
+  span {
     z-index: 1;
   }
-    &::before{
+  &::before {
     position: absolute;
     width: 100%;
     border-top: thin solid rgb(var(--v-theme-borderColor));
@@ -44,8 +45,7 @@
     transform: translateY(50%);
     left: 0;
   }
-    &::after
+  &::after {
-    {
     position: absolute;
     width: 100%;
     border-top: thin solid rgb(var(--v-theme-borderColor));
@@ -56,34 +56,34 @@
   }
 }
 
-@media (min-width: 1536px){
+@media (min-width: 1536px) {
-    .auth{
+  .auth {
-        .v-col-lg-7{
+    .v-col-lg-7 {
       flex: 0 0 66.66%;
       max-width: 66.66%;
     }
-        .v-col-lg-5{
+    .v-col-lg-5 {
       flex: 0 0 33.33%;
       max-width: 33.33%;
     }
   }
-   
 }
-@media screen and (max-width:1280px){
+@media screen and (max-width: 1280px) {
-    .mh-100{
+  .mh-100 {
     height: 100% !important;
   }
 }
 
-@media screen and (max-width:600px){
+@media screen and (max-width: 600px) {
-    .mw-100{
+  .mw-100 {
     width: 100%;
     padding: 0 15px;
   }
 }
 
-.auth{
+.auth {
-    .v-switch .v-label, .v-checkbox .v-label {
+  .v-switch .v-label,
+  .v-checkbox .v-label {
     opacity: 0.7;
     font-weight: 400 !important;
   }