From ab03d43aff658b9e68b4abf8637203e04d3617cf Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Tue, 22 Jul 2025 12:56:44 -0700
Subject: [PATCH] udpated bg of widget shadow

the drop shadow behind widgets when moved around is now light blue and the corners are round.
---
 client/src/App.jsx                            | 15 +++++++-
 .../layout/Canvas/views/WidgetCanvas.jsx      | 34 ++++++++++---------
 client/src/theme.js                           |  2 +-
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 29a907e..e3e5cce 100644
--- a/client/src/App.jsx
+++ b/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>
+    </>
   );
 }
 
diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
index a6611b3..994719c 100644
--- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
@@ -26,21 +26,23 @@ export default function WidgetCanvas() {
     };
 
     return (
-        <ResponsiveGridLayout
-            className="layout"
-            layout={layout}
-            cols={12} // Total columns in grid
-            rowHeight={30} //Height of a single row in px
-            isBounded={true} // Total width of the grid
-            margin={[10, 10]} // [horizontal, vertical] gap
-            onLayoutChange={onLayoutChange}
-            draggableHandle=".widget-handle" // Make only the header draggable
-        >
-            {layout.map((item) => (
-                <chakra.div key={item.i} css={styles.root}>
-                    <Widget title="VDAP Widget" />
-                </chakra.div>
-            ))}
-        </ResponsiveGridLayout>
+        <chakra.div height="100%" width="100%">
+            <ResponsiveGridLayout
+                className="layout"
+                layout={layout}
+                cols={12} // Total columns in grid
+                rowHeight={30} //Height of a single row in px
+                isBounded={true} // Total width of the grid
+                margin={[10, 10]} // [horizontal, vertical] gap
+                onLayoutChange={onLayoutChange}
+                draggableHandle=".widget-handle" // Make only the header draggable
+            >
+                {layout.map((item) => (
+                    <chakra.div key={item.i} css={styles.root}>
+                        <Widget title="VDAP Widget" />
+                    </chakra.div>
+                ))}
+            </ResponsiveGridLayout>
+        </chakra.div>
     );
 }
diff --git a/client/src/theme.js b/client/src/theme.js
index d214c25..cb98a77 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -103,7 +103,7 @@ const config = defineConfig({
     slotRecipes: {
       sidebar: sidebarRecipe,
       widget: widgetRecipe,
-    }
+    },
   },
 });