Fix login page

1 files changed, 28 insertions, 77 deletions

diff --git a/src/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue
index cdff2040..8f4b3189 100644
--- a/src/layouts/_sila/LoginLayout.vue
+++ b/src/layouts/_sila/LoginLayout.vue
@@ -1,32 +1,17 @@
 <template>
   <main>
     <div class="login-container">
-      <div class="login-main">
-        <div>
-          <div class="login-brand mb-5">
-            <img
-              width="90px"
-              src="@/assets/images/login-company-logo.svg"
-              :alt="altLogo"
-            />
-          </div>
-          <h1 v-if="customizableGuiName" class="h3 mb-5">
-            {{ customizableGuiName }}
-          </h1>
-          <router-view class="login=form form-background" />
-        </div>
-      </div>
       <div class="login-aside">
-        <div class="login-aside__logo-brand">
-          <!-- Add Secondary brand logo if needed -->
-        </div>
-        <div class="login-aside__logo-bmc">
-          <img
-            height="60px"
-            src="@/assets/images/built-on-openbmc-logo.svg"
-            alt="Built on OpenBMC"
-          />
-        </div>
+        <img
+          src="@/assets/images/_sila/built-on-openbmc-logo.svg"
+          alt="Built on BMC"
+        />
+      </div>
+      <div class="login-main">
+        <h1 v-if="customizableGuiName" class="h3 mb-5">
+          {{ customizableGuiName }}
+        </h1>
+        <router-view class="login=form form-background" />
       </div>
     </div>
   </main>
@@ -37,7 +22,7 @@ export default {
   name: 'LoginLayout',
   data() {
     return {
-      altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
+      altLogo: process.env.VUE_APP_COMPANY_NAME || 'BMC',
       customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
     };
   },
@@ -46,67 +31,33 @@ export default {
 
 <style lang="scss" scoped>
 .login-container {
-  background: gray('100');
+  background: $white;
   display: flex;
-  flex-direction: column;
-  gap: $spacer * 2;
-  max-width: 1400px;
+  flex-direction: row;
   min-width: 320px;
   min-height: 100vh;
-  justify-content: space-around;
-
-  @include media-breakpoint-up('md') {
-    background: $white;
-    flex-direction: row;
-  }
+  justify-content: flex-start;
 }
 
-.login-main {
-  min-height: 50vh;
-  padding: $spacer * 3;
-
-  @include media-breakpoint-up('md') {
-    background: gray('100');
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 75%;
-    min-height: 100vh;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-.login-form {
-  @include media-breakpoint-up('md') {
-    max-width: 360px;
+.login-aside {
+  min-height: 100vh;
+  & > img {
+    height: 100vh;
   }
 }
 
-.login-aside {
+.login-main {
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  gap: $spacer * 1.5;
-  margin-right: $spacer * 3;
-  margin-bottom: $spacer;
-
-  @include media-breakpoint-up('md') {
-    min-height: 100vh;
-    padding-bottom: $spacer;
-    flex: 1 1 25%;
-    margin-bottom: 0;
-  }
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: auto;
+  padding: 0;
 }
-
-.login-aside__logo-brand:not(:empty) {
-  &::after {
-    content: '';
-    display: inline-block;
-    height: 2.5rem;
-    width: 2px;
-    background-color: gray('200');
-    margin-left: $spacer * 1.5;
-    vertical-align: middle;
+@media (max-width: 750px) {
+  .login-aside {
+    display: none;
   }
 }
 </style>