Merge downstream - JSON Viewer with dark mode & Header Fixes (#4444)

* Fix json-viewer dark mode

* Fix profile page and side nav top position following header diet
- Fix side nav top position
- Update fix for profile page to also work in non-desktop mode

src/frontend/packages/core/sass/_all-theme.scss

@@ -18,7 +18,7 @@
 @import '../src/shared/components/list/list-table/table-row/table-row.component.theme';
 @import '../src/shared/components/no-content-message/no-content-message.component.theme';
 @import '../src/shared/components/boolean-indicator/boolean-indicator.component.theme';
-
+@import '../src/shared/components/json-viewer/json-viewer.component.theme';
 @import '../src/shared/components/loading-page/loading-page.component.theme';
 @import '../src/shared/components/log-viewer/log-viewer.component.theme';
 @import '../src/shared/components/chips/chips.component.theme';
@@ -126,5 +126,6 @@
   @include restore-endpoints-theme($theme, $app-theme);
   @include metrics-component-theme($theme, $app-theme);
   @include intro-screen-theme($theme, $app-theme);
+  @include app-json-view-theme($theme, $app-theme);
 
 }

src/frontend/packages/core/sass/mat-desktop.scss

@@ -107,4 +107,13 @@ $desktop-toggle-button-item-height: $desktop-menu-item-height - 2px;
     flex: 0 0 $desktop-page-header-height;
     height: $desktop-page-header-height;
   }
+
+  mat-drawer.dashboard__side_preview {
+    top: $desktop-page-header-height;
+    height: calc(100vw - #{$desktop-page-header-height} - 1px);
+  }
+
+  app-profile-info .user-profile {
+    top: $desktop-page-header-height;
+  }
 }

src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../sass/mat-desktop';
-
 $user-profile-avatar-size: 48px;
 
 .user-profile {
@@ -9,7 +7,7 @@ $user-profile-avatar-size: 48px;
   left: 0;
   position: absolute;
   right: 0;
-  top: $desktop-page-header-height;
+  top: 56px;
   mat-card:not(:first-child) {
     margin-top: 24px;
   }

src/frontend/packages/core/src/shared/components/json-viewer/json-viewer.component.theme.scss

@@ -0,0 +1,15 @@
+@mixin app-json-view-theme($theme, $app-theme) {
+  $is-dark: map-get($theme, is-dark);
+
+  @if $is-dark == true {
+    // Keep this simple, otherwise there's a LOT of overrides.
+    // Additionally would need to bring in the non-dark mode colours to ensure the selectors work
+    app-json-viewer {
+      // There can be child json-viewers, ensure this only applies to the top level
+      &:not([root='false']) {
+        background-color: #ffffffeb;
+        border-radius: 3px;
+      }
+    }
+  }
+}