frontend: refactor button styles to use primary-button class and update button types

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.html

@@ -52,9 +52,9 @@
 				<mat-icon>refresh</mat-icon>
 			</button>
 
-			<button mat-raised-button (click)="createRoom()" class="create-room-btn" id="create-room-btn">
+			<button mat-button (click)="createRoom()" class="create-room-btn primary-button" id="create-room-btn">
 				<mat-icon>add</mat-icon>
-				Create New Room
+				Create Room
 			</button>
 
 			@if (showFilters) {
@@ -325,7 +325,7 @@
 			<p>No rooms found. Create your first room to start hosting meetings and manage your video conferences.</p>
 
 			<div class="getting-started-actions">
-				<button mat-raised-button (click)="createRoom()" class="create-room-btn">
+				<button mat-button (click)="createRoom()" class="create-room-btn primary-button">
 					<mat-icon>add</mat-icon>
 					Create Your First Room
 				</button>

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss

@@ -251,16 +251,6 @@
 		flex-direction: column;
 		gap: var(--ov-meet-spacing-md);
 		align-items: center;
-
-		.create-room-btn,
-		.refresh-rooms-btn {
-			@include ov-button-base;
-
-			mat-icon {
-				@include ov-icon(md);
-				margin-right: var(--ov-meet-spacing-sm);
-			}
-		}
 	}
 }
 

frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html

@@ -79,7 +79,7 @@
 						<div class="no-api-key">
 							<h3>No API Key Generated</h3>
 							<p>Generate an API key to access OpenVidu Meet REST API endpoints.</p>
-							<button mat-raised-button class (click)="generateApiKey()">
+							<button mat-button class (click)="generateApiKey()" class="primary-button">
 								<mat-icon>vpn_key</mat-icon>
 								Generate API Key
 							</button>
@@ -179,10 +179,10 @@
 
 				<mat-card-actions>
 					<button
-						mat-raised-button
+						mat-button
-						color="primary"
 						(click)="saveWebhookConfig()"
 						[disabled]="webhookForm.invalid"
+						class="primary-button"
 					>
 						<mat-icon>save</mat-icon>
 						Save Configuration

frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.html

@@ -34,8 +34,8 @@
 						</div>
 					</mat-card-content>
 					<mat-card-actions>
-						<button mat-stroked-button (click)="navigateTo('rooms/new')">
+						<button mat-button (click)="navigateTo('rooms/new')" class="primary-button">
-							<mat-icon class="ov-action-icon">add</mat-icon>
+							<mat-icon>add</mat-icon>
 							Create Room
 						</button>
 						<button mat-button (click)="navigateTo('rooms')">

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts

@@ -360,7 +360,7 @@ export class RoomsComponent implements OnInit {
 		const bulkForceDeleteCallback = async () => {
 			try {
 				const roomIds = rooms.map((r) => r.roomId);
-				const response = await this.roomService.bulkDeleteRooms(roomIds, true); // force = true
+				const response = await this.roomService.bulkDeleteRooms(roomIds, true);
 
 				const currentRooms = this.rooms();
 				this.rooms.set(currentRooms.filter((r) => !roomIds.includes(r.roomId)));

frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.html

@@ -110,8 +110,8 @@
 				</mat-card-content>
 				<mat-card-actions>
 					<button
-						mat-raised-button
+						mat-button
-						color="primary"
+						class="primary-button"
 						type="submit"
 						[disabled]="adminCredentialsForm.invalid"
 						(click)="onSaveAdminCredentials()"
@@ -153,7 +153,7 @@
 					</form>
 				</mat-card-content>
 				<mat-card-actions>
-					<button mat-raised-button color="primary" type="submit" (click)="onSaveAccessSettings()">
+					<button mat-button type="submit" (click)="onSaveAccessSettings()" class="primary-button">
 						Save configuration
 					</button>
 				</mat-card-actions>

frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.scss

@@ -120,16 +120,12 @@
 		margin-top: var(--ov-meet-spacing-md);
 
 		.quick-action-button {
+			@include ov-button-base;
+			@include ov-theme-transition;
 			display: flex;
 			align-items: center;
 			gap: var(--ov-meet-spacing-sm);
 			color: var(--ov-meet-text-secondary);
-			@include ov-theme-transition;
-
-			// &:hover {
-			// 	color: var(--ov-meet-text-primary);
-			// 	background-color: var(--ov-meet-surface-hover);
-			// }
 		}
 	}
 }

frontend/src/assets/styles/_utilities.scss

@@ -19,6 +19,17 @@
 	background: var(--ov-meet-surface-color);
 }
 
+.primary-button {
+	@include ov-button-base;
+	background-color: var(--ov-meet-color-secondary);
+	color: var(--ov-meet-text-on-secondary) !important;
+
+	&.mat-mdc-button-disabled {
+		background-color: var(--ov-meet-color-secondary-light) !important;
+		color: var(--ov-meet-text-disabled);
+	}
+}
+
 // Spacing classes
 .ov-mt-xs {
 	margin-top: var(--ov-meet-spacing-xs);