First step: Update main color + customer collection

Signed-off-by: Makhtar DIAGNE <makhtar.diagne@teamdlab.com>

api/api-iam/iam-commons/src/main/java/fr/gouv/vitamui/iam/common/dto/CustomerDto.java

@@ -113,4 +113,7 @@ public class CustomerDto extends IdDto {
     private String identifier;
 
     private boolean hasCustomGraphicIdentity = false;
+
+    private String mainColor;
+    private String secondaryColor;
 }

api/api-iam/iam-internal/src/main/java/fr/gouv/vitamui/iam/internal/server/customer/domain/GraphicIdentity.java

@@ -47,4 +47,8 @@ public class GraphicIdentity {
 
     String logoDataBase64;
 
+    // Theme based Graphical identity
+    String mainColor;
+    String secondaryColor;
+
 }

deployment/roles/vitamui/templates/ui-identity-admin/application.yml.j2

@@ -101,3 +101,7 @@ cas:
     trust-store: {{ vitamui_folder_conf }}/truststore_{{ vitamui_certificate_client_type }}.jks
     trust-store-password: {{ password_truststore }}
 {% endif %}
+
+theme:
+  main-color: {{}}
+  secondary-color: {{}}

ui/ui-frontend-common/src/app/modules/components/customer-select-content/customer-select-content.component.scss

@@ -28,7 +28,7 @@
     }
 
     i {
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
         font-size: 42px;
         margin-right: 15px;
     }

ui/ui-frontend-common/src/app/modules/components/download-snack-bar/download-snack-bar.component.scss

@@ -4,7 +4,7 @@
 
 :host {
     width: 100%;
-    background: $greeny-blue;
+    background: var(--vitamui-secondary);
     padding: 14px 24px;
 }
 

ui/ui-frontend-common/src/app/modules/components/editable-field/editable-duration-input/editable-duration-input.component.scss

@@ -115,7 +115,7 @@ $anim-timing: 150ms ease-out;
     }
 
     i.edit-icon {
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
         opacity: 0;
         // margin-left: 18px;
         transition: opacity $anim-timing;
@@ -125,7 +125,7 @@ $anim-timing: 150ms ease-out;
     }
 
     &:hover:not(.edit-mode), &:focus:not(.edit-mode) {
-        border-color: $greeny-blue;
+        border-color: var(--vitamui-secondary);
 
         i.edit-icon {
             opacity: 1;
@@ -168,7 +168,7 @@ $anim-timing: 150ms ease-out;
 }
 
 .editable-field.edit-mode {
-    border-color: $greeny-blue;
+    border-color: var(--vitamui-secondary);
     padding-right: 25px;
 
     .editable-field-content {

ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss

@@ -88,7 +88,7 @@ label {
     pointer-events: none;
 
     .required-marker {
-        color: $blood-orange;
+        color: var(--vitamui-primary);
     }
 }
 

ui/ui-frontend-common/src/app/modules/components/navbar/common-menu/common-menu.component.scss

@@ -48,7 +48,7 @@
 
     i {
         margin-right: 10px;
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
         font-size: 24px;
         vertical-align: middle;
 

ui/ui-frontend-common/src/app/modules/components/order-dropdown/order-dropdown.component.scss

@@ -17,7 +17,7 @@
     white-space: nowrap;
 
     &.active {
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
     }
 
     &.upside-down > i {

ui/ui-frontend-common/src/app/modules/components/order-dropdown/order-option/order-option.component.scss

@@ -24,7 +24,7 @@
     width: 100%;
 
     &.active > i {
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
     }
 
     &.upside-down > i {

ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.scss

@@ -31,7 +31,7 @@ label {
     @include elevation-1;
 
     &.slide-toggle-on {
-        background-color: $greeny-blue;
+        background-color: var(--vitamui-secondary);
     }
 
     &:hover {

ui/ui-frontend-common/src/app/modules/components/tenant-select-content/tenant-select-content.component.scss

@@ -28,7 +28,7 @@
     }
 
     i {
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
         font-size: 42px;
         margin-right: 15px;
     }

ui/ui-frontend-common/src/app/modules/components/vitamui-autocomplete/vitamui-autocomplete.component.scss

@@ -32,7 +32,7 @@ $animation-time: 150ms;
   right: 16px;
   top: 14px;
   pointer-events: none;
-  color: $blood-orange;
+  color: var(--vitamui-primary);
 }
 
 .input-label {

ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss

@@ -91,6 +91,6 @@ label {
     white-space: nowrap;
 
     .required-marker {
-        color: $blood-orange;
+        color: var(--vitamui-primary);
     }
 }

ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-textarea.component.scss

@@ -92,6 +92,6 @@ label {
     pointer-events: none;
 
     .required-marker {
-        color: $blood-orange;
+        color: var(--vitamui-primary);
     }
 }

ui/ui-frontend-common/src/app/modules/components/vitamui-list-input/vitamui-list-input.component.scss

@@ -68,5 +68,5 @@ input.vitamui-input {
 }
 
 .required-marker {
-    color: $blood-orange;
+    color: var(--vitamui-primary);
 }

ui/ui-frontend-common/src/app/modules/components/vitamui-menu-tile/vitamui-menu-tile.component.scss

@@ -31,7 +31,7 @@
 
 .user-app {
     i {
-        color: $blood-orange;
+        color: var(--vitamui-primary);
 
         &.chevron-icon {
             font-size: 24px;
@@ -62,7 +62,7 @@
 
 .settings-app {
     i {
-    color: $greeny-blue;
+    color: var(--vitamui-secondary);
 
         &.chevron-icon {
             font-size: 24px;
@@ -83,7 +83,7 @@
 }
 
 .archive-tile {
-    background-color: $blood-orange;
+    background-color: var(--vitamui-primary);
     color: $white;
 
     i {

ui/ui-frontend-common/src/app/modules/components/vitamui-tenant-select/vitamui-tenant-select.component.scss

@@ -44,7 +44,7 @@ $input-height: 70px;
     }
 
     i {
-        color: $greeny-blue;
+        color: var(--vitamui-secondary);
         font-size: 42px;
         margin-right: 15px;
     }

ui/ui-frontend-common/src/app/modules/startup.service.ts

@@ -63,6 +63,8 @@ export class StartupService {
 
   private CURRENT_TENANT_IDENTIFIER: string;
 
+  private themeWrapper = document.querySelector('body');
+
   constructor(
     private logger: Logger,
     private authService: AuthService,
@@ -81,6 +83,10 @@ export class StartupService {
         this.authService.loginUrl = this.configurationData.CAS_URL;
         this.authService.logoutUrl = this.configurationData.CAS_LOGOUT_URL;
         this.authService.logoutRedirectUiUrl = this.configurationData.LOGOUT_REDIRECT_UI_URL;
+
+        // TODO set the colors returned from the back-end - How to get customer's values ? Or not load here ?
+        this.themeWrapper.style.setProperty('--vitamui-primary', '#81B');
+        this.themeWrapper.style.setProperty('--vitamui-secondary', '#A2F');
       })
       .then(() => this.refreshUser().toPromise())
       .then(() => this.applicationService.list().toPromise());

ui/ui-frontend-common/src/app/modules/subrogation/subrogation-banner/subrogation-banner.component.scss

 @import '../../../../sass/variables/colors';
 
 .banner-subrogation {
-    background: $greeny-blue;
+    background: var(--vitamui-secondary);
     border-radius: 0;
     max-width: none;
     width: 100%;