fix(admin-ui): Clean up nav menu styles, make light

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -12,6 +12,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    border-right: 1px solid var(--color-component-border-200);
     box-shadow: -3px 1px 10px 0px rgb(0 0 0 / 18%);
     z-index: 1;
 }
@@ -45,6 +46,7 @@
     &::-webkit-scrollbar-thumb {
         background-color: var(--color-primary-700);
         border-radius: var(--border-radius);
+
         &:hover {
             background-color: #0f5070;
         }
@@ -82,15 +84,20 @@
         display: none;
     }
 }
+
 vdr-breadcrumb {
     width: 100%;
     max-width: var(--layout-content-max-width);
     background-color: var(--color-component-bg-100);
     padding: var(--space-unit) 0;
     z-index: 5;
-    margin: 0 auto;
     position: sticky;
     top: 0;
+    margin-right: auto;
+    margin-left: calc(var(--space-unit) * 3);
+    @media screen and (max-width: $breakpoint-medium) {
+        margin-left: calc(var(--space-unit));
+    }
 }
 
 .header-actions {
@@ -100,16 +107,20 @@ vdr-breadcrumb {
 .content-area {
     position: relative;
     max-width: var(--layout-content-max-width);
-    margin: 0 auto;
+    margin-right: auto;
+    margin-left: calc(var(--space-unit) * 3);
     padding: 0 var(--space-unit);
+    @media screen and (max-width: $breakpoint-medium) {
+        margin-left: calc(var(--space-unit));
+    }
 }
 
 ::ng-deep {
     .header {
         background-image: linear-gradient(
-            to right,
-            var(--color-header-gradient-from),
-            var(--color-header-gradient-to)
+                to right,
+                var(--color-header-gradient-from),
+                var(--color-header-gradient-to)
         );
     }
 }

packages/admin-ui/src/lib/core/src/components/channel-switcher/channel-switcher.component.scss

@@ -12,15 +12,15 @@
     justify-content: space-between;
     font-size: var(--font-size-xs);
     color: var(--color-left-nav-text);
-    background-color: var(--color-primary-700);
-    border: 1px solid var(--color-left-nav-bg);
+    background-color: var(--color-component-bg-200);
+    border: 1px solid var(--color-component-border-200);
     cursor: pointer;
     width: 100%;
     border-radius: var(--border-radius);
     padding: var(--space-unit);
 
     &:hover {
-        background-color: var(--color-primary-700);
+        background-color: var(--color-component-bg-100);
         color: var(--color-left-nav-text-hover);
     }
 

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss

@@ -34,7 +34,7 @@ nav.main-nav {
             color: var(--color-text-600);
         }
         &:hover {
-            color: var(--color-primary-200);
+            color: var(--color-left-nav-text-hover);
         }
 
         &.active {
@@ -66,7 +66,3 @@ nav.main-nav {
     left: 10px;
     top: 6px;
 }
-.nav-link vdr-status-badge {
-    left: 25px;
-    top: 3px;
-}

packages/admin-ui/src/lib/core/src/components/page-title/page-title.component.scss

@@ -1,9 +1,15 @@
+@import "variables";
+
 :host {
     display: block;
     width: 100%;
     max-width: var(--layout-content-max-width);
     padding: 0 var(--space-unit);
-    margin: 0 auto;
+    margin-right: auto;
+    margin-left: calc(var(--space-unit) * 3);
+    @media screen and (max-width: $breakpoint-medium) {
+        margin-left: calc(var(--space-unit));
+    }
 }
 
 .page-title {
@@ -14,6 +20,7 @@
         //transition: all 0.5s;
         opacity: 1;
         overflow: hidden;
+
         &.folded {
             // max-height: 0;
             opacity: 1;

packages/admin-ui/src/lib/core/src/components/settings-nav/settings-nav.component.html

@@ -30,7 +30,7 @@
                     </button>
                     <vdr-dropdown-menu vdrPosition="top-right">
                         <ng-container *ngFor="let item of section.items">
-                            <div *ngIf="shouldDisplayLink(item)">
+                            <div *ngIf="shouldDisplayLink(item)" class="menu-link">
                                 <a
                                     vdrDropdownItem
                                     [attr.data-item-id]="section.id"

packages/admin-ui/src/lib/core/src/components/settings-nav/settings-nav.component.scss

@@ -19,3 +19,11 @@
         margin-right: 6px;
     }
 }
+
+.menu-link {
+    position: relative;
+    vdr-status-badge {
+        left: 20px;
+        top: 3px;
+    }
+}

packages/admin-ui/src/lib/static/styles/theme/dark.scss

@@ -34,6 +34,8 @@
     --color-chip-error-bg: var(--color-error-600);
 
     --color-top-bar-bg: var(--color-component-bg-200);
+    --color-left-nav-bg: var(--color-component-bg-200);
+    --color-left-nav-text-hover: var(--color-primary-200);
     --color-icon-button: var(--color-grey-200);
     --color-form-input-bg: hsl(212, 35%, 95%);
     --color-timeline-thread: var(--color-primary-700);

packages/admin-ui/src/lib/static/styles/theme/default.scss

@@ -74,9 +74,9 @@
     // Component-specific colors
     --color-top-bar-bg: white;
 
-    --color-left-nav-bg: var(--color-primary-800);
-    --color-left-nav-text: var(--color-primary-100);
-    --color-left-nav-text-hover: var(--color-primary-200);
+    --color-left-nav-bg: var(--color-component-bg-100);
+    --color-left-nav-text: var(--color-text);
+    --color-left-nav-text-hover: var(--color-primary-700);
 
     --color-icon-button: var(--color-grey-600);
     --color-form-input-bg: white;