Fix size and position of header notification badge icon (#4778)

* Fix size and position of header notification badge icon * Ensure override also applies to dark mode - dark mode brings back in i think specific overrides by material design - ensure our overrides are more specific - flicking between light/dark mode now shows no difference Co-authored-by: Richard Cox <[email protected]>
cloudfoundry · Nov 23, 2020 · 1a23fea · 1a23fea
1 parent 83e81e4
commit 1a23fea
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/src/frontend/packages/core/sass/mat-desktop.scss b/src/frontend/packages/core/sass/mat-desktop.scss
@@ -122,6 +122,13 @@ $desktop-toggle-button-item-height: $desktop-menu-item-height - 2px;
       width: 20px;
     }
 
+    .page-header__notification-button .mat-badge-medium.mat-badge-overlap .mat-badge-content {
+      height: 18px;
+      line-height: 18px;
+      right: -8px;
+      top: -8px;
+      width: 18px;
+    }
   }
 
   .dashboard .dashboard__inner {

diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.scss b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.scss
@@ -99,6 +99,7 @@ $bottom-index: $top-index - 1;
     height: 20vh;
   }
   &__divider {
+    cursor: default;
     opacity: .3;
     padding: 0 10px 0 5px;
   }

diff --git a/...frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss b/...frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss
@@ -51,7 +51,11 @@
       color: $underflow-foreground;
     }
     &__divider {
-      color: mat-contrast($primary, 500);
+      @if $header-border and $header-border != 'none' {
+        color: $header-border;
+      } @else {
+        color: mat-contrast($primary, 500);
+      }
     }
     &__menu-icon {
       background-color: mat-contrast($primary, 500);