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

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

Browse Source
This commit is contained in:
Carlos Santos 2025-07-16 12:06:02 +02:00
parent 2082e5ab74
commit 5ab0319302
8 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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);
}
}
}
}

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

@ -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
color="primary"
mat-button
(click)="saveWebhookConfig()"
[disabled]="webhookForm.invalid"
class="primary-button"
>
<mat-icon>save</mat-icon>
Save Configuration

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

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

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

@ -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)));

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

@ -110,8 +110,8 @@
</mat-card-content>
<mat-card-actions>
<button
mat-raised-button
color="primary"
mat-button
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>

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

@ -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);
// }
}
}
}

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

@ -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);