Update GUI as IBM (#116)

Nikhil-Ashoka · dixsie · rfrandse · commit 483a6453bb88 · 2022-06-30T18:42:04.000-05:00
* Update GUI as IBM

- Removed OpenBMC logo on header and login page
- Added &lt;IBM LOGO&gt; 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 &lt;a.nikhil@ibm.com&gt;

* Add bee icon and optimize logo SVGs

Co-authored-by: Dixsie Wolmers &lt;dixsie@ibm.com&gt;
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
@@ -0,0 +1 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none; }</style></defs><title>bee</title><path d="M16,10a6,6,0,0,0-6,6v8a6,6,0,0,0,12,0V16A6,6,0,0,0,16,10Zm-4.25,7.87h8.5v4.25h-8.5ZM16,28.25A4.27,4.27,0,0,1,11.75,24v-.13h8.5V24A4.27,4.27,0,0,1,16,28.25Zm4.25-12.13h-8.5V16a4.25,4.25,0,0,1,8.5,0Z"/><path d="M30.66,19.21,24,13v9.1a4,4,0,0,0,8,0A3.83,3.83,0,0,0,30.66,19.21ZM28,24.35a2.25,2.25,0,0,1-2.25-2.25V17l3.72,3.47h0A2.05,2.05,0,0,1,30.2,22,2.25,2.25,0,0,1,28,24.35Z"/><path d="M0,22.1a4,4,0,0,0,8,0V13L1.34,19.21A3.88,3.88,0,0,0,0,22.1Zm2.48-1.56h0L6.25,17v5.1a2.25,2.25,0,0,1-4.5,0A2.05,2.05,0,0,1,2.48,20.54Z"/><path d="M15,5.5A3.5,3.5,0,1,0,11.5,9,3.5,3.5,0,0,0,15,5.5Zm-5.25,0A1.75,1.75,0,1,1,11.5,7.25,1.77,1.77,0,0,1,9.75,5.5Z"/><path d="M20.5,2A3.5,3.5,0,1,0,24,5.5,3.5,3.5,0,0,0,20.5,2Zm0,5.25A1.75,1.75,0,1,1,22.25,5.5,1.77,1.77,0,0,1,20.5,7.25Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
diff --git a/public/bee-2-light.svg b/public/bee-2-light.svg
@@ -0,0 +1 @@
+<svg id="SvgjsSvg1001" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1002"></defs><g id="SvgjsG1008"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="288" height="288"><path d="M16 10a6 6 0 00-6 6v8a6 6 0 0012 0V16A6 6 0 0016 10zm-4.25 7.87h8.5v4.25h-8.5zM16 28.25A4.27 4.27 0 0111.75 24v-.13h8.5V24A4.27 4.27 0 0116 28.25zm4.25-12.13h-8.5V16a4.25 4.25 0 018.5 0zM30.66 19.21L24 13v9.1a4 4 0 008 0A3.83 3.83 0 0030.66 19.21zM28 24.35a2.25 2.25 0 01-2.25-2.25V17l3.72 3.47h0A2.05 2.05 0 0130.2 22 2.25 2.25 0 0128 24.35zM0 22.1a4 4 0 008 0V13L1.34 19.21A3.88 3.88 0 000 22.1zm2.48-1.56h0L6.25 17v5.1a2.25 2.25 0 01-4.5 0A2.05 2.05 0 012.48 20.54zM15 5.5A3.5 3.5 0 1011.5 9 3.5 3.5 0 0015 5.5zm-5.25 0A1.75 1.75 0 1111.5 7.25 1.77 1.77 0 019.75 5.5zM20.5 2A3.5 3.5 0 1024 5.5 3.5 3.5 0 0020.5 2zm0 5.25A1.75 1.75 0 1122.25 5.5 1.77 1.77 0 0120.5 7.25z" fill="#999999" class="color000 svgShape"></path><rect width="32" height="32" fill="none" data-name="&amp;lt;Transparent Rectangle&amp;gt;"></rect></svg></g></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
@@ -0,0 +1 @@
+<svg width="425" height="159" xmlns="http://www.w3.org/2000/svg"><path d="M416.59 149.627c.672 0 1.05-.294 1.05-.924v-.63c0-.63-.378-.924-1.05-.924h-1.597v2.478h1.597Zm-1.597 4.621h-2.142v-8.779h3.991c1.974 0 2.982 1.176 2.982 2.772 0 1.386-.63 2.269-1.596 2.647l1.974 3.36h-2.352l-1.638-3.024h-1.219v3.024Zm7.688-3.906v-1.093c0-3.528-2.773-6.301-6.427-6.301-3.655 0-6.428 2.773-6.428 6.301v1.093c0 3.528 2.773 6.301 6.428 6.301 3.654 0 6.427-2.773 6.427-6.301Zm-14.828-.547c0-4.914 3.738-8.653 8.401-8.653 4.662 0 8.401 3.739 8.401 8.653 0 4.915-3.739 8.654-8.401 8.654-4.663 0-8.401-3.739-8.401-8.654ZM286.825 11 283 0h-63v11h66.825Zm7.303 21-3.825-11H220v11h74.128ZM341 158h55v-11h-55v11Zm0-21h55v-11h-55v11Zm0-21h33v-11h-33v11Zm0-21h33V84h-33v11Zm0-21h33V63h-62.908L308 71.891 304.908 63H242v11h33V63.891L278.549 74h58.903L341 63.892V74Zm33-32h-55.605l-3.826 11H374V42ZM242 95h33V84h-33v11Zm0 21h33v-11h-33v11Zm-22 21h55v-11h-55v11Zm0 21h55v-11h-55v11ZM333 0l-3.824 11H396V0h-63Zm-11.128 32H396V21h-70.302l-3.826 11ZM242 53h59.431l-3.826-11H242v11Zm43.922 42h44.157l3.862-11H282.06l3.862 11Zm7.372 21h29.413l3.862-11h-37.137l3.862 11Zm7.372 21h14.669l3.861-11h-22.391l3.861 11ZM308 158l3.824-11h-7.647L308 158Zm-220 0h81c11 0 20.864-4.169 28.333-11H88v11Zm86-53v11h37c0-3.809-.521-7.492-1.471-11H174Zm-64 11h33v-11h-33v11Zm64-63h35.529A42.012 42.012 0 0 0 211 42h-37v11Zm-64 0h33V42h-33v11Zm59-53H88v11h109.333C189.864 4.169 179.919 0 169 0Zm36.367 21H88v11h121.792a41.708 41.708 0 0 0-4.425-11ZM110 63v11h86.179a42.15 42.15 0 0 0 9.176-11H110Zm86.179 21H110v11h95.355a42.15 42.15 0 0 0-9.176-11ZM88 137h117.367a41.708 41.708 0 0 0 4.425-11H88v11ZM0 11h77V0H0v11Zm0 21h77V21H0v11Zm22 21h33V42H22v11Zm0 21h33V63H22v11Zm0 21h33V84H22v11Zm0 21h33v-11H22v11ZM0 137h77v-11H0v11Zm0 21h77v-11H0v11Z" fill="#0A0B09" fill-rule="evenodd"/></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
@@ -0,0 +1 @@
+<svg width="425" height="158" xmlns="http://www.w3.org/2000/svg"><path d="m307.325 73-3.47-10H242v10h33v-9.491L278.362 73h28.963ZM282 0h-62v10h65.47L282 0Zm7.285 21H220v10h72.755l-3.47-10Zm33.961 10H396V21h-69.285l-3.469 10ZM242 52h58.04l-3.47-10H242v10Zm43.776 42h44.448l3.53-10h-51.508l3.53 10Zm7.414 21h29.62l3.53-10h-36.68l3.53 10Zm7.415 21h14.791l3.53-10h-21.852l3.531 10ZM308 157l3.512-10h-7.024L308 157ZM334 0l-3.469 10H396V0h-62Zm40 42h-54.57l-3.47 10H374V42Zm-33 31h33V63h-61.855l-3.47 10h28.963L341 63.477V73Zm0 21h33V84h-33v10Zm0 21h33v-10h-33v10Zm0 21h55v-10h-55v10Zm0 21h55v-10h-55v10Zm-99-63h33V84h-33v10Zm0 21h33v-10h-33v10Zm-22 21h55v-10h-55v10Zm0 21h55v-10h-55v10ZM196.188 10C188.861 3.768 179.374 0 169 0H88v10h108.188Zm1.103 74H110v10h95.361a42.194 42.194 0 0 0-8.07-10ZM174 105v10h37c0-3.45-.438-6.793-1.223-10H174Zm0-53h35.777A41.982 41.982 0 0 0 211 42h-37v10Zm-64 0h33V42h-33v10Zm99.535-21a41.722 41.722 0 0 0-4.167-10H88v10h121.535ZM110 63v10h87.291a42.194 42.194 0 0 0 8.07-10H110Zm0 52h33v-10h-33v10Zm-22 21h117.368a41.763 41.763 0 0 0 4.167-10H88v10Zm0 21h81c10.373 0 19.861-3.769 27.188-10H88v10ZM0 10h77V0H0v10Zm0 21h77V21H0v10Zm22 21h33V42H22v10Zm0 21h33V63H22v10Zm0 21h33V84H22v10Zm0 21h33v-10H22v10ZM0 136h77v-10H0v10Zm0 21h77v-10H0v10Zm416.59-8.373c.672 0 1.05-.294 1.05-.924v-.63c0-.63-.378-.924-1.05-.924h-1.597v2.478h1.597Zm-1.597 4.621h-2.142v-8.779h3.991c1.974 0 2.982 1.176 2.982 2.772 0 1.386-.63 2.269-1.596 2.647l1.974 3.36h-2.352l-1.638-3.024h-1.219v3.024Zm7.688-3.906v-1.093c0-3.528-2.773-6.301-6.427-6.301-3.655 0-6.428 2.773-6.428 6.301v1.093c0 3.528 2.773 6.301 6.428 6.301 3.654 0 6.427-2.773 6.427-6.301Zm-14.828-.547c0-4.914 3.738-8.653 8.401-8.653 4.662 0 8.401 3.739 8.401 8.653 0 4.915-3.739 8.654-8.401 8.654-4.663 0-8.401-3.739-8.401-8.654Z" fill="#FFFFFE" fill-rule="evenodd"/></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>
diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap
