From ff60d1fcaab25727e45c2d9381ce86370a47a4cb Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Fri, 6 Sep 2024 16:00:06 +0200
Subject: [PATCH] feat(structure): free workshop blue tag item

---
 .../structure-edition-summary.component.html               | 7 +++----
 src/app/shared/components/tag-item/tag-item.component.scss | 5 +++++
 src/app/shared/components/tag-item/tag-item.component.ts   | 2 +-
 .../structure-details/structure-details.component.html     | 7 +++----
 src/assets/scss/_color.scss                                | 4 ++--
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
index d18c2e7fd..f080d28e1 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
@@ -292,7 +292,7 @@
         *ngIf="containsDigitalHelp()"
         label="Accompagnements gratuits"
         size="small"
-        color="red"
+        color="blue"
         [clickable]="false"
       />
       <div class="content">
@@ -358,10 +358,9 @@
 
       <ng-container *ngIf="containsDigitalLearning()">
         <app-tag-item
-          *ngFor="let item of structure.categoriesDisplay.freeWorkShop"
-          [label]="item.name"
+          [label]="structure.categoriesDisplay.freeWorkShop[0].name"
           [size]="'small'"
-          [color]="'red'"
+          [color]="'blue'"
           [clickable]="false"
         />
       </ng-container>
diff --git a/src/app/shared/components/tag-item/tag-item.component.scss b/src/app/shared/components/tag-item/tag-item.component.scss
index f09eb8a10..d813a8b78 100644
--- a/src/app/shared/components/tag-item/tag-item.component.scss
+++ b/src/app/shared/components/tag-item/tag-item.component.scss
@@ -69,6 +69,11 @@ button {
     background-color: $red-lighter;
   }
 
+  &.blue {
+    color: $blue-dark;
+    background-color: $blue-light;
+  }
+
   &.black {
     color: $white;
     background-color: $grey-1;
diff --git a/src/app/shared/components/tag-item/tag-item.component.ts b/src/app/shared/components/tag-item/tag-item.component.ts
index e6f3a3cbf..0c1257e7e 100644
--- a/src/app/shared/components/tag-item/tag-item.component.ts
+++ b/src/app/shared/components/tag-item/tag-item.component.ts
@@ -14,7 +14,7 @@ export class TagItemComponent {
   @Input() size?: 'small' | 'medium' = 'medium';
 
   /** What color should the tag be ? */
-  @Input() color?: 'white' | 'black' | 'red' | 'grey' | 'green' = 'white';
+  @Input() color?: 'white' | 'black' | 'red' | 'blue' | 'grey' | 'green' = 'white';
 
   /** Should the button be clickable ? */
   @Input() clickable = false;
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 00b364aa7..0154b964c 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -176,7 +176,7 @@
         *ngIf="structure.categoriesDisplay.onlineProcedures.length > 0"
         label="Accompagnements gratuits"
         size="small"
-        color="red"
+        color="blue"
         [clickable]="false"
       />
       <div class="wrapper">
@@ -194,10 +194,9 @@
     <section *ngIf="hasBaseSkills() || hasAdvancedSkills()" class="digitalSkills">
       <h2>Accompagnements aux usages numériques</h2>
       <app-tag-item
-        *ngFor="let item of structure.categoriesDisplay.freeWorkShop"
-        [label]="item.name"
+        [label]="structure.categoriesDisplay.freeWorkShop[0].name"
         [size]="'small'"
-        [color]="'red'"
+        [color]="'blue'"
         [clickable]="false"
       />
 
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 2f6a9185b..40dd7f8a4 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -53,8 +53,8 @@ $info-success: #1d8844;
 $red-error: #e1000f;
 
 /* OTHERS */
-$blue: #348899;
-$blue-light: #c9ecf3;
+$blue-dark: #006ad7;
+$blue-light: #e4f2ff;
 /* APP COLORS */
 $modal-background-transparent: rgba($grey-1, 0);
 $modal-background: rgba($grey-1, 0.25);
-- 
GitLab