fix: remove box-shadow from color picker

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Oct 7, 2024 · 5a465bf · 5a465bf
1 parent 32185dd
commit 5a465bf
Show file tree

Hide file tree

Showing 2 changed files with 203 additions and 185 deletions.
diff --git a/app/components/partials/ColorPicker.client.vue b/app/components/partials/ColorPicker.client.vue
@@ -31,6 +31,9 @@ const breakpoints = useBreakpoints(breakpointsTailwind);
 
 const smallerBreakpoint = breakpoints.smaller('sm');
 
+const colorMode = useColorMode();
+const theme = computed(() => (colorMode.value === 'dark' ? 'dark' : 'white'));
+
 const open = ref(false);
 </script>
 
@@ -71,6 +74,7 @@ const open = ref(false);
                             picker-type="chrome"
                             disable-alpha
                             disable-history
+                            :theme="theme"
                         />
                     </div>
                 </div>
@@ -99,7 +103,15 @@ const open = ref(false);
         />
 
         <template #panel>
-            <ColorPicker v-model:pure-color="color" is-widget format="hex" picker-type="chrome" disable-alpha disable-history />
+            <ColorPicker
+                v-model:pure-color="color"
+                is-widget
+                format="hex"
+                picker-type="chrome"
+                disable-alpha
+                disable-history
+                :theme="theme"
+            />
         </template>
     </UPopover>
 </template>
@@ -108,4 +120,10 @@ const open = ref(false);
 .vc-input-toggle {
     display: none !important;
 }
+
+@media not all and screen(sm) {
+    .vc-colorpicker {
+        box-shadow: none !important;
+    }
+}
 </style>