fix: color picker style (DEV-3476) (#1551)

dasch-swiss · Apr 15, 2024 · aca8800 · aca8800
1 parent b503cfc
commit aca8800
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/.../src/app/workspace/resource/representation/add-region-form/add-region-form.component.html b/.../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/.../src/app/workspace/resource/representation/add-region-form/add-region-form.component.scss b/.../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/...pp/src/app/workspace/resource/values/color-value/color-picker/color-picker.component.scss b/...pp/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;
 }