refactor(V3): remove old V3 colors & rename a class

cc2fd629 · Marlène SIMONDANT · 4155a198 · cc2fd629 · cc2fd629 · cc2fd629
Commit cc2fd629 authored 1 year ago by Marlène SIMONDANT
--- a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html
+++ b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html
@@ -4,7 +4,7 @@
    <p>Cette information sera visible dans l’annuaire des acteurs, accessible uniquement en version connectée</p>
  </div>
  <div fxLayout="column" fxLayoutGap="32px">
-    <div class="btn-grid">
+    <div class="tagList">
      <app-tag-item
        *ngFor="let job of jobs"
        [iconFolder]="'ico'"

--- a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
+++ b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
@@ -4,7 +4,7 @@
    <h3>La structure propose-t-elle une aide gratuite<sup>*</sup> aux démarches en ligne&nbsp;?</h3>
    <p>Facultatif - Plusieurs choix possibles</p>
  </div>
-  <div class="btn-grid">
+  <div class="tagList">
    <app-tag-item
      *ngFor="let accompaniment of onlineProcedures.modules"
      [iconName]="isInArray(accompaniment.id) ? 'check' : null"

--- a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
+++ b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
@@ -17,7 +17,7 @@
  <ng-container *ngIf="!isMandatoryFields">
    <div *ngIf="languageAndIlliteracy" class="title" style="gap: 12px">
      <h4>Langue et illettrisme</h4>
-      <div class="btn-grid">
+      <div class="tagList">
        <app-tag-item
          *ngFor="let choice of languageAndIlliteracy.modules"
          [iconName]="isInArray(choice.id, 'languageAndIlliteracy') ? 'check' : null"
@@ -30,7 +30,7 @@
    </div>
    <div *ngIf="handicaps" class="title" style="gap: 12px">
      <h4>Handicaps</h4>
-      <div class="btn-grid">
+      <div class="tagList">
        <app-tag-item
          *ngFor="let choice of handicaps.modules"
          [iconName]="isInArray(choice.id, 'handicaps') ? 'check' : null"
@@ -43,7 +43,7 @@
    </div>
    <div *ngIf="genre" class="title" style="gap: 12px">
      <h4>Genre</h4>
-      <div class="btn-grid">
+      <div class="tagList">
        <app-tag-item
          *ngFor="let choice of genre.modules"
          [iconName]="isInArray(choice.id, 'genre') ? 'check' : null"
@@ -59,7 +59,7 @@
  <ng-container *ngIf="isMandatoryFields">
    <div *ngIf="age" class="title" style="gap: 12px">
      <h4>Âge</h4>
-      <div class="btn-grid">
+      <div class="tagList">
        <app-tag-item
          *ngFor="let choice of age.modules"
          [iconName]="isInArray(choice.id, 'age') ? 'check' : null"

--- a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
+++ b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
@@ -5,7 +5,7 @@
    <p>Facultatif - Plusieurs choix possibles</p>
  </div>

-  <div class="btn-grid">
+  <div class="tagList">
    <app-tag-item
      *ngFor="let material of solidarityMaterial.modules"
      [iconName]="isInArray(material.id) ? 'check' : null"

--- a/src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html
+++ b/src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html
 <div class="orientationForm">
  <h2>Quel est le besoin numérique de la personne ?</h2>

-  <div class="btn-grid">
+  <div class="tagList">
    <app-tag-item
      *ngFor="let module of baseSkills"
      [label]="module.name"

--- a/src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.html
+++ b/src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.html
 <div class="orientationForm">
  <h2>Quel matériel la personne a-t-elle besoin d'utiliser ?</h2>

-  <div class="btn-grid">
+  <div class="tagList">
    <app-tag-item
      *ngFor="let module of equipmentType"
      [label]="module.name"

--- a/src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.html
+++ b/src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.html
 <div class="orientationForm">
  <h2>Quel matériel la personne souhaite-t-elle acheter à tarif solidaire ?</h2>

-  <div class="btn-grid">
+  <div class="tagList">
    <app-tag-item
      *ngFor="let module of equipmentType"
      [label]="module.name"

--- a/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html
+++ b/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html
 <div class="orientationForm">
  <h2>Quelle démarche en ligne la personne a-t-elle besoin de réaliser ?</h2>
-  <div class="btn-grid">
+  <div class="tagList">
    <app-tag-item
      *ngFor="let module of accompanimentType"
      [label]="module.name"

--- a/src/app/profile/edit/edit.component.html
+++ b/src/app/profile/edit/edit.component.html
@@ -151,7 +151,7 @@
        </div>
        <p class="subTitle">Fonction</p>
        <div fxLayout="column" fxLayoutGap="32px">
-          <div class="btn-grid">
+          <div class="tagList">
            <app-tag-item
              *ngFor="let job of jobs"
              [iconName]="isSelectedJob(job) ? 'check' : null"

--- a/src/app/profile/edit/edit.component.scss
+++ b/src/app/profile/edit/edit.component.scss
@@ -119,7 +119,7 @@
        @include font-bold-16;
      }
    }
-    .btn-grid {
+    .tagList {
      margin-bottom: 1em;
    }


--- a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
+++ b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
-<div *ngIf="onlineProcedures" class="btn-grid">
+<div *ngIf="onlineProcedures" class="tagList">
  <app-tag-item
    *ngFor="let module of onlineProcedures.modules"
    [iconName]="isSelectedModule(module) ? 'check' : null"

--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -114,7 +114,7 @@ button {
    color: $grey-1;
    border-color: $grey-1;
    &:hover {
-      background-color: $grey-3-15;
+      background-color: $grey-3;
    }
    &:disabled {
      background-color: $white;
@@ -122,7 +122,7 @@ button {
      border-color: $grey-5;
    }
    &:active {
-      background-color: $grey-3-20;
+      background-color: $grey-3;
    }
  }

@@ -152,7 +152,7 @@ button {
    color: $red;
    border-color: $red;
    &:hover {
-      background-color: $grey-3-15;
+      background-color: $grey-3;
    }
    &:disabled {
      background-color: $white;
@@ -160,7 +160,7 @@ button {
      border-color: $grey-5;
    }
    &:active {
-      background-color: $grey-3-20;
+      background-color: $grey-3;
    }
  }


--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
 <form>
  <div class="title" style="gap: 12px">
    <h4>{{ structureTypeCategoryEnum.public }}</h4>
-    <div class="btn-grid">
+    <div class="tagList">
      <app-tag-item
        *ngFor="let type of publicTypes"
        [iconName]="type._id === pickedTypeId ? 'check' : null"
@@ -15,7 +15,7 @@

  <div class="title" style="gap: 12px">
    <h4>{{ structureTypeCategoryEnum.private }}</h4>
-    <div class="btn-grid">
+    <div class="tagList">
      <app-tag-item
        *ngFor="let type of privateTypes"
        [iconName]="type._id === pickedTypeId ? 'check' : null"
@@ -29,7 +29,7 @@

  <div class="title" style="gap: 12px">
    <h4>{{ structureTypeCategoryEnum.privateLucrative }}</h4>
-    <div class="btn-grid">
+    <div class="tagList">
      <app-tag-item
        *ngFor="let type of privateLucrativeTypes"
        [iconName]="type._id === pickedTypeId ? 'check' : null"

--- a/src/app/shared/components/tag-item/tag-item.stories.ts
+++ b/src/app/shared/components/tag-item/tag-item.stories.ts
@@ -93,7 +93,7 @@ export const MultipleTags: Story = {
  render: (args) => ({
    props: args,
    template: `
-    <div class="btn-grid">
+    <div class="tagList">
      <app-tag-item label="test 1" />
      <app-tag-item label="test 2" />
      <app-tag-item label="test 3" />

--- a/src/app/shared/components/training-type-picker/training-type-picker.component.html
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.html
@@ -11,7 +11,7 @@
      </div>
    </app-collapse-header>
    <app-collapse-content>
-      <div class="inputSection btn-grid">
+      <div class="inputSection tagList">
        <app-tag-item
          *ngFor="let module of category.modules"
          [iconName]="isModulePicked(category, module) ? 'check' : null"

--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -82,8 +82,7 @@ button {
  }
 }

-// V3REMOVE we should probably rename this to "tagList" or something like this
-.btn-grid {
+.tagList {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px 8px;

--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -4,7 +4,7 @@ $white: #ffffff;
 $grey-0: $black;
 $grey: #b4bbbf;
 $grey-1: #333333;
-$grey-2-v3: #4c4d53;
+$grey-2: #4c4d53;
 $grey-3: #696969;
 $grey-4: #949494;
 $grey-5: #bdbdbd;
@@ -40,14 +40,6 @@ $warning-pressed: #f1742e;
 $success-hover: #066629;
 $success-pressed: #46c374;

-/* 
-OLD COLORS
-AFTER V3 DELETE FOLLOWING COLORS 
-*/
-$grey-2: #4f4f4f; // to delete after v3
-$grey-3-15: #33333326;
-$grey-3-20: #33333333;
-
 $red-20: #da363533; // main red with 20% opacity
 $red-hover: #c02423;
 $red-1: #f35453;