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/ZoneProperties.tsx

@@ -2,7 +2,12 @@ import React, { useEffect, useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
-import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store";
+import {
+  useEditPosition,
+  usezonePosition,
+  useZones,
+  usezoneTarget,
+} from "../../../../store/store";
 import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
 
 const ZoneProperties: React.FC = () => {
@@ -13,9 +18,9 @@ const ZoneProperties: React.FC = () => {
   const { zones, setZones } = useZones();
 
   useEffect(() => {
-    setZonePosition(selectedZone.zoneViewPortPosition)
-    setZoneTarget(selectedZone.zoneViewPortTarget)
-  }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
+    setZonePosition(selectedZone.zoneViewPortPosition);
+    setZoneTarget(selectedZone.zoneViewPortTarget);
+  }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget]);
 
   async function handleSetView() {
     try {
@@ -25,7 +30,7 @@ const ZoneProperties: React.FC = () => {
       let zonesdata = {
         zoneId: selectedZone.zoneId,
         viewPortposition: zonePosition,
-        viewPortCenter: zoneTarget
+        viewPortCenter: zoneTarget,
       };
 
       let response = await zoneCameraUpdate(zonesdata, organization);
@@ -34,14 +39,11 @@ const ZoneProperties: React.FC = () => {
       } else {
         // console.log(response);
       }
-
-    } catch (error) {
-
-    }
+    } catch (error) {}
   }
 
   function handleEditView() {
-    setEdit(!Edit);  // This will toggle the `Edit` state correctly
+    setEdit(!Edit); // This will toggle the `Edit` state correctly
   }
 
   async function handleZoneNameChange(newName: string) {
@@ -49,11 +51,11 @@ const ZoneProperties: React.FC = () => {
     const organization = email?.split("@")[1]?.split(".")[0];
     const zonesdata = {
       zoneId: selectedZone.zoneId,
-      zoneName: newName
+      zoneName: newName,
     };
     // Call your API to update the zone
     let response = await zoneCameraUpdate(zonesdata, organization);
-    console.log('response: ', response);
+    console.log("response: ", response);
     if (response.message === "updated successfully") {
       setZones((prevZones: any[]) =>
         prevZones.map((zone) =>
@@ -66,7 +68,10 @@ const ZoneProperties: React.FC = () => {
       // console.log(response?.message);
     }
   }
-  function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
+  function handleVectorChange(
+    key: "zoneViewPortTarget" | "zoneViewPortPosition",
+    newValue: [number, number, number]
+  ) {
     setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
   }
   const checkZoneNameDuplicate = (name: string) => {
@@ -79,33 +84,40 @@ const ZoneProperties: React.FC = () => {
 
   return (
     <div className="zone-properties-container">
-      <div className="header">
-        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} />
-        <div className="button" onClick={handleEditView}>
-          {Edit ? "Cancel" : "Edit"}
+      <section>
+        <div className="header">
+          <RenameInput
+            value={selectedZone.zoneName}
+            onRename={handleZoneNameChange}
+            checkDuplicate={checkZoneNameDuplicate}
+          />
+          <div className="button" onClick={handleEditView}>
+            {Edit ? "Cancel" : "Edit"}
+          </div>
         </div>
-      </div>
-      <Vector3Input
-        onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
-        header="Viewport Target"
-        value={zoneTarget as [number, number, number]}
-        disabled={!Edit}
-      />
-      <Vector3Input
-        onChange={(value) => handleVectorChange("zoneViewPortPosition", value)}
-        header="Viewport Position"
-        value={zonePosition as [number, number, number]}
-        disabled={!Edit}
-      />
+        <Vector3Input
+          onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
+          header="Viewport Target"
+          value={zoneTarget as [number, number, number]}
+          disabled={!Edit}
+        />
+        <Vector3Input
+          onChange={(value) =>
+            handleVectorChange("zoneViewPortPosition", value)
+          }
+          header="Viewport Position"
+          value={zonePosition as [number, number, number]}
+          disabled={!Edit}
+        />
 
-      {Edit && (
-        <div className="button-save" onClick={handleSetView}>
-          Set View
-        </div>
-      )}
+        {Edit && (
+          <div className="button-save" onClick={handleSetView}>
+            Set View
+          </div>
+        )}
+      </section>
     </div>
   );
 };
 
 export default ZoneProperties;
-