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,6 +26,7 @@ export default function WidgetCanvas() {
     };
 
     return (
+        <chakra.div height="100%" width="100%">
             <ResponsiveGridLayout
                 className="layout"
                 layout={layout}
@@ -42,5 +43,6 @@ export default function WidgetCanvas() {
                     </chakra.div>
                 ))}
             </ResponsiveGridLayout>
+        </chakra.div>
     );
 }

client/src/theme.js

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