feat(frontend): fix css editor + fix dark mode

windmill-labs · Oct 9, 2023 · c9ce635 · c9ce635
1 parent 11e0bc7
commit c9ce635
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -2,7 +2,7 @@
 	import { Copy, MoveLeft, MoveRight, Paintbrush2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
-	import { addWhitespaceBeforeCapitals, copyToClipboard } from '../../../../utils'
+	import { addWhitespaceBeforeCapitals, copyToClipboard, sendUserToast } from '../../../../utils'
 	import { Button, ClearableInput } from '../../../common'
 	import Popover from '../../../Popover.svelte'
 	import type { ComponentCssProperty } from '../../types'
@@ -13,6 +13,7 @@
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import CssEval from './CssEval.svelte'
+	import parse from 'style-to-object'
 
 	export let name: string
 	export let value: ComponentCssProperty = {}
@@ -33,8 +34,16 @@
 	$: dispatch('change', value)
 
 	function toggleQuickMenu() {
-		isQuickMenuOpen = !isQuickMenuOpen
+		try {
+			if (value.style) {
+				parse(value.style)
+				isQuickMenuOpen = !isQuickMenuOpen
+			}
+		} catch {
+			sendUserToast('Invalid CSS: Rich editor cannot be open', true)
+		}
 	}
+
 	let dynamicClass: boolean = value.evalClass !== undefined
 </script>
 

diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -184,8 +184,8 @@
 				{prefix}
 				openByDefault={true}
 				wrapperClasses="!px-0 !pt-0"
-				toggleClasses="border-b border-gray-300 !rounded-b-none !py-0
-				{isOpen[prefix] ? '!bg-gray-100 hover:!bg-gray-200' : ''}"
+				toggleClasses="border-b !rounded-b-none !py-0
+				{isOpen[prefix] ? '!bg-surface-secondary hover:!bg-surface-hover' : ''}"
 			>
 				<svelte:fragment slot="title">
 					<span class="font-semibold text-tertiary capitalize">

diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
@@ -91,7 +91,7 @@
 				<Menu
 					let:close
 					noMinW
-					wrapperClasses="h-full bg-surface rounded-r-md border-y border-r border-gray-300 pr-0.5"
+					wrapperClasses="h-full bg-surface rounded-r-md border-y border-r pr-0.5"
 					popupClasses="!mt-0"
 				>
 					<button