From 5571fb640233d4a4e8d54213d1824a85b23a7502 Mon Sep 17 00:00:00 2001
From: Maxime Robert <maxime.robert@smile.fr>
Date: Wed, 16 Oct 2024 18:08:40 +0200
Subject: [PATCH] Fix #12348: fix display bugs in Collecte

---
 .../components/footer/footer.component.html   |  2 +-
 .../components/stepper/stepper.component.ts   | 29 +++++++-
 ui/ui-frontend-common/src/sass/_button.scss   |  7 +-
 ui/ui-frontend-common/src/sass/_theme.scss    |  2 +
 .../src/sass/base/_typography.scss            | 64 +++++++++++++++--
 .../src/sass/material/_modal.scss             | 12 +++-
 .../src/sass/mixins/_fonts.scss               |  4 --
 .../sass/variables/_bootstrap-variables.scss  | 11 +++
 .../archive-search/src/sass/styles.scss       |  1 -
 .../create-project.component.html             | 70 ++++++++-----------
 .../create-project.component.scss             | 24 +++----
 .../projects/collect/src/sass/styles.scss     |  1 -
 .../profiles-tab/profiles-tab.component.html  |  2 +-
 .../user-group-tab.component.html             |  8 +--
 .../projects/identity/src/sass/styles.scss    |  4 --
 .../projects/ingest/src/sass/styles.scss      |  4 --
 .../projects/pastis/src/sass/styles.scss      |  1 -
 .../projects/portal/src/sass/styles.scss      |  1 -
 .../projects/referential/src/sass/styles.scss |  1 -
 19 files changed, 156 insertions(+), 92 deletions(-)

diff --git a/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html b/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html
index 16c932fcdb2..54d9b39dca9 100644
--- a/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html
@@ -1,4 +1,4 @@
 <div class="d-flex flex-column align-items-center">
   <div><img alt="compagny logo" [src]="footerLogoUrl" class="logo" /></div>
-  <div class="text normal spaced primary-300">{{ version }}</div>
+  <div class="text normal primary">{{ version }}</div>
 </div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
index 987bff7a0a5..2c216e4ff6a 100644
--- a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
@@ -34,8 +34,10 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
+import { Directionality } from '@angular/cdk/bidi';
 import { CdkStepper } from '@angular/cdk/stepper';
-import { Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Inject, Injector, Input, Optional } from '@angular/core';
 import { transitionAnimation } from '../../animations/vitamui-common-animations';
 
 @Component({
@@ -47,4 +49,27 @@ import { transitionAnimation } from '../../animations/vitamui-common-animations'
   providers: [{ provide: CdkStepper, useExisting: StepperComponent }],
   animations: [transitionAnimation],
 })
-export class StepperComponent extends CdkStepper {}
+export class StepperComponent extends CdkStepper {
+  @Input() disableScrollToTop = false;
+
+  constructor(
+    @Optional() dir: Directionality,
+    changeDetectorRef: ChangeDetectorRef,
+    private elementRef: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) document?: any,
+  ) {
+    super(dir, changeDetectorRef, elementRef, document);
+  }
+
+  // Automatically scroll to the top of the stepper after changing step (inspired by https://github.com/angular/components/issues/8881)
+  @HostListener('selectionChange')
+  selectionChanged() {
+    if (!this.disableScrollToTop) {
+      this.elementRef.nativeElement.scrollIntoView({
+        block: 'start',
+        inline: 'nearest',
+        behavior: 'smooth',
+      });
+    }
+  }
+}
diff --git a/ui/ui-frontend-common/src/sass/_button.scss b/ui/ui-frontend-common/src/sass/_button.scss
index e06da0ff7b1..30333a1bad8 100644
--- a/ui/ui-frontend-common/src/sass/_button.scss
+++ b/ui/ui-frontend-common/src/sass/_button.scss
@@ -64,22 +64,17 @@
 }
 
 .btn {
+  @extend .button-medium;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50px;
-  font-style: normal;
-  font-weight: bold;
 
-  line-height: 20px;
   border-radius: 50px;
   padding: 0 30px 0 30px;
   outline: none;
   white-space: nowrap;
-  font-size: 14px;
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
 
   flex-shrink: 0;
 
diff --git a/ui/ui-frontend-common/src/sass/_theme.scss b/ui/ui-frontend-common/src/sass/_theme.scss
index 1424264ca6c..f8b00755d3c 100644
--- a/ui/ui-frontend-common/src/sass/_theme.scss
+++ b/ui/ui-frontend-common/src/sass/_theme.scss
@@ -30,3 +30,5 @@
 
 @import 'base/base';
 @import 'base/utilities';
+
+@import 'bootstrap/scss/bootstrap-grid';
diff --git a/ui/ui-frontend-common/src/sass/base/_typography.scss b/ui/ui-frontend-common/src/sass/base/_typography.scss
index e79bad47965..2695645c160 100644
--- a/ui/ui-frontend-common/src/sass/base/_typography.scss
+++ b/ui/ui-frontend-common/src/sass/base/_typography.scss
@@ -11,27 +11,36 @@ h5 {
 
 h1 {
   font-size: 96px;
+  line-height: 112px;
   font-weight: 800;
+  letter-spacing: -2.5px;
 }
 
 h2 {
   font-size: 60px;
+  line-height: 72px;
   font-weight: 900;
+  letter-spacing: -1px;
 }
 
 h3 {
   font-size: 42px;
+  line-height: 42px;
   font-weight: 800;
+  letter-spacing: -0.5px;
 }
 
 h4 {
   font-size: 30px;
-  font-weight: 600;
+  line-height: 36px;
+  font-weight: 700;
 }
 
 h5 {
   font-size: 24px;
+  line-height: 32px;
   font-weight: 800;
+  letter-spacing: -0.5px;
 }
 
 .text {
@@ -41,18 +50,31 @@ h5 {
 
   &.large {
     font-size: 20px;
+    line-height: 28px;
   }
 
   &.medium {
     font-size: 16px;
+    line-height: 24px;
   }
 
   &.normal {
     font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0.1px;
   }
 
   &.caption {
     font-size: 12px;
+    line-height: 16px;
+    letter-spacing: -0.2px;
+  }
+
+  &.subcaption {
+    font-size: 9px;
+    line-height: 13px;
+    letter-spacing: -0.2px;
+    font-weight: bold; // Subcaption only exists in bold
   }
 
   &.bold {
@@ -64,10 +86,6 @@ h5 {
     cursor: pointer;
   }
 
-  &.spaced {
-    letter-spacing: 0.8px;
-  }
-
   &.uppercase {
     text-transform: uppercase;
   }
@@ -79,6 +97,42 @@ h5 {
   @include text-colors;
 }
 
+@mixin button {
+  @extend .text;
+  @extend .bold;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.button {
+  &-large {
+    @include button;
+    @extend .medium;
+    line-height: 20px;
+
+    &-under {
+      text-decoration-line: underline;
+    }
+  }
+  &-medium {
+    @include button;
+    @extend .normal;
+    line-height: 18px;
+
+    &-under {
+      text-decoration-line: underline;
+    }
+  }
+  &-small {
+    @include button;
+    @extend .caption;
+
+    &-under {
+      text-decoration-line: underline;
+    }
+  }
+}
+
 .no-wrap {
   white-space: nowrap;
 }
diff --git a/ui/ui-frontend-common/src/sass/material/_modal.scss b/ui/ui-frontend-common/src/sass/material/_modal.scss
index daa7982a8fc..456fd00d45b 100644
--- a/ui/ui-frontend-common/src/sass/material/_modal.scss
+++ b/ui/ui-frontend-common/src/sass/material/_modal.scss
@@ -1,3 +1,5 @@
+@use 'bootstrap/scss/bootstrap-grid';
+
 $arrow-size: 70px;
 $header-height: 72px !default;
 $footer-height: 100px !default;
@@ -14,11 +16,14 @@ $footer-height: 100px !default;
   @extend %mat-dialog-container;
 
   .header {
-    padding: 30px 60px 20px 60px;
+    @extend .pt-5;
+    @extend .pb-4;
+    @extend .px-8;
   }
 
   .content {
-    padding: 0 60px 30px 60px;
+    @extend .px-6;
+    @extend .pb-6;
 
     // dialog title
     > .text.large:first-of-type {
@@ -26,8 +31,8 @@ $footer-height: 100px !default;
     }
 
     .actions:last-of-type {
+      @extend .mt-6;
       display: flex;
-      margin-top: 35px;
     }
 
     .actions:last-of-type > button:not(:last-child) {
@@ -35,6 +40,7 @@ $footer-height: 100px !default;
     }
 
     .main-content {
+      @extend .mt-5;
       min-height: 25vh;
     }
   }
diff --git a/ui/ui-frontend-common/src/sass/mixins/_fonts.scss b/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
index 9ee1a9d5fed..b495bb6807f 100644
--- a/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
+++ b/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
@@ -19,10 +19,6 @@
     color: var(--vitamui-primary);
   }
 
-  &.primary-300 {
-    color: var(--vitamui-primary-300);
-  }
-
   &.secondary {
     color: var(--vitamui-secondary);
   }
diff --git a/ui/ui-frontend-common/src/sass/variables/_bootstrap-variables.scss b/ui/ui-frontend-common/src/sass/variables/_bootstrap-variables.scss
index d4bc29d519c..4bdc7ff32ee 100644
--- a/ui/ui-frontend-common/src/sass/variables/_bootstrap-variables.scss
+++ b/ui/ui-frontend-common/src/sass/variables/_bootstrap-variables.scss
@@ -1 +1,12 @@
 $grid-gutter-width: 20px;
+$spacers: (
+  0: 0,
+  1: 5px,
+  2: 10px,
+  3: 15px,
+  4: 20px,
+  5: 30px,
+  6: 40px,
+  7: 50px,
+  8: 60px,
+);
diff --git a/ui/ui-frontend/projects/archive-search/src/sass/styles.scss b/ui/ui-frontend/projects/archive-search/src/sass/styles.scss
index d4a53755018..05695ffe629 100644
--- a/ui/ui-frontend/projects/archive-search/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/archive-search/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import '~ui-frontend-common/sass/icons/vitamui-icons.css';
 @import '~ui-frontend-common/sass/theme';
-@import '~bootstrap/scss/bootstrap-grid';
 
 @import '~ui-frontend-common/sass/fonts/font-styles.css';
 
diff --git a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html
index ffcd82f3ffe..944724358a3 100644
--- a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html
+++ b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html
@@ -11,8 +11,8 @@
     <!-- ########## stepIndex 1 : workflow 1-2-3 , step 1/6 : Choix du type de projet ########## -->
     <cdk-step>
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.MODAL.WORKFLOW_CHOICE' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.MODAL.WORKFLOW_CHOICE' | translate }}</div>
         <div class="main-content">
           <mat-button-toggle-group class="vitamui-button-toggle-group">
             <mat-button-toggle value="{{ Workflow.MANUAL }}" (click)="setWorkflow(Workflow.MANUAL)" [checked]="true">
@@ -39,8 +39,8 @@ <h2>{{ 'COLLECT.MODAL.WORKFLOW_CHOICE' | translate }}</h2>
     <!-- ########## stepIndex 2 : workflow 1-2-3 , step 2/6 : Description du versement ########## -->
     <cdk-step>
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.PROJECT_DESCRIPTION_SUB_TITLE' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.PROJECT_DESCRIPTION_SUB_TITLE' | translate }}</div>
         <div class="main-content">
           <div class="row">
             <vitamui-common-input
@@ -62,7 +62,7 @@ <h2>{{ 'COLLECT.PROJECT_DESCRIPTION_SUB_TITLE' | translate }}</h2>
 
           <div class="row">
             <div class="col">
-              <h4>{{ 'COLLECT.PROJECT_DESCRIPTION_SERVICES' | translate }}</h4>
+              <div class="text medium light">{{ 'COLLECT.PROJECT_DESCRIPTION_SERVICES' | translate }}</div>
             </div>
             <div class="col toggle-right">
               <vitamui-common-slide-toggle
@@ -78,7 +78,7 @@ <h4>{{ 'COLLECT.PROJECT_DESCRIPTION_SERVICES' | translate }}</h4>
 
           <div class="row">
             <vitamui-common-input
-              class="col"
+              class="col-5"
               formControlName="originatingAgencyIdentifier"
               placeholder="{{ 'COLLECT.PROJECT_DESCRIPTION_ORIGINATING_AGENCY' | translate }}"
               required
@@ -86,14 +86,14 @@ <h4>{{ 'COLLECT.PROJECT_DESCRIPTION_SERVICES' | translate }}</h4>
             </vitamui-common-input>
             <vitamui-common-input
               [disabled]="true"
-              class="col offset-1"
+              class="col"
               placeholder="{{ 'COLLECT.PROJECT_DESCRIPTION_ORIGINATING_AGENCY' | translate }}"
             >
             </vitamui-common-input>
           </div>
           <div class="row">
             <vitamui-common-input
-              class="col"
+              class="col-5"
               formControlName="submissionAgencyIdentifier"
               placeholder="{{ 'COLLECT.PROJECT_DESCRIPTION_SUBMISSION_AGENCY' | translate }}"
               required
@@ -101,7 +101,7 @@ <h4>{{ 'COLLECT.PROJECT_DESCRIPTION_SERVICES' | translate }}</h4>
             </vitamui-common-input>
             <vitamui-common-input
               [disabled]="true"
-              class="col offset-1"
+              class="col"
               placeholder="{{ 'COLLECT.PROJECT_DESCRIPTION_SUBMISSION_AGENCY' | translate }}"
             >
             </vitamui-common-input>
@@ -127,10 +127,10 @@ <h4>{{ 'COLLECT.PROJECT_DESCRIPTION_SERVICES' | translate }}</h4>
     <!-- ########## stepIndex 3 : workflow 1-2-3 , step 3/6 : Contexte du versement ########## -->
     <cdk-step>
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
         <div class="row">
           <div class="col">
-            <h2>{{ 'COLLECT.PROJECT_CONTEXT_SUB_TITLE' | translate }}</h2>
+            <div class="text large bold">{{ 'COLLECT.PROJECT_CONTEXT_SUB_TITLE' | translate }}</div>
           </div>
           <div class="col toggle-right">
             <vitamui-common-slide-toggle
@@ -146,22 +146,18 @@ <h2>{{ 'COLLECT.PROJECT_CONTEXT_SUB_TITLE' | translate }}</h2>
         <div class="main-content">
           <div class="row">
             <vitamui-common-input
-              class="col"
+              class="col-5"
               formControlName="archivalAgencyIdentifier"
               placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVAL_AGENCY' | translate }}"
               required
             >
             </vitamui-common-input>
-            <vitamui-common-input
-              [disabled]="true"
-              class="col offset-1"
-              placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVAL_AGENCY' | translate }}"
-            >
+            <vitamui-common-input [disabled]="true" class="col" placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVAL_AGENCY' | translate }}">
             </vitamui-common-input>
           </div>
           <div class="row">
             <vitamui-common-input
-              class="col"
+              class="col-5"
               formControlName="transferringAgencyIdentifier"
               placeholder="{{ 'COLLECT.PROJECT_CONTEXT_TRANSFERRING_AGENCY' | translate }}"
               required
@@ -169,14 +165,14 @@ <h2>{{ 'COLLECT.PROJECT_CONTEXT_SUB_TITLE' | translate }}</h2>
             </vitamui-common-input>
             <vitamui-common-input
               [disabled]="true"
-              class="col offset-1"
+              class="col"
               placeholder="{{ 'COLLECT.PROJECT_CONTEXT_TRANSFERRING_AGENCY' | translate }}"
             >
             </vitamui-common-input>
           </div>
           <div class="row">
             <vitamui-common-input
-              class="col"
+              class="col-5"
               formControlName="archivalAgreement"
               placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVAL_AGREEMENT' | translate }}"
               required
@@ -184,23 +180,19 @@ <h2>{{ 'COLLECT.PROJECT_CONTEXT_SUB_TITLE' | translate }}</h2>
             </vitamui-common-input>
             <vitamui-common-input
               [disabled]="true"
-              class="col offset-1"
+              class="col"
               placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVAL_AGREEMENT' | translate }}"
             >
             </vitamui-common-input>
           </div>
           <div class="row">
             <vitamui-common-input
-              class="col"
+              class="col-5"
               formControlName="archiveProfile"
               placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVE_PROFILE' | translate }}"
             >
             </vitamui-common-input>
-            <vitamui-common-input
-              [disabled]="true"
-              class="col offset-1"
-              placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVE_PROFILE' | translate }}"
-            >
+            <vitamui-common-input [disabled]="true" class="col" placeholder="{{ 'COLLECT.PROJECT_CONTEXT_ARCHIVE_PROFILE' | translate }}">
             </vitamui-common-input>
           </div>
           <div class="row">
@@ -246,8 +238,8 @@ <h2>{{ 'COLLECT.PROJECT_CONTEXT_SUB_TITLE' | translate }}</h2>
     <!-- ########## stepIndex 4 : workflow 1     , step 4/6 : Upload fichiers ########## -->
     <cdk-step *ngIf="selectedWorkflow === Workflow.MANUAL">
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.MODAL.UPLOAD_SUB_TITLE' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.MODAL.UPLOAD_SUB_TITLE' | translate }}</div>
         <div class="main-content">
           <div
             class="drag-and-drop-area"
@@ -302,8 +294,8 @@ <h2>{{ 'COLLECT.MODAL.UPLOAD_SUB_TITLE' | translate }}</h2>
     <!-- stepIndex 5 : workflow 2-3   , step 4/6 : Choisir le type de rattachement -->
     <cdk-step *ngIf="selectedWorkflow === Workflow.FLOW">
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.MODAL.FLOW_WORKFLOW_TYPE_CHOICE' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.MODAL.FLOW_WORKFLOW_TYPE_CHOICE' | translate }}</div>
         <div class="main-content gap-20">
           <mat-button-toggle-group class="vitamui-button-toggle-group">
             <mat-button-toggle value="{{ FlowType.FIX }}" (click)="setFlowType(FlowType.FIX)" [checked]="true">
@@ -345,8 +337,8 @@ <h2>{{ 'COLLECT.MODAL.FLOW_WORKFLOW_TYPE_CHOICE' | translate }}</h2>
     <!-- stepIndex 6 : workflow 1-2   , step 5/6 : Définir la position fixe de rattachement -->
     <cdk-step *ngIf="selectedWorkflow === Workflow.MANUAL || selectedFlowType === FlowType.FIX">
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.MODAL.ARCHIVE_POSITION_SUB_TITLE' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.MODAL.ARCHIVE_POSITION_SUB_TITLE' | translate }}</div>
         <div class="main-content">
           <div class="form-group">
             <vitamui-library-filing-plan
@@ -378,8 +370,8 @@ <h2>{{ 'COLLECT.MODAL.ARCHIVE_POSITION_SUB_TITLE' | translate }}</h2>
     <!-- stepIndex 7 : workflow 3     , step 5/6 : Parametrer les regles de rattachement -->
     <cdk-step *ngIf="selectedWorkflow === Workflow.FLOW && selectedFlowType === FlowType.RULES">
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.MODAL.RULES_TITLE' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.MODAL.RULES_TITLE' | translate }}</div>
         <div class="main-content">
           <ng-container formArrayName="rulesParams">
             <div class="object-container" *ngFor="let ruleParamForm of rulesParams.controls; let index = index">
@@ -508,8 +500,8 @@ <h2>{{ 'COLLECT.MODAL.RULES_TITLE' | translate }}</h2>
     <!-- stepIndex 8 : workflow 1     , step 6/6     : Upload fichiers -->
     <cdk-step *ngIf="selectedWorkflow === Workflow.MANUAL">
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.MODAL.UPLOAD_FILES' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.MODAL.UPLOAD_FILES' | translate }}</div>
         <div class="main-content">
           <div class="new-design-table">
             <div class="new-design-row new-design-head">
@@ -546,8 +538,8 @@ <h2>{{ 'COLLECT.MODAL.UPLOAD_FILES' | translate }}</h2>
     <!-- workflow 2-3 step 6/6   : Projet de versement cree -->
     <cdk-step *ngIf="selectedWorkflow === Workflow.FLOW">
       <div class="content">
-        <h4>{{ 'COLLECT.MODAL.TITLE' | translate }}</h4>
-        <h2>{{ 'COLLECT.MODAL.PROJECT_CREATED' | translate }}</h2>
+        <div class="text medium light">{{ 'COLLECT.MODAL.TITLE' | translate }}</div>
+        <div class="text large bold">{{ 'COLLECT.MODAL.PROJECT_CREATED' | translate }}</div>
         <div class="main-content"></div>
         <div class="actions">
           <button (click)="close()" [disabled]="pending" class="btn primary" type="button">
diff --git a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss
index 176d2db9b30..2758a112656 100644
--- a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss
+++ b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss
@@ -1,5 +1,11 @@
+@import '~bootstrap/scss/bootstrap-grid';
 @import '~ui-frontend-common/sass/variables/colors';
 
+.header {
+  @extend .pt-5;
+  @extend .px-5;
+}
+
 .content {
   .main-content {
     display: flex;
@@ -22,19 +28,6 @@
   }
 }
 
-h2 {
-  font-size: 23px;
-  line-height: 46px;
-  margin-top: 10px;
-}
-
-h4 {
-  font-size: 19px;
-  line-height: 26px;
-  margin-top: 7px;
-  margin-bottom: 7px;
-}
-
 .drag-and-drop-area {
   width: 100%;
   height: 25vh;
@@ -236,6 +229,10 @@ h4 {
   }
 }
 
+.row {
+  width: 100%;
+}
+
 .col {
   display: flex;
   flex-direction: column;
@@ -249,7 +246,6 @@ h4 {
 }
 
 .toggle-right {
-  margin-top: 7px;
   align-items: end;
   justify-content: center;
 }
diff --git a/ui/ui-frontend/projects/collect/src/sass/styles.scss b/ui/ui-frontend/projects/collect/src/sass/styles.scss
index d4a53755018..05695ffe629 100644
--- a/ui/ui-frontend/projects/collect/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/collect/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import '~ui-frontend-common/sass/icons/vitamui-icons.css';
 @import '~ui-frontend-common/sass/theme';
-@import '~bootstrap/scss/bootstrap-grid';
 
 @import '~ui-frontend-common/sass/fonts/font-styles.css';
 
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html b/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html
index ca47e8ad1f6..a4512f2f8d9 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html
@@ -4,7 +4,7 @@
 
 <div class="d-flex justify-content-between align-items-center p-3 mb-2 vitamui-profile-list" *ngFor="let profile of profilesDisplay">
   <div>
-    <div class="text caption spaced light mb-1">{{ 'APPLICATION.' + profile.appId + '.NAME' | translate }}</div>
+    <div class="text caption light mb-1">{{ 'APPLICATION.' + profile.appId + '.NAME' | translate }}</div>
     <div class="text medium">{{ profile?.tenantName }} : {{ profile?.profileName | titlecase }}</div>
   </div>
 
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html
index 27c46e3cd85..2d950ad69fa 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html
@@ -7,22 +7,22 @@
 
   <div *ngIf="userGroup">
     <div class="mb-3">
-      <p class="text normal spaced light mb-1">{{ 'USER.GROUP.GROUP' | translate }}</p>
+      <p class="text normal light mb-1">{{ 'USER.GROUP.GROUP' | translate }}</p>
       <p class="text medium m-0">{{ userGroup?.name }}</p>
     </div>
 
     <div class="mb-3">
-      <p class="text normal spaced light mb-1">{{ 'USER.GROUP.LEVEL' | translate }}</p>
+      <p class="text normal light mb-1">{{ 'USER.GROUP.LEVEL' | translate }}</p>
       <p class="text medium m-0">{{ userGroup?.level }}</p>
     </div>
 
     <div class="mb-3">
-      <p class="text normal spaced light mb-1">{{ 'USER.GROUP.DESCRIPTION' | translate }}</p>
+      <p class="text normal light mb-1">{{ 'USER.GROUP.DESCRIPTION' | translate }}</p>
       <p class="text medium m-0">{{ userGroup?.description }}</p>
     </div>
   </div>
 
-  <p class="text normal spaced light mt-5">{{ 'USER.GROUP.PROFILE' | translate }}</p>
+  <p class="text normal light mt-5">{{ 'USER.GROUP.PROFILE' | translate }}</p>
   <div class="d-flex justify-content-between align-items-center p-3 mb-2 vitamui-profile-list" *ngFor="let profile of groupProfiles">
     <div>
       <div class="text medium">{{ profile?.name }}</div>
diff --git a/ui/ui-frontend/projects/identity/src/sass/styles.scss b/ui/ui-frontend/projects/identity/src/sass/styles.scss
index e4bf69b7c59..710ba06d1ba 100644
--- a/ui/ui-frontend/projects/identity/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/identity/src/sass/styles.scss
@@ -2,10 +2,6 @@
 @import '~ui-frontend-common/sass/theme';
 @import '~ui-frontend-common/sass/fonts/font-styles.css';
 
-$grid-gutter-width: 20px;
-
-@import '~bootstrap/scss/bootstrap-grid';
-
 @import 'form';
 @import 'login';
 @import 'sidepanel';
diff --git a/ui/ui-frontend/projects/ingest/src/sass/styles.scss b/ui/ui-frontend/projects/ingest/src/sass/styles.scss
index 5b0b357bf92..a36bf10199f 100644
--- a/ui/ui-frontend/projects/ingest/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/ingest/src/sass/styles.scss
@@ -4,10 +4,6 @@
 @import '~ui-frontend-common/sass/theme';
 @import '~ui-frontend-common/sass/fonts/font-styles.css';
 
-$grid-gutter-width: 20px;
-
-@import '~bootstrap/scss/bootstrap-grid';
-
 @import 'date-filter';
 @import 'form';
 @import 'login';
diff --git a/ui/ui-frontend/projects/pastis/src/sass/styles.scss b/ui/ui-frontend/projects/pastis/src/sass/styles.scss
index 06bc3c72fe1..bd49a3e59e8 100644
--- a/ui/ui-frontend/projects/pastis/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/pastis/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import '~ui-frontend-common/sass/icons/vitamui-icons.css';
 @import '~ui-frontend-common/sass/theme';
-@import '~bootstrap/scss/bootstrap-grid';
 @import 'toaster';
 
 @import '~ui-frontend-common/sass/fonts/font-styles.css';
diff --git a/ui/ui-frontend/projects/portal/src/sass/styles.scss b/ui/ui-frontend/projects/portal/src/sass/styles.scss
index 536663ba19e..9ce62a83bc3 100644
--- a/ui/ui-frontend/projects/portal/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/portal/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import '~ui-frontend-common/sass/icons/vitamui-icons.css';
 @import '~ui-frontend-common/sass/theme';
-@import '~bootstrap/scss/bootstrap-grid';
 @import '~ui-frontend-common/sass/fonts/font-styles.css';
 
 // Override applications icons colors for theming
diff --git a/ui/ui-frontend/projects/referential/src/sass/styles.scss b/ui/ui-frontend/projects/referential/src/sass/styles.scss
index b9f2e433d38..8821a9a5f43 100644
--- a/ui/ui-frontend/projects/referential/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/referential/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import '~ui-frontend-common/sass/icons/vitamui-icons.css';
 @import '~ui-frontend-common/sass/theme';
-@import '~bootstrap/scss/bootstrap-grid';
 
 @import '~ui-frontend-common/sass/fonts/font-styles.css';