From: Volker Theile <vtheile@suse.com>
Date: Mon, 19 Jul 2021 09:02:10 +0000 (+0200)
Subject: mgr/dashboard: Downstream branding - Part 2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=5110fe8385dd0f50df73472aecb3f252d4369323;p=ceph.git

mgr/dashboard: Downstream branding - Part 2

- Modify and adapt the origin patch for Octopus (SES7) to Pacific (SES7p).
- Fix TS/SCSS code to make the linter happy
- Adapt links to documentation

Signed-off-by: Volker Theile <vtheile@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.brand.html
index 5e160b4ffd8b6..f1570034eb0ca 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.brand.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.brand.html
@@ -7,11 +7,14 @@
 
     <!-- Username -->
     <div class="form-group has-feedback">
-      <input name="username"
+      <input id="username"
+             name="username"
              [(ngModel)]="model.username"
              #username="ngModel"
              type="text"
              placeholder="Enter your username..."
+             [attr.aria-invalid]="username.invalid"
+             aria-labelledby="username"
              class="form-control"
              required
              autofocus>
@@ -29,6 +32,8 @@
                #password="ngModel"
                type="password"
                placeholder="Enter your password..."
+               [attr.aria-invalid]="password.invalid"
+               aria-labelledby="password"
                class="form-control"
                required>
         <span class="input-group-append">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.brand.html
index 1c0914f96d75e..6ecb5170d9cee 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.brand.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.brand.html
@@ -13,7 +13,7 @@
       <div class="row full-height vertical-align">
         <div class="col-sm-6 d-none d-md-block">
           <h1 i18n>SUSE Enterprise Storage</h1>
-          <p i18n>
+          <p>
             <span i18n
                   class="subheader">
               AN INTELLIGENT SOFTWARE-DEFINED STORAGE SOLUTION, POWERED BY CEPH TECHNOLOGY,
@@ -41,7 +41,7 @@
     <div class="container">
       <div class="row">
         <div class="col-sm-9">
-          <span>© 2020 Ceph contributors. Free software (LGPL 2.1)</span>
+          <span>© 2021 Ceph contributors. Free software (LGPL 2.1)</span>
         </div>
         <div class="col-sm-3 text-right d-none d-sm-block">
           <img alt="SUSE Logo"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.brand.html
index 0a21d4599eb19..cb32317c6d9ba 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.brand.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.brand.html
@@ -2,7 +2,7 @@
   <button type="button"
           class="close float-right"
           aria-label="Close"
-          (click)="modalRef.hide()">
+          (click)="activeModal.close()">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
@@ -51,7 +51,7 @@
 </div>
 <div class="modal-footer">
   <div class="text-left">
-    {{ copyright }}
+    {{ projectConstants.copyright }}
     {{ projectConstants.license }}
   </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.brand.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.brand.html
index 06ce35387b9e9..9057f0b3828da 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.brand.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.brand.html
@@ -18,7 +18,7 @@
 
     <button type="button"
             class="navbar-toggler"
-            (click)="isCollapsed = !isCollapsed">
+            (click)="toggleRightSidebar()">
       <span i18n
             class="sr-only">Toggle navigation</span>
       <span class="">
@@ -27,7 +27,7 @@
     </button>
 
     <div class="collapse navbar-collapse"
-         [collapse]="isCollapsed">
+         [ngClass]="{'show': rightSidebarOpen}">
       <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
         <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
       </ul>
@@ -58,7 +58,8 @@
     <cd-language-selector class="cd-navbar"></cd-language-selector>
   </li>
   <li class="nav-item ">
-    <cd-notifications class="cd-navbar"></cd-notifications>
+    <cd-notifications class="cd-navbar"
+                      (click)="toggleRightSidebar()"></cd-notifications>
   </li>
   <li class="nav-item ">
     <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
@@ -71,7 +72,7 @@
   </li>
 </ng-template>
 
-<ng-template #cd_menu >
+<ng-template #cd_menu>
   <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
     <!-- Dashboard -->
     <li routerLinkActive="active"
@@ -97,8 +98,7 @@
         <ng-container i18n>Cluster</ng-container>
       </a>
       <ul class="list-unstyled"
-          [collapse]="displayedSubMenu !== 'cluster'"
-          [isAnimated]="true">
+          [ngbCollapse]="displayedSubMenu !== 'cluster'">
         <li routerLinkActive="active"
             class="tc_submenuitem tc_submenuitem_hosts"
             *ngIf="permissions.hosts.read">
@@ -145,7 +145,7 @@
             class="tc_submenuitem tc_submenuitem_modules"
             *ngIf="permissions.configOpt.read">
           <a i18n
-             routerLink="/mgr-modules">Manager modules</a>
+             routerLink="/mgr-modules">Manager Modules</a>
         </li>
         <li routerLinkActive="active"
             class="tc_submenuitem tc_submenuitem_log"
@@ -158,8 +158,8 @@
             *ngIf="permissions.prometheus.read">
           <a routerLink="/monitoring">
             <ng-container i18n>Monitoring</ng-container>
-            <small *ngIf="prometheusAlertService.alerts.length > 0"
-                   class="badge badge-danger">{{ prometheusAlertService.alerts.length }}</small>
+            <small *ngIf="prometheusAlertService.activeAlerts > 0"
+                   class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
           </a>
         </li>
       </ul>
@@ -188,8 +188,7 @@
       </a>
 
       <ul class="list-unstyled"
-          [collapse]="displayedSubMenu !== 'block'"
-          [isAnimated]="true">
+          [ngbCollapse]="displayedSubMenu !== 'block'">
         <li routerLinkActive="active"
             class="tc_submenuitem tc_submenuitem_block_images"
             *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
@@ -233,7 +232,7 @@
         *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
       <a i18n
          class="nav-link"
-         routerLink="/cephfs">Filesystems</a>
+         routerLink="/cephfs">File Systems</a>
     </li>
 
     <!-- Object Gateway -->
@@ -247,8 +246,7 @@
         <ng-container i18n>Object Gateway</ng-container>
       </a>
       <ul class="list-unstyled"
-          [collapse]="displayedSubMenu !== 'rgw'"
-          [isAnimated]="true">
+          [ngbCollapse]="displayedSubMenu !== 'rgw'">
         <li routerLinkActive="active"
             class="tc_submenuitem tc_submenuitem_rgw_daemons">
           <a i18n
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts
index 1198fdeb3fe94..39750410b908c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts
@@ -22,13 +22,13 @@ describe('DocService', () => {
 
   it('should return full URL', () => {
     expect(service.urlGenerator('iscsi', 'foo')).toBe(
-      'https://documentation.suse.com/ses/foo/single-html/mgr/dashboard/#enabling-iscsi-management'
+      'https://documentation.suse.com/ses/foo/single-html/ses-admin/#dashboard-iscsi-management'
     );
   });
 
   it('should return latest version URL for master', () => {
     expect(service.urlGenerator('orch', 'master')).toBe(
-      'https://documentation.suse.com/ses/master/single-html/mgr/orchestrator'
+      'https://documentation.suse.com/ses/master/single-html/ses-deployment/#deploy-cephadm-day2-orch'
     );
   });
 
@@ -66,7 +66,7 @@ describe('DocService', () => {
 
       nextSummary('foo');
       expect(result).toEqual(
-        'https://documentation.suse.com/ses/foo/single-html/mgr/dashboard/#enabling-prometheus-alerting'
+        'https://documentation.suse.com/ses/foo/single-html/ses-deployment/#deploy-cephadm-day2-service-monitoring'
       );
       expect(i).toBe(1);
       expect(subscriber.closed).toBe(true);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts
index 03d6421a87fdf..478d9265f226d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts
@@ -23,26 +23,24 @@ export class DocService {
     });
   }
 
-  urlGenerator(section: string, release = '7'): string {
+  urlGenerator(section: string, release = '7p'): string {
     const domain = `https://documentation.suse.com/ses/${release}/single-html/`;
-    const domainCeph = `https://ceph.io/`;
-
     const sections = {
-      iscsi: `${domain}mgr/dashboard/#enabling-iscsi-management`,
-      prometheus: `${domain}mgr/dashboard/#enabling-prometheus-alerting`,
-      'nfs-ganesha': `${domain}mgr/dashboard/#configuring-nfs-ganesha-in-the-dashboard`,
-      'rgw-nfs': `${domain}radosgw/nfs`,
-      rgw: `${domain}mgr/dashboard/#enabling-the-object-gateway-management-frontend`,
-      dashboard: `${domain}mgr/dashboard`,
-      grafana: `${domain}mgr/dashboard/#enabling-the-embedding-of-grafana-dashboards`,
-      orch: `${domain}mgr/orchestrator`,
-      pgs: `${domainCeph}pgcalc`,
-      help: `${domainCeph}help/`,
-      security: `${domainCeph}security/`,
-      trademarks: `${domainCeph}legal-page/trademarks/`,
-      'dashboard-landing-page-status': `${domain}mgr/dashboard/#dashboard-landing-page-status`,
-      'dashboard-landing-page-performance': `${domain}mgr/dashboard/#dashboard-landing-page-performance`,
-      'dashboard-landing-page-capacity': `${domain}mgr/dashboard/#dashboard-landing-page-capacity`
+      iscsi: `${domain}ses-admin/#dashboard-iscsi-management`,
+      prometheus: `${domain}ses-deployment/#deploy-cephadm-day2-service-monitoring`,
+      'nfs-ganesha': `${domain}ses-admin/#ceph-nfsganesha-config`,
+      'rgw-nfs': `${domain}ses-admin/#ceph-nfsganesha-config-service-rgw`,
+      rgw: `${domain}ses-admin/#dashboard-ogw-enabling`,
+      dashboard: `${domain}ses-admin/#dashboard-initial-configuration`,
+      grafana: `${domain}ses-deployment/#deploy-cephadm-day2-service-monitoring`,
+      orch: `${domain}ses-deployment/#deploy-cephadm-day2-orch`,
+      pgs: `${domain}ses-admin/#ceph-pools`,
+      help: `${domain}`,
+      security: `${domain}ses-security`,
+      trademarks: `${domain}`,
+      'dashboard-landing-page-status': `${domain}ses-admin/#dashboard-widgets-status`,
+      'dashboard-landing-page-performance': `${domain}ses-admin/#dashboard-widgets-performance`,
+      'dashboard-landing-page-capacity': `${domain}ses-admin/#dashboard-widgets-capacity`
     };
 
     return sections[section];
@@ -56,7 +54,7 @@ export class DocService {
     return this.releaseData$
       .pipe(
         filter((value) => !!value),
-        map((release) => this.urlGenerator(section, release)),
+        map(() => this.urlGenerator(section)),
         first()
       )
       .subscribe(next, error);
diff --git a/src/pybind/mgr/dashboard/frontend/src/index.brand.html b/src/pybind/mgr/dashboard/frontend/src/index.brand.html
index bf9e474212078..95a501de4de87 100644
--- a/src/pybind/mgr/dashboard/frontend/src/index.brand.html
+++ b/src/pybind/mgr/dashboard/frontend/src/index.brand.html
@@ -14,17 +14,17 @@
   <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
 </head>
 <body>
-<noscript>
-  <div class="noscript container"
-       ng-if="false">
-    <div class="jumbotron alert alert-danger">
-      <h2 i18n>JavaScript required!</h2>
-      <p i18n>A browser with JavaScript enabled is required in order to use this service.</p>
-      <p i18n>When using Internet Explorer, please check your security settings and add this address to your trusted sites.</p>
+  <noscript>
+    <div class="noscript container"
+         ng-if="false">
+      <div class="jumbotron alert alert-danger">
+        <h2 i18n>JavaScript required!</h2>
+        <p i18n>A browser with JavaScript enabled is required in order to use this service.</p>
+        <p i18n>When using Internet Explorer, please check your security settings and add this address to your trusted sites.</p>
+      </div>
     </div>
-  </div>
-</noscript>
+  </noscript>
 
-<cd-root></cd-root>
+  <cd-root></cd-root>
 </body>
 </html>
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
index 2b075349e1214..8650992a274f1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
@@ -2,19 +2,19 @@
 
 Custom styles, third-party libraries, frameworks, design systems, ...
 */
-@import 'variables';
+@use 'variables' as vv;
 
 @font-face {
   font-family: 'WorkSansLight';
-  src: url('assets/WorkSans-Light.ttf') format('truetype');
+  src: url('../../assets/WorkSans-Light.ttf') format('truetype');
 }
 @font-face {
   font-family: 'WorkSansMedium';
-  src: url('assets/WorkSans-Medium.ttf') format('truetype');
+  src: url('../../assets/WorkSans-Medium.ttf') format('truetype');
 }
 @font-face {
   font-family: 'WorkSansRegular';
-  src: url('assets/WorkSans-Regular.ttf') format('truetype');
+  src: url('../../assets/WorkSans-Regular.ttf') format('truetype');
 }
 
 /* Body */
@@ -31,16 +31,19 @@ h5,
 h6 {
   font-family: 'WorkSansMedium', 'Verdana', Helvetica, Arial, sans-serif;
 }
+
 .subheader {
   font-family: 'WorkSansLight', 'Verdana', Helvetica, Arial, sans-serif;
 }
 
 /* Button */
 .btn-primary,
-.btn-secondary {
-  background-color: $color-primary !important;
-  border-color: $color-primary !important;
+.btn-secondary,
+.btn-accent {
+  background-color: vv.$primary !important;
+  border-color: vv.$primary !important;
 }
+
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active,
@@ -51,12 +54,14 @@ h6 {
 .btn-secondary:active,
 .btn-secondary.active,
 .open .dropdown-toggle.btn-secondary {
-  background-color: lighten($color-primary, 10) !important;
-  border-color: lighten($color-primary, 10) !important;
+  background-color: lighten(vv.$primary, 10) !important;
+  border-color: lighten(vv.$primary, 10) !important;
 }
+
 .btn-secondary:focus {
-  box-shadow: 0 0 0 0.2rem rgba($color-primary, 0.5) !important;
+  box-shadow: 0 0 0 0.2rem rgba(vv.$primary, 0.5) !important;
 }
+
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary,
@@ -65,10 +70,11 @@ h6 {
 .open .dropdown-toggle.btn-secondary {
   &:hover,
   &:focus {
-    background-color: lighten($color-primary, 10) !important;
-    border-color: lighten($color-primary, 10) !important;
+    background-color: lighten(vv.$primary, 10) !important;
+    border-color: lighten(vv.$primary, 10) !important;
   }
 }
+
 .btn-primary.disabled,
 .btn-primary[disabled],
 fieldset[disabled] .btn-primary,
@@ -99,38 +105,38 @@ fieldset[disabled] .btn-secondary:active,
 .btn-secondary.disabled.active,
 .btn-secondary[disabled].active,
 fieldset[disabled] .btn-secondary.active {
-  background-color: $color-primary !important;
-  border-color: $color-primary !important;
+  background-color: vv.$primary !important;
+  border-color: vv.$primary !important;
 }
 
 /* Icons */
 .ceph-icon {
+  margin-right: 1em !important;
+  padding: 15px !important;
   background: {
-    image: url('assets/SUSE_Chameleon_L_Green-pos_sRGB-250.png');
-    clip: padding-box;
-    size: contain;
-    repeat: no-repeat;
-  }
-  padding: 15px;
-  margin-right: 1em;
+    clip: padding-box !important;
+    image: url('../../assets/SUSE_Chameleon_L_Green-pos_sRGB-250.png') !important;
+    repeat: no-repeat !important;
+    size: contain !important;
+  };
 }
 
 /* Login */
 .login-suse {
+  background-color: vv.$color-login-background;
+  color: vv.$color-soft-gray;
   font-family: 'WorkSansRegular', 'Verdana', Helvetica, Arial, sans-serif;
-  color: $color-soft-gray;
-  background-color: $color-login-background;
-  width: 100%;
   margin: 0;
+  width: 100%;
 
   header {
+    background-color: vv.$secondary;
     margin-bottom: 30px;
-    background-color: $color-secondary;
 
     .row {
       margin: 0;
 
-      @media screen and (max-width: $screen-sm-max) {
+      @media screen and (max-width: vv.$screen-sm-max) {
         margin-left: -15px;
       }
     }
@@ -142,12 +148,12 @@ fieldset[disabled] .btn-secondary.active {
 
       .navbar-brand {
         font-size: 2rem;
-        line-height: 2.5rem;
         height: 60px;
-        padding: 15px 15px;
+        line-height: 2.5rem;
+        padding: 15px;
 
         span {
-          @media screen and (max-width: $screen-xs-max) {
+          @media screen and (max-width: vv.$screen-xs-max) {
             display: none;
           }
         }
@@ -155,25 +161,25 @@ fieldset[disabled] .btn-secondary.active {
 
       .form-inline {
         .dropdown-toggle {
-          display: block;
           border: 0;
+          display: block;
           padding: 21px 15px;
 
           &:hover,
           &:focus {
-            color: $color-black;
-            background-color: $color-primary;
+            background-color: vv.$primary;
+            color: vv.$black;
             text-decoration: none;
           }
 
-          @media screen and (max-width: $screen-sm-max) {
+          @media screen and (max-width: vv.$screen-sm-max) {
             margin-left: 15px;
           }
         }
 
         .dropdown-menu {
-          @media screen and (max-width: $screen-sm-max) {
-            background-color: $color-white;
+          @media screen and (max-width: vv.$screen-sm-max) {
+            background-color: vv.$white;
           }
         }
       }
@@ -188,14 +194,14 @@ fieldset[disabled] .btn-secondary.active {
 
   section {
     display: inline-flex;
-    width: 100%;
-    min-height: 100vh;
     margin: -90px auto -100px;
+    min-height: 100vh;
+    width: 100%;
 
     h1 {
-      margin-bottom: 3rem;
+      color: vv.$primary;
       font-size: 4rem;
-      color: $color-primary;
+      margin-bottom: 3rem;
     }
 
     p {
@@ -204,80 +210,98 @@ fieldset[disabled] .btn-secondary.active {
 
     .subheader {
       display: block;
-      margin-bottom: 1rem;
       font-size: 1.4rem;
       font-weight: bold;
+      margin-bottom: 1rem;
     }
 
     h2 {
-      margin: 2.5rem 0;
       font-size: 2.5rem;
+      margin: 2.5rem 0;
     }
 
     .form-group {
+      background-color: vv.$color-login-background;
       border-left: 0;
-      background-color: $color-login-background;
 
       &:focus-within {
         border-left: 0;
       }
 
       input {
-        background-color: $color-white;
-        border-color: $color-white;
-        color: $body-color;
+        background-color: vv.$white;
+        border-color: vv.$white;
+        color: vv.$body-color;
         font-size: 13px;
         height: 2.5rem;
 
         &:focus {
-          border-color: rgba($color-primary, 0.8);
-          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px 2px rgba($color-primary, 0.5);
+          border-color: rgba(vv.$primary, 0.8);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px 2px rgba(vv.$primary, 0.5);
           outline: 0;
         }
+
+        &:-webkit-autofill {
+          -webkit-background-clip: text;
+        }
       }
     }
 
     .btn-password {
-      color: $body-color;
-      border-left: 1px solid $body-color;
-      background-color: $color-white;
+      background-color: vv.$white;
+      border-left: 1px solid vv.$body-color;
+      color: vv.$body-color;
 
       &:hover {
-        color: $color-white;
-        background-color: $color-secondary;
+        background-color: vv.$secondary;
+        color: vv.$white;
       }
 
       &:focus {
-        color: $body-color;
-        background-color: $color-white;
-        border-color: rgba($color-primary, 0.8);
-        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px 2px rgba($color-primary, 0.5);
+        background-color: vv.$white;
+        border-color: rgba(vv.$primary, 0.8);
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px 2px rgba(vv.$primary, 0.5);
+        color: vv.$body-color;
         outline: 0;
       }
     }
   }
 
   footer {
-    margin-top: 30px;
+    border-bottom: 16px solid vv.$primary;
     height: 70px;
+    margin-top: 30px;
     padding-top: 23px;
-    border-bottom: 16px solid $color-primary;
 
     .footer-logo {
-      width: 50px;
       margin-top: -16px;
+      width: 50px;
     }
 
     .container {
       padding-bottom: 10px;
     }
   }
+
+  a {
+    color: inherit;
+
+    &:hover {
+      color: inherit;
+    }
+  }
 }
 
 /* About */
 .suse-logo {
-  width: 140px;
   margin-bottom: 1.5rem;
+  width: 140px;
+}
+
+.modal-header {
+  .close {
+    color: inherit !important;
+  }
 }
 
 .modal-content {
@@ -296,31 +320,30 @@ fieldset[disabled] .btn-secondary.active {
 
 .green-background-1,
 .green-background-2 {
-  width: 140%;
   height: 400px;
   left: -20%;
   position: absolute;
+  width: 140%;
 }
 
 .green-background-1 {
-  background-color: $color-green-contrast-1;
+  background-color: vv.$color-green-contrast-1;
   bottom: -240px;
   transform: rotate(-11deg);
 }
 
 .green-background-2 {
-  background-color: $color-green-contrast-2;
+  background-color: vv.$color-green-contrast-2;
   bottom: -310px;
   transform: rotate(-6deg);
 }
 
 // Dashboard
-
 .dashboard {
-  background-color: #ffffff !important;
+  background-color: vv.$white !important;
 
   .card {
-    background-color: #f5f5f5;
+    background-color: vv.$color-white-smoke !important;
   }
 }
 
@@ -328,37 +351,37 @@ fieldset[disabled] .btn-secondary.active {
 @mixin suse-nav-link {
   .nav-link,
   a {
-    background-color: #f5f5f5 !important;
+    background-color: vv.$color-white-smoke !important;
     border-left: 5px solid transparent !important;
-    color: $body-color !important;
+    color: vv.$body-color !important;
     margin: 0 16px 0 0 !important;
     padding: 8px 0 8px 21px !important;
 
     &:hover {
       background-color: transparent !important;
-      border-left: 5px solid $color-primary !important;
+      border-left: 5px solid vv.$primary !important;
     }
   }
 }
 @mixin suse-nav-link-active {
-  background-color: $color-primary !important;
-  border-radius: 0 2px 2px 0;
-  color: #ffffff !important;
+  background-color: vv.$primary !important;
+  border-radius: 0 2px 2px 0 !important;
+  color: vv.$white !important;
 
   &:hover {
-    background-color: $color-primary !important;
+    background-color: vv.$primary !important;
     border-left: 5px solid transparent !important;
   }
 }
 
 nav#sidebar {
-  background-color: #f5f5f5 !important;
+  @include suse-nav-link;
+  background-color: vv.$color-white-smoke !important;
   padding-top: 1.5rem;
 
   .nav-item ul {
-    background-color: #f5f5f5 !important;
-
     @include suse-nav-link;
+    background-color: vv.$color-white-smoke !important;
 
     a {
       padding: 8px 0 8px 33px !important;
@@ -369,18 +392,33 @@ nav#sidebar {
     }
   }
 
-  @include suse-nav-link;
   .active .nav-link {
     @include suse-nav-link-active;
   }
 }
 
 .nav-item.active .fa-heartbeat.health-ok {
-  color: #ffffff !important;
+  color: vv.$white !important;
 }
 
 // Logo
-
 .cd-navbar-top .cd-navbar-brand .navbar-brand > img {
   height: 29px !important;
 }
+
+// Error page
+cd-error {
+  .dashboard,
+  .text-center {
+    background-color: vv.$white !important;
+  }
+}
+
+/* Notification icons */
+.toast-message .custom-icon {
+  /* Display icons in white, regardless of their origin color. */
+  filter: brightness(0) invert(1);
+  -webkit-filter: brightness(0) invert(1);
+  -moz-filter: brightness(0) invert(1);
+  -o-filter: brightness(0) invert(1);
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
index 27aa1b99d6107..9a50b56db1383 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
@@ -16,17 +16,18 @@ Example:
 */
 @import '../defaults/bootstrap-defaults';
 
-$body-color: #212529;
+// Override bootstrap defaults.
+$primary: #30ba78;
+$secondary: #0c322c;
+$accent: #ff6a52;
 
-$color-primary: #30ba78;
-$color-secondary: #0c322c;
-$color-accent: #ff6a52;
+$body-color: #212529;
 
 $color-green-contrast-1: #e4f6ee;
 $color-green-contrast-2: #139448;
 
 $color-soft-gray: #f2f2f2;
-$color-white: #ffffff;
+$color-white-smoke: #f5f5f5;
 
 $button-radius: 4px;