fix: color picker styles

juanfran · Dec 20, 2024 · a4553bd · a4553bd
1 parent ffb643d
commit a4553bd
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 33 deletions.
diff --git a/apps/web/src/app/styles/override-color-picker.scss b/apps/web/src/app/styles/override-color-picker.scss
@@ -0,0 +1,29 @@
+.pcr-app {
+  border-radius: var(--radius-3);
+  border: 1px solid var(--grey-30);
+  padding: var(--size-3) !important;
+  width: 15rem !important;
+
+  .pcr-type,
+  .pcr-save,
+  .pcr-clear,
+  .pcr-result {
+    border-radius: var(--radius-3) !important;
+    padding: var(--size-2) !important;
+    font-family: "Inter", sans-serif;
+    font-size: 12px !important;
+
+    &.active {
+      background: var(--grey-30) !important;
+      color: var(--grey-90) !important;
+    }
+  }
+  .pcr-save {
+    background: var(--grey-90) !important;
+    margin-top: var(--size-4) !important;
+  }
+
+  .pcr-clear {
+    margin-top: 0.75em !important;
+  }
+}
diff --git a/apps/web/src/app/styles/override-material.scss b/apps/web/src/app/styles/override-material.scss
@@ -113,34 +113,3 @@
   }
 }
 
-
-.pcr-app {
-  border-radius: var(--radius-3);
-  border: 1px solid var(--grey-30);
-  padding: var(--size-3) !important;
-  width: 15rem !important;
-
-  .pcr-type,
-  .pcr-save,
-  .pcr-clear,
-  .pcr-result {
-    border-radius: var(--radius-3) !important;
-    padding: var(--size-2) !important;
-    font-family: "Inter", sans-serif;
-    font-size: 12px !important;
-
-    &.active {
-      background: var(--grey-30) !important;
-      color: var(--grey-90) !important;
-    }
-  }
-  .pcr-save {
-    background: var(--grey-90) !important;
-    margin-top: var(--size-4) !important;
-  }
-
-  .pcr-clear {
-    margin-top: 0.75em !important;
-  }
-}
-
diff --git a/apps/web/src/app/styles/styles.scss b/apps/web/src/app/styles/styles.scss
@@ -5,9 +5,9 @@
 @use "@angular/material/prebuilt-themes/deeppurple-amber.css";
 @use "@simonwep/pickr/dist/themes/monolith.min.css";
 @include meta.load-css("override-material.scss");
+@include meta.load-css("override-color-picker.scss");
 @include meta.load-css("fonts.scss");
 @include meta.load-css("typography.scss");
-@include meta.load-css("fonts.scss");
 @include meta.load-css("responsive.scss");
 @include meta.load-css("spacing.scss");
 @include meta.load-css("generic.scss");

diff --git a/libs/ui/src/lib/color-picker/color-picker.component.ts b/libs/ui/src/lib/color-picker/color-picker.component.ts
@@ -64,7 +64,8 @@ export class ColorPickerComponent implements OnDestroy {
     });
 
     effect(() => {
-      this.#pickr?.setColor(this.color() || '');
+      const color = this.color();
+      this.#pickr?.setColor(color || '');
     });
   }