diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.html
index f6dd05621a0db19a5d96b56c46dcdf99afa2e0e2..0681be81d8f3477a1f3062ca6e2a294145d15b5c 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.html
@@ -1,9 +1,9 @@
-<div class="container">
+<div class="container" >
<div>
- <span class="color-text">Couleur primaire: </span>
+ <h4>{{ "COLORS.Primary" | translate }}</h4>
</div>
<div>
- <div class="color" style="background-color: var(--vitamui-primary)"></div>
+ <div class="color" style="background-color: var(--vitamui-primary)"></div>
<ul>
<li>
@@ -11,7 +11,7 @@
class="shade"
style="background-color: var(--vitamui-primary-50)"
></div>
- <div class="shade-text"><span class="color-value">50</span></div>
+ <div class="shade-text"><span class="text medium">50</span></div>
</li>
<li>
@@ -19,63 +19,63 @@
class="shade"
style="background-color: var(--vitamui-primary-100)"
></div>
- <div class="shade-text"><span class="color-value">100</span></div>
+ <div class="shade-text"><span class="text medium">100</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary-200)"
></div>
- <div class="shade-text"><span class="color-value">200</span></div>
+ <div class="shade-text"><span class="text medium">200</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary-300)"
></div>
- <div class="shade-text"><span class="color-value">300</span></div>
+ <div class="shade-text"><span class="text medium">300</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary-400)"
></div>
- <div class="shade-text"><span class="color-value">400</span></div>
+ <div class="shade-text"><span class="text medium">400</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary)"
></div>
- <div class="shade-text"><span class="color-value">(500)</span></div>
+ <div class="shade-text"><span class="text medium">(500)</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary-600)"
></div>
- <div class="shade-text"><span class="color-value">600</span></div>
+ <div class="shade-text"><span class="text medium">600</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary-700)"
></div>
- <div class="shade-text"><span class="color-value">700</span></div>
+ <div class="shade-text"><span class="text medium">700</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary-800)"
></div>
- <div class="shade-text"><span class="color-value">800</span></div>
+ <div class="shade-text"><span class="text medium">800</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-primary-900)"
></div>
- <div class="shade-text"><span class="color-value">900</span></div>
+ <div class="shade-text"><span class="text medium">900</span></div>
</li>
</ul>
</div>
@@ -83,7 +83,7 @@
<div class="container">
<div>
- <span class="color-text">Couleur secondaire: </span>
+ <h4>{{ "COLORS.Secondary" | translate }}</h4>
</div>
<div>
<div class="color" style="background-color: var(--vitamui-secondary)"></div>
@@ -94,7 +94,7 @@
class="shade"
style="background-color: var(--vitamui-secondary-50)"
></div>
- <div class="shade-text"><span class="color-value">50</span></div>
+ <div class="shade-text"><span class="text medium">50</span></div>
</li>
<li>
@@ -102,63 +102,63 @@
class="shade"
style="background-color: var(--vitamui-secondary-100)"
></div>
- <div class="shade-text"><span class="color-value">100</span></div>
+ <div class="shade-text"><span class="text medium">100</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary-200)"
></div>
- <div class="shade-text"><span class="color-value">200</span></div>
+ <div class="shade-text"><span class="text medium">200</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary-300)"
></div>
- <div class="shade-text"><span class="color-value">300</span></div>
+ <div class="shade-text"><span class="text medium">300</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary-400)"
></div>
- <div class="shade-text"><span class="color-value">400</span></div>
+ <div class="shade-text"><span class="text medium">400</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary)"
></div>
- <div class="shade-text"><span class="color-value">(500)</span></div>
+ <div class="shade-text"><span class="text medium">(500)</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary-600)"
></div>
- <div class="shade-text"><span class="color-value">600</span></div>
+ <div class="shade-text"><span class="text medium">600</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary-700)"
></div>
- <div class="shade-text"><span class="color-value">700</span></div>
+ <div class="shade-text"><span class="text medium">700</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary-800)"
></div>
- <div class="shade-text"><span class="color-value">800</span></div>
+ <div class="shade-text"><span class="text medium">800</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-secondary-900)"
></div>
- <div class="shade-text"><span class="color-value">900</span></div>
+ <div class="shade-text"><span class="text medium">900</span></div>
</li>
</ul>
</div>
@@ -166,7 +166,7 @@
<div class="container">
<div>
- <span class="color-text">Couleur gris: </span>
+ <h4>{{ "COLORS.Grey" | translate }}</h4>
</div>
<div>
<div class="color" style="background-color: var(--vitamui-grey)"></div>
@@ -177,7 +177,7 @@
class="shade"
style="background-color: var(--vitamui-grey-50)"
></div>
- <div class="shade-text"><span class="color-value">50</span></div>
+ <div class="shade-text"><span class="text medium">50</span></div>
</li>
<li>
@@ -185,63 +185,60 @@
class="shade"
style="background-color: var(--vitamui-grey-100)"
></div>
- <div class="shade-text"><span class="color-value">100</span></div>
+ <div class="shade-text"><span class="text medium">100</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-grey-200)"
></div>
- <div class="shade-text"><span class="color-value">200</span></div>
+ <div class="shade-text"><span class="text medium">200</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-grey-300)"
></div>
- <div class="shade-text"><span class="color-value">300</span></div>
+ <div class="shade-text"><span class="text medium">300</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-grey-400)"
></div>
- <div class="shade-text"><span class="color-value">400</span></div>
+ <div class="shade-text"><span class="text medium">400</span></div>
</li>
<li>
- <div
- class="shade"
- style="background-color: var(--vitamui-grey)"
- ></div>
- <div class="shade-text"><span class="color-value">(500)</span></div>
+ <div class="shade" style="background-color: var(--vitamui-grey)"></div>
+ <div class="shade-text"><span class="text medium">(500)</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-grey-600)"
></div>
- <div class="shade-text"><span class="color-value">600</span></div>
+ <div class="shade-text"><span class="text medium">600</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-grey-700)"
></div>
- <div class="shade-text"><span class="color-value">700</span></div>
+ <div class="shade-text"><span class="text medium">700</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-grey-800)"
></div>
- <div class="shade-text"><span class="color-value">800</span></div>
+ <div class="shade-text"><span class="text medium">800</span></div>
</li>
<li>
<div
class="shade"
style="background-color: var(--vitamui-grey-900)"
></div>
- <div class="shade-text"><span class="color-value">900</span></div>
+ <div class="shade-text"><span class="text medium">900</span></div>
</li>
</ul>
</div>
@@ -249,17 +246,16 @@
<div class="container">
<div>
- <span class="color-text">Couleur rouge: </span>
+ <h4>{{ "COLORS.Red" | translate }}</h4>
</div>
<div>
<div class="color red"></div>
</div>
</div>
-
<div class="container">
<div>
- <span class="color-text">Couleur orange: </span>
+ <h4>{{ "COLORS.Orange" | translate }}</h4>
</div>
<div>
<div class="color orange"></div>
@@ -268,9 +264,9 @@
<div class="container">
<div>
- <span class="color-text">Couleur vert: </span>
+ <h4>{{ "COLORS.Green" | translate }}</h4>
</div>
<div>
<div class="color green"></div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.scss b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.scss
index 7e1c3a6f15aa6fb01e5e5a689d9aa5a9a26714fa..827e7a70fdbd86364772a8faaef12d00cc9c0ad9 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.scss
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.scss
@@ -24,22 +24,10 @@ ul {
.shade-text{
text-align: center;
- margin-right: 10px;
+ margin-right: 18px;
margin-top: 10px;
}
-
-
-.color-text {
- font-family: Mulish;
- font-size: 18px;
- font-style: normal;
- font-weight: 900;
- line-height: 28px;
- letter-spacing: 0px;
- text-align: left;
-}
-
.red{
background-color: $red;
}
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.module.ts
index b60013146e5c1fecdb0d938335097580649859b1..69d1e0a8fff913d99c3b450e5926ebb04a9d69c5 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.module.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.module.ts
@@ -1,12 +1,15 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ColorsComponent } from './colors.component';
+import { VitamUICommonModule } from 'ui-frontend-common';
@NgModule({
declarations: [ColorsComponent],
- imports: [CommonModule],
+ imports: [
+ CommonModule,
+ VitamUICommonModule],
exports: [ColorsComponent]
})
export class ColorsModule { }
diff --git a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json
index 488a76fd0ded0f5cb51a942555eb45ae0f521c3c..00fe4bfb9d89d253d63e37f958226446e4e0f6c8 100644
--- a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json
+++ b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json
@@ -18,5 +18,13 @@
"Open": "Open the sample dialog",
"Step-0": "First Step",
"Step-1": "Second Step"
+ },
+ "COLORS":{
+ "Primary": "Color primary",
+ "Secondary": "Color secondary",
+ "Grey": "Color grey",
+ "Red": "Color red",
+ "Orange": "Color orange",
+ "Green": "Color green"
}
}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json
index e6fb573637b7034e326549155e8e945d1d3d8645..c98e9042a6611938f9f257175bb178827a1af484 100644
--- a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json
+++ b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json
@@ -18,5 +18,13 @@
"Open": "Ouvrir la popup d'exemple",
"Step-0": "Première étape",
"Step-1": "Deuxième étape"
+ },
+ "COLORS":{
+ "Primary": "Couleur primaire",
+ "Secondary": "Couleur secondaire",
+ "Grey": "Couleur gris",
+ "Red": "Couleur rouge",
+ "Orange": "Couleur orange",
+ "Green": "Couleur vert"
}
}
\ No newline at end of file