From b93c228f6f558b9156406b8dcf6731cdc51bee79 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Wed, 1 Oct 2025 16:08:48 +0200
Subject: [PATCH] frontend: update navigation and styling for overview
 component

---
 .../console/overview/overview.component.html  | 33 ++++++++++++++-----
 .../console/overview/overview.component.scss  |  1 +
 .../console/overview/overview.component.ts    |  2 +-
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.html
index db6b8ee..0ff9457 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.html
@@ -34,7 +34,12 @@
 						</div>
 					</mat-card-content>
 					<mat-card-actions>
-						<button mat-button (click)="navigateTo('rooms/new')" class="primary-button" id="create-room-button">
+						<button
+							mat-button
+							(click)="navigateTo('rooms/new')"
+							class="primary-button"
+							id="create-room-button"
+						>
 							<mat-icon>add</mat-icon>
 							Create Room
 						</button>
@@ -84,7 +89,11 @@
 									Create dedicated spaces for video conferences where participants can connect,
 									collaborate, and communicate seamlessly.
 								</p>
-								<button mat-stroked-button (click)="navigateTo('rooms/new')" id="create-first-room-button">
+								<button
+									mat-stroked-button
+									(click)="navigateTo('rooms/new')"
+									id="create-first-room-button"
+								>
 									<mat-icon class="ov-action-icon">add</mat-icon>
 									Create Room
 								</button>
@@ -93,14 +102,18 @@
 
 						<mat-card class="feature-card">
 							<mat-card-content>
-								<mat-icon class="ov-settings-icon material-symbols-outlined"> passkey </mat-icon>
-								<h3>Configure Authentication</h3>
+								<mat-icon class="material-symbols-outlined"> palette </mat-icon>
+								<h3>Customize the appearance</h3>
 								<p>
-									Set up user authentication and manage access permissions to ensure secure and
-									controlled participation in your video conferences.
+									Personalize the look and feel of your video conference rooms to align with your
+									brand and style.
 								</p>
-								<button mat-stroked-button (click)="navigateTo('users-permissions')" id="configure-auth-button">
-									Go to Users & Permissions
+								<button
+									mat-stroked-button
+									(click)="navigateTo('config')"
+									id="configure-appearance-button"
+								>
+									Go to Configuration
 								</button>
 							</mat-card-content>
 						</mat-card>
@@ -114,7 +127,9 @@
 									Embed OpenVidu Meet into your applications using our comprehensive REST API for
 									programmatic room creation and management.
 								</p>
-								<button mat-stroked-button (click)="navigateTo('embedded')" id="go-to-embedded-button">Go to Embedded</button>
+								<button mat-stroked-button (click)="navigateTo('embedded')" id="go-to-embedded-button">
+									Go to Embedded
+								</button>
 							</mat-card-content>
 						</mat-card>
 					</div>
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 b1fbda4..6ab8180 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
@@ -2,6 +2,7 @@
 
 // Welcome State Styles
 .welcome-content {
+	margin: 10px;
 	.welcome-card {
 		max-width: var(--ov-meet-container-max-width);
 		margin: 0 auto;
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.ts
index 7aab3a7..c4cb138 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.ts
@@ -75,7 +75,7 @@ export class OverviewComponent implements OnInit {
 		}
 	}
 
-	async navigateTo(section: 'rooms' | 'rooms/new' | 'recordings' | 'users-permissions' | 'embedded') {
+	async navigateTo(section: 'rooms' | 'rooms/new' | 'recordings' | 'config' | 'embedded') {
 		try {
 			await this.navigationService.navigateTo(section);
 		} catch (error) {