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 d18c2e7fdd74497648db4a3636fab437ba704644..f080d28e196d6dd471e6b0e69a90940cfa5a3dd4 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 f09eb8a10888ccd1481d4f543cbc3f1bd8e942a1..d813a8b78dcd442aedf9db1dfd100fe20ddbcf6f 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 e6f3a3cbfb969ea23b58b1593f729cc1505316c5..0c1257e7efb2d818ded2049b07ec9281e6dd8bc6 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 00b364aa725f4ce5a4e1edd28e6a8a0f3bef96a8..0154b964c5c63d133af7912b39557a74b28da4a8 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 2f6a9185b86e0ee7bd48d0d8b8dddb1e33af6f41..40dd7f8a434293210540181680d04371e7b48605 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);