From cc2fd62979d09977e2e6154f198abc773b4ff103 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Thu, 15 Feb 2024 14:25:53 +0100
Subject: [PATCH] refactor(V3): remove old V3 colors & rename a class
---
.../profile-job-selection.component.html | 2 +-
...ucture-digital-helping-accompaniment.component.html | 2 +-
.../structure-public-target.component.html | 8 ++++----
.../structure-solidarity-material.component.html | 2 +-
.../base-skills-choice.component.html | 2 +-
.../equipment-access-choice.component.html | 2 +-
.../equipment-buy-type.component.html | 2 +-
.../online-demarch.component.html | 2 +-
src/app/profile/edit/edit.component.html | 2 +-
src/app/profile/edit/edit.component.scss | 2 +-
.../accompaniment-picker.component.html | 2 +-
src/app/shared/components/button/button.component.scss | 8 ++++----
.../structure-type-picker.component.html | 6 +++---
src/app/shared/components/tag-item/tag-item.stories.ts | 2 +-
.../training-type-picker.component.html | 2 +-
src/assets/scss/_buttons.scss | 3 +--
src/assets/scss/_color.scss | 10 +---------
17 files changed, 25 insertions(+), 34 deletions(-)
diff --git 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
index 9702b1ebe..e749780fe 100644
--- 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'"
diff --git 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
index e0ceac620..54e54a9e0 100644
--- 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 ?</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"
diff --git 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
index 373342379..1f7906c5d 100644
--- 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"
diff --git 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
index 94d8f1747..245ab0023 100644
--- 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"
diff --git 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
index 724a7d322..04fced4f3 100644
--- 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
@@ -1,7 +1,7 @@
<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"
diff --git 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
index 267d3dd2e..5e2045caa 100644
--- 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
@@ -1,7 +1,7 @@
<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"
diff --git 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
index a286936cd..90b6d2a34 100644
--- 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
@@ -1,7 +1,7 @@
<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"
diff --git 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
index a407c1423..bcb2d8de6 100644
--- 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
@@ -1,6 +1,6 @@
<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"
diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html
index 820dcb31f..1d611b1d7 100644
--- 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"
diff --git a/src/app/profile/edit/edit.component.scss b/src/app/profile/edit/edit.component.scss
index 2446040e4..d3bedb603 100644
--- 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;
}
diff --git a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
index 6c3b55509..e38019e36 100644
--- a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
+++ b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html
@@ -1,4 +1,4 @@
-<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"
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index ea5b1c040..df26c7b95 100644
--- 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;
}
}
diff --git 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
index e8a401150..5bf922a4f 100644
--- 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
@@ -1,7 +1,7 @@
<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"
diff --git a/src/app/shared/components/tag-item/tag-item.stories.ts b/src/app/shared/components/tag-item/tag-item.stories.ts
index ddfd2f5dd..48e329684 100644
--- 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" />
diff --git 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
index ad26b9d12..b9b710433 100644
--- 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"
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index 29c063e9f..f08542518 100644
--- 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;
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index c5384d2d3..b5d8d2f59 100644
--- 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;
--
GitLab