Changes following review

- Removed 'About' link from user menu, changed 'version' link in the slide in side nav to point to the About page
- About page
  - Switched the app name to use getVendor instead of getProduct (roughly `Dashboard` --> `Rancher`)
  - Removed the UI version. I'd like to come back to this at some point, it would be handy for QA to know where the dashboard build came from
  - Fixed visual issues regarding tweaks
  - Release notes still exist in a separate page but are reachable from the About page

assets/translations/en-us.yaml

@@ -166,7 +166,6 @@ about:
     component: Component
     version: Version
     cli: CLI
-    ui: User Interface
     helm: Helm
     machine: Machine
     releaseNotes: 'Release notes can be found <a href="/docs/release-notes">here</a>.'

components/nav/Header.vue

@@ -270,9 +270,6 @@ export default {
             <nuxt-link v-if="isRancher" tag="li" :to="{name: 'account'}" class="user-menu-item">
               <a>{{ t('nav.userMenu.accountAndKeys', {}, true) }} <i class="icon icon-fw icon-user" /></a>
             </nuxt-link>
-            <nuxt-link tag="li" :to="{name: 'about'}" class="user-menu-item">
-              <a>{{ t('nav.userMenu.about') }} <i class="icon icon-fw icon-info" /></a>
-            </nuxt-link>
             <nuxt-link v-if="authEnabled" tag="li" :to="{name: 'auth-logout'}" class="user-menu-item">
               <a @blur="showMenu(false)">{{ t('nav.userMenu.logOut') }} <i class="icon icon-fw icon-close" /></a>
             </nuxt-link>

components/nav/TopLevelMenu.vue

@@ -245,7 +245,7 @@ export default {
           <div @click="hide()">
             <nuxt-link
               v-tooltip="{ content: fullVersion, classes: 'footer-tooltip' }"
-              :to="{ name: 'docs-doc', params: { doc: 'release-notes' } }"
+              :to="{ name: 'about' }"
               class="version"
               v-html="displayVersion"
             />

pages/about.vue

@@ -2,7 +2,7 @@
 import Loading from '@/components/Loading';
 import { MANAGEMENT } from '@/config/types';
 import { SETTING } from '@/config/settings';
-import { getProduct } from '@/config/private-label';
+import { getVendor } from '@/config/private-label';
 import { downloadFile } from '@/utils/download';
 
 export default {
@@ -21,10 +21,7 @@ export default {
       return this.settings.find(s => s.id === SETTING.VERSION_RANCHER);
     },
     appName() {
-      return getProduct();
-    },
-    uiVersion() {
-      return `${ process.env.version }${ process.env.commit ? `-${ process.env.commit }` : '' }`;
+      return getVendor();
     },
     cliVersion() {
       return this.settings.find(s => s.id === SETTING.VERSION_CLI);
@@ -79,13 +76,6 @@ export default {
           </a>
         </td><td>{{ rancherVersion.value }}</td>
       </tr>
-      <tr v-if="uiVersion">
-        <td>
-          <a href="https://github.com/rancher/dashboard" target="_blank" rel="nofollow noopener noreferrer">
-            {{ t("about.versions.ui") }}
-          </a>
-        </td><td>{{ uiVersion }}</td>
-      </tr>
       <tr v-if="cliVersion">
         <td>
           <a href="https://github.com/rancher/cli" target="_blank" rel="nofollow noopener noreferrer">
@@ -134,36 +124,32 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .about {
-    td {
-      min-width: 150px;
-      padding: 8px 5px;
-    }
-    a {
-      cursor: pointer;
-    }
-  }
-
+.about {
   table {
     border-collapse: collapse;
     overflow: hidden;
     border-radius: var(--border-radius);
 
-    > thead > tr > th {
-      padding: 8px 5px;
-      background-color: var(--sortable-table-body-divider);
+    tr > td:first-of-type {
+      width: 20%;
     }
-  }
 
-  th, td {
-    border: 1px solid var(--border);
-    text-align: left;
+    th, td {
+      border: 1px solid var(--border);
+      padding: 8px 5px;
+      min-width: 150px;
+      text-align: left;
     }
-  th {
+
+    th {
+      background-color: var(--sortable-table-top-divider);
       border-bottom: 1px solid var(--sortable-table-top-divider);
-      background-color: var(--body-bg);
-  }
-  tr:nth-child(odd) {
-      background-color: var(--sortable-table-accent-bg);
+    }
+
+    a {
+      cursor: pointer;
+    }
   }
+}
+
 </style>