added marketplace cards

app/src/components/ui/componets/AddButtons.tsx

@@ -129,7 +129,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
     <div>
       {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
         <div key={side} className={`side-button-container ${side}`}>
-          {/* "+" Button */}
           <button
             className={`side-button ${side}`}
             onClick={() => handlePlusButtonClick(side)}
@@ -156,11 +155,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 onClick={() => toggleVisibility(side)}
               >
                 <EyeIcon
-                  fill={
-                    hiddenPanels.includes(side)
-                      ? "white"
-                      : "#1D1E21"
-                  }
+                  fill={hiddenPanels.includes(side) ? "white" : "#1D1E21"}
                 />
               </div>
 
@@ -185,7 +180,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 }
                 onClick={() => toggleLockPanel(side)}
               >
-                <LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff":"#1D1E21"}/>
+                <LockIcon
+                  fill={
+                    selectedZone.lockedPanels.includes(side)
+                      ? "#ffffff"
+                      : "#1D1E21"
+                  }
+                />
               </div>
             </div>
           )}
@@ -196,5 +197,3 @@ const AddButtons: React.FC<ButtonsProps> = ({
 };
 
 export default AddButtons;
-
-

app/src/components/ui/componets/Panel.tsx

@@ -46,6 +46,8 @@ const Panel: React.FC<PanelProps> = ({
     [side in Side]?: { width: number; height: number };
   }>({});
 
+  const { isPlaying } = usePlayButtonStore();
+
   const getPanelStyle = useMemo(
     () => (side: Side) => {
       const currentIndex = selectedZone.panelOrder.indexOf(side);
@@ -54,7 +56,7 @@ const Panel: React.FC<PanelProps> = ({
       const rightActive = previousPanels.includes("right");
       const topActive = previousPanels.includes("top");
       const bottomActive = previousPanels.includes("bottom");
-      const panelSize = isPlaying ? 250 : 300;
+      const panelSize = isPlaying ? 300 : 210;
 
       switch (side) {
         case "top":
@@ -83,7 +85,7 @@ const Panel: React.FC<PanelProps> = ({
           return {};
       }
     },
-    [selectedZone.panelOrder]
+    [selectedZone.panelOrder, isPlaying]
   );
 
   const handleDrop = (e: React.DragEvent, panel: Side) => {
@@ -107,8 +109,8 @@ const Panel: React.FC<PanelProps> = ({
     selectedZone.widgets.filter((w) => w.panel === panel).length;
 
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 250;
-    const CHART_HEIGHT = 250;
+    const CHART_WIDTH = 150;
+    const CHART_HEIGHT = 150;
     const FALLBACK_HORIZONTAL_CAPACITY = 5;
     const FALLBACK_VERTICAL_CAPACITY = 3;
 
@@ -163,8 +165,6 @@ const Panel: React.FC<PanelProps> = ({
     };
   }, [selectedZone.activeSides]);
 
-  const { isPlaying } = usePlayButtonStore();
-
   return (
     <>
       {selectedZone.activeSides.map((side) => (

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -75,7 +75,7 @@ const RealTimeVisulization: React.FC = () => {
     <div
       ref={containerRef}
       id="real-time-vis-canvas"
-      className="realTime-viz canvas"
+      className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
       style={{
         height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
         width: isPlaying || activeModule !== "visualization" ? "100vw" : "",