frontend: update navigation and styling for overview component

This commit is contained in:
Carlos Santos 2025-10-01 16:08:48 +02:00
parent 918b2d164a
commit b93c228f6f
3 changed files with 26 additions and 10 deletions

View File

@ -34,7 +34,12 @@
</div> </div>
</mat-card-content> </mat-card-content>
<mat-card-actions> <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> <mat-icon>add</mat-icon>
Create Room Create Room
</button> </button>
@ -84,7 +89,11 @@
Create dedicated spaces for video conferences where participants can connect, Create dedicated spaces for video conferences where participants can connect,
collaborate, and communicate seamlessly. collaborate, and communicate seamlessly.
</p> </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> <mat-icon class="ov-action-icon">add</mat-icon>
Create Room Create Room
</button> </button>
@ -93,14 +102,18 @@
<mat-card class="feature-card"> <mat-card class="feature-card">
<mat-card-content> <mat-card-content>
<mat-icon class="ov-settings-icon material-symbols-outlined"> passkey </mat-icon> <mat-icon class="material-symbols-outlined"> palette </mat-icon>
<h3>Configure Authentication</h3> <h3>Customize the appearance</h3>
<p> <p>
Set up user authentication and manage access permissions to ensure secure and Personalize the look and feel of your video conference rooms to align with your
controlled participation in your video conferences. brand and style.
</p> </p>
<button mat-stroked-button (click)="navigateTo('users-permissions')" id="configure-auth-button"> <button
Go to Users & Permissions mat-stroked-button
(click)="navigateTo('config')"
id="configure-appearance-button"
>
Go to Configuration
</button> </button>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -114,7 +127,9 @@
Embed OpenVidu Meet into your applications using our comprehensive REST API for Embed OpenVidu Meet into your applications using our comprehensive REST API for
programmatic room creation and management. programmatic room creation and management.
</p> </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-content>
</mat-card> </mat-card>
</div> </div>

View File

@ -2,6 +2,7 @@
// Welcome State Styles // Welcome State Styles
.welcome-content { .welcome-content {
margin: 10px;
.welcome-card { .welcome-card {
max-width: var(--ov-meet-container-max-width); max-width: var(--ov-meet-container-max-width);
margin: 0 auto; margin: 0 auto;

View File

@ -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 { try {
await this.navigationService.navigateTo(section); await this.navigationService.navigateTo(section);
} catch (error) { } catch (error) {