added marketplace cards

app/src/components/ui/Tools.tsx

@@ -71,11 +71,17 @@ const Tools: React.FC = () => {
         setOpenDrop(false); // Close the dropdown
       }
     };
-
+    const handleEscKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsPlaying(false); // Set isPlaying to false when Escape key is pressed
+      }
+    };
     document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener("keydown", handleEscKeyPress); // Listen for ESC key
 
     return () => {
       document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
     };
   }, []);
 

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={
+                  fill={hiddenPanels.includes(side) ? "white" : "#1D1E21"}
-                    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_WIDTH = 150;
-    const CHART_HEIGHT = 250;
+    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" : "",

app/src/modules/market/CardsContainer.tsx

@@ -15,4 +15,4 @@ const CardsContainer: React.FC = () => {
   );
 };
 
-export default CardsContainer;
+export default CardsContainer;

app/src/styles/components/tools.scss

@@ -15,6 +15,7 @@
   transition: width 0.2s;
   background-color: var(--background-color);
   z-index: #{$z-index-default};
+
   .split {
     height: 20px;
     width: 2px;
@@ -165,16 +166,16 @@
   cursor: pointer;
   @include flex-center;
   position: fixed;
-  bottom: 50px;
+  bottom: 60px;
   left: 50%;
   transform: translate(-50%, 0);
   transition: background-color 0.3s, transform 0.3s;
   color: var(--background-color);
-  transform: none;
+  // transform: none;
+  z-index: 100;
 
   &:hover {
     background-color: var(--accent-color);
-    transform: scale(1.1);
   }
 }
 

app/src/styles/pages/realTimeViz.scss

@@ -1,5 +1,4 @@
 @use "../abstracts/variables.scss" as *;
-@use "../abstracts/mixins.scss" as *;
 
 // Main Container
 .realTime-viz {
@@ -20,14 +19,138 @@
     overflow: hidden;
   }
 
-  // Panels
+  .icon {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .icons-container {
+    .icon {
+      &:first-child {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .zoon-wrapper {
+    display: flex;
+    background-color: var(--background-color);
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    gap: 6px;
+    padding: 4px;
+    border-radius: 8px;
+    max-width: 80%;
+    overflow: auto;
+    max-width: calc(100% - 450px);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .zone {
+      width: auto;
+      background-color: var(--background-color);
+      border-radius: 6px;
+      padding: 4px 8px;
+      white-space: nowrap;
+      font-size: $small;
+    }
+
+    .active {
+      background-color: var(--accent-color);
+      color: var(--background-color);
+      // color: #FCFDFD !important;
+    }
+  }
+
+  .zoon-wrapper.bottom {
+    bottom: 210px;
+  }
+
+  @media (max-width: 1024px) {
+    width: 80%; // Increase width to take more space on smaller screens
+    height: 500px; // Reduce height to fit smaller screens
+    left: 50%; // Center horizontally
+
+    .main-container {
+      margin: 0 15px; // Reduce margin for better spacing
+    }
+
+    .zoon-wrapper {
+      bottom: 5px; // Adjust position for smaller screens
+
+      &.bottom {
+        bottom: 150px; // Adjust for bottom placement
+      }
+    }
+  }
+
+  .content-container {
+    display: flex;
+    height: 100vh;
+    transition: all 0.3s ease;
+  }
+
+  .main-container {
+    position: relative;
+    flex: 1;
+    height: 600px;
+    background-color: rgb(235, 235, 235);
+    margin: 0 30px;
+    transition: height 0.3s ease, margin 0.3s ease;
+
+    .zoon-wrapper {
+      display: flex;
+      background-color: rgba(224, 223, 255, 0.5);
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      gap: 6px;
+      padding: 4px;
+      border-radius: 8px;
+      max-width: 80%;
+      overflow: auto;
+      transition: transform 0.3s ease;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .zone {
+        width: auto;
+        background-color: $background-color;
+        border-radius: 6px;
+        padding: 4px 8px;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        &.active {
+          background-color: var(--primary-color);
+          color: var(--accent-color);
+        }
+      }
+
+      &.bottom {
+        bottom: 210px;
+      }
+    }
+  }
+
   .panel {
     position: absolute;
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-radius: 6px;
-    overflow: hidden;
+    overflow: visible !important;
 
     .panel-content {
       position: relative;
@@ -44,8 +167,10 @@
       }
 
       .chart-container {
-        width: 229px;
+        width: 100%;
-        height: 200px;
+        height: 24% !important;
+
+        min-height: 150px;
         max-height: 100%;
         border: 1px dotted #a9a9a9;
         border-radius: 8px;
@@ -64,125 +189,59 @@
         color: var(--primary-color);
       }
     }
-  }
 
-  // Panels for each side
+    &.top-panel,
-  .left-panel,
+    &.bottom-panel {
-  .right-panel {
+      left: 0;
-    .chart-container {
+      right: 0;
-      padding: 10px;
-      width: 100% !important;
-      height: 250px !important;
 
-    }
-  }
 
-  .top-panel,
-  .bottom-panel {
-    .chart-container {
-      padding: 10px;
-      width: 300px !important;
-      height: 100% !important;
-    }
-  }
 
-  // Zone Wrapper
+      .panel-content {
-  .zoon-wrapper {
+        display: flex;
-    display: flex;
+        flex-direction: row;
-    background-color: var(--background-color);
+        height: 100%;
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    gap: 6px;
-    padding: 4px;
-    border-radius: 8px;
-    max-width: 80%;
-    overflow: auto;
-    max-width: calc(100% - 450px);
-    z-index: 11000000000;
 
-    &::-webkit-scrollbar {
+        .chart-container {
-      display: none;
+          height: 100% !important;
+          width: 20%;
+          min-width: 150px;
+        }
+      }
     }
 
-    .zone {
+    &.top-panel {
-      width: auto;
+      top: 0;
-      background-color: var(--background-color);
-      border-radius: 6px;
-      padding: 4px 8px;
-      white-space: nowrap;
-      font-size: $small;
     }
 
-    .active {
+    &.bottom-panel {
-      background-color: var(--accent-color);
+      bottom: 0;
-      color: var(--background-color);
     }
-  }
 
-  .zoon-wrapper.bottom {
+    &.left-panel {
-    bottom: 310px;
+      left: 0;
-  }
+      top: 0;
+      bottom: 0;
 
-  .content-container {
+      .chart-container {
-    display: flex;
+        width: 100%;
-    height: 100vh;
+        height: 180px;
-    transition: all 0.3s ease;
+      }
-  }
+    }
 
-  .main-container {
+    &.right-panel {
-    position: relative;
+      right: 0;
-    flex: 1;
+      top: 0;
-    height: 600px;
+      bottom: 0;
-    background-color: rgb(235, 235, 235);
+    }
-    margin: 0 30px;
-    transition: height 0.3s ease, margin 0.3s ease;
   }
 }
 
-.playActiveFalse {
+.playingFlase{
-  position: absolute;
+  .zoon-wrapper{
-  top: 50%;
+    bottom: 300px !important;
-  left: calc(270px + 45px);
-  transform-origin: left;
-  transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
-  width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6);
-  z-index: 100;
-
-  .scene-container {
-    width: 100%;
-    height: 100%;
-
-    canvas {
-      width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6) !important;
-      height: 100% !important;
-
-    }
-  }
-
-  &.top {
-    transform: scale(1.5);
-  }
-
-  &.right {
-    transform: scale(1.5);
-  }
-
-  &.bottom {
-    transform: scale(1.5);
-  }
-
-  &.left {
-    transform: scale(1.5);
-  }
-
-  .zoon-wrapper {
-    transform: translate(-50%, 0) scale(1.5);
   }
 }
-
-
 // Side Buttons
 .side-button-container {
   position: absolute;
@@ -222,6 +281,7 @@
     height: 18px;
     display: flex;
     justify-content: center;
+    // align-items: center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
@@ -229,54 +289,116 @@
   }
 
   &.top {
-    top: -35px;
+    top: -30px;
     left: 50%;
     transform: translateX(-50%);
     flex-direction: row;
     gap: 6px;
-    transform: scale(1.5);
   }
 
   &.right {
-    right: -35px;
+    right: -30px;
     top: 50%;
     transform: translateY(-50%);
     flex-direction: column;
     gap: 6px;
-    transform: scale(1.5);
   }
 
   &.bottom {
-    bottom: -35px;
+    bottom: -30px;
     left: 50%;
     transform: translateX(-50%);
     flex-direction: row;
     gap: 6px;
-    transform: scale(1.5);
   }
 
   &.left {
-    left: -35px;
+    left: -30px;
     top: 50%;
     transform: translateY(-50%);
     flex-direction: column;
     gap: 6px;
-    transform: scale(1.5);
   }
 }
 
-.right.side-button-container,
+.right.side-button-container {
+  .extra-Bs {
+    flex-direction: column;
+  }
+}
+
 .left.side-button-container {
   .extra-Bs {
     flex-direction: column;
   }
 }
 
-.top-panel,
+// Theme Container
-.bottom-panel {
+.theme-container {
-  .panel-content {
+  width: 250px;
+  padding: 12px;
+  box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
+  border-radius: 8px;
+  background-color: white;
+  position: absolute;
+  top: 20px;
+  right: -100%;
+  transform: translate(-0%, 0);
 
+  h2 {
+    font-size: 12px;
+    margin-bottom: 8px;
+    color: #2b3344;
+  }
+
+  .theme-preset-wrapper {
     display: flex;
-    flex-direction: row !important;
+    gap: 5px;
+    flex-wrap: wrap;
+
+    .theme-preset {
+      display: flex;
+      gap: 2px;
+      margin-bottom: 10px;
+      border: 1px solid $border-color;
+      padding: 5px 10px;
+      border-radius: 4px;
+      transition: border 0.3s ease;
+
+      &.active {
+        border: 1px solid var(--primary-color);
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 1px;
+          left: 1px;
+          width: 10px;
+          height: 10px;
+          background-color: var(--primary-color);
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .custom-color {
+    display: flex;
+    justify-content: space-between;
+
+    .color-displayer {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      border: 1px solid var(--accent-color);
+      border-radius: 4px;
+      padding: 0 5px;
+
+      input {
+        border: none;
+        outline: none;
+        border-radius: 50%;
+      }
+    }
   }
 }