src/app/profile/profile.component.scss

@@ -6,25 +6,30 @@
 @import 'layout';
 
 .content-container {
+  padding-block: 2rem;
+  box-sizing: border-box;
+  scrollbar-gutter: stable !important;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
-  padding-block: 16px;
-  box-sizing: border-box;
-  scrollbar-gutter: stable !important;
+  gap: 40px;
   @media #{$tablet} {
     padding: 1rem;
   }
 }
+.goBack {
+  max-width: 980px;
+  width: 100%;
+}
+
 section {
   width: $content-desktop-width;
   display: flex;
-  gap: 1.5rem;
+  gap: 2em;
   flex-direction: column;
   align-items: flex-start;
   box-sizing: border-box;
-  padding: 40px;
+  padding: 2rem;
   background: $white;
   border: 1px solid $grey-6;
   border-radius: 8px;
@@ -40,14 +45,8 @@ section {
     width: 100%;
   }
   h1 {
-    margin: 0;
-    @include font-regular-24;
-    color: $grey-1;
-    flex-grow: 1;
-  }
-
-  .call-to-action {
-    margin-top: 40px;
+    @include font-bold-18;
+    text-transform: uppercase;
   }
 
   .backArrow {
@@ -56,47 +55,66 @@ section {
 }
 
 .profile {
-  @include font-regular-15;
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+
   .avatar {
     height: 112px;
     width: 112px;
     background: $grey-9;
     border-radius: 8px;
-    margin-right: 16px;
     @media #{$tablet} {
       display: none;
     }
   }
   .information {
-    .name {
-      @include font-bold-18;
-      min-height: 24px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    line-height: 120%;
+
+    .block {
+      border-bottom: 1px solid $grey-7;
+      padding-bottom: 12px;
     }
-    .job {
-      min-height: 24px;
+    .name {
+      @include font-bold-20;
       margin-bottom: 8px;
     }
-    .phone {
-      min-height: 24px;
+    .job {
+      @include font-regular-15;
+      color: $grey-4-text;
     }
-    .email {
-      display: block;
-      @include font-regular-14;
-      height: 24px;
-      text-decoration: underline;
+
+    .contact {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
       color: $grey-1;
-      margin-bottom: 8px;
+      @include font-regular-14;
+
+      .row {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
     }
     .description {
-      max-width: 600px;
+      @include font-regular-14;
     }
   }
 }
 
+.addDescription {
+  margin: auto;
+}
+
 .structuresContainer {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
   width: 100%;
 }
 

src/app/profile/profile.component.ts

@@ -9,6 +9,7 @@ import { User } from '../models/user.model';
 import { NotificationService } from '../services/notification.service';
 import { StructureService } from '../services/structure.service';
 import { ButtonType } from '../shared/components/button/buttonType.enum';
+import { ButtonTypeV3 } from '../shared/components/v3/button/button.type';
 import { Utils } from '../utils/utils';
 import { UserService } from './../services/user.service';
 import { ProfileService } from './services/profile.service';
@@ -22,7 +23,8 @@ export class ProfileComponent implements OnInit {
   public userProfile: User;
   public structures: StructureWithOwners[] = [];
   public pendingStructures: StructureWithOwners[] = [];
-  public buttonTypeEnum = ButtonType;
+  public buttonTypeEnum = ButtonType; // V3REMOVE
+  public buttonTypeEnumV3 = ButtonTypeV3;
   public isPublic: boolean;
 
   constructor(

src/app/profile/structure-edition-summary/missing-information/missing-information.component.html

-<p class="warning" fxLayout="row">
-  <app-svg-icon [type]="'ico'" [icon]="'warningMini'" />
-  <span>Information manquante</span>
-</p>

src/app/profile/structure-edition-summary/missing-information/missing-information.component.scss

 @import 'color';
+@import 'typography';
 
 p.warning {
-  font-style: italic;
-  color: $orange-warning;
-  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  @include font-bold-14;
 }

src/app/profile/structure-edition-summary/missing-information/missing-information.component.ts

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-missing-information',
-  templateUrl: './missing-information.component.html',
+  template: `<p class="warning">
+    <app-svg-icon [type]="'tags'" [icon]="'warning'" />
+    <span>{{ plural ? 'Informations manquantes' : 'Information manquante' }}</span>
+  </p>`,
   styleUrls: ['./missing-information.component.scss'],
 })
-export class MissingInformationComponent {}
+export class MissingInformationComponent {
+  /** When set to true, displays "Informations" */
+  @Input() plural = false;
+}

src/app/profile/structure-edition-summary/structure-edition-summary.component.html

 <div class="container">
   <div class="scroll">
+    <app-v3-button
+      [label]="'Retour'"
+      [variant]="buttonTypeEnumV3.Tertiary"
+      [iconFolder]="'ico'"
+      [iconName]="'arrowBackSmall'"
+      [size]="'large'"
+      (action)="goBack()"
+    />
     <div class="header">
-      <app-svg-icon
-        tabindex="0"
-        [iconClass]="'backArrow'"
-        [type]="'ico'"
-        [icon]="'arrowBack'"
-        (click)="goBack()"
-        (keyup.enter)="goBack()"
-      />
       <h1>
         {{ isUpdateStructure ? 'Mettre à jour la structure' : 'Modifier la structure' }}
-        <span>
-          {{ structure.structureName }}
-        </span>
       </h1>
+      <h2>
+        {{ structure.structureName }}
+      </h2>
+      <p *ngIf="isUpdateStructure">
+        La dernière modification de votre structure remonte à plus de 6 mois, merci de vérifier les données et de les
+        valider
+      </p>
     </div>
 
-    <div class="section nameAndAddress">
+    <section class="nameAndAddress">
       <div class="sectionHeader">
         <p>Nom et adresse</p>
         <app-button
@@ -35,16 +39,22 @@
         />
       </div>
       <div class="content">
-        <p>
-          {{ structure.structureName }}
-        </p>
-        <p>
-          {{ formatAddress() }}
-        </p>
+        <div class="row">
+          <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'structureType'" />
+          <p>
+            {{ structure.structureName }}
+          </p>
+        </div>
+        <div class="row">
+          <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'address'" />
+          <p>
+            {{ formatAddress() }}
+          </p>
+        </div>
       </div>
-    </div>
+    </section>
 
-    <div class="section structureType">
+    <section class="structureType" [ngClass]="{ warningBorder: !isFieldValid('structureType') }">
       <div class="sectionHeader">
         <p>Type de structure</p>
         <app-button
@@ -63,13 +73,14 @@
       </div>
       <div class="content">
         <app-missing-information *ngIf="!isFieldValid('structureType')" />
+        <!-- TODO Icone de structure ? -->
         <p *ngIf="isFieldValid('structureType')">
           {{ structure.structureType?.category }} - {{ structure.structureType?.name }}
         </p>
       </div>
-    </div>
+    </section>
 
-    <div class="section phoneAndMail">
+    <section class="phoneAndMail" [ngClass]="{ warningBorder: requiredPhoneOrMailError() }">
       <div class="sectionHeader">
         <p>Téléphone et email</p>
         <app-button
@@ -88,18 +99,22 @@
       </div>
       <div class="content">
         <app-missing-information *ngIf="requiredPhoneOrMailError()" />
-        <p *ngIf="isFieldValid('contactPhone')">
-          {{ structure.contactPhone }}
-        </p>
-        <p *ngIf="isFieldValid('contactMail')">
+        <div *ngIf="isFieldValid('contactPhone')" class="row">
+          <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'phone'" />
+          <p>
+            {{ structure.contactPhone }}
+          </p>
+        </div>
+        <div *ngIf="isFieldValid('contactMail')" class="row">
+          <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'mail'" />
           <a [href]="mailHref">
             {{ structure.contactMail }}
           </a>
-        </p>
+        </div>
       </div>
-    </div>
+    </section>
 
-    <div class="section description">
+    <section class="description">
       <div class="sectionHeader">
         <p>Présentation de la structure</p>
         <app-button
@@ -120,9 +135,9 @@
         <app-no-information *ngIf="!structure.description" />
         <p *ngIf="structure.description">{{ structure.description }}</p>
       </div>
-    </div>
+    </section>
 
-    <div class="section accessModality">
+    <section class="accessModality" [ngClass]="{ warningBorder: !isFieldValid('accessModality', 'categories') }">
       <div class="sectionHeader">
         <p>Modalité d'accueil</p>
         <app-button
@@ -149,9 +164,9 @@
           </div>
         </ng-container>
       </div>
-    </div>
+    </section>
 
-    <div class="section hours">
+    <section class="hours">
       <div class="sectionHeader">
         <p>Horaires</p>
         <app-button
@@ -187,9 +202,9 @@
         </ng-container>
         <p *ngIf="!!structure.exceptionalClosures">Précision sur les horaires : {{ structure.exceptionalClosures }}</p>
       </div>
-    </div>
+    </section>
 
-    <div class="section PMR">
+    <section class="PMR" [ngClass]="{ warningBorder: structure.pmrAccess === null }">
       <div class="sectionHeader">
         <p>Accessibilité pour les personnes à mobilité réduite</p>
         <app-button
@@ -212,9 +227,9 @@
           {{ structure.pmrAccess ? 'Oui' : 'Non' }}
         </p>
       </div>
-    </div>
+    </section>
 
-    <div class="section webAndSocialNetworks">
+    <section class="webAndSocialNetworks">
       <div class="sectionHeader">
         <p>Présence sur internet</p>
         <app-button
@@ -233,55 +248,48 @@
       </div>
       <div class="content">
         <app-no-information *ngIf="!hasWebsite() && !hasSocialNetworks()" />
-        <ng-container *ngIf="hasWebsite() || hasSocialNetworks()">
-          <div *ngIf="structure.website">
+        <div *ngIf="hasWebsite() || hasSocialNetworks()" class="socials">
+          <div *ngIf="structure.website" class="row">
+            <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'website'" />
             <a href="{{ structure.website }}">{{ structure.website }}</a>
           </div>
 
-          <!-- Social networks-->
-          <div *ngIf="hasSocialNetworks()" class="socials">
-            <a
-              *ngIf="structure.facebook"
-              target="_blank"
-              class="custom-link"
-              rel="noopener noreferrer"
-              [href]="'http://' + structure.facebook"
-            >
-              <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'" [iconClass]="'icon-30'" />
-            </a>
-            <a
-              *ngIf="structure.twitter"
-              target="_blank"
-              class="custom-link"
-              rel="noopener noreferrer"
-              [href]="'http://' + structure.twitter"
-            >
-              <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'" [iconClass]="'icon-30'" />
-            </a>
-            <a
-              *ngIf="structure.instagram"
-              target="_blank"
-              class="custom-link"
-              rel="noopener noreferrer"
-              [href]="'http://' + structure.instagram"
-            >
-              <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'" [iconClass]="'icon-30'" />
-            </a>
-            <a
-              *ngIf="structure.linkedin"
-              target="_blank"
-              class="custom-link"
-              rel="noopener noreferrer"
-              [href]="'http://' + structure.linkedin"
-            >
-              <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'" [iconClass]="'icon-30'" />
-            </a>
+          <div *ngIf="structure.facebook" class="row">
+            <!-- TODO facebook icon missing -->
+            <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'website'" />
+            <a target="_blank" class="custom-link" rel="noopener noreferrer" [href]="'http://' + structure.facebook">{{
+              structure.facebook
+            }}</a>
           </div>
-        </ng-container>
+
+          <div *ngIf="structure.instagram" class="row">
+            <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'instagram'" />
+            <a target="_blank" class="custom-link" rel="noopener noreferrer" [href]="'http://' + structure.instagram">{{
+              structure.instagram
+            }}</a>
+          </div>
+
+          <div *ngIf="structure.twitter" class="row">
+            <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'twitter'" />
+            <a target="_blank" class="custom-link" rel="noopener noreferrer" [href]="'http://' + structure.twitter">{{
+              structure.twitter
+            }}</a>
+          </div>
+
+          <div *ngIf="structure.linkedin" class="row">
+            <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'linkedin'" />
+            <a target="_blank" class="custom-link" rel="noopener noreferrer" [href]="'http://' + structure.linkedin">{{
+              structure.linkedin
+            }}</a>
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
 
-    <div class="section publics">
+    <section
+      class="publics"
+      [ngClass]="{ warningBorder: !isFieldValid('age', 'categories') && structure.categoriesDisplay.age }"
+    >
       <div class="sectionHeader">
         <p>Public admis</p>
         <app-button
@@ -299,20 +307,24 @@
         />
       </div>
       <div class="content">
-        <ng-container *ngIf="isFieldValid('age', 'categories') && structure.categoriesDisplay.age">
-          <div *ngFor="let public of structure.categoriesDisplay.age" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+        <div *ngIf="isFieldValid('age', 'categories') && structure.categoriesDisplay.age" class="list">
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.age"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
 
         <ng-container *ngIf="!isFieldValid('age', 'categories') && structure.categoriesDisplay.age">
           <app-no-information *ngIf="!structure.otherDescription" />
           <app-missing-information />
         </ng-container>
       </div>
-    </div>
+    </section>
 
-    <div class="section publics">
+    <section class="publics">
       <div class="sectionHeader">
         <p>Public spécifique admis</p>
         <app-button
@@ -330,41 +342,56 @@
         />
       </div>
       <div class="content">
-        <ng-container
+        <div
           *ngIf="
             isFieldValid('languageAndIlliteracy', 'categories') &&
             structure.categoriesDisplay &&
             structure.categoriesDisplay.languageAndIlliteracy
           "
+          class="list"
         >
-          <div *ngFor="let public of structure.categoriesDisplay.languageAndIlliteracy" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.languageAndIlliteracy"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
       </div>
       <div class="content">
-        <ng-container
+        <div
           *ngIf="
             isFieldValid('handicaps', 'categories') &&
             structure.categoriesDisplay &&
             structure.categoriesDisplay.handicaps
           "
+          class="list"
         >
-          <div *ngFor="let public of structure.categoriesDisplay.handicaps" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.handicaps"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
       </div>
       <div class="content">
-        <ng-container
+        <div
           *ngIf="
             isFieldValid('genre', 'categories') && structure.categoriesDisplay && structure.categoriesDisplay.genre
           "
+          class="list"
         >
-          <div *ngFor="let public of structure.categoriesDisplay.genre" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.genre"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
       </div>
       <div class="content">
         <ng-container
@@ -377,9 +404,9 @@
           <app-no-information />
         </ng-container>
       </div>
-    </div>
+    </section>
 
-    <div class="section proceduresAccompaniment">
+    <section class="proceduresAccompaniment">
       <div class="sectionHeader">
         <p>Démarches en ligne</p>
         <app-button
@@ -404,9 +431,9 @@
           </div>
         </ng-container>
       </div>
-    </div>
+    </section>
 
-    <div class="section proceduresAccompaniment">
+    <section class="proceduresAccompaniment">
       <div class="sectionHeader">
         <p>Autres démarches proposées</p>
         <app-button
@@ -429,9 +456,9 @@
           <p>{{ structure.otherDescription }}</p>
         </ng-container>
       </div>
-    </div>
+    </section>
 
-    <div class="section learning">
+    <section class="learning">
       <div class="sectionHeader">
         <p>Compétences numériques</p>
         <app-button
@@ -498,9 +525,13 @@
           </div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <div *ngIf="containsDigitalLearning()" class="section learningPrice">
+    <section
+      *ngIf="containsDigitalLearning()"
+      class="learningPrice"
+      [ngClass]="{ warningBorder: !isFieldValid('freeWorkShop') }"
+    >
       <div class="sectionHeader">
         <p>Gratuité des ateliers</p>
         <app-button
@@ -521,9 +552,9 @@
         <app-missing-information *ngIf="!isFieldValid('freeWorkShop')" />
         <p *ngIf="isFieldValid('freeWorkShop')">{{ structure.freeWorkShop }}</p>
       </div>
-    </div>
+    </section>
 
-    <div class="section wifi">
+    <section class="wifi">
       <div class="sectionHeader">
         <p>Wifi</p>
         <app-button
@@ -545,9 +576,9 @@
           {{ hasWifi(structure.categories.selfServiceMaterial) ? 'Oui' : 'Non' }}
         </p>
       </div>
-    </div>
+    </section>
 
-    <div class="section equipements">
+    <section class="equipements">
       <div class="sectionHeader">
         <p>Matériel mis à disposition</p>
         <app-button
@@ -579,9 +610,9 @@
           </p>
         </div>
       </div>
-    </div>
+    </section>
 
-    <div class="section labels">
+    <section class="labels">
       <div class="sectionHeader">
         <p>Labelisations proposées</p>
         <app-button
@@ -604,8 +635,9 @@
           <app-logo-card [name]="labels" />
         </div>
       </div>
-    </div>
-    <div class="section solidarityMaterial">
+    </section>
+
+    <section class="solidarityMaterial">
       <div class="sectionHeader">
         <p>Vente de matériel à prix solidaire</p>
         <app-button
@@ -628,8 +660,9 @@
           <p>{{ material }}</p>
         </div>
       </div>
-    </div>
-    <div class="section covid">
+    </section>
+
+    <section class="covid">
       <div class="sectionHeader">
         <p>Informations spécifiques à la période COVID</p>
         <app-button
@@ -650,9 +683,9 @@
         <app-no-information *ngIf="!structure.lockdownActivity" />
         <p *ngIf="structure.lockdownActivity">{{ structure.lockdownActivity }}</p>
       </div>
-    </div>
+    </section>
 
-    <div class="section dataShare">
+    <section class="dataShare">
       <div class="sectionHeader">
         <p>Partage de données sur data.grandlyon.com</p>
         <app-button
@@ -672,9 +705,9 @@
       <div class="content">
         <p>{{ structure.dataShareConsentDate ? 'Oui' : 'Non' }}</p>
       </div>
-    </div>
+    </section>
 
-    <div class="section members">
+    <section class="members">
       <div class="sectionHeader">
         <p>Gérer les membres de la structure</p>
         <app-button
@@ -692,13 +725,16 @@
         />
       </div>
       <div *ngIf="members" class="content">
-        <div [ngPlural]="members.length">
-          <ng-template ngPluralCase="0">Aucun membre</ng-template>
-          <ng-template ngPluralCase="1">1 membre</ng-template>
-          <ng-template ngPluralCase="other">{{ members.length }} membres</ng-template>
+        <div class="members">
+          <div [ngPlural]="members.length">
+            <ng-template ngPluralCase="0">Aucun membre</ng-template>
+            <ng-template ngPluralCase="1">1 membre</ng-template>
+            <ng-template ngPluralCase="other">{{ members.length }} membres</ng-template>
+          </div>
+          <app-profile-structure-member *ngFor="let member of members" [member]="member" />
         </div>
       </div>
-    </div>
+    </section>
   </div>
 
   <div class="footer">

src/app/profile/structure-edition-summary/structure-edition-summary.component.scss

@@ -3,24 +3,13 @@
 @import 'breakpoint';
 @import 'layout';
 
-::ng-deep svg {
-  cursor: pointer;
-}
-
+// V3REMOVE
 ::ng-deep .editButton {
   width: 132px !important;
 }
 
-::ng-deep .buttons svg {
-  height: 1.4rem !important;
-}
-
 .container {
-  background: $white;
-  border-radius: 8px;
-  border: 1px solid $grey-6;
-  box-sizing: border-box;
-  margin: 1rem auto;
+  margin: 2rem auto auto auto;
   max-width: 980px;
   height: calc(100vh - $header-height - $footer-height - 2rem); //2rem are needed because of 1rem margin
   display: flex;
@@ -31,40 +20,46 @@
     height: 90%;
     overflow-y: scroll;
     overflow-x: hidden;
-    padding: 40px;
+    padding-right: 40px;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 2rem;
 
-    p {
-      margin: 0;
-    }
     .header {
       display: flex;
-      align-items: center;
-
+      flex-direction: column;
+      gap: 8px;
       h1 {
         @include font-regular-24;
-        margin: 0;
-        span {
-          color: $red;
-        }
+      }
+      h2 {
+        @include font-bold-24;
+        color: $red;
+      }
+      p {
+        color: $grey-4-text;
       }
     }
 
-    .section {
+    section {
+      padding: 1.5rem;
+      border-radius: 8px;
+      border: 1px solid $grey-6;
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
       .sectionHeader {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        @include font-bold-16;
-        p {
-          margin: 0;
-        }
+        @include font-bold-18;
+        text-transform: uppercase;
       }
       .content {
-        p {
-          margin: 0 0 4px 0;
+        .row {
+          display: flex;
+          gap: 8px;
+          align-items: center;
         }
 
         .hours {
@@ -87,18 +82,25 @@
 
         .socials {
           display: flex;
+          flex-direction: column;
           gap: 0.5rem;
-          margin-top: 0.5rem;
         }
 
         .list {
-          margin-bottom: 8px;
+          display: flex;
+          gap: 0.5rem;
           p {
             display: list-item;
             margin: 0 0 0 25px;
           }
         }
 
+        .members {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+
         .formationDetails {
           padding-top: 0.5rem;
           .collapse {

src/app/profile/structure-edition-summary/structure-edition-summary.component.ts

@@ -9,6 +9,7 @@ import { Structure } from '../../models/structure.model';
 import { NotificationService } from '../../services/notification.service';
 import { StructureService } from '../../services/structure.service';
 import { ButtonType } from '../../shared/components/button/buttonType.enum';
+import { ButtonTypeV3 } from '../../shared/components/v3/button/button.type';
 import { Demarches } from '../../shared/enum/demarches.enum';
 import { AccessModality } from '../../structure-list/enum/access-modality.enum';
 import { Equipment } from '../../structure-list/enum/equipment.enum';
@@ -36,7 +37,8 @@ export class StructureEditionSummaryComponent implements OnInit {
   public members: Owner[];
   public summary: IStructureSummary[] = new formUtils().structureSummary;
   public structureFormStep = structureFormStep;
-  public buttonTypeEnum = ButtonType;
+  public buttonTypeEnum = ButtonType; // V3REMOVE
+  public buttonTypeEnumV3 = ButtonTypeV3;
   public equipmentEnum = Equipment;
 
   // Digital learning

src/app/profile/structure-members-management/structure-members-management.component.html

-<div class="content-container full-screen">
-  <div class="container members-management">
-    <div class="headerContainer">
-      <div class="header">
+<div class="container members-management">
+  <app-v3-button
+    [label]="'Retour'"
+    [variant]="buttonTypeEnumV3.Tertiary"
+    [iconFolder]="'ico'"
+    [iconName]="'arrowBackSmall'"
+    [size]="'large'"
+    (action)="goBack()"
+  />
+  <div class="headerContainer">
+    <div class="header">
+      <h1>Gérer les membres de</h1>
+      <h2>{{ structure.structureName }}</h2>
+    </div>
+    <app-button
+      tabindex="0"
+      [style]="buttonTypeEnum.Secondary"
+      [text]="'Ajouter un membre'"
+      (click)="addMemberModalOpened = true"
+    />
+  </div>
+
+  <div *ngIf="isLoading" class="loader" aria-busy="true">
+    <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+  </div>
+  <div *ngIf="structureWithOwners && tempUsers" class="membersList">
+    <div *ngFor="let member of structureWithOwners.owners" class="memberCard">
+      <div class="user">
         <app-svg-icon
-          tabindex="0"
-          [iconClass]="'backArrow'"
-          [type]="'ico'"
-          [icon]="'arrowBack'"
-          (click)="goBack()"
-          (keyup.enter)="goBack()"
+          class="avatar hide-on-mobile"
+          [type]="'avatar'"
+          [icon]="'defaultAvatar'"
+          [iconClass]="'icon-40'"
         />
-        <h1>
-          Gérer les membres de <span>{{ structure.structureName }}</span>
-        </h1>
+        <div class="info-member">
+          <a class="member" routerLink="/profile/{{ member._id }}">
+            {{ member.name | userName }} {{ member.surname | uppercase }}
+          </a>
+          <p *ngIf="displayJobEmployer(member)" class="job">{{ displayJobEmployer(member) }}</p>
+        </div>
       </div>
       <app-button
+        *ngIf="currentProfile._id !== member._id"
+        class="button-member"
         tabindex="0"
         [style]="buttonTypeEnum.Secondary"
-        [text]="'Ajouter un membre'"
-        (click)="addMemberModalOpened = true"
+        [text]="'Exclure ce membre'"
+        (click)="memberToExclude = member; excludeModalOpened = true"
       />
     </div>
-
-    <div *ngIf="isLoading" class="loader" aria-busy="true">
-      <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
-    </div>
-    <div *ngIf="structureWithOwners && tempUsers" class="membersList">
-      <div *ngFor="let member of structureWithOwners.owners" class="member-card">
-        <div class="user">
-          <app-svg-icon
-            class="avatar hide-on-mobile"
-            [type]="'avatar'"
-            [icon]="'defaultAvatar'"
-            [iconClass]="'icon-40'"
-          />
-          <div class="info-member">
-            <a class="member" routerLink="/profile/{{ member._id }}">
-              {{ member.name | userName }} {{ member.surname | uppercase }}
-            </a>
-            <p *ngIf="displayJobEmployer(member)" class="job">{{ displayJobEmployer(member) }}</p>
-          </div>
+    <div *ngFor="let member of tempUsers" class="memberCard">
+      <div class="user">
+        <app-svg-icon
+          class="avatar hide-on-mobile"
+          [type]="'avatar'"
+          [icon]="'defaultAvatar'"
+          [iconClass]="'icon-40'"
+        />
+        <div class="info-member">
+          <p class="member">{{ member.email }}</p>
         </div>
+      </div>
+      <div class="pendingContainer">
+        <p class="text">Demande de rattachement envoyée le {{ member.updatedAt | date : 'dd/MM/YYYY' }}</p>
         <app-button
-          *ngIf="currentProfile._id !== member._id"
-          class="button-member"
           tabindex="0"
           [style]="buttonTypeEnum.Secondary"
-          [text]="'Exclure ce membre'"
-          (click)="memberToExclude = member; excludeModalOpened = true"
+          [text]="'Annuler la demande'"
+          (click)="tempUserToCancel = member; cancelAddTempUserModalOpened = true"
         />
       </div>
-      <div *ngFor="let member of tempUsers" class="member-card">
-        <div class="user">
-          <app-svg-icon
-            class="avatar hide-on-mobile"
-            [type]="'avatar'"
-            [icon]="'defaultAvatar'"
-            [iconClass]="'icon-40'"
-          />
-          <div class="info-member">
-            <p class="member">{{ member.email }}</p>
-          </div>
-        </div>
-        <div fxLayout="row" fxLayoutAlign="start center" class="pendingContainer">
-          <div class="info-pendingStructure">
-            <app-svg-icon class="check-icon" [type]="'ico'" [icon]="'check'" />
-            <p class="text">Demande de rattachement envoyée le {{ member.updatedAt | date : 'dd/MM/YYYY' }}</p>
-          </div>
-          <app-button
-            tabindex="0"
-            [style]="buttonTypeEnum.Secondary"
-            [text]="'Annuler la demande'"
-            (click)="tempUserToCancel = member; cancelAddTempUserModalOpened = true"
-          />
-        </div>
-      </div>
-      <div *ngIf="!tempUsers.length && !structureWithOwners.owners.length">
-        Aucun membre trouvé dans cette structure.
-      </div>
     </div>
+    <div *ngIf="!tempUsers.length && !structureWithOwners.owners.length">Aucun membre trouvé dans cette structure.</div>
   </div>
 </div>
 <app-structure-add-member-modal

src/app/profile/structure-members-management/structure-members-management.component.scss

@@ -3,12 +3,11 @@
 @import 'breakpoint';
 
 .container {
-  margin: 0 auto 1rem auto;
+  margin: 2rem auto 0 auto;
   max-width: 980px;
-  padding: 40px;
-  background: $white;
-  border-radius: 8px;
-  border: 1px solid $grey-6;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
   .headerContainer {
     display: flex;
     justify-content: space-between;
@@ -20,16 +19,15 @@
     }
 
     .header {
-      cursor: pointer;
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      gap: 0.5rem;
       h1 {
         @include font-regular-24;
-        color: $grey-1;
-        cursor: initial;
-        span {
-          color: $red;
-        }
+      }
+      h2 {
+        @include font-bold-24;
+        color: $red;
       }
     }
   }
@@ -39,11 +37,13 @@
     flex-direction: column;
     gap: 1rem;
 
-    .member-card {
-      width: 100%;
+    .memberCard {
+      padding: 1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      border-radius: 8px;
+      border: 1px solid $grey-7;
 
       .user {
         display: flex;
@@ -56,21 +56,31 @@
         .info-member {
           display: flex;
           flex-direction: column;
-          gap: 4px;
+          justify-content: center;
+          gap: 8px;
+          .member {
+            @include font-bold-16;
+          }
           p {
-            margin: 0;
             @include font-regular-14;
+            color: $grey-3;
           }
-          .member {
-            @include font-bold-14;
-            color: $black;
-          }
+        }
+      }
+
+      .pendingContainer {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        p {
+          @include font-regular-13;
+          color: $grey-3;
         }
       }
 
       .info-pendingStructure {
         display: flex;
-        margin-right: 1rem;
         max-width: 200px;
         p {
           margin: 0;

src/app/profile/structure-members-management/structure-members-management.component.ts

@@ -9,6 +9,7 @@ import { User } from '../../models/user.model';
 import { NotificationService } from '../../services/notification.service';
 import { StructureService } from '../../services/structure.service';
 import { ButtonType } from '../../shared/components/button/buttonType.enum';
+import { ButtonTypeV3 } from '../../shared/components/v3/button/button.type';
 import { Utils } from '../../utils/utils';
 import { ProfileService } from '../services/profile.service';
 
@@ -26,7 +27,8 @@ export class StructureMembersManagementComponent implements OnInit {
   public addMemberModalOpened = false;
   public excludeModalOpened = false;
   public cancelAddTempUserModalOpened = false;
-  public buttonTypeEnum = ButtonType;
+  public buttonTypeEnum = ButtonType; // V3REMOVE
+  public buttonTypeEnumV3 = ButtonTypeV3;
   public isLoading = true;
   public currentProfile: User;
 

src/app/profile/structures-management/structures-management.component.html

 <div class="content-container full-screen">
   <div class="container">
+    <app-v3-button
+      [label]="'Retour'"
+      [variant]="buttonTypeEnumV3.Tertiary"
+      [iconFolder]="'ico'"
+      [iconName]="'arrowBackSmall'"
+      [size]="'large'"
+      (action)="goBack()"
+    />
     <div class="header">
-      <div fxLayout="row wrap" fxLayoutAlign="space-between center" fxFill>
-        <div fxLayout="row" fxLayoutAlign="start center" class="headerBack">
-          <app-svg-icon
-            tabindex="0"
-            [iconClass]="'backArrow'"
-            [type]="'ico'"
-            [icon]="'arrowBack'"
-            (click)="goBack()"
-            (keyup.enter)="goBack()"
-          />
-          <h1 [ngPlural]="structures.length">
-            <ng-template ngPluralCase="1">Gestion des structures</ng-template>
-            <ng-template ngPluralCase="other">Gérer mes structures</ng-template>
-          </h1>
-        </div>
-        <app-button
-          routerLink="/form/structure"
-          tabindex="0"
-          [style]="buttonTypeEnum.SecondaryWide"
-          [iconBtn]="'add'"
-          [text]="'Ajouter une structure'"
-        />
-      </div>
+      <h1 [ngPlural]="structures.length">
+        <ng-template ngPluralCase="1">Gestion des structures</ng-template>
+        <ng-template ngPluralCase="other">Gérer mes structures</ng-template>
+      </h1>
+      <app-button
+        routerLink="/form/structure"
+        tabindex="0"
+        [style]="buttonTypeEnum.SecondaryWide"
+        [iconBtn]="'add'"
+        [text]="'Ajouter une structure'"
+      />
     </div>
     <div *ngIf="structures" class="structuresList">
-      <div *ngFor="let elt of structures" class="structureCard">
+      <div
+        *ngFor="let elt of structures"
+        class="structureCard"
+        [ngClass]="{ warningBorder: isBeingDeleted(elt.structure) }"
+      >
+        <!-- TODO link to structure -->
         <div class="structureDetails">
-          <p class="structureName">{{ elt.structure.structureName }}</p>
-          <p class="structureLocation">{{ elt.structure.address.commune }}</p>
-        </div>
-        <div *ngIf="isBeingDeleted(elt.structure)" class="deleteInProgress">
-          <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" />
-          <span>Suppression le {{ elt.structure.toBeDeletedAt | date : 'shortDate' }}</span>
+          <h2 class="structureName">{{ elt.structure.structureName }}</h2>
+          <app-v3-tag-item
+            [clickable]="false"
+            [label]="elt.structure.structureType.value"
+            [size]="'small'"
+            [color]="'red'"
+          />
+          <div *ngIf="isBeingDeleted(elt.structure)" class="deleteInProgress">
+            <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'warning'" />
+            <span
+              >Suppression le {{ elt.structure.toBeDeletedAt | date : 'shortDate' }} (5 semaines depuis la demande de
+              suppression)</span
+            >
+          </div>
         </div>
-        <div class="buttons" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="12px">
+        <div class="buttons">
           <app-button
             [text]="'Quitter la structure'"
             [style]="buttonTypeEnum.SecondaryWide"

src/app/profile/structures-management/structures-management.component.scss

@@ -3,78 +3,62 @@
 @import 'breakpoint';
 
 .container {
-  margin: 1rem auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   max-width: 980px;
-  padding: 40px;
-  border-radius: 8px;
-  border: 1px solid $grey-6;
-  background-color: $white;
+  width: 100%;
+  margin: 0 auto;
+  gap: 2rem;
+
   .header {
-    margin-bottom: 2rem;
-  }
-  .headerBack {
-    cursor: pointer;
-    span {
-      color: $red;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    h1 {
+      @include font-regular-24;
     }
   }
-  h1 {
-    @include font-regular-24;
-    color: $grey-1;
-    cursor: initial;
-  }
 
   .structuresList {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem;
     .structureCard {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      align-items: center;
       gap: 1rem;
-      padding: 6px 0;
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #f8f8f8;
-      }
+      padding: 16px;
+      border: 1px solid $grey-7;
+      border-radius: 4px;
 
       @media #{$phone} {
         flex-wrap: wrap;
       }
       .structureDetails {
-        width: 35%;
         display: flex;
         flex-direction: column;
-        gap: 4px;
-        @media #{$phone} {
-          width: initial;
-        }
-        p {
-          margin: 0 !important;
-          &.structureName {
-            @include font-bold-16;
-          }
-          &.structureLocation {
-            @include font-regular-13;
-            font-style: italic;
-            color: $grey-3;
-          }
+        gap: 8px;
+        .structureName {
+          @include font-bold-18;
         }
       }
 
       .deleteInProgress {
-        @include font-regular-13;
+        @include font-bold-14;
         display: flex;
         gap: 8px;
-        color: $orange-warning;
+        color: $info-warning;
         span {
           display: flex;
           align-items: center;
-          width: 6rem;
         }
       }
       .buttons {
+        display: flex;
+        gap: 1.5rem;
         @media #{$tablet} {
           max-width: 45%;
         }

src/app/profile/structures-management/structures-management.component.ts

@@ -8,6 +8,7 @@ import { User } from '../../models/user.model';
 import { NotificationService } from '../../services/notification.service';
 import { StructureService } from '../../services/structure.service';
 import { ButtonType } from '../../shared/components/button/buttonType.enum';
+import { ButtonTypeV3 } from '../../shared/components/v3/button/button.type';
 import { ProfileService } from '../services/profile.service';
 
 @Component({
@@ -20,7 +21,8 @@ export class StructuresManagementComponent implements OnInit {
   public structures: StructureWithOwners[] = [];
   public selectedStructure: Structure;
   public deleteInProgress: boolean;
-  public buttonTypeEnum = ButtonType;
+  public buttonTypeEnum = ButtonType; // V3REMOVE
+  public buttonTypeEnumV3 = ButtonTypeV3;
   public leaveModalOpened = false;
   public deleteModalOpened = false;
   public cancelDeleteModalOpened = false;

src/app/shared/components/index.ts

@@ -22,6 +22,9 @@ import { TrainingTypePickerComponent } from './training-type-picker/training-typ
 import { ButtonV3Component } from './v3/button/button.component';
 import { IconButtonV3Component } from './v3/button/icon-button/icon-button.component';
 import { CheckboxV3Component } from './v3/checkbox/checkbox.component';
+import { CollapseContentComponent } from './v3/collapse/collapse-content/collapse-content.component';
+import { CollapseHeaderComponent } from './v3/collapse/collapse-header/collapse-header.component';
+import { CollapseComponent } from './v3/collapse/collapse.component';
 import { InputV3Component } from './v3/input/input.component';
 import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
 import { RadioV3Component } from './v3/radio/radio.component';
@@ -36,6 +39,9 @@ export {
   ButtonV3Component,
   CheckboxFormComponent,
   CheckboxV3Component,
+  CollapseComponent,
+  CollapseContentComponent,
+  CollapseHeaderComponent,
   CustomModalComponent,
   HourPickerComponent,
   InformationStepComponent,
@@ -63,6 +69,9 @@ export const SharedComponents = [
   ButtonV3Component,
   CheckboxFormComponent,
   CheckboxV3Component,
+  CollapseComponent,
+  CollapseContentComponent,
+  CollapseHeaderComponent,
   CustomModalComponent,
   HourPickerComponent,
   IconButtonV3Component,

src/app/shared/components/svg-icon/svg-icon.component.scss

@@ -8,6 +8,7 @@
 $sizes: (
   12: 12px,
   16: 16px,
+  20: 20px,
   22: 22px,
   26: 26px,
   28: 28px,

src/app/shared/components/training-type-picker/training-type-picker.component.html

 <div class="trainingContainer">
-  <div
-    *ngFor="let categorie of categories"
-    class="collapse"
-    [ngClass]="{ notCollapsed: !isCategorieExpanded(categorie.id) }"
-  >
-    <div
-      class="collapseHeader"
-      tabindex="0"
-      (click)="toggleCollapse(categorie.id); $event.stopPropagation()"
-      (keyup.enter)="toggleCollapse(categorie.id); $event.stopPropagation()"
-    >
-      <label class="checkbox">
-        <input
-          type="checkbox"
-          [checked]="getCategoryCheckboxStatus(categorie) === 'checked'"
-          (change)="pickAllCategory(categorie); $event.stopPropagation()"
+  <app-collapse *ngFor="let category of categories" [expanded]="isCategorieExpanded(category.id)">
+    <app-collapse-header>
+      <div class="collapseHeader">
+        <app-v3-checkbox
+          [checked]="getCategoryCheckboxStatus(category) === 'checked'"
+          [indeterminate]="getCategoryCheckboxStatus(category) === 'halfChecked'"
+          (action)="pickAllCategory(category); $event.stopPropagation()"
         />
-        <span
-          class="customCheck customCheckPrimary"
-          [ngClass]="{ halfCheck: getCategoryCheckboxStatus(categorie) === 'halfChecked' }"
-        ></span>
-      </label>
-      <div class="titleCollapse">
-        {{ categorie.name }}
+        {{ category.name }}
       </div>
-      <div class="logo">
-        <svg class="show" aria-hidden="true">
-          <use [attr.xlink:href]="'assets/form/sprite.svg#unfold'" />
-        </svg>
-        <svg class="hide" aria-hidden="true">
-          <use [attr.xlink:href]="'assets/form/sprite.svg#fold'" />
-        </svg>
+    </app-collapse-header>
+    <app-collapse-content>
+      <div class="inputSection btn-grid">
+        <ng-container *ngFor="let module of category.modules">
+          <app-button
+            [extraClass]="isModulePicked(category, module) ? 'selected' : ''"
+            [style]="buttonTypeEnum.CheckButton"
+            [text]="module.name"
+            (action)="pickChoice(category, module)"
+          />
+        </ng-container>
       </div>
-    </div>
-
-    <div *ngIf="isCategorieExpanded(categorie.id)" class="inputSection btn-grid">
-      <ng-container *ngFor="let module of categorie.modules">
-        <app-button
-          [extraClass]="isModulePicked(categorie, module) ? 'selected' : ''"
-          [style]="buttonTypeEnum.CheckButton"
-          [text]="module.name"
-          (action)="pickChoice(categorie, module)"
-        />
-      </ng-container>
-    </div>
-  </div>
+    </app-collapse-content>
+  </app-collapse>
 </div>

src/app/shared/components/training-type-picker/training-type-picker.component.scss

@@ -5,79 +5,27 @@
 @import 'buttons';
 
 .trainingContainer {
-  padding-bottom: 0.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-}
-
-label.checkbox {
-  width: 2.25rem;
-  margin-top: 0.2rem;
-}
 
-.collapse {
-  border-radius: 4px;
-  border: 1px solid $grey-5;
-  box-sizing: border-box;
-  @media #{$small-phone} {
-    width: 95% !important;
-  }
-  &.notCollapsed {
-    border: 1px solid $grey-9;
-    background: $grey-9;
-    &:hover {
-      border: 1px solid $grey-5;
-    }
-    .logo {
-      .hide {
-        display: none;
-      }
-      .show {
-        display: block;
-      }
-    }
-  }
-  .inputSection {
-    padding: 0px 1rem 1rem;
-    svg {
-      border-right: 0;
-      padding-left: 16px;
-    }
-  }
   .collapseHeader {
     display: flex;
     align-items: center;
-    height: 65px;
-    padding: 0 1rem;
-    cursor: pointer;
+    padding: 0.5rem 1.5rem;
+    gap: 0.5rem;
 
     .checkbox {
       width: 2.25rem;
       margin-top: 0.2rem;
     }
     .titleCollapse {
-      width: 100%;
       @include font-bold-14;
       color: $grey-1;
     }
-    .logo {
-      height: 24px;
-      width: 24px;
-      svg {
-        width: 100%;
-        height: 100%;
-        fill: $grey-1;
-      }
-    }
   }
-  .logo,
-  .titleCollapse {
-    .hide {
-      display: block;
-    }
-    .show {
-      display: none;
-    }
+  .inputSection {
+    border-top: 1px solid $grey-4;
+    padding: 1rem;
   }
 }

src/app/shared/components/training-type-picker/training-type-picker.component.ts

@@ -19,7 +19,6 @@ export class TrainingTypePickerComponent implements OnInit, OnChanges {
 
   public buttonTypeEnum = ButtonType;
   public categories: Category[] = [];
-  public categoriesExpanded: string[] = [];
   public selectedChoices: Category[] = [];
 
   ngOnInit(): void {
@@ -27,13 +26,7 @@ export class TrainingTypePickerComponent implements OnInit, OnChanges {
       this.categories.push(data.category);
     });
     this.initSelectedChoice();
-    this.selectedChoices.forEach((category) => {
-      if (category.modules.length) {
-        this.categoriesExpanded.push(category.id);
-      }
-    });
   }
-
   ngOnChanges(): void {
     this.initSelectedChoice();
   }
@@ -57,16 +50,8 @@ export class TrainingTypePickerComponent implements OnInit, OnChanges {
   }
 
   public isCategorieExpanded(id: string): boolean {
-    return this.categoriesExpanded.includes(id);
-  }
-
-  public toggleCollapse(id: string): void {
-    if (this.isCategorieExpanded(id)) {
-      const index = this.categoriesExpanded.findIndex((categorieId) => categorieId === id);
-      this.categoriesExpanded.splice(index, 1);
-    } else {
-      this.categoriesExpanded.push(id);
-    }
+    const index = this.selectedChoices.findIndex((category) => category.id === id);
+    return this.selectedChoices[index].modules.length !== 0;
   }
 
   public isModulePicked(categorie: Category, module: Module): boolean {

src/app/shared/components/v3/checkbox/checkbox.component.html

@@ -3,6 +3,7 @@
   [id]="id"
   [ngClass]="classes"
   [checked]="checked"
+  [indeterminate]="indeterminate"
   [disabled]="disabled"
   (click)="action.emit($event)"
 />