Refactor CSS on mydashboard started needs completed

client/src/theme.js

@@ -14,20 +14,6 @@ const headerRecipe = defineRecipe({
   }
 });
 
-const dashboardRecipe = defineRecipe({
-  base: {
-    bg: "{MainBackground}"
-  }
-});
-
-const canvasRecipe = defineRecipe({
-  base: {
-    bg: "{transparent}",
-    zIndex: "-1",
-    color: "{text}"
-  }
-});
-
 const sidebarRecipe = defineSlotRecipe({
   slots: ["root", "logo", "footer", "button_text","buttons", "collapse_button"],
   base: {
@@ -185,6 +171,20 @@ const sidebarRecipe = defineSlotRecipe({
   }
 });
 
+const dashboardRecipe = defineRecipe({
+  base: {
+    bg: "{MainBackground}"
+  }
+});
+
+const canvasRecipe = defineRecipe({
+  base: {
+    bg: "{transparent}",
+    zIndex: "-1",
+    color: "{text}"
+  }
+});
+
 const widgetRecipe = defineSlotRecipe({
   slots: ["root", "header", "canvas"],
   base: {
@@ -268,6 +268,17 @@ const glassPanelRecipe = defineSlotRecipe({
           WebkitBackdropFilter: "blur(15px)",
         }
       }
+    },
+    mode: {
+      editing: {
+        root: {
+          boxShadow: "outline",
+          borderStyle: "dashed",
+          borderWidth: "2px",
+          borderColor: "orange.300",
+          cursor: "grab",
+        }
+      }
     }
   },
 
@@ -275,6 +286,7 @@ const glassPanelRecipe = defineSlotRecipe({
     layout: "widget"
   }
 });
+
 const glassTabRecipe = defineRecipe({
   base: {
     display: "flex",