[US TRTL-200] change select tenant

[FIX TRTL-217] Fix wording

ui/ui-frontend-common/src/app/modules/components/header/header.component.html

@@ -5,7 +5,7 @@
 
   <div class="spacer"></div>
 
-  <vitamui-common-select-tenant></vitamui-common-select-tenant>
+  <vitamui-common-select-tenant class="d-flex mx-3"></vitamui-common-select-tenant>
 
   <div class="separator"></div>
 
@@ -20,7 +20,7 @@
     </div>
 
     <div class="d-flex align-items-center justify-content-center p-0">
-      <mat-icon>keyboard_arrow_down</mat-icon>
+      <mat-icon>arrow_drop_down</mat-icon>
     </div>
     <div class="account-menu">
       <mat-menu #accountMenu="matMenu" [overlapTrigger]="false" xPosition="before">

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

@@ -41,17 +41,12 @@ mat-toolbar {
   cursor: pointer;
 }
 
+
 .person-icon mat-icon {
-  font-size: 45px;
-  width: 100%;
+  margin-left: -10px;
   height: 100%;
-}
-
-.arrow-icon mat-icon {
-  font-size: 30px;
   width: 100%;
-  height: 100%;
-  margin-top: calc(100% - 26px)
+  font-size: xxx-large;
 }
 
 .apps-button {

ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.html

-<mat-form-field class="tenant-selector">
-    <mat-label *ngIf="selectedTenant" i18n="@@selectedTenantLabel" class="selected-tenant-label">Coffre sélectioné</mat-label>
+<mat-form-field appearance="fill">
+    <mat-label *ngIf="selectedTenant" i18n="@@selectedTenantLabel" class="selected-tenant-label">Coffre sélectionné</mat-label>
     <mat-label *ngIf="!selectedTenant" i18n="@@selectTenantLabel" class="unselected-tenant-label">Sélectionner un coffre</mat-label>
     <mat-select>
         <mat-option
-        *ngFor="let tenant of tenants"
-        [value]="tenant"
-        (onSelectionChange)="selectTenant($event.source.value)">
-        {{ tenant.name }}
-    </mat-option>
-</mat-select>
+            *ngFor="let tenant of tenants"
+            [value]="tenant"
+            (onSelectionChange)="selectTenant($event.source.value)">
+            {{ tenant.name }}
+        </mat-option>
+    </mat-select>
 </mat-form-field>

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

 @import '../../../../../sass/variables/colors';
 
-.tenant-selector {
-  font-size: 14px;
-  border-radius: 50px;
-  padding: 0 25px;
-  height: 45px;
-  background-color: $white;
-  color: $charcoal-grey;
-}
-
 .selected-tenant-label, .unselected-tenant-label {
   color: $warm-grey;
   font-size: 16px;
 }
 
-.selected-tenant-label {
-  display: block;
-  padding-top: 0.3rem;
-}
-
 :host::ng-deep {
   .mat-form-field-underline {
     display: none;
@@ -31,4 +17,36 @@
   .mat-select-arrow {
     color: var(--vitamui-primary);
   }
+
+  .mat-form-field-wrapper {
+    padding-bottom: 0;
+  }
+
+  mat-form-field {
+    background-color: $white;
+    padding-left: 25px;
+    padding-right: 25px;
+    border-radius: 50px;
+  }
+
+  .mat-form-field-flex {
+    background-color: $white;
+    padding: 0!important;
+  }
+
+  mat-select {
+    color: #747272!important;
+  }
+
+  .mat-form-field-infix {
+    padding: 0;
+  }
+
+  .mat-select-arrow-wrapper {
+    vertical-align: inherit;
+  }
+
+  span.mat-select-placeholder {
+    margin-top: 0.4rem;
+  }
 }
\ No newline at end of file