Merge branch 'add/widgets/theme' into 'main'

add text highlighting controls in widgets

See merge request vkuchenik/website-framework!19

client/src/components/layout/Canvas/Widget.jsx

@@ -5,7 +5,7 @@ export default function Widget({ title }) {
   const styles = recipe();
 
   return (
-    <chakra.div css={styles.root}>
+    <chakra.div >
       <chakra.div css={styles.header}
         className="widget-handle"
         // style={{ padding: '4px', cursor: 'move', background: '#ddd' }}

client/src/components/layout/Canvas/views/WidgetCanvas.jsx

@@ -25,6 +25,15 @@ export default function WidgetCanvas() {
         console.log('Updated layout:', newLayout)
     };
 
+    // don't allow text highlighting when dragging
+    const handleDragStart = () => {
+        document.body.style.userSelect = "none";
+    };
+    // allow text highlighting all other times
+    const handleDragStop = () => {
+        document.body.style.userSelect = "";
+    };
+
     return (
         <chakra.div height="100%" width="100%">
             <ResponsiveGridLayout
@@ -36,6 +45,8 @@ export default function WidgetCanvas() {
                 margin={[10, 10]} // [horizontal, vertical] gap
                 onLayoutChange={onLayoutChange}
                 draggableHandle=".widget-handle" // Make only the header draggable
+                onDragStart={handleDragStart}
+                onDragStop={handleDragStop}
             >
                 {layout.map((item) => (
                     <chakra.div key={item.i} css={styles.root}>

client/src/theme.js

@@ -55,7 +55,10 @@ const widgetRecipe = defineSlotRecipe({
     root: {
       bg: "base100",
       borderRadius: "md",
-      p: "1"
+      p: "1",
+      border: "1px solid",
+      borderColor: "{base300}",
+      textAlign: "center",
     },
     header: {
       bg: "base100",
@@ -73,9 +76,9 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        base100: { value: {base: "#f7f9fa", _dark: "#787b73"}},
-        base200: { value: {base: "#eef2f6", _dark: "#242424"}},
-        base300: { value: {base: "#dfe5ed", _dark: "#60645a"}},
+        base100: { value: {base: "#f6f9faff", _dark: "#787b73"}},
+        base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
+        base300: { value: {base: "#d3dae4ff", _dark: "#60645a"}},
         // primary: { value: {base: "#9cd855", _dark: "#629631"}},
         primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
         // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},