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

udpated bg of widget shadow

See merge request vkuchenik/website-framework!18

client/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { Global, css } from "@emotion/react";
 import Header from './components/layout/Header/Header.jsx';
 import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
 import Canvas from './components/layout/Canvas/Canvas.jsx';
@@ -9,6 +9,18 @@ function App() {
   const styles = recipe();
 
   return (
+  <>
+    <Global // change the background color of widget shadow when moving
+      styles={css`
+        .react-grid-placeholder {
+          background: #c0d2e3ff !important;
+          border-color: #a9b6c2ff !important;
+          box-shadow: 0 0 10px #c0d2e3ff !important;
+          opacity: 1 !important;
+          border-radius: 5px;
+        }
+      `}
+    />
     <Grid css={styles}
       templateRows="1fr 11fr"
       templateColumns="1fr 20fr"
@@ -25,6 +37,7 @@ function App() {
         <Canvas />
       </GridItem> 
     </Grid>
+    </>
   );
 }
 

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

@@ -26,21 +26,23 @@ export default function WidgetCanvas() {
     };
 
     return (
-        <ResponsiveGridLayout
+        <chakra.div height="100%" width="100%">
-            className="layout"
+            <ResponsiveGridLayout
-            layout={layout}
+                className="layout"
-            cols={12} // Total columns in grid
+                layout={layout}
-            rowHeight={30} //Height of a single row in px
+                cols={12} // Total columns in grid
-            isBounded={true} // Total width of the grid
+                rowHeight={30} //Height of a single row in px
-            margin={[10, 10]} // [horizontal, vertical] gap
+                isBounded={true} // Total width of the grid
-            onLayoutChange={onLayoutChange}
+                margin={[10, 10]} // [horizontal, vertical] gap
-            draggableHandle=".widget-handle" // Make only the header draggable
+                onLayoutChange={onLayoutChange}
-        >
+                draggableHandle=".widget-handle" // Make only the header draggable
-            {layout.map((item) => (
+            >
-                <chakra.div key={item.i} css={styles.root}>
+                {layout.map((item) => (
-                    <Widget title="VDAP Widget" />
+                    <chakra.div key={item.i} css={styles.root}>
-                </chakra.div>
+                        <Widget title="VDAP Widget" />
-            ))}
+                    </chakra.div>
-        </ResponsiveGridLayout>
+                ))}
+            </ResponsiveGridLayout>
+        </chakra.div>
     );
 }

client/src/theme.js

@@ -103,7 +103,7 @@ const config = defineConfig({
     slotRecipes: {
       sidebar: sidebarRecipe,
       widget: widgetRecipe,
-    }
+    },
   },
 });