refactor: Update icon imports and improve UI components; enhance styles for better layout and responsiveness; modify event properties and simulation player functionality

2025-05-02 16:43:43 +05:30 · 2025-05-02 16:43:43 +05:30 · db162c9ffa
parent 4535be68b3
commit db162c9ffa
10 changed files with 252 additions and 252 deletions
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@ -458,7 +458,7 @@ export function InfoIcon() {
    >
      <path
        d="M5.46289 7.75441C5.46289 7.68342 5.47691 7.6131 5.50422 7.54758C5.53158 7.48201 5.57156 7.42254 5.62201 7.37257C5.67246 7.3226 5.73231 7.2831 5.79807 7.25636C5.86388 7.22963 5.93425 7.21619 6.00529 7.21681C6.11003 7.21873 6.21188 7.25142 6.29814 7.31089C6.38435 7.37036 6.45121 7.45398 6.49019 7.55118C6.52921 7.64843 6.53862 7.75499 6.5174 7.85757C6.49614 7.96014 6.44511 8.05417 6.37071 8.12795C6.29631 8.20168 6.20185 8.25184 6.09908 8.27219C5.99631 8.29254 5.8898 8.28212 5.79294 8.24224C5.69603 8.2024 5.61308 8.13486 5.55438 8.04808C5.49567 7.96134 5.46385 7.8592 5.46289 7.75441ZM5.63564 6.44401L5.56844 3.93842C5.56206 3.87819 5.56844 3.81729 5.58716 3.75968C5.60583 3.70207 5.63641 3.64902 5.67692 3.604C5.71743 3.55897 5.76697 3.52297 5.82227 3.49832C5.87761 3.47368 5.93751 3.46094 5.99804 3.46094C6.05862 3.46094 6.11852 3.47368 6.17387 3.49832C6.22916 3.52297 6.2787 3.55897 6.31921 3.604C6.35972 3.64902 6.3903 3.70207 6.40897 3.75968C6.42769 3.81729 6.43407 3.87819 6.42769 3.93842L6.36529 6.44401C6.36529 6.54073 6.32689 6.63356 6.25844 6.70196C6.19004 6.77036 6.09721 6.80881 6.00049 6.80881C5.90372 6.80881 5.81094 6.77036 5.74254 6.70196C5.67414 6.63356 5.63564 6.54073 5.63564 6.44401Z"
-        fill="var(--icon-default-color)"
+        fill="var(--text-color)"
      />
      <path
        d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z"
@ -471,7 +471,7 @@ export function InfoIcon() {
  );
 }

-export function AI_Icon() {
+export function AIIcon() {
  return (
    <svg
      width="20"
--- a/app/src/components/layout/sidebarLeft/Header.tsx
+++ b/app/src/components/layout/sidebarLeft/Header.tsx
@ -19,7 +19,7 @@ const Header: React.FC = () => {
          <FileMenu />
        </div>
      </div>
-      <div
+      <button
        className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
        onClick={() => {
          if (activeModule !== "market") {
@ -29,7 +29,7 @@ const Header: React.FC = () => {
        }}
      >
        <ToggleSidebarIcon />
-      </div>
+      </button>
    </div>
  );
 };
--- a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx
+++ b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx
@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import { AIIcon } from "../../../icons/ExportCommonIcons";
 import RegularDropDown from "../../../ui/inputs/RegularDropDown";
 import { AnalysisPresetsType } from "../../../../types/analysis";
 import RenderAnalysisInputs from "./RenderAnalysisInputs";
@ -13,53 +13,24 @@ const Analysis: React.FC = () => {

  const AnalysisPresets: AnalysisPresetsType = {
    "Throughput time": [
-      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
-      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
-      {
-        type: "default",
-        inputs: { label: "Raw Material", activeOption: "mm" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Material flow", activeOption: "m/min" },
-      },
+      { type: "default", inputs: { label: "Cycle time", activeOption: "s" } },
+      { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
+      { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
    ],
    "Production capacity": [
-      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
-      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
-      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
-      {
-        type: "default",
-        inputs: { label: "Raw Material", activeOption: "mm" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Material flow", activeOption: "m/min" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Shift 1", activeOption: "hr(s)" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Shift 2", activeOption: "hr(s)" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Over time", activeOption: "hr(s)" },
-      },
+      { type: "default", inputs: { label: "Shift length", activeOption: "hr" } },
+      { type: "default", inputs: { label: "Shifts / day", activeOption: "unit" } },
+      { type: "default", inputs: { label: "Working days / year", activeOption: "days" } },
+      { type: "default", inputs: { label: "Yield rate", activeOption: "%" } },
    ],
    ROI: [
      {
        type: "default",
-        inputs: { label: "Equipment Cost", activeOption: "INR" },
+        inputs: { label: "Selling price", activeOption: "INR" },
      },
      {
        type: "default",
-        inputs: { label: "Employee Salary", activeOption: "INR" },
+        inputs: { label: "Material cost", activeOption: "INR" },
      },
      {
        type: "default",
@ -67,7 +38,7 @@ const Analysis: React.FC = () => {
      },
      {
        type: "default",
-        inputs: { label: "Cost per unit", activeOption: "INR" },
+        inputs: { label: "Maintenance cost", activeOption: "INR" },
      },
      {
        type: "default",
@ -75,20 +46,19 @@ const Analysis: React.FC = () => {
      },
      {
        type: "default",
-        inputs: { label: "Upkeep Cost", activeOption: "INR" },
+        inputs: { label: "Fixed costs", activeOption: "INR" },
      },
      {
        type: "default",
-        inputs: { label: "Working Hours", activeOption: "Hrs" },
+        inputs: { label: "Salvage value", activeOption: "Hrs" },
      },
      {
        type: "default",
-        inputs: { label: "Power Usage", activeOption: "KWH" },
+        inputs: { label: "Production period", activeOption: "yrs" },
      },
-      { type: "default", inputs: { label: "KWH", activeOption: "Mos" } },
      {
        type: "default",
-        inputs: { label: "Man Power", activeOption: "Person" },
+        inputs: { label: "Tax rate", activeOption: "%" },
      },
    ],
  };
@ -98,7 +68,7 @@ const Analysis: React.FC = () => {
      <div className="analysis-main-container">
        <div className="header">Object</div>
        <div className="generate-report-button">
-          <AI_Icon /> Generate Report
+          <AIIcon /> Generate Report
        </div>
        <div className="analysis-content-container section">
          <div className="dropdown-header-container">
@ -121,7 +91,7 @@ const Analysis: React.FC = () => {
          />
          <div className="buttons-container">
            <input type="button" value={"Clear"} className="cancel" />
-            <input type="button" value={"Calculate"} className="submit" />
+            <input type="button" value={"Update"} className="submit" />
          </div>
          <div className="create-custom-analysis-container">
            <div className="custom-analysis-header">Create Custom Analysis</div>
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
-import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import { AIIcon } from "../../../icons/ExportCommonIcons";
 import LabeledButton from "../../../ui/inputs/LabledButton";
 import {
  useAzimuth,
@ -225,7 +225,7 @@ const GlobalProperties: React.FC = () => {
      <section>
        <div className="header">Environment</div>
        <div className="optimize-button" onClick={optimizeScene}>
-          <AI_Icon />
+          <AIIcon />
          Optimize
        </div>

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import {
-    useSelectedEventData,
-    useSelectedEventSphere,
-    useSelectedProduct,
+  useSelectedEventData,
+  useSelectedEventSphere,
+  useSelectedProduct,
 } from "../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import ConveyorMechanics from "./mechanics/conveyorMechanics";
@ -15,114 +15,118 @@ import { handleAddEventToProduct } from "../../../../../modules/simulation/event
 import { useEventsStore } from "../../../../../store/simulation/useEventsStore";

 const EventProperties: React.FC = () => {
-    const { selectedEventData } = useSelectedEventData();
-    const { getEventByModelUuid } = useProductStore();
-    const { selectedProduct } = useSelectedProduct();
-    const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
-    const [assetType, setAssetType] = useState<string | null>(null);
-    const { products, addEvent } = useProductStore();
-    const { selectedEventSphere } = useSelectedEventSphere();
+  const { selectedEventData } = useSelectedEventData();
+  const { getEventByModelUuid } = useProductStore();
+  const { selectedProduct } = useSelectedProduct();
+  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
+    null
+  );
+  const [assetType, setAssetType] = useState<string | null>(null);
+  const { products, addEvent } = useProductStore();
+  const { selectedEventSphere } = useSelectedEventSphere();

-    useEffect(() => {
-        const event = getCurrentEventData();
-        setCurrentEventData(event);
+  useEffect(() => {
+    const event = getCurrentEventData();
+    setCurrentEventData(event);

-        const type = determineAssetType(event);
-        setAssetType(type);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedEventData, selectedProduct]);
-
-    const getCurrentEventData = () => {
-        if (!selectedEventData?.data || !selectedProduct) return null;
-        return (
-            getEventByModelUuid(
-                selectedProduct.productId,
-                selectedEventData.data.modelUuid
-            ) ?? null
-        );
-    };
-
-    const determineAssetType = (event: EventsSchema | null) => {
-        if (!event) return null;
-
-        switch (event.type) {
-            case "transfer":
-                return "conveyor";
-            case "vehicle":
-                return "vehicle";
-            case "roboticArm":
-                return "roboticArm";
-            case "machine":
-                return "machine";
-            case "storageUnit":
-                return "storageUnit";
-            default:
-                return null;
-        }
-    };
+    const type = determineAssetType(event);
+    setAssetType(type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedEventData, selectedProduct]);

+  const getCurrentEventData = () => {
+    if (!selectedEventData?.data || !selectedProduct) return null;
    return (
-        <div className="event-proprties-wrapper">
-            {currentEventData && (
-                <>
-                    <div className="header">
-                        <div className="header-value">
-                            {selectedEventData?.data.modelName}
-                        </div>
-                    </div>
-                    {assetType === "conveyor" && <ConveyorMechanics />}
-                    {assetType === "vehicle" && <VehicleMechanics />}
-                    {assetType === "roboticArm" && <RoboticArmMechanics />}
-                    {assetType === "machine" && <MachineMechanics />}
-                    {assetType === "storageUnit" && <StorageMechanics />}
-                </>
-            )}
-            {!currentEventData && selectedEventSphere && (
-                <div className="no-event-selected">
-                    <p>
-                        <strong>Oops!</strong> It looks like this object doesn't have an
-                        event assigned yet. To continue, please link it to one of the
-                        products below.
-                    </p>
-
-                    <div className="products-list">
-                        <p>
-                            <strong>Here are some products you can add it to:</strong>
-                        </p>
-                        <ul>
-                            {products.map((product) => (
-                                <li key={product.productId}>
-                                    <button
-                                        onClick={() => {
-                                            if (selectedEventData) {
-                                                handleAddEventToProduct({
-                                                    event: useEventsStore.getState().getEventByModelUuid(selectedEventData?.data.modelUuid),
-                                                    addEvent,
-                                                    selectedProduct,
-                                                })
-                                            }
-                                        }}
-                                    >
-                                        <AddIcon />
-                                        {product.productName}
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                </div>
-            )
-            }
-            {!selectedEventSphere && (
-                <div className="no-event-selected">
-                    <p>
-                        <strong>Oops!</strong> It looks like you haven't selected an event
-                        point yet. Please select an event to view its properties.
-                    </p>
-                </div>
-            )}
-        </div >
+      getEventByModelUuid(
+        selectedProduct.productId,
+        selectedEventData.data.modelUuid
+      ) ?? null
    );
+  };
+
+  const determineAssetType = (event: EventsSchema | null) => {
+    if (!event) return null;
+
+    switch (event.type) {
+      case "transfer":
+        return "conveyor";
+      case "vehicle":
+        return "vehicle";
+      case "roboticArm":
+        return "roboticArm";
+      case "machine":
+        return "machine";
+      case "storageUnit":
+        return "storageUnit";
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="event-proprties-wrapper">
+      {currentEventData && (
+        <>
+          <div className="header">
+            <div className="header-value">
+              {selectedEventData?.data.modelName}
+            </div>
+          </div>
+          {assetType === "conveyor" && <ConveyorMechanics />}
+          {assetType === "vehicle" && <VehicleMechanics />}
+          {assetType === "roboticArm" && <RoboticArmMechanics />}
+          {assetType === "machine" && <MachineMechanics />}
+          {assetType === "storageUnit" && <StorageMechanics />}
+        </>
+      )}
+      {!currentEventData && selectedEventSphere && (
+        <div className="no-event-selected">
+          <p>
+            <strong>Oops!</strong> It looks like this object doesn't have an
+            event assigned yet. To continue, please link it to one of the
+            products below.
+          </p>
+
+          <div className="products-list">
+            <p>
+              <strong>Here are some products you can add it to:</strong>
+            </p>
+            <div className="product-item">
+              {products.map((product) => (
+                <button
+                  key={product.productId}
+                  onClick={() => {
+                    if (selectedEventData) {
+                      handleAddEventToProduct({
+                        event: useEventsStore
+                          .getState()
+                          .getEventByModelUuid(
+                            selectedEventData?.data.modelUuid
+                          ),
+                        addEvent,
+                        selectedProduct,
+                      });
+                    }
+                  }}
+                >
+                  <AddIcon />
+                  {product.productName}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+      {!selectedEventSphere && (
+        <div className="no-event-selected">
+          <p>
+            <strong>Oops!</strong> It looks like you haven't selected an event
+            point yet. Please select an event to view its properties.
+          </p>
+        </div>
+      )}
+    </div>
+  );
 };

 export default EventProperties;
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@ -12,25 +12,28 @@ import {
  EndIcon,
  ExpandIcon,
  HourlySimulationIcon,
+  InfoIcon,
  MonthlyROI,
  SpeedIcon,
  StartIcon,
 } from "../../icons/ExportCommonIcons";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
+import { useSubModuleStore } from "../../../store/useModuleStore";

 const SimulationPlayer: React.FC = () => {
  const MAX_SPEED = 8; // Maximum speed

+  const isDragging = useRef(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
  const [expand, setExpand] = useState(true);
+  const [playSimulation, setPlaySimulation] = useState(false);

  const { speed, setSpeed } = useAnimationPlaySpeed();
-  const [playSimulation, setPlaySimulation] = useState(false);
  const { setIsPlaying } = usePlayButtonStore();
-  const sliderRef = useRef<HTMLDivElement>(null);
-  const isDragging = useRef(false);
  const { setActiveTool } = useActiveTool();
  const { isPaused, setIsPaused } = usePauseButtonStore();
  const { isReset, setReset } = useResetButtonStore();
+  const { subModule } = useSubModuleStore();

  // Button functions
  const handleReset = () => {
@ -114,7 +117,7 @@ const SimulationPlayer: React.FC = () => {
  };

  // Store colors for each process item
-  const [processColors, setProcessColors] = useState<string[]>([]);
+  const [_, setProcessColors] = useState<string[]>([]);

  // Generate colors on mount or when process changes
  useEffect(() => {
@ -162,50 +165,60 @@ const SimulationPlayer: React.FC = () => {
    <div className="simulation-player-wrapper">
      <div className={`simulation-player-container ${expand ? "open" : ""}`}>
        <div className="controls-container">
-          <div className="production-details">
-            {/* hourlySimulation */}
-            <div className="hourly-wrapper production-wrapper">
-              <div className="header">
-                <div className="icon">
-                  <HourlySimulationIcon />
+          {subModule === "analysis" && (
+            <div className="production-details">
+              {/* hourlySimulation */}
+              <div className="hourly-wrapper production-wrapper">
+                <div className="header">
+                  <div className="icon">
+                    <HourlySimulationIcon />
+                  </div>
+                  <div className="label">Hourly Simulation</div>
+                </div>
+                <div className="progress-wrapper">
+                  <div
+                    className="progress"
+                    style={{ width: hourlySimulation }}
+                  ></div>
                </div>
-                <div className="label">Hourly Simulation</div>
              </div>
-              <div className="progress-wrapper">
-                <div
-                  className="progress"
-                  style={{ width: hourlySimulation }}
-                ></div>
+              {/* dailyProduction */}
+              <div className="dailyProduction-wrapper production-wrapper">
+                <div className="header">
+                  <div className="icon">
+                    <DailyProductionIcon />
+                  </div>
+                  <div className="label">Daily Production</div>
+                </div>
+                <div className="progress-wrapper">
+                  <div
+                    className="progress"
+                    style={{ width: dailyProduction }}
+                  ></div>
+                </div>
+              </div>
+              {/* monthlyROI */}
+              <div className="monthlyROI-wrapper production-wrapper">
+                <div className="header">
+                  <div className="icon">
+                    <MonthlyROI />
+                  </div>
+                  <div className="label">Monthly ROI</div>
+                </div>
+                <div className="progress-wrapper">
+                  <div className="progress" style={{ width: monthlyROI }}></div>
+                </div>{" "}
              </div>
            </div>
-            {/* dailyProduction */}
-            <div className="dailyProduction-wrapper production-wrapper">
-              <div className="header">
-                <div className="icon">
-                  <DailyProductionIcon />
-                </div>
-                <div className="label">Daily Production</div>
-              </div>
-              <div className="progress-wrapper">
-                <div
-                  className="progress"
-                  style={{ width: dailyProduction }}
-                ></div>
-              </div>
+          )}
+          {subModule === "simulations" && (
+            <div className="header">
+              <InfoIcon />
+              {playSimulation
+                ? "Paused - system idle."
+                : "Running simulation..."}
            </div>
-            {/* monthlyROI */}
-            <div className="monthlyROI-wrapper production-wrapper">
-              <div className="header">
-                <div className="icon">
-                  <MonthlyROI />
-                </div>
-                <div className="label">Monthly ROI</div>
-              </div>
-              <div className="progress-wrapper">
-                <div className="progress" style={{ width: monthlyROI }}></div>
-              </div>{" "}
-            </div>
-          </div>
+          )}
          <div className="controls-wrapper">
            <button
              className="simulation-button-container"
@ -234,12 +247,14 @@ const SimulationPlayer: React.FC = () => {
              <ExitIcon />
              Exit
            </button>
-            <button
-              className="expand-icon-container"
-              onClick={() => setExpand(!expand)}
-            >
-              <ExpandIcon isActive={!expand} />
-            </button>
+            {subModule === "analysis" && (
+              <button
+                className="expand-icon-container"
+                onClick={() => setExpand(!expand)}
+              >
+                <ExpandIcon isActive={!expand} />
+              </button>
+            )}
          </div>
        </div>
        <div className="progresser-wrapper">
@ -330,37 +345,39 @@ const SimulationPlayer: React.FC = () => {
            </div>
          </div>
        </div>
-        <div className="processDisplayer">
-          <div className="start-displayer timmer">00:00</div>
-          <div className="end-displayer timmer">24:00</div>
-          <div
-            className="process-wrapper"
-            style={{ padding: expand ? "0px" : "5px 35px" }}
-          >
+        {subModule === "analysis" && (
+          <div className="processDisplayer">
+            <div className="start-displayer timmer">00:00</div>
+            <div className="end-displayer timmer">24:00</div>
            <div
-              className="process-container"
-              ref={processWrapperRef}
-              onMouseDown={handleProcessMouseDown}
+              className="process-wrapper"
+              style={{ padding: expand ? "0px" : "5px 35px" }}
            >
-              {process.map((item, index) => (
-                <div
-                  key={index}
-                  className="process"
-                  style={{
-                    width: `${item.completed}%`,
-                    backgroundColor: getAvatarColor(index),
-                  }}
-                >
+              <div
+                className="process-container"
+                ref={processWrapperRef}
+                onMouseDown={handleProcessMouseDown}
+              >
+                {process.map((item, index) => (
                  <div
-                    className="process-player"
-                    ref={processPlayerRef}
-                    style={{ left: playerPosition, position: "absolute" }}
-                  ></div>
-                </div>
-              ))}
+                    key={index}
+                    className="process"
+                    style={{
+                      width: `${item.completed}%`,
+                      backgroundColor: getAvatarColor(index),
+                    }}
+                  >
+                    <div
+                      className="process-player"
+                      ref={processPlayerRef}
+                      style={{ left: playerPosition, position: "absolute" }}
+                    ></div>
+                  </div>
+                ))}
+              </div>
            </div>
          </div>
-        </div>
+        )}
      </div>
    </div>
  );
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@ -76,8 +76,6 @@ const RealTimeVisulization: React.FC = () => {
  const { setSelectedChartId } = useWidgetStore();
  const [waitingPanels, setWaitingPanels] = useState(null);

-  console.log("waitingPanels: ", waitingPanels);
-
  OuterClick({
    contextClassName: [
      "chart-container",
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@ -32,10 +32,17 @@
    }

    .controls-container {
-      @include flex-center;
+      @include flex-space-between;
      gap: 12px;
      justify-content: space-between;
-
+      .header{
+        @include flex-center;
+        gap: 6px;
+        padding: 0 8px;
+        svg{
+          scale: 1.3;
+        }
+      }
      .production-details,
      .controls-wrapper {
        @include flex-center;
@ -72,7 +79,7 @@

      .expand-icon-container {
        @include flex-center;
-        padding: 6px 8px;
+        padding: 0 8px;
        cursor: pointer;
      }

--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@ -124,6 +124,8 @@
    padding: 4px;
    border-radius: #{$border-radius-medium};
    background: var(--background-color);
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
    gap: 5px;
    position: relative;

--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@ -58,12 +58,8 @@
        fill: var(--icon-default-color-active);
      }
      &:hover {
-        rect {
-          stroke: var(--icon-default-color);
-        }
-        circle {
-          fill: var(--icon-default-color);
-        }
+        filter: saturate(0.8);
+        background: var(--background-color-accent);
      }
    }
  }
@ -714,10 +710,10 @@

      .add-button {
        @include flex-center;
-        padding: 2px 4px;
+        padding: 4px 8px;
        background: var(--background-color-button);
        color: var(--text-button-color);
-        border-radius: #{$border-radius-small};
+        border-radius: #{$border-radius-large};
        cursor: pointer;
        outline: none;
        border: none;
@ -832,10 +828,10 @@
          transform: translateX(4px);

          &:hover {
-            background: var(--accent-color);
+            background: var(--background-color-accent);

            path {
-              stroke: var(--primary-color);
+              stroke: var(--text-button-color);
            }
          }
        }
@ -1003,10 +999,10 @@
        border-radius: 8px 0 0 8px;

        &:hover {
-          background: var(--accent-color);
+          background: var(--background-color-accent);

          path {
-            stroke: var(--primary-color);
+            stroke: var(--text-button-color);
          }
        }
      }
@ -1067,7 +1063,13 @@
      .dropdown-content-container {
        padding: 6px 12px;
      }
-
+      .value-field-container {
+        padding: 6px;
+        .dropdown {
+          min-width: 44px;
+          text-align: center;
+        }
+      }
      .input-range-container {
        .input-container {
          width: 75%;