Add new images and update styles for visualization components

app/src/components/icons/ExportCommonIcons.tsx

@@ -559,7 +559,7 @@ export const DublicateIcon = () => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
-        fill="#6F42C1"
+        fill="#5D5F63"
       />
     </svg>
   );

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

@@ -1,13 +1,105 @@
 import React, { useState } from "react";
 import Search from "../../ui/inputs/Search";
-
+import vehicle from "../../../assets/image/vehicles.png";
+import workStation from "../../../assets/image/workStation.png";
+import machines from "../../../assets/image/machines.png";
+import feneration from "../../../assets/image/feneration.png";
+import worker from "../../../assets/image/worker.png";
 const Assets: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   const handleSearchChange = (value: string) => {
     setSearchValue(value);
-    console.log(value); // Log the search value if needed
+    setSelectedCategory(null); // Reset selected category when search changes
   };
+
+  const categoryList = [
+    {
+      assetName: "Doors",
+      assetImage: "",
+      category: "Feneration",
+      categoryImage: feneration,
+    },
+    {
+      assetName: "Windows",
+      assetImage: "",
+      category: "Feneration",
+      categoryImage: feneration,
+    },
+    {
+      assetName: "Pillars",
+      assetImage: "",
+      category: "Feneration",
+      categoryImage: feneration,
+    },
+    {
+      assetName: "Forklift",
+      assetImage: "",
+      category: "Vehicles",
+      categoryImage: vehicle,
+    },
+    {
+      assetName: "AGV",
+      assetImage: "",
+      category: "Vehicles",
+      categoryImage: vehicle,
+    },
+    {
+      assetName: "Pallet",
+      assetImage: "",
+      category: "Workstation",
+      categoryImage: workStation,
+    },
+    {
+      assetName: "Controller",
+      assetImage: "",
+      category: "Workstation",
+      categoryImage: workStation,
+    },
+    {
+      assetName: "Conveyor",
+      assetImage: "",
+      category: "Workstation",
+      categoryImage: workStation,
+    },
+    {
+      assetName: "VMC",
+      assetImage: "",
+      category: "Machines",
+      categoryImage: machines,
+    },
+    {
+      assetName: "CMC",
+      assetImage: "",
+      category: "Machines",
+      categoryImage: machines,
+    },
+    {
+      assetName: "Male Worker",
+      assetImage: "",
+      category: "Workers",
+      categoryImage: worker,
+    },
+    {
+      assetName: "Female Worker",
+      assetImage: "",
+      category: "Workers",
+      categoryImage: worker,
+    },
+  ];
+
+  // Get unique categories
+  const uniqueCategories = Array.from(
+    new Set(categoryList.map((asset) => asset.category))
+  );
+
+  // Filter assets based on the selected category
+  const filteredAssets =
+    selectedCategory !== null
+      ? categoryList.filter((asset) => asset.category === selectedCategory)
+      : [];
+
   return (
     <div className="assets-container">
       <Search onChange={handleSearchChange} />
@@ -15,11 +107,58 @@ const Assets: React.FC = () => {
         <div className="searched-content">
           <p>Results for "{searchValue}"</p>
         </div>
+      ) : selectedCategory ? (
+        <div className="assets-wrapper">
+          {/* Back Button */}
+          <div
+            className="back-button"
+            onClick={() => setSelectedCategory(null)}
+          >
+            ← Back
+          </div>
+          <h2>{selectedCategory}</h2>
+          <div className="assets-container">
+            {filteredAssets.map((asset, index) => (
+              <div key={index} className="assets">
+                <img
+                  src={asset.assetImage}
+                  alt={asset.assetName}
+                  className="asset-image"
+                />
+                <div className="asset-name">{asset.assetName}</div>
+              </div>
+            ))}
+          </div>
+        </div>
       ) : (
-        <></>
+        <div className="assets-wrapper">
+          <h2>Categories</h2>
+          <div className="categories-container">
+            {uniqueCategories.map((category, index) => {
+              const categoryInfo = categoryList.find(
+                (asset) => asset.category === category
+              );
+              return (
+                <div
+                  key={index}
+                  className="category"
+                  onClick={() => setSelectedCategory(category)}
+                >
+                  <img
+                    src={categoryInfo?.categoryImage || ""}
+                    alt={category}
+                    className="category-image"
+                  />
+                  <div className="category-name">{category}</div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
       )}
     </div>
   );
 };
 
 export default Assets;
+

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

@@ -163,7 +163,7 @@ const RealTimeVisulization: React.FC = () => {
         onDragOver={(event) => event.preventDefault()}
       >
 
-        <Scene />
+
       </div>
       <DroppedObjects />
       {activeModule === "visualization" && (

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

@@ -253,7 +253,8 @@ const MultiLevelDropdown = ({
         className={`dropdown-button ${open ? "open" : ""}`}
         onClick={() => setOpen(!open)}
       >
-        {displayLabel} <span className="icon">▾</span>
+        <div className="label">{displayLabel}</div>
+        <span className="icon">▾</span>
       </button>
       {open && (
         <div className="dropdown-menu">

app/src/components/ui/menu/menu.tsx

@@ -0,0 +1,604 @@
+import React, { useState } from "react";
+
+const MenuBar = () => {
+  const [activeMenu, setActiveMenu] = useState<string | null>(null);
+  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
+
+  // State to track selection for all menu items
+  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
+    {}
+  );
+
+  // Function to toggle selection for a specific item
+  const toggleSelection = (itemName: string) => {
+    setSelectedItems((prev) => ({
+      ...prev,
+      [itemName]: !prev[itemName], // Toggle the selection state
+    }));
+  };
+
+  return (
+    <div className="menu-bar">
+      {/* Top-level menu buttons */}
+      <div className="menu-buttons">
+        {/* File Menu */}
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("File")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+        >
+          <div className="menu-button">
+            File
+            <span className="dropdown-icon">▾</span>
+          </div>
+
+          {/* File Dropdown */}
+          {activeMenu === "File" && (
+            <div className="dropdown-menu">
+              {/* New File */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("New File")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["New File"] && "✓ "}
+                    New File
+                  </span>
+                  <div className="menu-item-right">
+                    <span className="shortcut">Ctrl + N</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Open Local File */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Open Local File")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Open Local File"] && "✓ "}
+                    Open Local File
+                  </span>
+                  <div className="menu-item-right">
+                    <span className="shortcut">Ctrl + O</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Save Version */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Save Version")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Save Version"] && "✓ "}
+                    Save Version
+                  </span>
+                </div>
+                <div className="split"></div>
+              </div>
+
+              {/* Make a Copy */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Make a Copy")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Make a Copy"] && "✓ "}
+                    Make a Copy
+                  </span>
+                </div>
+              </div>
+
+              {/* Share */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Share")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Share"] && "✓ "}
+                    Share
+                  </span>
+                </div>
+              </div>
+
+              {/* Rename */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Rename")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Rename"] && "✓ "}
+                    Rename
+                  </span>
+                </div>
+                <div className="split"></div>
+              </div>
+
+              {/* Import */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Import")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Import"] && "✓ "}
+                    Import
+                  </span>
+                </div>
+              </div>
+
+              {/* Close File */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Close File")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Close File"] && "✓ "}
+                    Close File
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Edit Menu */}
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("Edit")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+        >
+          <div className="menu-button">
+            Edit
+            <span className="dropdown-icon">▾</span>
+          </div>
+
+          {/* Edit Dropdown */}
+          {activeMenu === "Edit" && (
+            <div className="dropdown-menu">
+              {/* Undo */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Undo")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Undo"] && "✓ "}
+                    Undo
+                  </span>
+                  <div className="menu-item-right">
+                    <span className="shortcut">Ctrl + Z</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Redo */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Redo")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Redo"] && "✓ "}
+                    Redo
+                  </span>
+                  <div className="menu-item-right">
+                    <span className="shortcut">Ctrl + Shift + Z</span>
+                  </div>
+                </div>
+                <div className="split"></div>
+              </div>
+
+              {/* Undo History */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Undo History")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Undo History"] && "✓ "}
+                    Undo History
+                  </span>
+                </div>
+              </div>
+
+              {/* Redo History */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Redo History")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Redo History"] && "✓ "}
+                    Redo History
+                  </span>
+                </div>
+                <div className="split"></div>
+              </div>
+
+              {/* Find */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Find")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Find"] && "✓ "}
+                    Find
+                  </span>
+                  <div className="menu-item-right">
+                    <span className="shortcut">Ctrl + F</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Delete */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Delete")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Delete"] && "✓ "}
+                    Delete
+                  </span>
+                </div>
+              </div>
+
+              {/* Select by... */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Select by...")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Select by..."] && "✓ "}
+                    Select by...
+                  </span>
+                </div>
+              </div>
+
+              {/* Keymap */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Keymap")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Keymap"] && "✓ "}
+                    Keymap
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* View Menu */}
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("View")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+        >
+          <div className="menu-button">
+            View
+            <span className="dropdown-icon">▾</span>
+          </div>
+
+          {/* View Dropdown */}
+          {activeMenu === "View" && (
+            <div className="dropdown-menu">
+              {/* Grid */}
+              <div
+                className={"menu-item-container"}
+                onClick={() => toggleSelection("Grid")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Grid"] && "✓ "}
+                    Grid
+                  </span>
+                </div>
+              </div>
+
+              {/* Gizmo */}
+              <div
+                className="menu-item-container"
+                onMouseEnter={() => setActiveSubMenu("View-Gizmo")}
+                onMouseLeave={() => setActiveSubMenu(null)}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Gizmo"] && "✓ "}
+                    Gizmo
+                  </span>
+                  <span className="icon">▾</span>
+                </div>
+                <div className="split"></div>
+
+                {/* Gizmo Submenu */}
+                {activeSubMenu === "View-Gizmo" && (
+                  <div className="submenu">
+                    {/* Visibility */}
+                    <div
+                      className="submenu-item"
+                      onClick={() => toggleSelection("Visibility")}
+                    >
+                      <span>
+                        {selectedItems["Visibility"] && "✓ "}
+                        Visibility
+                      </span>
+                    </div>
+
+                    {/* Cube view */}
+                    <div
+                      className="submenu-item"
+                      onClick={() => toggleSelection("Cube view")}
+                    >
+                      <span>
+                        {selectedItems["Cube view"] && "✓ "}
+                        Cube view
+                      </span>
+                    </div>
+
+                    {/* Sphere view */}
+                    <div
+                      className="submenu-item"
+                      onClick={() => toggleSelection("Sphere view")}
+                    >
+                      <span>
+                        {selectedItems["Sphere view"] && "✓ "}
+                        Sphere view
+                      </span>
+                    </div>
+
+                    {/* Custom settings */}
+                    <div
+                      className="submenu-item"
+                      onClick={() => toggleSelection("Custom settings")}
+                    >
+                      <span>
+                        {selectedItems["Custom settings"] && "✓ "}
+                        Custom settings
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Zoom */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Zoom")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Zoom"] && "✓ "}
+                    Zoom
+                  </span>
+                </div>
+              </div>
+
+              {/* Full Screen */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Full Screen")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Full Screen"] && "✓ "}
+                    Full Screen
+                  </span>
+                  <div className="menu-item-right">
+                    <span className="shortcut">F11</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Version History Menu */}
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("Version history")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+        >
+          <div className="menu-button">
+            Version history
+          </div>
+
+   
+        </div>
+
+        {/* Export As Menu */}
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("Export as...")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+        >
+          <div className="menu-button">
+            Export as...
+          </div>
+
+        </div>
+
+        {/* Apps Menu */}
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("Apps")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+        >
+          <div className="menu-button">
+            Apps
+            <span className="dropdown-icon">▾</span>
+          </div>
+
+          {/* Apps Dropdown */}
+          {activeMenu === "Apps" && (
+            <div className="dropdown-menu">
+              {/* New App */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("New App")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["New App"] && "✓ "}
+                    New App
+                  </span>
+                </div>
+                <div className="split"></div>
+
+              </div>
+
+              {/* Work-flow Monitor */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Work-flow Monitor")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Work-flow Monitor"] && "✓ "}
+                    Work-flow Monitor
+                  </span>
+                </div>
+              </div>
+
+              {/* Temperature Visualizer */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Temperature Visualizer")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Temperature Visualizer"] && "✓ "}
+                    Temperature Visualizer
+                  </span>
+                </div>
+              </div>
+
+              {/* View all */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("View all")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["View all"] && "✓ "}
+                    View all
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Help Menu */}
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("Help")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+        >
+          <div className="menu-button">
+            Help
+            <span className="dropdown-icon">▾</span>
+          </div>
+
+          {/* Help Dropdown */}
+          {activeMenu === "Help" && (
+            <div className="dropdown-menu">
+              {/* Shortcuts */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Shortcuts")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Shortcuts"] && "✓ "}
+                    Shortcuts
+                  </span>
+                  <div className="menu-item-right">
+                    <span className="shortcut">Ctrl + Shift + ?</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Manual */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Manual")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Manual"] && "✓ "}
+                    Manual
+                  </span>
+                </div>
+              </div>
+
+              {/* Video Tutorials */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Video Tutorials")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Video Tutorials"] && "✓ "}
+                    Video Tutorials
+                  </span>
+                </div>
+              </div>
+
+              {/* Report a bug */}
+              <div
+                className="menu-item-container"
+                onClick={() => toggleSelection("Report a bug")}
+              >
+                <div className="menu-item">
+                  <span>
+                    {selectedItems["Report a bug"] && "✓ "}
+                    Report a bug
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MenuBar;
+
+

app/src/styles/base/base.scss

@@ -104,25 +104,34 @@ body {
 
 /* Apply custom scrollbar styles globally */
 ::-webkit-scrollbar {
-  width: 8px; /* Width of the scrollbar */
+  width: 8px;
-  height: 8px; /* Height for horizontal scrollbars */
+  /* Width of the scrollbar */
+  height: 8px;
+  /* Height for horizontal scrollbars */
 }
 
 ::-webkit-scrollbar-track {
-  background: transparent; /* Background of the scrollbar track */
+  background: transparent;
-  border-radius: 4px; /* Rounded corners */
+  /* Background of the scrollbar track */
+  border-radius: 4px;
+  /* Rounded corners */
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--accent-color); /* Scrollbar handle color */
+  background: var(--accent-color);
-  border-radius: 4px; /* Rounded corners */
+  /* Scrollbar handle color */
-  border: 2px solid #f4f4f4; /* Padding around the scrollbar handle */
+  border-radius: 4px;
+  /* Rounded corners */
+  border: 2px solid #f4f4f4;
+  /* Padding around the scrollbar handle */
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--accent-color); /* Handle color on hover */
+  background: var(--accent-color);
+  /* Handle color on hover */
 }
 
 ::-webkit-scrollbar-corner {
-  background: transparent; /* Remove corner styling for scrollable containers */
+  background: transparent;
-}
+  /* Remove corner styling for scrollable containers */
+}

app/src/styles/components/input.scss

@@ -28,12 +28,14 @@
 .toggle-header-container {
   @include flex-center;
   padding: 6px 12px;
+
   .toggle-header-item {
     width: 100%;
     text-align: center;
     padding: 4px 12px;
     border-radius: #{$border-radius-large};
   }
+
   .active {
     background-color: var(--accent-color);
     color: var(--primary-color);
@@ -46,6 +48,7 @@
   padding: 8px 10px;
   background: var(--background-color);
   z-index: 1;
+
   .search-container {
     @include flex-center;
     width: 100%;
@@ -83,11 +86,13 @@
       border: none;
       cursor: pointer;
       background-color: transparent;
+
       &:hover {
         background-color: var(--highlight-accent-color);
       }
     }
   }
+
   .active {
     border: 1px solid var(--accent-color);
   }
@@ -96,9 +101,11 @@
 .kebab-menu-container {
   position: relative;
   @include flex-center;
+
   .kebab-icon {
     @include flex-center;
   }
+
   .menu-list {
     position: absolute;
     left: 10px;
@@ -109,6 +116,7 @@
     z-index: 1;
     padding: 8px 4px;
     width: 170px;
+
     .menu-item {
       margin: 2px 0;
       padding: 2px 4px;
@@ -116,25 +124,31 @@
       border-radius: #{$border-radius-small};
       display: flex;
       gap: 2px;
+
       &:hover {
         background-color: var(--background-color-secondary);
       }
+
       .icon-container {
         @include flex-center;
         height: 18px;
         width: 18px;
+
         path {
           stroke: var(--accent-color);
         }
       }
     }
+
     .selected {
       background-color: var(--highlight-accent-color);
       color: var(--accent-color);
+
       &:hover {
         background-color: var(--highlight-accent-color);
       }
     }
+
     input {
       display: none;
     }
@@ -144,6 +158,7 @@
 .project-dropdowm-container {
   position: relative;
   height: 32px;
+
   .project-name {
     line-height: 32px;
     height: 100%;
@@ -158,6 +173,7 @@
   border-radius: 6px;
   position: relative;
   cursor: pointer;
+
   .dropdown-header {
     height: 100%;
     display: flex;
@@ -180,14 +196,17 @@
     left: 0;
     top: 110%;
     padding: 4px;
+
     .dropdown-search {
       margin-bottom: 4px;
     }
+
     .option {
       padding: 2px 4px;
       cursor: pointer;
       flex-direction: row !important;
       border-radius: #{$border-radius-small};
+
       &:hover {
         color: var(--accent-color);
         background-color: var(--highlight-accent-color);
@@ -203,6 +222,7 @@
 .input.default {
   width: 100%;
   position: relative;
+
   .dropdown {
     top: 3px;
     right: 3px;
@@ -210,6 +230,7 @@
     background: var(--highlight-accent-color);
     border-radius: #{$border-radius-small};
     padding: 1px 4px;
+
     .active-option {
       color: var(--accent-color);
       font-size: var(--font-size-small);
@@ -223,6 +244,7 @@ input {
   border-radius: #{$border-radius-small};
   border: 1px solid var(--border-color);
   outline: none;
+
   &:focus,
   &:active {
     border: 1px solid var(--accent-color);
@@ -232,14 +254,17 @@ input {
 .eye-dropper-input-container {
   display: flex;
   align-items: center;
+
   .label {
     width: 40%;
   }
+
   .input-container {
     width: 60%;
     position: relative;
     @include flex-center;
     gap: 4px;
+
     .eye-picker-button {
       height: 24px;
       min-width: 24px;
@@ -248,6 +273,7 @@ input {
       background: var(--background-color-secondary);
       cursor: pointer;
     }
+
     .active {
       background: var(--accent-color);
     }
@@ -264,6 +290,13 @@ input {
     border: 1px solid var(--border-color) !important;
     padding: 5px 10px;
 
+    .label {
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 80%;
+      text-overflow: ellipsis;
+    }
+
     // font-size: 12px;
     cursor: pointer;
     border-radius: 5px;
@@ -295,9 +328,11 @@ input {
       display: flex;
       flex-direction: column;
       gap: 6px;
+
       .nested-dropdown {
         margin-left: 0;
       }
+
       padding: 10px;
     }
 
@@ -306,7 +341,7 @@ input {
       padding: 5px 10px;
       text-decoration: none;
       color: var(--text-color);
-      font-size: 14px;
+      font-size: var(--font-size-regular);
       cursor: pointer;
       transition: background-color 0.3s ease;
 
@@ -324,11 +359,12 @@ input {
         justify-content: space-between;
         padding: 5px 10px;
         cursor: pointer;
-        font-size: 14px;
+        font-size: var(--font-size-regular);
         color: var(--text-color);
         transition: background-color 0.3s ease;
         border-radius: #{$border-radius-small};
-        .arrow-container{
+
+        .arrow-container {
           @include flex-center;
         }
 
@@ -342,7 +378,7 @@ input {
         }
 
         .icon {
-          font-size: 12px;
+          font-size: var(--font-size-small);
           margin-left: 5px;
         }
       }
@@ -429,6 +465,7 @@ input {
         outline: 3px solid var(--accent-color);
         outline-offset: -3px;
         transform: translateY(-5px);
+
         &:hover {
           transform: scale(1.1) translateY(-5px);
         }
@@ -530,6 +567,7 @@ input {
 .labeled-button-container {
   @include flex-space-between;
   padding: 6px 12px;
+
   button {
     padding: 2px 32px;
     border: none;
@@ -538,6 +576,7 @@ input {
     background: var(--accent-color);
     transition: all 0.2s;
     cursor: pointer;
+
     &:hover {
       color: var(--primary-color);
     }
@@ -548,12 +587,15 @@ input {
   margin-bottom: 6px;
   padding: 6px 12px;
   @include flex-space-between;
+
   .label {
     width: 40%;
   }
+
   .regularDropdown-container {
     width: 60%;
   }
+
   .default {
     width: 60%;
   }
@@ -562,6 +604,7 @@ input {
 .multi-email-invite-input-container {
   @include flex-space-between;
   gap: 20px;
+
   .multi-email-invite-input {
     width: 100%;
     display: flex;
@@ -571,24 +614,29 @@ input {
     flex-wrap: wrap;
     max-height: 180px;
     overflow: auto;
+
     input {
       border: none;
+
       &::placeholder {
         color: var(--text-disabled);
       }
     }
+
     .entered-emails {
       @include flex-center;
       gap: 2px;
       background: var(--background-color-gray);
       padding: 0 4px;
       border-radius: #{$border-radius-large};
+
       span {
         height: 14px;
         width: 14px;
         line-height: 12px;
         text-align: center;
         border-radius: #{$border-radius-small};
+
         &:hover {
           background: var(--accent-color);
           color: var(--primary-color);
@@ -596,13 +644,15 @@ input {
       }
     }
   }
+
   .invite-button {
     padding: 4px 12px;
     border-radius: #{$border-radius-large};
     background: var(--accent-color);
     color: var(--primary-color);
   }
+
   .multi-email-invite-input.active {
     border: 1px solid var(--accent-color);
   }
-}
+}

app/src/styles/components/menu/menu.scss

@@ -0,0 +1,129 @@
+.menu-bar {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 5;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    box-shadow: var(--box-shadow-light);
+    border-radius: 8px;
+
+    .menu-buttons {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 8px 4px;
+        min-width: 178px;
+
+        .menu-button-container {
+            position: relative;
+            height: 100%;
+            padding: 8px;
+
+            .menu-button {
+                width: 100%;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                position: relative;
+
+                .dropdown-icon {
+                    margin-left: 5px;
+                    font-size: var(--font-size-small);
+                    color: #666666;
+                }
+            }
+
+            .dropdown-menu {
+                position: absolute;
+                top: 0;
+                left: 100%;
+                background-color: var(--background-color);
+                min-width: 220px;
+                border-radius: 4px;
+                box-shadow: var(--box-shadow-light);
+                border: 1px solid var(--background-color);
+                z-index: 100;
+                padding: 5px 0;
+
+                .menu-item-container {
+                    position: relative;
+
+                    .menu-item {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        padding: 8px 20px;
+                        cursor: pointer;
+                        white-space: nowrap;
+                        color: var(--text-color);
+
+                        &:hover {
+                            background-color: var(--highlight-accent-color);
+                            color: var(--highlight-accent-color);
+                        }
+
+                        .menu-item-right {
+                            display: flex;
+                            align-items: center;
+                            gap: 15px;
+
+                            .shortcut {
+                                color: var(--text-color);
+                                font-size: var(--font-size-small);
+                            }
+
+                            .icon {
+                                font-size: var(--font-size-small);
+                                color: var(--text-color);
+                            }
+                        }
+                    }
+
+                    .submenu {
+                        position: absolute;
+                        left: 100%;
+                        top: 0;
+                        background-color: var(--background-color);
+                        min-width: 200px;
+                        border-radius: 0 4px 4px 4px;
+                        box-shadow: var(--box-shadow-light);
+                        border: 1px solid var(--background-color);
+                        z-index: 101;
+
+                        .submenu-item {
+                            padding: 8px 20px;
+                            cursor: pointer;
+                            display: flex;
+                            justify-content: space-between;
+                            color: var(--text-color);
+
+                            &:hover {
+                                background-color: var(--background-color-gray);
+                                color: var(--highlight-accent-color);
+                            }
+
+                            .shortcut {
+                                color: var(--text-color);
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:hover {
+                background-color: var(--highlight-accent-color);
+                color: var(--highlight-accent-color);
+            }
+        }
+    }
+}
+
+.split {
+    width: 100%;
+    height: 1px;
+    background-color: #E0DFFF;
+}

app/src/styles/components/visualization/floating/common.scss

@@ -92,7 +92,7 @@
         align-items: center;
 
         .value {
-            font-size: 30px;
+            font-size: var(--font-size-xxxlarge);
             color: var(--accent-color);
 
         }
@@ -170,15 +170,16 @@
             }
         }
     }
-    .bar-chart{
+
-        padding:14px 0;
+    .bar-chart {
+        padding: 14px 0;
     }
 }
 
 
 .stateWorking-wrapper {
     min-width: 445px;
-    font-size: 12px;
+    font-size: var(--font-size-small);
     backdrop-filter: blur(40px);
     background: var(--background-color-secondary);
     border-radius: 20px;
@@ -195,7 +196,7 @@
             flex-direction: column;
 
             span {
-                font-size: 27px;
+                font-size: var(--font-size-xxlarge);
 
                 &:first-child {
                     color: #FCFDFD;
@@ -362,13 +363,13 @@
                 border-radius: 4px;
 
                 .label {
-                    font-size: 0.9rem;
+                    font-size: var(--font-size-regular);
                     margin: 0;
                     opacity: 0.7;
                 }
 
                 .value {
-                    font-size: 1.2rem;
+                    font-size: var(--font-size-xlarge);
                     font-weight: bold;
                     margin: 0;
                 }
@@ -398,19 +399,19 @@
                 text-align: center;
 
                 .title {
-                    font-size: 1rem;
+                    font-size: var(--font-size-large);
                     margin: 0;
                     opacity: 0.7;
                 }
 
                 .time {
-                    font-size: 2.5rem;
+                    font-size: var(--font-size-xxxlarge);
                     font-weight: bold;
                     margin: 0;
                 }
 
                 .subtitle {
-                    font-size: 0.8rem;
+                    font-size: var(--font-size-regular);
                     margin: 0;
                     opacity: 0.7;
                 }
@@ -461,7 +462,7 @@
     display: flex;
     justify-content: space-between;
     color: #718096;
-    font-size: 12px;
+    font-size: var(--font-size-small);
     padding: 18px 10px;
     position: relative;
     z-index: 100;

app/src/styles/components/visualization/floating/energyConsumed.scss

@@ -55,7 +55,7 @@
 }
 
 .state {
-  font-size: 24px;
+  font-size: var(--font-size-xxlarge);
   font-weight: bold;
 }
 
@@ -66,7 +66,7 @@
 }
 
 .working {
-  font-size: 20px;
+  font-size: var(--font-size-xxlarge);
   color: #4CAF50;
 }
 
@@ -95,7 +95,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--font-size-large);
   padding: 4px 0;
 }
 

app/src/styles/components/visualization/ui/styledWidgets.scss

@@ -25,7 +25,7 @@
       var(--highlight-accent-color) 60%,
       transparent
     );
-    font-size: 16px;
+    font-size: var(--font-size-large);
     align-items: center;
   }
   .stock-item {
@@ -36,7 +36,7 @@
         color: var(--accent-color);
       }
       .stock-description {
-        font-size: 12px;
+        font-size: var(--font-size-small);
       }
     }
   }

app/src/styles/layout/sidebar.scss

@@ -10,6 +10,7 @@
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
   z-index: #{$z-index-tools};
+
   .header-container {
     @include flex-space-between;
     padding: 10px;
@@ -75,6 +76,7 @@
 
         .widget2D {
           overflow: auto;
+
           .chart-container {
             display: flex;
             flex-direction: column;
@@ -122,18 +124,19 @@
 
                     .value {
                       color: var(--accent-color);
-                      font-size: 16px;
+                      font-size: var(--font-size-large);
                     }
                   }
 
                   .stock-description {
-                    font-size: 12px;
+                    font-size: var(--font-size-small);
                   }
                 }
               }
             }
           }
         }
+
         .widget3D {
           display: flex;
           flex-direction: column;
@@ -232,6 +235,7 @@
         display: flex;
         width: 100%;
         justify-content: flex-end;
+
         .other-guest {
           @include flex-center;
           height: 26px;
@@ -327,7 +331,7 @@
             align-items: center;
 
             .multi-level-dropdown {
-              min-width: 170px;
+              width: 170px;
 
               .dropdown-button {
                 display: flex;
@@ -359,6 +363,7 @@
           border-bottom: 1px solid var(--border-color);
           padding-bottom: 6px;
         }
+
         .inputs-wrapper {
           display: flex;
           flex-direction: column;
@@ -393,12 +398,12 @@
               box-shadow: none;
               color: #5273eb;
               padding: 6px;
-              font-size: 18px;
+              font-size: var(--font-size-xlarge);
             }
 
             .bulletPoint {
               color: #5273eb;
-              font-size: 16px;
+              font-size: var(--font-size-large);
             }
 
             .regularDropdown-container {
@@ -422,7 +427,7 @@
           gap: 6px;
           color: #444;
           border-radius: 6px;
-          font-size: 14px;
+          font-size: var(--font-weight-regular);
 
           .infoIcon {
             padding: 0px 7px;
@@ -442,7 +447,7 @@
         flex-direction: column;
         gap: 15px;
         padding: 0;
-        font-size: 14px;
+        font-size: var(--font-weight-regular);
         color: #4a4a4a;
 
         .selectedWidget {
@@ -508,6 +513,7 @@
       }
     }
   }
+
   .machine-mechanics-container {
     .machine-mechanics-header {
       padding: 8px 12px;
@@ -515,15 +521,18 @@
       border-bottom: 1px solid var(--border-color);
       color: var(--accent-color);
     }
+
     .process-list-container {
       display: flex;
       align-items: center;
       gap: 4px;
       padding: 8px;
       border-bottom: 1px solid var(--border-color);
+
       .label {
         margin-right: 8px;
       }
+
       .add-new-process {
         @include flex-center;
         height: 24px;
@@ -531,12 +540,15 @@
         cursor: pointer;
         background: var(--background-color-secondary);
         border-radius: #{$border-radius-medium};
+
         path {
           stroke: var(--accent-color);
           strokeWidth: 1.5px;
         }
+
         &:hover {
           background: var(--accent-color);
+
           path {
             stroke: var(--highlight-accent-color);
           }
@@ -544,11 +556,13 @@
       }
     }
   }
+
   .machine-mechanics-content-container,
   .simulations-container {
     max-height: calc(60vh - (47px - 35px));
     overflow: auto;
     overflow-y: scroll;
+
     .header {
       @include flex-space-between;
       padding: 6px 12px;
@@ -588,17 +602,20 @@
           margin: 2px 0;
           border-radius: #{$border-radius-small};
         }
+
         .value {
           display: flex;
           justify-content: flex-start;
           align-items: center;
           min-width: 80%;
           gap: 6px;
+
           input {
             width: fit-content;
             accent-color: var(--accent-color);
           }
         }
+
         .active {
           background: var(--highlight-accent-color);
 
@@ -618,8 +635,10 @@
           cursor: pointer;
           border-radius: #{$border-radius-small};
           transform: translateX(4px);
+
           &:hover {
             background-color: var(--accent-color);
+
             path {
               stroke: var(--primary-color);
             }
@@ -640,21 +659,26 @@
 
     .selected-properties-container {
       padding: 12px;
+
       .properties-header {
         color: var(--accent-color);
         font-weight: var(--font-weight-regular);
         padding: 8px 0;
       }
+
       .value-field-container {
         margin-bottom: 6px;
         padding: 0;
         @include flex-space-between;
+
         .label {
           width: 40%;
         }
+
         .regularDropdown-container {
           width: 60%;
         }
+
         .default {
           width: 60%;
         }
@@ -668,23 +692,29 @@
         margin-top: 8px;
         border-top: 1px solid var(--border-color);
         border-bottom: 1px solid var(--border-color);
+
         .header {
           color: var(--accent-color);
         }
       }
+
       .process-container {
         padding: 0 12px;
         margin: 6px 0;
+
         .value {
           @include flex-space-between;
+
           .arrow-container {
             height: 16px;
             width: 16px;
           }
+
           .active {
             rotate: 90deg;
           }
         }
+
         .children-drop {
           .value {
             padding: 6px;
@@ -707,20 +737,25 @@
       background: var(--background-color-gray);
       padding: 12px;
       border-radius: #{$border-radius-medium};
+
       .compare-simulations-header {
         font-weight: var(--font-weight-medium);
       }
+
       .content {
         padding: 12px 0;
         font-size: var(--font-size-small);
+
         span {
           font-size: inherit;
           color: var(--accent-color);
         }
       }
+
       .input {
         display: flex;
         flex-direction: row-reverse;
+
         input {
           width: fit-content;
           background: var(--accent-color);
@@ -731,6 +766,7 @@
       }
     }
   }
+
   .global-properties-container,
   .analysis-main-container,
   .asset-properties-container,
@@ -741,26 +777,32 @@
       border-top: 1px solid var(--highlight-accent-color);
       border-bottom: 1px solid var(--highlight-accent-color);
       color: var(--accent-color);
+
       .input-value {
         color: inherit;
       }
     }
+
     .input-container {
       @include flex-center;
+
       .remove-button {
         @include flex-center;
         height: 18px;
         width: 18px;
         margin-bottom: 6px;
         border-radius: 8px 0 0 8px;
+
         &:hover {
           background-color: var(--accent-color);
+
           path {
             stroke: var(--primary-color);
           }
         }
       }
     }
+
     .optimize-button,
     .generate-report-button,
     .button-save {
@@ -775,89 +817,109 @@
       font-size: var(--font-size-small);
       margin-bottom: 8px;
     }
+
     .split {
       height: 1px;
       background: var(--highlight-accent-color);
       margin: 8px;
     }
+
     .custom-input-container {
       .header {
         @include flex-space-between;
         border: none;
+
         .eyedrop-button {
           @include flex-center;
         }
       }
+
       .inputs-container {
         @include flex-space-between;
         padding-bottom: 8px;
+
         .input-container {
           padding: 0 12px;
           margin-top: 6px;
           gap: 6px;
         }
       }
+
       .custom-input-label {
         white-space: nowrap;
       }
     }
+
     .analysis-content-container {
       min-height: 50vh;
       max-height: 60vh;
       overflow-y: auto;
+
       .dropdown-header-container,
       .dropdown-content-container {
         padding: 6px 12px;
         border-top: 1px solid var(--highlight-accent-color);
       }
+
       .input-range-container {
         .input-container {
           width: 75%;
         }
       }
     }
+
     .buttons-container {
       @include flex-space-between;
       padding: 12px;
       gap: 12px;
+
       input {
         border: none;
         cursor: pointer;
         transition: all 0.2s;
+
         &:hover {
           transform: translateY(-2px);
           box-shadow: #{$box-shadow-medium};
           outline: 1px solid var(--accent-color);
         }
       }
+
       .cancel {
         background: transparent;
         color: var(--accent-color);
       }
+
       .submit {
         background: var(--accent-color);
         color: var(--highlight-accent-color);
       }
     }
+
     .create-custom-analysis-container {
       margin: 6px;
       background: var(--background-color-gray);
       padding: 12px;
       border-radius: #{$border-radius-medium};
+
       .custom-analysis-header {
         font-weight: var(--font-weight-medium);
       }
+
       .content {
         padding: 12px 0;
         font-size: var(--font-size-small);
+
         span {
           font-size: inherit;
           color: var(--accent-color);
         }
       }
+
       .input {
         display: flex;
         flex-direction: row-reverse;
+
         input {
           width: fit-content;
           background: var(--accent-color);
@@ -869,3 +931,122 @@
     }
   }
 }
+
+
+
+.assets-container {
+  padding: 0 6px;
+
+  .assets-wrapper {
+    position: relative;
+    margin: 8px 10px;
+
+    h2 {
+      color: var(--text-color);
+      font-family: $large;
+      font-weight: $bold-weight ;
+    }
+
+    .categories-container {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      height: 100%;
+      gap: 3px;
+      padding: 10px 0;
+
+      .category {
+        width: 117px;
+        height: 95px;
+        border-radius: 3.59px;
+        background-color: var(--background-color-gray);
+        padding: 8px;
+        padding-top: 12px;
+        font-weight: $bold-weight;
+        position: relative;
+        overflow: hidden;
+
+        .category-name {
+          position: relative;
+          z-index: 3;
+          font-size: var(--font-size-large);
+          // -webkit-text-fill-color: transparent;
+          // -webkit-text-stroke: 1px black;
+        }
+
+        &::after {
+          content: '';
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          background-color: var(--circle-color, #000);
+          position: absolute;
+          top: 50%;
+          right: -10px;
+          transform: translate(0, -50%);
+          background: linear-gradient(144.19deg, #F1E7CD 16.62%, #FFFAEF 85.81%);
+        }
+
+        .category-image {
+
+          position: absolute;
+          // top: 50%;
+          bottom: 0;
+          right: -10px;
+          transform: translate(0, 0%) scale(0.8);
+          z-index: 2;
+          height: 80%;
+        }
+      }
+    }
+
+    .assets-container {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      height: 100%;
+      gap: 3px;
+      padding: 10px 0;
+
+      .assets {
+
+        width: 117px;
+        height: 95px;
+        border-radius: 3.59px;
+        background-color: var(--background-color-gray);
+        padding: 8px;
+        padding-top: 12px;
+        font-weight: $medium-weight ;
+        position: relative;
+        overflow: hidden;
+
+
+
+        .asset-name {
+          position: relative;
+          z-index: 3;
+          font-size: var(--font-size-regular);
+        }
+
+        .asset-image {
+          position: absolute;
+          top: 50%;
+          right: 5px;
+          transform: translate(0, -50%);
+          z-index: 2;
+        }
+      }
+    }
+
+    .back-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      @include flex-center;
+      cursor: pointer;
+    }
+
+  }
+}

app/src/styles/main.scss

@@ -23,6 +23,7 @@
 @use 'components/visualization/floating/common';
 @use 'components/marketPlace/marketPlace';
 @use 'components/simulation/simulation';
+@use 'components/menu/menu';
 
 // layout
 @use 'layout/loading';

app/src/styles/pages/realTimeViz.scss

@@ -15,6 +15,7 @@
   border-radius: #{$border-radius-medium};
   transition: all 0.2s;
   z-index: #{$z-index-default};
+
   .floating {
     width: 100%;
     max-width: 250px;
@@ -27,6 +28,7 @@
     position: absolute;
     z-index: 1000;
   }
+
   .scene-container {
     overflow: hidden;
   }
@@ -76,16 +78,19 @@
       gap: 6px;
       border-radius: #{$border-radius-medium};
       overflow-x: auto;
+
       &::-webkit-scrollbar {
         display: none;
       }
     }
+
     .no-zone {
       @include flex-center;
       gap: 4px;
       padding: 4px;
       color: var(--text-disabled);
     }
+
     .zone {
       width: auto;
       background-color: var(--background-color);
@@ -186,7 +191,7 @@
         height: 25% !important;
         min-height: 150px;
         max-height: 100%;
-        border: 1px dotted #a9a9a9;
+        border: 1px dashed #a9a9a9;
         border-radius: 8px;
         box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1);
         padding: 6px 0;
@@ -206,8 +211,8 @@
 
         .kebab-options {
           position: absolute;
-          top: 12px;
+          top: 18px;
-          right: -100px;
+          right: 5px;
           transform: translate(0px, 0);
           background-color: var(--background-color);
           z-index: 10;
@@ -257,6 +262,10 @@
         }
       }
 
+      .chart-container.notLinked {
+        border-color: red;
+      }
+
       .close-btn {
         position: absolute;
         top: 5px;
@@ -364,19 +373,24 @@
     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;
@@ -442,7 +456,7 @@
   transform: translate(-0%, 0);
 
   h2 {
-    font-size: 12px;
+    font-size: var(--font-size-small);
     margin-bottom: 8px;
     color: #2b3344;
   }
@@ -527,4 +541,4 @@
 .zone.active {
   background-color: #007bff;
   color: white;
-}
+}