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 9702b1ebebd3a8b6c3ca39ce5aa1aa66d969f113..e749780fe81e2c5be0807a11bd5ee8669276fc73 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 e0ceac620ade07fdea4390249348587c325ffdf9..54e54a9e0008b284f64a447548baf9f0d1cc61a2 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 3733423791e6b4762e1979756ebf16f28e25d535..1f7906c5dd85c94687e253c77a254d26013e8c79 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 94d8f1747c82a12041f0d376fc5a1a31873412a3..245ab00233d2aff54aeea024a44e9cb3ceb1ac74 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 724a7d322d9b8d0991db5f984001ea8f56842e77..04fced4f36e447db6733edf73581af0c8248812d 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 267d3dd2edef517593372cc4b9c4472941230250..5e2045caaabec6566e9402ff5e28ac3c8b0d4023 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 a286936cd9cca900de32bb74a3b1096a8168aad4..90b6d2a347106c76a02b7349abd00cfab90280ce 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 a407c14239ad1f831ab4765135e5c193014c1846..bcb2d8de609918b961474ef62d0e5d74efb8820c 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 820dcb31f9dbb7b183b4d01bbad5ffaec10e44cd..1d611b1d734eaf079db63ec20d800dca1af1c128 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 2446040e4c696d67f1b40be1c4be1d7831c17a5c..d3bedb6030a55436bbc7814e40fd88ab50801ac4 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 6c3b5550966d07e4f338126d908669d13cbca402..e38019e36dbb9966287301812d3d265d97db73c6 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 ea5b1c0408d0e44cc2047d8c6c1ba1b426946517..df26c7b95bddaa53aafc762559de5858e5cf7b49 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 e8a401150d00efa079292c6b2f9b5fbbb4198017..5bf922a4fd477443fd50d05448f06a4b2aca3446 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 ddfd2f5dd2c9f0d531f02da384ab3d7dce8b5b28..48e3296848c32eabaa985d26534e4de71a843e4f 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 ad26b9d12a7b08bfeaec1184f78607261ab50e44..b9b710433dd8c76e69a0da482fdf4166c5db101c 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 29c063e9f5ec8f9679e863f65f83df625959b439..f0854251863b80121f0ae1b72ce2f3ef6c0cf1b0 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 c5384d2d3509dc6c2fc3d76b324aa720d298c2e3..b5d8d2f59359abce743eaea747ade3e25ffc3bd6 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;