From 1b29a8e64618c5ec6cc1fbaf8357098cfa41754f Mon Sep 17 00:00:00 2001
From: Paris Alexandre <ldr.paris@gmail.com>
Date: Mon, 21 Aug 2023 16:21:16 +0200
Subject: [PATCH] [VAS] Story 10410: update design

---
 ...xternal-param-profile-create.component.css | 44 -----------
 ...ternal-param-profile-create.component.html | 77 +++++++++++--------
 ...ternal-param-profile-create.component.scss | 56 ++++++++++++++
 ...external-param-profile-create.component.ts |  2 +-
 .../information-tab.component.html            |  2 +-
 .../information-tab.component.scss            |  0
 .../information-tab.component.ts              |  4 +-
 7 files changed, 104 insertions(+), 81 deletions(-)
 delete mode 100644 ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.css
 create mode 100644 ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.scss
 create mode 100644 ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.scss

diff --git a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.css b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.css
deleted file mode 100644
index 296a5683351..00000000000
--- a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.icon-information {
-    position: absolute;
-    float: right;
-    top: 3px;
-    right: -75px;
-    width: 30px;
-    height: 31px;
-    font-size: 26px;
-    font-weight: bold;
-}
-
-.header-title { 
-    font-family: 'Mulish';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    display: flex;
-    align-items: center;
-    color: #757575;
-    margin: 0 0 5px 0;
-}
-
-.header-subtitle{
-    margin: 0 0 5px 0;
-}
-.vitamui-mat-select{
-    width: 70%;
-}
-
-.icon-close {
-  text-align: right;
-  float: right;
-  margin: 18px 0 0 0;
-}
-
-.icon-close:hover {
-  cursor: pointer;
-}
-
-vitamui-common-progress-bar {
-    display: inline-block;
-    width: 95%;
-}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.html b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.html
index 67f28b3ec12..6e9b0343d54 100644
--- a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.html
@@ -7,10 +7,12 @@
     <cdk-step>
       <div class="content">
         <div class="vitamui-form">
-          <div class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
-          <div class="text large header-subtitle">
+          <div
+            class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
+          <div class="text large bold header-subtitle">
             {{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP_SUBTITLE' | translate }}
           </div>
+
           <div class="mb-2">
             <vitamui-common-slide-toggle formControlName="enabled">
               {{ 'EXTERNAL_PARAM_PROFILE.PROFILE' | translate }}
@@ -29,12 +31,12 @@
           >
             <vitamui-common-input-error
               *ngIf="externalParamProfileForm?.get('name')?.touched && !!externalParamProfileForm?.get('name')?.errors?.required"
-              >{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
+            >{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
             >
 
             <vitamui-common-input-error
               *ngIf="externalParamProfileForm?.get('name')?.touched && !!externalParamProfileForm?.get('name')?.errors?.nameExists"
-              >{{ 'COMMON.ERROR.NAME_ALREADY_EXISTS' | translate }}</vitamui-common-input-error
+            >{{ 'COMMON.ERROR.NAME_ALREADY_EXISTS' | translate }}</vitamui-common-input-error
             >
           </vitamui-common-input>
 
@@ -50,7 +52,7 @@
               *ngIf="
                 externalParamProfileForm?.get('description')?.touched && !!externalParamProfileForm?.get('description')?.errors?.required
               "
-              >{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
+            >{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
             >
           </vitamui-common-input>
 
@@ -62,8 +64,9 @@
               panelclass="vitamui-mat-select"
               class="w-100"
             >
-              <mat-option *ngFor="let accessContract of activeAccessContracts$ | async" [value]="accessContract.identifier"
-                >{{ accessContract.identifier }}
+              <mat-option *ngFor="let accessContract of activeAccessContracts$ | async"
+                          [value]="accessContract.identifier"
+              >{{ accessContract.identifier }}
               </mat-option>
             </mat-select>
             <div class="select-arrow">
@@ -73,7 +76,8 @@
           </mat-form-field>
         </div>
         <div class="actions">
-          <button type="button" class="btn primary" cdkStepperNext [disabled]="firstStepInvalid()">{{ 'COMMON.NEXT' | translate }}</button>
+          <button type="button" class="btn primary" cdkStepperNext
+                  [disabled]="firstStepInvalid()">{{ 'COMMON.NEXT' | translate }}</button>
           <button type="button" class="btn link cancel" (click)="onCancel()">
             {{ 'COMMON.CANCEL' | translate }}
           </button>
@@ -84,8 +88,10 @@
     <cdk-step>
       <div class="content">
         <div class="vitamui-form">
-          <div class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
-          <div class="text large bold header-subtitle">{{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}</div>
+          <div
+            class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
+          <div
+            class="text large bold header-subtitle">{{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}</div>
 
           <div class="mb-2">
             <vitamui-common-slide-toggle formControlName="usePlatformThreshold">
@@ -93,30 +99,33 @@
             </vitamui-common-slide-toggle>
           </div>
 
-          <mat-form-field class="vitamui-mat-select" *ngIf="!externalParamProfileForm.get('usePlatformThreshold').value">
-            <mat-select
-              formControlName="bulkOperationsThreshold"
-              placeholder="{{ 'EXTERNAL_PARAM_PROFILE.USE_PLATFORM_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}"
-              required="required"
-              panelclass="vitamui-mat-select"
-              [(value)]="selectedThreshold"
-              class="w-100"
-            >
-              <mat-option *ngFor="let thresholdValue of thresholdValues" [value]="thresholdValue">
-                {{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_VALUES' | translate : { threshold: thresholdValue | number } }}
-              </mat-option>
-            </mat-select>
-            <div class="select-arrow">
-              <i class="material-icons">keyboard_arrow_up</i>
-              <i class="material-icons">keyboard_arrow_down</i>
-            </div>
-            <i
-              class="vitamui-icon vitamui-icon-info-circle vitamui-row-icon icon-information"
-              [matTooltip]="'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_HELPER' | translate"
-              matTooltipClass="vitamui-tooltip"
-              [matTooltipShowDelay]="300"
+          <div class="select-threshold" *ngIf="!externalParamProfileForm.get('usePlatformThreshold').value">
+            <mat-form-field class="vitamui-mat-select">
+              <mat-select
+                formControlName="bulkOperationsThreshold"
+                placeholder="{{ 'EXTERNAL_PARAM_PROFILE.USE_PLATFORM_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}"
+                required="required"
+                panelclass="vitamui-mat-select"
+                [(value)]="selectedThreshold"
+                class="w-100"
+              >
+                <mat-option *ngFor="let thresholdValue of thresholdValues" [value]="thresholdValue">
+                  {{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_VALUES' | translate : { threshold: thresholdValue | number } }}
+                </mat-option>
+              </mat-select>
+              <div class="select-arrow">
+                <i class="material-icons">keyboard_arrow_up</i>
+                <i class="material-icons">keyboard_arrow_down</i>
+              </div>
+            </mat-form-field>
+
+            <i class="vitamui-icon vitamui-icon-info-circle vitamui-row-icon icon-information"
+               [matTooltip]="'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_HELPER' | translate"
+               matTooltipClass="vitamui-tooltip"
+               [matTooltipShowDelay]="300"
             ></i>
-          </mat-form-field>
+
+          </div>
         </div>
         <div class="actions">
           <button type="submit" class="btn primary mr-4" [disabled]="onValidate()">
@@ -129,7 +138,7 @@
         <button type="button" class="btn link" cdkStepperPrevious>
           <i class="vitamui-icon vitamui-icon-chevron-left"></i>
           <ng-container
-            ><span>{{ 'COMMON.BACK' | translate }}</span></ng-container
+          ><span>{{ 'COMMON.BACK' | translate }}</span></ng-container
           >
         </button>
       </div>
diff --git a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.scss b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.scss
new file mode 100644
index 00000000000..e203dcd7efd
--- /dev/null
+++ b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.scss
@@ -0,0 +1,56 @@
+.icon-information {
+  right: -75px;
+  width: 30px;
+  height: 31px;
+  font-size: 26px;
+  font-weight: bold;
+  color: var(--vitamui-secondary);
+}
+
+.select-threshold {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  i {
+    display: flex;
+    margin-left: 15px;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.header-title {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  color: #757575;
+  margin: 0 0 5px 0;
+}
+
+.header-subtitle {
+  margin: 0 0 30px 0;
+}
+
+.vitamui-mat-select {
+  width: 70%;
+}
+
+.icon-close {
+  text-align: right;
+  float: right;
+  margin: 18px 0 0 0;
+}
+
+.icon-close:hover {
+  cursor: pointer;
+}
+
+vitamui-common-progress-bar {
+  display: inline-block;
+  width: 95%;
+}
diff --git a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.ts b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.ts
index 1efa36e0d10..dd5bf31e630 100644
--- a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.ts
@@ -46,7 +46,7 @@ import { ExternalParamProfileValidators } from '../external-param-profile.valida
 @Component({
   selector: 'app-external-param-profile-create',
   templateUrl: './external-param-profile-create.component.html',
-  styleUrls: ['./external-param-profile-create.component.css'],
+  styleUrls: ['./external-param-profile-create.component.scss'],
 })
 export class ExternalParamProfileCreateComponent implements OnInit, OnDestroy {
   externalParamProfileForm: FormGroup;
diff --git a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.html b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.html
index 3bd348141db..5bbf8452441 100644
--- a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.html
@@ -52,7 +52,7 @@
     </div>
     <div class="row">
       <div class="col-12">
-        <mat-form-field class="vitamui-mat-select">
+        <mat-form-field class="vitamui-mat-select w-100">
           <mat-select
             formControlName="accessContract"
             placeholder="{{ 'EXTERNAL_PARAM_PROFILE.SELECT_ACCESSCONTRACT' | translate }}"
diff --git a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.ts b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.ts
index de61446d810..9196bdea56e 100644
--- a/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.ts
@@ -45,7 +45,8 @@ import { ExternalParamProfileValidators } from '../../external-param-profile.val
 
 @Component({
   selector: 'app-information-tab',
-  templateUrl: './information-tab.component.html'
+  templateUrl: './information-tab.component.html',
+  styleUrls: ['./information-tab.component.scss'],
 })
 export class InformationTabComponent implements OnDestroy, OnInit, OnChanges {
   constructor(
@@ -53,6 +54,7 @@ export class InformationTabComponent implements OnDestroy, OnInit, OnChanges {
     private externalParamProfileService: ExternalParamProfileService,
     private externalParamProfileValidators: ExternalParamProfileValidators
   ) {}
+
   form: FormGroup;
   permissionForm: FormGroup;
   groupsCount: boolean;