zone properties updated

app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx

@@ -30,6 +30,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            disabled
           />
         </div>
         <div className="input-container">
@@ -39,6 +40,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            disabled
             min={0}
           />
         </div>
@@ -49,6 +51,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            disabled
           />
         </div>
       </div>

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

@@ -1,15 +1,37 @@
-import React from "react";
+import React, { useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 
-const ZoneProperties = () => {
+const ZoneProperties: React.FC = () => {
+  const [Edit, setEdit] = useState(false);
+
+  function handleSetView() {
+    setEdit(false);
+  }
+
+  function handleEditView() {
+    if (Edit) {
+      setEdit(false);
+    } else {
+      setEdit(true);
+    }
+  }
+
   return (
     <div className="zone-properties-container">
       <div className="header">
         <RenameInput value="Selected Zone Name" />
+        <div className="button" onClick={handleEditView}>
+          {Edit ? "Cancel" : "Edit"}
+        </div>
       </div>
-      <Vector3Input onChange={()=>{}} header="Target"/>
+      <Vector3Input onChange={() => {}} header="Viewport Target" />
-      <Vector3Input onChange={()=>{}} header="Position"/>
+      <Vector3Input onChange={() => {}} header="Viewport Position" />
+      {Edit && (
+        <div className="button-save" onClick={handleSetView}>
+          Set View
+        </div>
+      )}
     </div>
   );
 };

app/src/styles/layout/sidebar.scss

@@ -733,6 +733,7 @@
   .asset-properties-container,
   .zone-properties-container {
     .header {
+      @include flex-space-between;
       padding: 8px 12px;
       border-top: 1px solid var(--highlight-accent-color);
       border-bottom: 1px solid var(--highlight-accent-color);
@@ -758,7 +759,8 @@
       }
     }
     .optimize-button,
-    .generate-report-button {
+    .generate-report-button,
+    .button-save {
       @include flex-center;
       background-color: var(--accent-color);
       color: var(--primary-color);