From aca8800849cc7ae834f41990bafe3d2731fc8091 Mon Sep 17 00:00:00 2001
From: Irmantas Kaukas <irmastnt@gmail.com>
Date: Mon, 15 Apr 2024 13:21:36 +0200
Subject: [PATCH] fix: color picker style (DEV-3476) (#1551)

---
 .../add-region-form/add-region-form.component.html  |  2 +-
 .../add-region-form/add-region-form.component.scss  | 13 +++++++++++++
 .../color-picker/color-picker.component.scss        |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.html b/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.html
index 15fe0dfb91..c946d389c8 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.html
@@ -8,7 +8,7 @@
     <textarea matInput rows="7" formControlName="comment"></textarea>
   </mat-form-field>
   <mat-form-field class="large-field without-border color-field">
-    <mat-label>Color *</mat-label>
+    <mat-label class="color-label">Color *</mat-label>
     <app-color-picker #colorInput [formControlName]="'color'" class="value"> </app-color-picker>
   </mat-form-field>
   <mat-form-field class="hidden">
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.scss
index a8b739dc3a..06cf0eb922 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.scss
+++ b/apps/dsp-app/src/app/workspace/resource/representation/add-region-form/add-region-form.component.scss
@@ -10,12 +10,25 @@
   }
 }
 
+::ng-deep .color-field > .mat-mdc-text-field-wrapper {
+  padding-top: 22px;
+}
+
 .color-field {
   // unfortunate necessary use of ng-deep to override the default
   ::ng-deep .mat-mdc-text-field-wrapper {
     overflow: visible;
     z-index: 999;
 
+    .color-label {
+      line-height: 48px;
+    }
+
+    .mat-mdc-form-field-infix {
+      padding-top: 13px;
+      min-height: 50px;
+    }
+
     // the color picker library calculates the wrong position if placed in a dialog window
     // this is a workaround to fix the position
     .color-picker.open {
diff --git a/apps/dsp-app/src/app/workspace/resource/values/color-value/color-picker/color-picker.component.scss b/apps/dsp-app/src/app/workspace/resource/values/color-value/color-picker/color-picker.component.scss
index b851362057..8deba8bbd8 100644
--- a/apps/dsp-app/src/app/workspace/resource/values/color-value/color-picker/color-picker.component.scss
+++ b/apps/dsp-app/src/app/workspace/resource/values/color-value/color-picker/color-picker.component.scss
@@ -1,4 +1,4 @@
 .child-input-component {
-  height: 48px;
+  height: 58px;
   max-width: 256px;
 }