Update GUI as IBM (#116)

* Update GUI as IBM - Removed OpenBMC logo on header and login page - Added <IBM LOGO> ASMI on header and logo in login page - updated "BMC management system" to "Advanced System Management Interface (ASMI)" for the login page in .env.ibm Signed-off-by: Nikhil Ashoka <[email protected]> * Add bee icon and optimize logo SVGs Co-authored-by: Dixsie Wolmers <[email protected]>
ibm-openbmc · Jun 30, 2022 · 483a645 · 483a645
1 parent 25451b7
commit 483a645
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 16 deletions.
diff --git a/.env.ibm b/.env.ibm
@@ -1,7 +1,7 @@
 NODE_ENV=production
 VUE_APP_ENV_NAME=ibm
 VUE_APP_COMPANY_NAME="IBM"
-VUE_APP_GUI_NAME="BMC System Management"
+VUE_APP_GUI_NAME="Advanced System Management Interface (ASMI)"
 CUSTOM_STYLES=true
 CUSTOM_APP_NAV=true
 CUSTOM_ROUTER=true

diff --git a/public/bee-1-dark.svg b/public/bee-1-dark.svg
diff --git a/public/bee-2-light.svg b/public/bee-2-light.svg
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>bee-2-light.svg">
     <title>OpenBMC Web UI</title>
   </head>
   <body>

diff --git a/src/assets/images/login-company-logo.svg b/src/assets/images/login-company-logo.svg
diff --git a/src/assets/images/login-ibm-logo.svg b/src/assets/images/login-ibm-logo.svg
diff --git a/src/assets/images/logo-header.svg b/src/assets/images/logo-header.svg
diff --git a/src/assets/images/logo-ibm-header.svg b/src/assets/images/logo-ibm-header.svg
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
@@ -31,15 +31,17 @@
         </b-button>
         <b-navbar-nav>
           <b-navbar-brand
-            class="mr-0"
+            class="mr-0 logo-header"
             to="/"
             data-test-id="appHeader-container-overview"
           >
             <img
+              width="50px"
               class="header-logo"
-              src="@/assets/images/logo-header.svg"
+              src="@/assets/images/logo-ibm-header.svg"
               :alt="altLogo"
             />
+            <span class="pl-1 nav-tags header-text">{{ headerText }}</span>
           </b-navbar-brand>
           <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
             <span>|</span>
@@ -137,6 +139,7 @@ export default {
     return {
       isNavigationOpen: false,
       altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
+      headerText: 'ASMI',
     };
   },
   computed: {
@@ -381,4 +384,13 @@ export default {
     outline: 0;
   }
 }
+
+.logo-header {
+  display: flex;
+  align-items: center;
+}
+
+.header-text {
+  font-size: 22px;
+}
 </style>
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
@@ -6,7 +6,7 @@
           <div class="login-brand mb-5">
             <img
               width="90px"
-              src="@/assets/images/login-company-logo.svg"
+              src="@/assets/images/login-ibm-logo.svg"
               :alt="altLogo"
             />
           </div>
@@ -20,13 +20,6 @@
         <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>
       </div>
     </div>
   </main>