merge fix

app/src/components/layout/sidebarLeft/Outline.tsx

@@ -30,6 +30,7 @@ const Outline: React.FC = () => {
             defaultOpen={true}
             showKebabMenu={false}
             showFocusIcon={true}
+            remove
           />
           <DropDownList
             value="Scene"

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -12,16 +12,15 @@ import {
 import useToggleStore from "../../../store/useUIToggleStore";
 import MachineMechanics from "./mechanics/MachineMechanics";
 import Visualization from "./visualization/Visualization";
-import GlobalProperties from "./properties/GlobalProperties";
-import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedActionSphere } from "../../../store/store";
+import GlobalProperties from "./properties/GlobalProperties";
+import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
-  const [activeList] = useState("properties");
   const { toggleUI } = useToggleStore();
   const { selectedActionSphere } = useSelectedActionSphere();
   const { subModule, setSubModule } = useSubModuleStore();
@@ -54,7 +53,7 @@ const SideBarRight: React.FC = () => {
                 }`}
                 onClick={() => setSubModule("mechanics")}
               >
-                <MechanicsIcon isActive={activeList === "mechanics"} />
+                <MechanicsIcon isActive={subModule === "mechanics"} />
               </div>
               <div
                 className={`sidebar-action-list ${
@@ -62,7 +61,7 @@ const SideBarRight: React.FC = () => {
                 }`}
                 onClick={() => setSubModule("simulations")}
               >
-                <SimulationIcon isActive={activeList === "simulations"} />
+                <SimulationIcon isActive={subModule === "simulations"} />
               </div>
               <div
                 className={`sidebar-action-list ${
@@ -70,7 +69,7 @@ const SideBarRight: React.FC = () => {
                 }`}
                 onClick={() => setSubModule("analysis")}
               >
-                <AnalysisIcon isActive={activeList === "analysis"} />
+                <AnalysisIcon isActive={subModule === "analysis"} />
               </div>
             </>
           )}
@@ -78,7 +77,7 @@ const SideBarRight: React.FC = () => {
       )}
       {/* process builder */}
       {toggleUI &&
-        activeList === "properties" &&
+        subModule === "properties" &&
         activeModule !== "visualization" && (
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
@@ -114,7 +113,7 @@ const SideBarRight: React.FC = () => {
               </div>
             </div>
           )}
-          {activeList === "simulations" && (
+          {subModule === "simulations" && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <Simulations />

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

@@ -4,6 +4,7 @@ import {
   EyeIcon,
   LockIcon,
 } from "../../icons/RealTimeVisulationIcons";
+import { AddIcon } from "../../icons/ExportCommonIcons";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -109,7 +110,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
-      console.log('updatedZone: ', updatedZone);
+      console.log("updatedZone: ", updatedZone);
       setSelectedZone(updatedZone);
     } else {
       // If the panel is not active, activate it
@@ -122,7 +123,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
-      console.log('updatedZone: ', updatedZone);
+      console.log("updatedZone: ", updatedZone);
       setSelectedZone(updatedZone);
     }
   };
@@ -132,7 +133,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
       {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
         <div key={side} className={`side-button-container ${side}`}>
           <button
-            className={`side-button ${side}`}
+            className={`side-button ${side}${
+              selectedZone.activeSides.includes(side) ? " active" : ""
+            }`}
             onClick={() => handlePlusButtonClick(side)}
             title={
               selectedZone.activeSides.includes(side)
@@ -140,7 +143,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 : `Activate ${side} panel`
             }
           >
-            +
+            <div className="add-icon">
+              <AddIcon />
+            </div>
           </button>
 
           {/* Extra Buttons */}
@@ -148,8 +153,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
             <div className="extra-Bs">
               {/* Hide Panel */}
               <div
-                className={`icon ${hiddenPanels.includes(side) ? "active" : ""
+                className={`icon ${
-                  }`}
+                  hiddenPanels.includes(side) ? "active" : ""
+                }`}
                 title={
                   hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                 }
@@ -171,8 +177,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
               {/* Lock/Unlock Panel */}
               <div
-                className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
+                className={`icon ${
-                  }`}
+                  selectedZone.lockedPanels.includes(side) ? "active" : ""
+                }`}
                 title={
                   selectedZone.lockedPanels.includes(side)
                     ? "Unlock Panel"
@@ -180,7 +187,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>
           )}

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

@@ -44,34 +44,34 @@ const RealTimeVisulization: React.FC = () => {
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   async function GetZoneData() {
+    async function GetZoneData() {
-  //     try {
+      try {
-  //       const response: { data: Zone[] } | undefined = await getZonesApi(
+        const response: { data: Zone[] } | undefined = await getZonesApi(
-  //         "hexrfactory"
+          "hexrfactory"
-  //       );
+        );
 
-  //       if (!response || !response.data) {
+        if (!response || !response.data) {
-  //         return;
+          return;
-  //       }
+        }
-  //       const formattedData = response?.data?.reduce<FormattedZoneData>(
+        const formattedData = response?.data?.reduce<FormattedZoneData>(
-  //         (acc, zone) => {
+          (acc, zone) => {
-  //           acc[zone.zoneName] = {
+            acc[zone.zoneName] = {
-  //             activeSides: [],
+              activeSides: [],
-  //             panelOrder: [],
+              panelOrder: [],
-  //             lockedPanels: [],
+              lockedPanels: [],
-  //             zoneCentrePoint: [],
+              zoneCentrePoint: [],
-  //             widgets: [],
+              widgets: [],
-  //           };
+            };
-  //           return acc;
+            return acc;
-  //         },
+          },
-  //         {}
+          {}
-  //       );
+        );
-  //       setZonesData(formattedData);
+        setZonesData(formattedData);
-  //     } catch (error) { }
+      } catch (error) { }
-  //   }
+    }
-  //   GetZoneData();
+    GetZoneData();
-  // }, []);
+  }, []);
 
   useEffect(() => {
 

app/src/components/ui/inputs/Search.tsx

@@ -36,7 +36,7 @@ const Search: React.FC<SearchProps> = ({
   };
 
   return (
-    <div className="asset-search-wrapper">
+    <div className="search-wrapper">
       <div
         className={`search-container ${
           isFocused || inputValue ? "active" : ""

app/src/components/ui/list/DropDownList.tsx

@@ -13,6 +13,7 @@ interface DropDownListProps {
   kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
   defaultOpen?: boolean; // Determines if the dropdown list should be open by default
   listType?: string; // Type of list to display
+  remove?: boolean;
 }
 
 const DropDownList: React.FC<DropDownListProps> = ({
@@ -28,25 +29,29 @@ const DropDownList: React.FC<DropDownListProps> = ({
   ],
   defaultOpen = false,
   listType = "default",
+  remove,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
-  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+  const [zoneDataList, setZoneDataList] = useState<
+    { id: string; name: string }[]
+  >([]);
 
   useEffect(() => {
     async function GetZoneData() {
-      const response = await getZonesApi("hexrfactory")
+      const response = await getZonesApi("hexrfactory");
-      console.log('response: ', response.data);
+      console.log("response: ", response.data);
-      setZoneDataList([{ id: "1", name: "zone1" },
+      setZoneDataList([
-      { id: "2", name: "Zone 2" },])
+        { id: "1", name: "zone1" },
+        { id: "2", name: "Zone 2" },
+      ]);
     }
 
-    GetZoneData()
+    GetZoneData();
-
+  }, []);
-  }, [])
 
   return (
     <div className="dropdown-list-container">
@@ -81,7 +86,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
       </div>
       {isOpen && (
         <div className="lists-container">
-          {listType === "default" && <List items={items} />}
+          {listType === "default" && <List items={items} remove={remove} />}
           {listType === "outline" && (
             <>
               <DropDownList

app/src/components/ui/list/List.tsx

@@ -5,10 +5,11 @@ import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
 interface ListProps {
   items?: { id: string; name: string }[]; // Optional array of items to render
   placeholder?: string; // Optional placeholder text
+  remove?: boolean;
 }
 
-const List: React.FC<ListProps> = ({ items = [] }) => {
+const List: React.FC<ListProps> = ({ items = [], remove }) => {
-  console.log('items: ', items);
+  console.log("items: ", items);
   return (
     <>
       {items.length > 0 ? (
@@ -26,9 +27,11 @@ const List: React.FC<ListProps> = ({ items = [] }) => {
                   <div className="visibe option">
                     <EyeIcon isClosed />
                   </div>
-                  <div className="remove option">
+                  {remove && (
-                    <RmoveIcon />
+                    <div className="remove option">
-                  </div>
+                      <RmoveIcon />
+                    </div>
+                  )}
                 </div>
               </div>
             </li>

app/src/modules/market/FilterSearch.tsx

@@ -13,7 +13,9 @@ const FilterSearch: React.FC = () => {
   };
   return (
     <div className="filter-search-container">
-      <Search onChange={() => {}} />
+      <div className="asset-search-wrapper">
+        <Search onChange={() => {}} />
+      </div>
       <RegularDropDown
         header={activeOption}
         options={["Alphabet ascending", "Alphabet descending"]}

app/src/styles/components/marketPlace/marketPlace.scss

@@ -2,381 +2,370 @@
 @use "../../abstracts/mixins.scss" as *;
 
 .marketplace-wrapper {
-    height: 100vh;
+  height: 100vh;
-    width: 100vw;
+  width: 100vw;
-    z-index: #{$z-index-marketplace};
+  z-index: #{$z-index-marketplace};
-    background-color: var(--background-color-secondary);
+  background-color: var(--background-color-secondary);
-    position: absolute;
+  position: absolute;
-    left: 0;
+  left: 0;
-    padding: 95px 8px;
+  padding: 95px 8px;
-    padding-bottom: 32px;
+  padding-bottom: 32px;
 
-    .marketplace-container {
+  .marketplace-container {
-        padding: 20px 2px;
+    padding: 20px 2px;
-        // height: calc(100vh - 120px);
+    // height: calc(100vh - 120px);
-        height: 100%;
+    height: 100%;
-        background-color: var(--background-color);
+    background-color: var(--background-color);
-        box-shadow: #{$box-shadow-medium};
+    box-shadow: #{$box-shadow-medium};
-        border-radius: #{$border-radius-extra-large};
+    border-radius: #{$border-radius-extra-large};
-        position: relative;
+    position: relative;
+  }
 
-    }
+  .marketPlace {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    left: calc(120px / 2);
+    top: 100px;
+    padding: 14px;
+    padding-bottom: 60px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 
-    .marketPlace {
+    .filter-search-container {
-        width: 100%;
+      width: 100%;
-        height: 100%;
+      display: flex;
-        overflow: auto;
+      align-items: center;
-        left: calc(120px / 2);
+      gap: 20px;
-        top: 100px;
-        padding: 14px;
-        padding-bottom: 60px;
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
 
-        .filter-search-container {
+      .asset-search-wrapper {
-            width: 100%;
+        min-width: 60%;
+        max-width: 684px;
+        padding: 0;
+        border-radius: $border-radius-large;
+        .search-wrapper {
+          padding: 0 12px;
+          .search-container {
             display: flex;
             align-items: center;
-            gap: 20px;
+            width: 100%;
+            border: none !important;
+            border-radius: $border-radius-large;
+            overflow: hidden;
+            padding: 6px 12px;
+            outline: 1px solid var(--border-color);
 
-            .asset-search-wrapper {
+            input {
-                min-width: 60%;
+              border: none !important;
-                max-width: 684px;
+              outline: none;
-                padding: 0;
-                border-radius: $border-radius-large ;
-
-                .search-container {
-                    display: flex;
-                    align-items: center;
-                    width: 100%;
-                    border: none !important;
-                    box-shadow: $box-shadow-medium;
-                    border-radius: $border-radius-large;
-                    overflow: hidden;
-                    padding: 4px 12px;
-
-                    input {
-                        border: none !important;
-                        outline: none;
-
-                    }
-                }
             }
+          }
+        }
+      }
 
-            .regularDropdown-container {
+      .regularDropdown-container {
-                max-width: 159px;
+        max-width: 159px;
-                height: 100%;
+        max-height: 30px;
+        height: 100%;
+        .dropdown-header {
+          align-items: center;
+        }
+      }
 
-                .dropdown-header {
+      .button {
-                    align-items: center;
+        padding: 5px 20px;
-                }
+        border: 1px solid var(--accent-color);
-            }
+        border-radius: 14px;
+        color: var(--accent-color);
+      }
 
-            .button {
+      .rating-container {
-                padding: 5px 20px;
+        display: flex;
-                border: 1px solid var(--accent-color);
+        align-items: center;
-                border-radius: 14px;
+        gap: 6px;
+
+        .stars {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+
+    .cards-container-container {
+      padding: 0px 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+
+      .header {
+        color: var(--text-color);
+        font-weight: $medium-weight;
+        font-size: $xlarge;
+        margin: 10px 0;
+      }
+
+      .cards-wrapper-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 28px;
+
+        .card-container {
+          width: calc(25% - 23px);
+          border-radius: 18px;
+          padding: 12px;
+          box-shadow: 0px 2px 10.5px 0px #0000000d;
+          border: 1px solid var(--background-accent-transparent, #e0dfff80);
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          gap: 6px;
+
+          .icon {
+            position: absolute;
+            top: 12px;
+            left: 12px;
+            width: 30px;
+            height: 30px;
+            border-radius: 10px;
+            padding: 5px;
+            background-color: var(--accent-color);
+            cursor: pointer;
+          }
+
+          .image-container {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+          }
+
+          .assets-container {
+            display: flex;
+            justify-content: space-between;
+
+            .name-container {
+              display: flex;
+              flex-direction: column;
+              gap: 3px;
+
+              .asstes-container {
+                font-weight: #{$bold-weight};
+                font-size: $regular;
+              }
+
+              .assets-date {
                 color: var(--accent-color);
+                font-size: $small;
+              }
             }
 
-            .rating-container {
+            .details {
+              display: flex;
+              align-items: center;
+              gap: 10px;
+
+              .content {
                 display: flex;
                 align-items: center;
                 gap: 6px;
-
+              }
-                .stars {
-                    display: flex;
-                    align-items: center;
-
-                }
             }
-        }
+          }
 
-        .cards-container-container {
+          .vendor-icon {
-            padding: 0px 20px;
+            font-weight: #{$bold-weight};
+            font-size: $regular;
+          }
+
+          .stars-container {
             display: flex;
-            flex-direction: column;
+            justify-content: space-between;
-            gap: 6px;
+          }
 
-            .header {
+          .buy-now-button {
-                color: var(--text-color);
+            width: 100%;
-                font-weight: $medium-weight;
+            background-color: var(--background-color-secondary);
-                font-size: $xlarge;
+            border-radius: $border-radius-extra-large;
-                margin: 10px 0;
+            padding: 8px 0;
-            }
+            @include flex-center;
-
+            color: var(--accent-color);
-            .cards-wrapper-container {
+
-                display: flex;
+            &:hover {
-                flex-wrap: wrap;
+              cursor: pointer;
-                gap: 28px;
-
-                .card-container {
-                    width: calc(25% - 23px);
-                    border-radius: 18px;
-                    padding: 12px;
-                    box-shadow: 0px 2px 10.5px 0px #0000000D;
-                    border: 1px solid var(--background-accent-transparent, #E0DFFF80);
-                    position: relative;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    gap: 6px;
-
-                    .icon {
-                        position: absolute;
-                        top: 12px;
-                        left: 12px;
-                        width: 30px;
-                        height: 30px;
-                        border-radius: 10px;
-                        padding: 5px;
-                        background-color: var(--accent-color);
-                        cursor: pointer;
-                    }
-
-                    .image-container {
-                        width: 100%;
-                        display: flex;
-                        justify-content: center;
-                    }
-
-                    .assets-container {
-                        display: flex;
-                        justify-content: space-between;
-
-                        .name-container {
-                            display: flex;
-                            flex-direction: column;
-                            gap: 3px;
-
-                            .asstes-container {
-                                font-weight: #{$bold-weight};
-                                font-size: $regular ;
-                            }
-
-                            .assets-date {
-                                color: var(--accent-color);
-                                font-size: $small;
-                            }
-                        }
-
-                        .details {
-                            display: flex;
-                            align-items: center;
-                            gap: 10px;
-
-                            .content {
-                                display: flex;
-                                align-items: center;
-                                gap: 6px;
-                            }
-                        }
-                    }
-
-                    .vendor-icon {
-
-                        font-weight: #{$bold-weight};
-                        font-size: $regular ;
-                    }
-
-                    .stars-container {
-                        display: flex;
-                        justify-content: space-between;
-                    }
-
-                    .buy-now-button {
-                        width: 100%;
-                        background-color: var(--background-color-secondary);
-                        border-radius: $border-radius-extra-large ;
-                        padding: 8px 0;
-                        @include flex-center;
-                        color: var(--accent-color);
-
-                        &:hover {
-                            cursor: pointer;
-                        }
-                    }
-                }
             }
+          }
         }
+      }
     }
+  }
 }
 
 .assetPreview-wrapper {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  .assetPreview {
     width: 100%;
     height: 100%;
-    position: absolute;
+    background-color: var(--background-color);
-    top: 0;
+    display: flex;
-    left: 0;
+    gap: 12px;
+    z-index: 100;
+    border-radius: 20px;
+  }
 
-    .assetPreview {
+  // Image Preview Section
-        width: 100%;
+  .image-preview {
-        height: 100%;
+    width: 50%;
-        background-color: var(--background-color);
+    height: 100%;
-        display: flex;
+
-        gap: 12px;
+    img {
-        z-index: 100;
+      width: 100%;
-        border-radius: 20px;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  // Asset Details Section
+  .asset-details-preview {
+    width: 50%;
+    padding: 50px 20px;
+    overflow-y: auto;
+  }
+
+  // Organization Section (Top part with image and details)
+  .organization {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 10px;
+
+    .image {
+      @include flex-center;
+      height: 30px;
+      width: 30px;
+      min-height: 26px;
+      min-width: 26px;
+      border-radius: 50%;
+      font-weight: var(--font-weight-bold);
+      color: var(--background-color);
+      background-color: var(--accent-color);
     }
 
-    // Image Preview Section
+    .organization-details {
-    .image-preview {
+      display: flex;
-        width: 50%;
+      flex-direction: column;
-        height: 100%;
 
-        img {
+      .organization-name {
-            width: 100%;
+        font-weight: bold;
-            height: 100%;
+        margin-bottom: 5px;
-            object-fit: contain;
+
-        }
+        font-weight: #{$bold-weight};
+        font-size: $regular;
+      }
+
+      .follow {
+        color: var(--accent-color);
+        cursor: pointer;
+      }
+    }
+  }
+
+  // Asset Details
+  .asset-details {
+    margin-top: 20px;
+
+    .asset-name {
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-bottom: 10px;
+      font-weight: #{$bold-weight};
+      font-size: $large;
     }
 
-    // Asset Details Section
+    .asset-description {
-    .asset-details-preview {
+      margin-bottom: 20px;
-        width: 50%;
+      color: #666;
-        padding: 50px 20px;
-        overflow-y: auto;
-
     }
 
-    // Organization Section (Top part with image and details)
+    .asset-review {
-    .organization {
+      width: fit-content;
+      padding: 5px 10px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      outline: 1px solid #909090cc;
+      border-radius: 6px;
+
+      .asset-rating {
         display: flex;
         align-items: center;
-        margin-bottom: 20px;
+        gap: 4px;
-        gap: 10px;
+        margin-right: 10px;
+        font-weight: bold;
+        position: relative;
 
-        .image {
+        font-weight: #{$bold-weight};
-            @include flex-center;
+        font-size: $regular;
-            height: 30px;
+
-            width: 30px;
+        &::after {
-            min-height: 26px;
+          margin-left: 5px;
-            min-width: 26px;
+          content: "";
-            border-radius: 50%;
+          display: block;
-            font-weight: var(--font-weight-bold);
+          width: 2px;
-            color: var(--background-color);
+          height: 12px;
-            background-color: var(--accent-color);
+          background-color: #ccc;
         }
+      }
 
-        .organization-details {
+      .asset-view {
-            display: flex;
+        font-weight: #{$bold-weight};
-            flex-direction: column;
+        font-size: $regular;
-
+      }
-            .organization-name {
-                font-weight: bold;
-                margin-bottom: 5px;
-
-                font-weight: #{$bold-weight};
-                font-size: $regular ;
-            }
-
-            .follow {
-                color: var(--accent-color);
-                cursor: pointer;
-            }
-        }
     }
 
-    // Asset Details
+    .asset-price {
-    .asset-details {
+      font-size: $xxlarge;
-        margin-top: 20px;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+  }
 
-        .asset-name {
+  // Button Container and Button Styles
-            font-size: 1.5em;
+  .button-container {
-            font-weight: bold;
+    display: flex;
-            margin-bottom: 10px;
+    gap: 10px;
-            font-weight: #{$bold-weight};
+  }
-            font-size: $large;
-        }
 
-        .asset-description {
+  .button {
-            margin-bottom: 20px;
+    color: white;
-            color: #666;
+    padding: 10px 20px;
-        }
+    border-radius: 5px;
+    cursor: pointer;
+    text-align: center;
 
-        .asset-review {
+    &:first-child {
-            width: fit-content;
+      outline: 1px solid var(--accent-color);
-            padding: 5px 10px;
+      color: var(--accent-color);
-            display: flex;
-            align-items: center;
-            margin-bottom: 20px;
-            outline: 1px solid #909090CC;
-            border-radius: 6px;
-
-            .asset-rating {
-                display: flex;
-                align-items: center;
-                gap: 4px;
-                margin-right: 10px;
-                font-weight: bold;
-                position: relative;
-
-                font-weight: #{$bold-weight};
-                font-size: $regular ;
-
-                &::after {
-                    margin-left: 5px;
-                    content: "";
-                    display: block;
-                    width: 2px;
-                    height: 12px;
-                    background-color: #ccc;
-
-
-                }
-            }
-
-            .asset-view {
-
-                font-weight: #{$bold-weight};
-                font-size: $regular ;
-            }
-        }
-
-        .asset-price {
-            font-size: $xxlarge;
-            font-weight: bold;
-            margin-bottom: 20px;
-        }
     }
 
-    // Button Container and Button Styles
+    &:last-child {
-    .button-container {
+      background-color: var(--accent-color);
-        display: flex;
+      color: var(--background-color);
-        gap: 10px;
     }
+  }
 
-    .button {
+  .closeButton {
-
+    color: var(--accent-color);
-
+    position: absolute;
-        color: white;
+    top: 18px;
-        padding: 10px 20px;
+    left: 18px;
-        border-radius: 5px;
+    @include flex-center;
-        cursor: pointer;
+    cursor: pointer;
-        text-align: center;
+    font-size: var(--font-size-large);
-
+  }
-        &:first-child {
-            outline: 1px solid var(--accent-color);
-            color: var(--accent-color);
-        }
-
-        &:last-child {
-            background-color: var(--accent-color);
-            color: var(--background-color);
-        }
-
-
-
-    }
-
-    .closeButton {
-        color: var(--accent-color);
-        position: absolute;
-        top: 18px;
-        left: 18px;
-        @include flex-center;
-        cursor: pointer;
-        font-size: var(--font-size-large);
-    }
 }

app/src/styles/components/tools.scss

@@ -161,25 +161,49 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  background-color: var(--accent-color);
+  background-color: var(--highlight-accent-color);
-
   cursor: pointer;
   @include flex-center;
   position: fixed;
   bottom: 60px;
   left: 50%;
   transform: translate(-50%, 0);
-  transition: background-color 0.3s, transform 0.3s;
+  color: var(--accent-color);
-  color: var(--background-color);
-  // transform: none;
   z-index: 100;
-
+  isolation: isolate;
+  font-weight: 700;
   &:hover {
+    font-weight: 500;
     background-color: var(--accent-color);
+    color: var(--highlight-accent-color);
+    &::after{
+      animation: pulse 1s ease-out infinite;
+    }
+  }
+  &::after{
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: var(--background-color-secondary);
+    border-radius: #{$border-radius-circle};
+    z-index: -1;
   }
 }
 
-
+@keyframes pulse {
+  0%{
+    opacity: 0;
+    scale: .5;
+  }
+  50%{
+    opacity: 1;
+  }
+  100%{
+    opacity: 0;
+    scale: 2;
+  }
+}
 
 @keyframes expandWidth {
   from {

app/src/styles/pages/realTimeViz.scss

@@ -1,4 +1,5 @@
 @use "../abstracts/variables.scss" as *;
+@use "../abstracts/mixins" as *;
 
 // Main Container
 .realTime-viz {
@@ -148,7 +149,6 @@
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
-    border-radius: 6px;
     overflow: visible !important;
     
     .panel-content {
@@ -160,6 +160,7 @@
       flex-direction: column;
       gap: 10px;
       background-color: var(--background-color);
+      border-radius: #{$border-radius-small};
 
       &::-webkit-scrollbar {
         display: none;
@@ -194,8 +195,6 @@
       left: 0;
       right: 0;
 
-
-
       .panel-content {
         display: flex;
         flex-direction: row;
@@ -236,9 +235,9 @@
   }
 }
 
-.playingFlase{
+.playingFlase {
-  .zoon-wrapper{
+  .zoon-wrapper.bottom {
-    bottom: 300px !important;
+    bottom: 300px;
   }
 }
 // Side Buttons
@@ -246,9 +245,11 @@
   position: absolute;
   display: flex;
   background-color: var(--background-color);
-  padding: 5px;
+  padding: 2px;
-  border-radius: 8px;
+  border-radius: 2px;
   transition: transform 0.3s ease;
+  box-shadow: #{$box-shadow-medium};
+  // outline: 1px solid var(--border-color);
 
   .extra-Bs {
     display: flex;
@@ -278,13 +279,29 @@
     transition: background-color 0.3s ease;
     width: 18px;
     height: 18px;
-    display: flex;
+    @include flex-center;
-    justify-content: center;
-    // align-items: center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
     border-radius: 4px;
+    .add-icon {
+      @include flex-center;
+      transition: rotate 0.2s;
+    }
+    path {
+      stroke: var(--primary-color);
+      stroke-width: 2;
+    }
+  }
+  .active {
+    background: #ffe3e0;
+    .add-icon {
+      rotate: 45deg;
+      path {
+        stroke: #f65648;
+        stroke-width: 2;
+      }
+    }
   }
 
   &.top {