client: minor CSS fixes

Author: avine

client/src/app/give-feedback/give-requested-feedback/give-requested-feedback.component.html

@@ -33,7 +33,7 @@ <h1 class="gbl-page-title">
 
 <form [formGroup]="form" [appConfirmBeforeSubmit]="onSubmit.bind(this)" appConfirmBeforeSubmitConfig="sendFeedback">
   @if (anonymous) {
-    <h3 class="gbl-title-large">
+    <h3 class="app-give-requested-feedback__anonymous-heading">
       <mat-icon>voice_selection</mat-icon>
       <ng-container i18n="@@Component.GiveRequestedFeedback.You">Vous</ng-container>
     </h3>
@@ -51,7 +51,7 @@ <h3 class="gbl-title-large">
       <mat-icon matSuffix class="opacity-50">edit_off</mat-icon>
     </mat-form-field>
 
-    <h3 class="gbl-title-large">
+    <h3 class="app-give-requested-feedback__anonymous-heading">
       <mat-icon>hearing</mat-icon>
       <ng-container i18n="@@Component.GiveRequestedFeedback.YourColleague">Votre collègue</ng-container>
     </h3>

client/src/app/give-feedback/give-requested-feedback/give-requested-feedback.component.scss

@@ -0,0 +1,10 @@
+.app-give-requested-feedback {
+  &__anonymous-heading {
+    margin: 0 0 0.75em 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font: var(--mat-sys-title-large);
+    letter-spacing: var(--mat-sys-title-large-tracking);
+  }
+}

client/src/app/give-feedback/give-requested-feedback/give-requested-feedback.component.ts

@@ -36,6 +36,7 @@ import { GiveRequestedFeedbackData } from './give-requested-feedback.types';
   ],
   providers: [LeaveFormService],
   templateUrl: './give-requested-feedback.component.html',
+  styleUrl: './give-requested-feedback.component.scss',
   encapsulation: ViewEncapsulation.None,
 })
 export class GiveRequestedFeedbackComponent implements GiveRequestedFeedbackData, LeaveForm, OnInit {

client/src/app/home/home.component.html

@@ -1,12 +1,12 @@
 <h1 class="gbl-landing__title" i18n="@@Title.AppTagline">Demandez et donnez du feedback à vos collègues</h1>
 
 <div class="gbl-landing-links">
-  <button class="gbl-landing-links__item gbl-title-medium" routerLink="/request">
+  <button class="gbl-landing-links__item" routerLink="/request">
     <mat-icon class="gbl-landing-links__icon">contact_support</mat-icon>
     <ng-container i18n="@@Feedback.Request"> Demander </ng-container>
   </button>
 
-  <button class="gbl-landing-links__item gbl-title-medium" routerLink="/give">
+  <button class="gbl-landing-links__item" routerLink="/give">
     <mat-icon class="gbl-landing-links__icon">chat</mat-icon>
     <ng-container i18n="@@Feedback.Give"> Donner </ng-container>
   </button>

client/src/app/sign-in/sign-in.component.html

@@ -2,12 +2,7 @@ <h1 class="gbl-landing__title" i18n="@@Title.AppTagline">Demandez et donnez du f
 
 @if (withGoogleEnabled) {
   <div class="gbl-landing-links">
-    <button
-      class="gbl-landing-links__item gbl-title-medium"
-      type="button"
-      [disabled]="disabled()"
-      (click)="signInWithGoogle()"
-    >
+    <button class="gbl-landing-links__item" type="button" [disabled]="disabled()" (click)="signInWithGoogle()">
       <mat-icon class="gbl-landing-links__icon rounded-full bg-white" svgIcon="app-icon-google"></mat-icon>
       <ng-container i18n="@@Action.SignInWithGoogle">Se connecter avec Google</ng-container>
     </button>

client/src/app/stats/stats-details/stats-details.component.html

@@ -1,8 +1,8 @@
-<h2 class="gbl-title-large !mt-6 text-center">Users overview</h2>
+<h2 class="app-stats-details__heading !mt-6">Users overview</h2>
 <div echarts [theme]="chartTheme()" [options]="usersOverviewChartOptions()" class="app-stats-details__chart"></div>
 
-<h2 class="gbl-title-large text-center">Givers and receivers</h2>
+<h2 class="app-stats-details__heading">Givers and receivers</h2>
 <div echarts [theme]="chartTheme()" [options]="giversAndReceiversChartOptions()" class="app-stats-details__chart"></div>
 
-<h2 class="gbl-title-large text-center">FeedZbacks</h2>
+<h2 class="app-stats-details__heading">FeedZbacks</h2>
 <div echarts [theme]="chartTheme()" [options]="feedbacksChartOptions()" class="app-stats-details__chart"></div>

client/src/app/stats/stats-details/stats-details.component.scss

@@ -1,4 +1,11 @@
 .app-stats-details {
+  &__heading {
+    margin: 0 0 0.5em 0;
+    font: var(--mat-sys-title-large);
+    letter-spacing: var(--mat-sys-title-large-tracking);
+    text-align: center;
+  }
+
   &__chart {
     height: max(33vh, 320px);
   }

client/src/app/stats/stats-summary/stats-summary.component.html

@@ -2,7 +2,7 @@
   <mat-slide-toggle [checked]="showLegend()" (toggleChange)="toggleLegend()">Show legend</mat-slide-toggle>
 </p>
 
-<h2 class="gbl-title-large !mt-6">Users</h2>
+<h2 class="app-stats-summary__heading !mt-6">Users</h2>
 <ul class="gbl-list">
   <li class="gbl-list__item">
     <strong>{{ summary().uniqueUsers }}</strong> unique users
@@ -48,7 +48,7 @@ <h2 class="gbl-title-large !mt-6">Users</h2>
   </li>
 </ul>
 
-<h2 class="gbl-title-large">FeedZbacks</h2>
+<h2 class="app-stats-summary__heading">FeedZbacks</h2>
 <ul class="gbl-list">
   <li class="gbl-list__item">
     <strong>{{ summary().spontaneousFeedback }}</strong> spontaneous feedZbacks
@@ -81,7 +81,7 @@ <h2 class="gbl-title-large">FeedZbacks</h2>
   </li>
 </ul>
 
-<h2 class="gbl-title-large">Period</h2>
+<h2 class="app-stats-summary__heading">Period</h2>
 <ul class="gbl-list">
   <li class="gbl-list__item">
     From <strong>{{ period().start }}</strong> to <strong>{{ period().end }}</strong>

client/src/app/stats/stats-summary/stats-summary.component.scss

@@ -1,4 +1,10 @@
 .app-stats-summary {
+  &__heading {
+    margin: 0 0 0.5em 0;
+    font: var(--mat-sys-title-large);
+    letter-spacing: var(--mat-sys-title-large-tracking);
+  }
+
   &__legend {
     margin-bottom: 0.75rem;
     font: var(--mat-sys-label-large);

client/src/styles/landing.scss

@@ -88,6 +88,8 @@
       border: 1px solid var(--mat-sys-outline-variant);
       background: var(--mat-sys-primary);
       color: var(--mat-sys-on-primary);
+      font: var(--mat-sys-title-medium);
+      letter-spacing: var(--mat-sys-title-medium-tracking);
       transition: all 150ms ease-in-out;
 
       @include m.media-breakpoint-down(md) {