From c99f0cad039f79e46b0dd6820919fd5c2c831935 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 30 Sep 2025 17:04:09 +0200
Subject: [PATCH] frontend: enhance color picker with tooltips and improve
 layout for better usability

---
 .../console/config/config.component.html      | 13 ++++++++-
 .../console/config/config.component.scss      | 28 +++++++++++++++++--
 .../pages/console/config/config.component.ts  | 10 +++----
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.html
index 2f6eb10..5d3cf3a 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.html
@@ -89,7 +89,18 @@
 								<div class="color-picker-grid ov-mt-md">
 									@for (colorConfig of colorFields; track colorConfig.key) {
 										<div class="color-picker-item" (click)="focusColorInput(colorConfig.key)">
-											<span class="color-label">{{ colorConfig.label }}</span>
+											<div class="color-label-container">
+												<span class="color-label">{{ colorConfig.label }}</span>
+												<mat-icon
+													class="info-icon"
+													[matTooltip]="colorConfig.description"
+													matTooltipPosition="above"
+													matTooltipClass="color-info-tooltip"
+													(click)="$event.stopPropagation()"
+												>
+													info
+												</mat-icon>
+											</div>
 											<div class="color-circle-wrapper">
 												<input
 													[id]="colorConfig.key"
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss
index d1d0c89..94497b8 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss
@@ -80,6 +80,7 @@
 			transition:
 				transform 0.2s ease,
 				opacity 0.2s ease;
+			height: 140px;
 
 			&:hover {
 				transform: translateY(-2px);
@@ -90,13 +91,36 @@
 				transform: translateY(0);
 			}
 
+			.color-label-container {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: var(--ov-meet-spacing-xs);
+				height: 48px;
+				text-align: center;
+				margin-bottom: var(--ov-meet-spacing-xs);
+			}
+
 			.color-label {
 				font-size: 0.875rem;
 				font-weight: 500;
 				color: var(--ov-meet-text-color-primary);
-				text-align: center;
-				margin-bottom: var(--ov-meet-spacing-xs);
 				user-select: none;
+				line-height: 1.2;
+			}
+
+			.info-icon {
+				font-size: 16px;
+				width: 16px;
+				height: 16px;
+				color: var(--ov-meet-text-hint);
+				transition: color 0.2s ease;
+				cursor: help;
+				flex-shrink: 0;
+
+				&:hover {
+					color: var(--ov-meet-color-primary);
+				}
 			}
 
 			.color-circle-wrapper {
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.ts
index 28cb5bf..91a8bbc 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.ts
@@ -62,11 +62,11 @@ export class ConfigComponent implements OnInit {
 	baseThemeOptions: MeetRoomThemeMode[] = [MeetRoomThemeMode.LIGHT, MeetRoomThemeMode.DARK];
 
 	// Color picker configuration
-	colorFields: Array<{ key: ColorField; label: string }> = [
-		{ key: 'backgroundColor', label: 'Main Background' },
-		{ key: 'primaryColor', label: 'Button Colors' },
-		{ key: 'secondaryColor', label: 'Secondary Color' },
-		{ key: 'surfaceColor', label: 'Panels & Cards' }
+	colorFields: Array<{ key: ColorField; label: string, description: string }> = [
+		{ key: 'backgroundColor', label: 'Meeting Background', description: 'The background color of your meeting screen' },
+		{ key: 'primaryColor', label: 'Control buttons', description: 'The color of the main control buttons (e.g., microphone, camera)' },
+		{ key: 'secondaryColor', label: 'Highlights & accents', description: 'Colors for active states, borders, and participant names' },
+		{ key: 'surfaceColor', label: 'Side panels & boxes', description: 'Background color for side panels and dialog boxes' }
 	];
 
 	private initialFormValue: MeetRoomTheme | null = null;