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