Refactor event properties components to use section elements for better semantics and styling consistency; update mechanics components to enhance layout and improve user experience; modify simulation component to manage open/close state for event lists; enhance file menu with project icon; improve input toggle styles; standardize color variables in SCSS; adjust sidebar styles for better visual hierarchy; implement backdrop filters for improved UI aesthetics; and refine overall component styling for consistency across the application.

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -32,9 +32,7 @@ const GlobalProperties: React.FC = () => {
   const { renderDistance, setRenderDistance } = useRenderDistance();
   const { setPlaneValue, setGridValue, planeValue, gridValue } =
     useTileDistance();
-  useEffect(() => {
- 
-  }, [gridValue, planeValue]);
+  useEffect(() => {}, [gridValue, planeValue]);
   const { socket } = useSocketStore();
   const { limitDistance, setLimitDistance } = useLimitDistance();
   const [distance, setDistance] = useState<number>(40);
@@ -224,65 +222,66 @@ const GlobalProperties: React.FC = () => {
   // }
   return (
     <div className="global-properties-container">
-      <div className="header">Environment</div>
-      <div className="optimize-button" onClick={optimizeScene}>
-        <AI_Icon />
-        Optimize
-      </div>
+      <section>
+        <div className="header">Environment</div>
+        <div className="optimize-button" onClick={optimizeScene}>
+          <AI_Icon />
+          Optimize
+        </div>
 
-      <div className="split"></div>
+        <div className="split"></div>
 
-      <InputToggle
-        value={roofVisibility}
-        inputKey="1"
-        label="Roof Visibility"
-        onClick={changeRoofVisibility}
-      />
-      <InputToggle
-        value={wallVisibility}
-        inputKey="2"
-        label="Wall Visibility"
-        onClick={changeWallVisibility}
-      />
-      <InputToggle
-        value={shadows}
-        inputKey="3"
-        label="Shadows Visibility"
-        onClick={shadowVisibility}
-      />
-      <LabeledButton
-        label="Reset Camera"
-        onClick={toggleResetCamera}
-        value="Reset"
-      />
+        <InputToggle
+          value={roofVisibility}
+          inputKey="1"
+          label="Roof Visibility"
+          onClick={changeRoofVisibility}
+        />
+        <InputToggle
+          value={wallVisibility}
+          inputKey="2"
+          label="Wall Visibility"
+          onClick={changeWallVisibility}
+        />
+        <InputToggle
+          value={shadows}
+          inputKey="3"
+          label="Shadows Visibility"
+          onClick={shadowVisibility}
+        />
+        <LabeledButton
+          label="Reset Camera"
+          onClick={toggleResetCamera}
+          value="Reset"
+        />
 
-      <div className="split"></div>
-      {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
-      <InputToggle
-        inputKey="4"
-        label="Limit Render Distance"
-        value={limitDistance}
-        // onClick={() => {
-        //   setLimitDistance(!limitDistance);
-        //   // setDistance(75);
-        //   // setRenderDistance(75);
-        // }}
-        onClick={async () => {
-          await limitRenderDistance(); // Call the function here
-        }}
-      />
-      <InputRange
-        label="Distance"
-        disabled={!limitDistance}
-        value={renderDistance}
-        min={CONSTANTS.distanceConfig.minDistance}
-        max={CONSTANTS.distanceConfig.maxDistance}
-        onChange={(value: number) => updateDistance(value)}
-        onPointerUp={updatedDist}
-        key={"6"}
-      />
+        <div className="split"></div>
+        {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
+        <InputToggle
+          inputKey="4"
+          label="Limit Render Distance"
+          value={limitDistance}
+          // onClick={() => {
+          //   setLimitDistance(!limitDistance);
+          //   // setDistance(75);
+          //   // setRenderDistance(75);
+          // }}
+          onClick={async () => {
+            await limitRenderDistance(); // Call the function here
+          }}
+        />
+        <InputRange
+          label="Distance"
+          disabled={!limitDistance}
+          value={renderDistance}
+          min={CONSTANTS.distanceConfig.minDistance}
+          max={CONSTANTS.distanceConfig.maxDistance}
+          onChange={(value: number) => updateDistance(value)}
+          onPointerUp={updatedDist}
+          key={"6"}
+        />
 
-      {/* <div className="split"></div>
+        {/* <div className="split"></div>
       <InputToggle
         inputKey="6"
         label="Display Grid"
@@ -301,6 +300,7 @@ const GlobalProperties: React.FC = () => {
         onChange={(value: number) => updateGridDistance(value)}
         onPointerUp={updatedGrid}
       /> */}
+      </section>
     </div>
   );
 };