neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: update toolbar styles and theme variables for improved UI consistency

Browse Source
This commit is contained in:
Carlos Santos 2025-07-31 17:15:29 +02:00
parent 37375186d4
commit 58ff021333
5 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.html
View File

@ -1,4 +1,4 @@
<mat-toolbar color="primary" id="main-toolbar"> <mat-toolbar class="meet-toolbar" id="main-toolbar">
<button mat-icon-button aria-label="Menu icon" (click)="toggleSideMenu()" id="menu-toggle-btn"> <button mat-icon-button aria-label="Menu icon" (click)="toggleSideMenu()" id="menu-toggle-btn">
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>

3
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
View File

@ -2,7 +2,8 @@
#dashboard-container, #dashboard-container,
mat-sidenav-container { mat-sidenav-container {
@extend .ov-nav-container; height: 100%;
background-color: var(--ov-meet-background-color);
} }
.page-content { .page-content {

1
frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss
View File

@ -73,6 +73,7 @@
// Dashboard State Styles // Dashboard State Styles
.dashboard-content { .dashboard-content {
padding: 5px;
.quick-actions { .quick-actions {
@include ov-flex-center; @include ov-flex-center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);

41
frontend/src/assets/styles/_tokens-themes.scss
View File

@ -38,31 +38,30 @@
// Activated when the [data-theme="dark"] attribute is present on html // Activated when the [data-theme="dark"] attribute is present on html
[data-theme='dark'] { [data-theme='dark'] {
// === SURFACE COLORS - DARK THEME === // === SURFACE COLORS - DARK THEME ===
--ov-meet-surface-color: #1e1e1e; --ov-meet-background-color: #29292e;
--ov-meet-surface-variant: #2d2d2d; --ov-meet-background-secondary: #21212b;
--ov-meet-surface-hover: #383838; --ov-meet-surface-color: #242429;
--ov-meet-background-color: #121212; --ov-meet-surface-variant: #23232c;
--ov-meet-background-secondary: #1e1e1e; --ov-meet-surface-hover: #3c3c44;
--ov-meet-surface-elevated: #2d2d2d; --ov-meet-surface-elevated: #2e2e35;
--ov-meet-surface-container: #242424; --ov-meet-surface-container: #262630;
// === TEXT COLORS - DARK THEME === // === TEXT COLORS - DARK THEME ===
--ov-meet-text-primary: #ffffff; --ov-meet-text-primary: #e0e0e6;
--ov-meet-text-secondary: #b3b3b3; --ov-meet-text-secondary: #a5a5b5;
--ov-meet-text-hint: #757575; --ov-meet-text-hint: #7c7c8c;
--ov-meet-text-disabled: #5f5f5f; --ov-meet-text-disabled: #5a5a68;
--ov-meet-text-on-surface: #ffffff; --ov-meet-text-on-surface: #e4e4ec;
--ov-meet-text-on-background: #ffffff; --ov-meet-text-on-background: #e4e4ec;
// === SHADOWS - DARK THEME === // === SHADOWS - DARK THEME ===
// Shadows in dark theme are more subtle and can use lighter colors --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-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(30, 30, 45, 0.5), 0 3px 6px rgba(20, 20, 30, 0.6);
--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(20, 20, 30, 0.5), 0 8px 16px rgba(0, 0, 0, 0.7);
--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 12px rgba(50, 50, 70, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
--ov-meet-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4);
// === BORDERS - DARK THEME === // === BORDERS - DARK THEME ===
--ov-meet-border-color: #3f3f3f; --ov-meet-border-color: #3a3a48;
--ov-meet-border-color-light: #2d2d2d; --ov-meet-border-color-light: #2b2b36;
--ov-meet-border-color-strong: #5f5f5f; --ov-meet-border-color-strong: #5c5c6c;
} }

12
frontend/src/assets/styles/_utilities.scss
View File

@ -491,13 +491,9 @@
// === NAVIGATION UTILITIES === // === NAVIGATION UTILITIES ===
// For console navigation and sidebar components // For console navigation and sidebar components
.meet-toolbar {
.ov-nav-container { @include ov-theme-transition;
height: 100%; background-color: var(--ov-meet-surface-color);
mat-sidenav-container {
height: 100%;
}
} }
.ov-nav-toolbar { .ov-nav-toolbar {
@ -638,6 +634,7 @@
// Toolbar Responsive Patterns // Toolbar Responsive Patterns
.ov-data-toolbar { .ov-data-toolbar {
background-color: var(--ov-meet-background-color) !important;
@include ov-tablet-down { @include ov-tablet-down {
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -706,6 +703,7 @@
} }
.ov-data-table { .ov-data-table {
background-color: rgba(var(--ov-meet-surface-color), 0.8);
@include ov-tablet-down { @include ov-tablet-down {
.mat-mdc-header-cell, .mat-mdc-header-cell,
.mat-mdc-cell { .mat-mdc-cell {