From 58ff02133305040be19a917792b2b16bb9ebda24 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Thu, 31 Jul 2025 17:15:29 +0200 Subject: [PATCH] frontend: update toolbar styles and theme variables for improved UI consistency --- .../console-nav/console-nav.component.html | 2 +- .../console-nav/console-nav.component.scss | 3 +- .../console/overview/overview.component.scss | 1 + .../src/assets/styles/_tokens-themes.scss | 41 +++++++++---------- frontend/src/assets/styles/_utilities.scss | 12 +++--- 5 files changed, 29 insertions(+), 30 deletions(-) diff --git a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.html b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.html index ab6a376..eca622c 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.html +++ b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.html @@ -1,4 +1,4 @@ - + diff --git a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss index e9e407e..4889356 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss @@ -2,7 +2,8 @@ #dashboard-container, mat-sidenav-container { - @extend .ov-nav-container; + height: 100%; + background-color: var(--ov-meet-background-color); } .page-content { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss index 92a9257..b1fbda4 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss @@ -73,6 +73,7 @@ // Dashboard State Styles .dashboard-content { + padding: 5px; .quick-actions { @include ov-flex-center; gap: var(--ov-meet-spacing-md); diff --git a/frontend/src/assets/styles/_tokens-themes.scss b/frontend/src/assets/styles/_tokens-themes.scss index 28e237e..10ef161 100644 --- a/frontend/src/assets/styles/_tokens-themes.scss +++ b/frontend/src/assets/styles/_tokens-themes.scss @@ -38,31 +38,30 @@ // Activated when the [data-theme="dark"] attribute is present on html [data-theme='dark'] { // === SURFACE COLORS - DARK THEME === - --ov-meet-surface-color: #1e1e1e; - --ov-meet-surface-variant: #2d2d2d; - --ov-meet-surface-hover: #383838; - --ov-meet-background-color: #121212; - --ov-meet-background-secondary: #1e1e1e; - --ov-meet-surface-elevated: #2d2d2d; - --ov-meet-surface-container: #242424; + --ov-meet-background-color: #29292e; + --ov-meet-background-secondary: #21212b; + --ov-meet-surface-color: #242429; + --ov-meet-surface-variant: #23232c; + --ov-meet-surface-hover: #3c3c44; + --ov-meet-surface-elevated: #2e2e35; + --ov-meet-surface-container: #262630; // === TEXT COLORS - DARK THEME === - --ov-meet-text-primary: #ffffff; - --ov-meet-text-secondary: #b3b3b3; - --ov-meet-text-hint: #757575; - --ov-meet-text-disabled: #5f5f5f; - --ov-meet-text-on-surface: #ffffff; - --ov-meet-text-on-background: #ffffff; + --ov-meet-text-primary: #e0e0e6; + --ov-meet-text-secondary: #a5a5b5; + --ov-meet-text-hint: #7c7c8c; + --ov-meet-text-disabled: #5a5a68; + --ov-meet-text-on-surface: #e4e4ec; + --ov-meet-text-on-background: #e4e4ec; // === SHADOWS - DARK THEME === - // Shadows in dark theme are more subtle and can use lighter colors - --ov-meet-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); - --ov-meet-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.6); - --ov-meet-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.6); - --ov-meet-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); + --ov-meet-shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.4), 0 1px 2px rgba(30, 30, 40, 0.6); + --ov-meet-shadow-md: 0 3px 6px rgba(30, 30, 45, 0.5), 0 3px 6px rgba(20, 20, 30, 0.6); + --ov-meet-shadow-lg: 0 8px 16px rgba(20, 20, 30, 0.5), 0 8px 16px rgba(0, 0, 0, 0.7); + --ov-meet-shadow-hover: 0 4px 12px rgba(50, 50, 70, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4); // === BORDERS - DARK THEME === - --ov-meet-border-color: #3f3f3f; - --ov-meet-border-color-light: #2d2d2d; - --ov-meet-border-color-strong: #5f5f5f; + --ov-meet-border-color: #3a3a48; + --ov-meet-border-color-light: #2b2b36; + --ov-meet-border-color-strong: #5c5c6c; } diff --git a/frontend/src/assets/styles/_utilities.scss b/frontend/src/assets/styles/_utilities.scss index e5f1394..85dfe8b 100644 --- a/frontend/src/assets/styles/_utilities.scss +++ b/frontend/src/assets/styles/_utilities.scss @@ -491,13 +491,9 @@ // === NAVIGATION UTILITIES === // For console navigation and sidebar components - -.ov-nav-container { - height: 100%; - - mat-sidenav-container { - height: 100%; - } +.meet-toolbar { + @include ov-theme-transition; + background-color: var(--ov-meet-surface-color); } .ov-nav-toolbar { @@ -638,6 +634,7 @@ // Toolbar Responsive Patterns .ov-data-toolbar { + background-color: var(--ov-meet-background-color) !important; @include ov-tablet-down { padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-sm); @@ -706,6 +703,7 @@ } .ov-data-table { + background-color: rgba(var(--ov-meet-surface-color), 0.8); @include ov-tablet-down { .mat-mdc-header-cell, .mat-mdc-cell {