Refactor CSS on mydashboard started needs completed

client/src/pages/home/tabs/MyDashboard.jsx

@@ -3,7 +3,7 @@ import {X, MoreVertical} from "lucide-react";
 import {Responsive, WidthProvider} from "react-grid-layout";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {Suspense, useEffect, useRef} from 'react';
-import {useColorModeValue} from "@/components/ui/color-mode";
+
 // 1. Import database messenger
 import useAuthStore from "@/store/authStore";
 
@@ -14,11 +14,6 @@ import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
-  // 🌗 Let's adjust for our light and dark mode
-  const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
-  const titleColor = useColorModeValue("gray.800", "#FFFFFF");
-  const iconColor = useColorModeValue("gray.600", "#FFFFFF");
-  const iconHoverBg = useColorModeValue("gray.100", "gray.700");
 
   // ☁️ Database Connection
   const {user} = useAuthStore();

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",