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

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"

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>
   );
 };

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: "Cycle time", activeOption: "s" } },
-      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
+      { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
-      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
+      { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
-      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
-      {
-        type: "default",
-        inputs: { label: "Raw Material", activeOption: "mm" },
-      },
-      {
-        type: "range",
-        inputs: { label: "Material flow", activeOption: "m/min" },
-      },
     ],
     "Production capacity": [
-      { type: "default", inputs: { label: "Height", activeOption: "mm" } },
+      { type: "default", inputs: { label: "Shift length", activeOption: "hr" } },
-      { type: "default", inputs: { label: "Width", activeOption: "mm" } },
+      { type: "default", inputs: { label: "Shifts / day", activeOption: "unit" } },
-      { type: "default", inputs: { label: "Length", activeOption: "mtr" } },
+      { type: "default", inputs: { label: "Working days / year", activeOption: "days" } },
-      { type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
+      { type: "default", inputs: { label: "Yield rate", activeOption: "%" } },
-      {
-        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)" },
-      },
     ],
     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>

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>
 

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import {
-    useSelectedEventData,
+  useSelectedEventData,
-    useSelectedEventSphere,
+  useSelectedEventSphere,
-    useSelectedProduct,
+  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 { selectedEventData } = useSelectedEventData();
-    const { getEventByModelUuid } = useProductStore();
+  const { getEventByModelUuid } = useProductStore();
-    const { selectedProduct } = useSelectedProduct();
+  const { selectedProduct } = useSelectedProduct();
-    const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
+  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
-    const [assetType, setAssetType] = useState<string | null>(null);
+    null
-    const { products, addEvent } = useProductStore();
+  );
-    const { selectedEventSphere } = useSelectedEventSphere();
+  const [assetType, setAssetType] = useState<string | null>(null);
+  const { products, addEvent } = useProductStore();
+  const { selectedEventSphere } = useSelectedEventSphere();
 
-    useEffect(() => {
+  useEffect(() => {
-        const event = getCurrentEventData();
+    const event = getCurrentEventData();
-        setCurrentEventData(event);
+    setCurrentEventData(event);
 
-        const type = determineAssetType(event);
+    const type = determineAssetType(event);
-        setAssetType(type);
+    setAssetType(type);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedEventData, selectedProduct]);
+  }, [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 getCurrentEventData = () => {
+    if (!selectedEventData?.data || !selectedProduct) return null;
     return (
-        <div className="event-proprties-wrapper">
+      getEventByModelUuid(
-            {currentEventData && (
+        selectedProduct.productId,
-                <>
+        selectedEventData.data.modelUuid
-                    <div className="header">
+      ) ?? null
-                        <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 >
     );
+  };
+
+  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;

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">
+          {subModule === "analysis" && (
-            {/* hourlySimulation */}
+            <div className="production-details">
-            <div className="hourly-wrapper production-wrapper">
+              {/* hourlySimulation */}
-              <div className="header">
+              <div className="hourly-wrapper production-wrapper">
-                <div className="icon">
+                <div className="header">
-                  <HourlySimulationIcon />
+                  <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">
+              {/* dailyProduction */}
-                <div
+              <div className="dailyProduction-wrapper production-wrapper">
-                  className="progress"
+                <div className="header">
-                  style={{ width: hourlySimulation }}
+                  <div className="icon">
-                ></div>
+                    <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">
+          {subModule === "simulations" && (
-              <div className="header">
+            <div className="header">
-                <div className="icon">
+              <InfoIcon />
-                  <DailyProductionIcon />
+              {playSimulation
-                </div>
+                ? "Paused - system idle."
-                <div className="label">Daily Production</div>
+                : "Running simulation..."}
-              </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>
           <div className="controls-wrapper">
             <button
               className="simulation-button-container"
@@ -234,12 +247,14 @@ const SimulationPlayer: React.FC = () => {
               <ExitIcon />
               Exit
             </button>
-            <button
+            {subModule === "analysis" && (
-              className="expand-icon-container"
+              <button
-              onClick={() => setExpand(!expand)}
+                className="expand-icon-container"
-            >
+                onClick={() => setExpand(!expand)}
-              <ExpandIcon isActive={!expand} />
+              >
-            </button>
+                <ExpandIcon isActive={!expand} />
+              </button>
+            )}
           </div>
         </div>
         <div className="progresser-wrapper">
@@ -330,37 +345,39 @@ const SimulationPlayer: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="processDisplayer">
+        {subModule === "analysis" && (
-          <div className="start-displayer timmer">00:00</div>
+          <div className="processDisplayer">
-          <div className="end-displayer timmer">24:00</div>
+            <div className="start-displayer timmer">00:00</div>
-          <div
+            <div className="end-displayer timmer">24:00</div>
-            className="process-wrapper"
-            style={{ padding: expand ? "0px" : "5px 35px" }}
-          >
             <div
-              className="process-container"
+              className="process-wrapper"
-              ref={processWrapperRef}
+              style={{ padding: expand ? "0px" : "5px 35px" }}
-              onMouseDown={handleProcessMouseDown}
             >
-              {process.map((item, index) => (
+              <div
-                <div
+                className="process-container"
-                  key={index}
+                ref={processWrapperRef}
-                  className="process"
+                onMouseDown={handleProcessMouseDown}
-                  style={{
+              >
-                    width: `${item.completed}%`,
+                {process.map((item, index) => (
-                    backgroundColor: getAvatarColor(index),
-                  }}
-                >
                   <div
-                    className="process-player"
+                    key={index}
-                    ref={processPlayerRef}
+                    className="process"
-                    style={{ left: playerPosition, position: "absolute" }}
+                    style={{
-                  ></div>
+                      width: `${item.completed}%`,
-                </div>
+                      backgroundColor: getAvatarColor(index),
-              ))}
+                    }}
+                  >
+                    <div
+                      className="process-player"
+                      ref={processPlayerRef}
+                      style={{ left: playerPosition, position: "absolute" }}
+                    ></div>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

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",

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;
       }
 

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;
 

app/src/styles/layout/sidebar.scss

@@ -58,12 +58,8 @@
         fill: var(--icon-default-color-active);
       }
       &:hover {
-        rect {
+        filter: saturate(0.8);
-          stroke: var(--icon-default-color);
+        background: var(--background-color-accent);
-        }
-        circle {
-          fill: var(--icon-default-color);
-        }
       }
     }
   }
@@ -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%;