bug fix in wall, wall Asset, floor , and decal selection and unselection, added decal deletion

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -127,6 +127,7 @@ const Assets: React.FC = () => {
   ];
 
   const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
+
   return (
     <div className="assets-container-main">
       <Search onChange={handleSearchChange} />
@@ -208,9 +209,8 @@ const Assets: React.FC = () => {
                         {activeSubcategories.map((cat, index) => (
                           <div
                             key={index}
-                            className={`catogory-asset-filter-wrapper ${
-                              selectedSubCategory === cat.name ? "active" : ""
-                            }`}
+                            className={`catogory-asset-filter-wrapper ${selectedSubCategory === cat.name ? "active" : ""
+                              }`}
                             onClick={() => setSelectedSubCategory(cat.name)}
                           >
                             <div className="sub-catagory">{cat.icon}</div>

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -1,29 +1,13 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore, {
-  useSubModuleStore,
-} from "../../../store/useModuleStore";
-import {
-  AnalysisIcon,
-  FilePackageIcon,
-  MechanicsIcon,
-  PropertiesIcon,
-  SimulationIcon,
-} from "../../icons/SimulationIcons";
+import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import { AnalysisIcon, FilePackageIcon, MechanicsIcon, PropertiesIcon, SimulationIcon, } from "../../icons/SimulationIcons";
 import { useToggleStore } from "../../../store/useUIToggleStore";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
-import useVersionHistoryVisibleStore, {
-  useDecalStore,
-  useSaveVersion,
-  useSelectedFloorItem,
-  useToolMode,
-} from "../../../store/builder/store";
-import {
-  useSelectedEventData,
-  useSelectedEventSphere,
-} from "../../../store/simulation/useSimulationStore";
+import useVersionHistoryVisibleStore, { useDecalStore, useSaveVersion, useSelectedFloorItem, useToolMode, } from "../../../store/builder/store";
+import { useSelectedEventData, useSelectedEventSphere, } from "../../../store/simulation/useSimulationStore";
 import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 import GlobalProperties from "./properties/GlobalProperties";
 import AssetProperties from "./properties/AssetProperties";
@@ -36,318 +20,272 @@ import FloorProperties from "./properties/FloorProperties";
 import SelectedWallProperties from "./properties/SelectedWallProperties";
 import SelectedFloorProperties from "./properties/SelectedFloorProperties";
 import ResourceManagement from "./resourceManagement/ResourceManagement";
-import DecalProperties from "./properties/DecalProperties";
+import SelectedDecalProperties from "./properties/SelectedDecalProperties";
 
 type DisplayComponent =
-  | "versionHistory"
-  | "globalProperties"
-  | "aisleProperties"
-  | "wallProperties"
-  | "floorProperties"
-  | "assetProperties"
-  | "selectedWallProperties"
-  | "selectedFloorProperties"
-  | "zoneProperties"
-  | "simulations"
-  | "mechanics"
-  | "analysis"
-  | "visualization"
-  | "selectedDecalProperties"
-  | "resourceManagement"
-  | "none";
+    | "versionHistory"
+    | "globalProperties"
+    | "aisleProperties"
+    | "wallProperties"
+    | "floorProperties"
+    | "assetProperties"
+    | "selectedWallProperties"
+    | "selectedFloorProperties"
+    | "zoneProperties"
+    | "simulations"
+    | "mechanics"
+    | "analysis"
+    | "visualization"
+    | "selectedDecalProperties"
+    | "resourceManagement"
+    | "none";
 
 const SideBarRight: React.FC = () => {
-  const { activeModule } = useModuleStore();
-  const { toggleUIRight } = useToggleStore();
-  const { toolMode } = useToolMode();
-  const { subModule, setSubModule } = useSubModuleStore();
-  const { selectedFloorItem } = useSelectedFloorItem();
-  const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
-  const { selectedEventData } = useSelectedEventData();
-  const { selectedEventSphere } = useSelectedEventSphere();
-  const { viewVersionHistory, setVersionHistoryVisible } =
-    useVersionHistoryVisibleStore();
-  const { isVersionSaved } = useSaveVersion();
-  const { selectedSubCategory } = useDecalStore();
+    const { selectedDecal } = useBuilderStore();
+    const { activeModule } = useModuleStore();
+    const { toggleUIRight } = useToggleStore();
+    const { toolMode } = useToolMode();
+    const { subModule, setSubModule } = useSubModuleStore();
+    const { selectedFloorItem } = useSelectedFloorItem();
+    const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
+    const { selectedEventData } = useSelectedEventData();
+    const { selectedEventSphere } = useSelectedEventSphere();
+    const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
+    const { isVersionSaved } = useSaveVersion();
 
-  const [displayComponent, setDisplayComponent] =
-    useState<DisplayComponent>("none");
+    const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");
 
-  useEffect(() => {
-    if (activeModule !== "simulation") setSubModule("properties");
-    if (activeModule === "simulation") setSubModule("simulations");
-  }, [activeModule, setSubModule]);
+    useEffect(() => {
+        if (activeModule !== "simulation") setSubModule("properties");
+        if (activeModule === "simulation") setSubModule("simulations");
+    }, [activeModule, setSubModule]);
 
-  useEffect(() => {
-    if (
-      activeModule !== "mechanics" &&
-      selectedEventData &&
-      selectedEventSphere
-    ) {
-      setSubModule("mechanics");
-    } else if (!selectedEventData && !selectedEventSphere) {
-      if (activeModule === "simulation") {
-        setSubModule("simulations");
-      }
-    }
-    if (activeModule !== "simulation") {
-      setSubModule("properties");
-    }
-  }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
-
-  useEffect(() => {
-    if (activeModule === "visualization") {
-      setDisplayComponent("visualization");
-      return;
-    }
-
-    if (!isVersionSaved && activeModule === "simulation") {
-      if (subModule === "simulations") {
-        setDisplayComponent("simulations");
-        return;
-      }
-      if (subModule === "mechanics") {
-        setDisplayComponent("mechanics");
-        return;
-      }
-      if (subModule === "analysis") {
-        setDisplayComponent("analysis");
-        return;
-      }
-      if (subModule === "resourceManagement") {
-        setDisplayComponent("resourceManagement");
-        return;
-      }
-    }
-
-    if (activeModule === "simulation" || activeModule === "builder") {
-      if (subModule === "resourceManagement") {
-        setDisplayComponent("resourceManagement");
-        return;
-      }
-    }
-
-    if (subModule === "properties" && activeModule !== "visualization") {
-      if (selectedFloorItem) {
-        setDisplayComponent("assetProperties");
-        return;
-      }
-      if (
-        !selectedFloorItem &&
-        !selectedFloor &&
-        !selectedAisle &&
-        selectedWall
-      ) {
-        setDisplayComponent("selectedWallProperties");
-        return;
-      }
-      if (
-        !selectedFloorItem &&
-        !selectedWall &&
-        !selectedAisle &&
-        selectedFloor
-      ) {
-        setDisplayComponent("selectedFloorProperties");
-        return;
-      }
-      if (viewVersionHistory) {
-        setDisplayComponent("versionHistory");
-        return;
-      }
-      if (selectedSubCategory) {
-        setDisplayComponent("selectedDecalProperties");
-        return;
-      }
-      if (
-        !selectedFloorItem &&
-        !selectedFloor &&
-        !selectedWall &&
-        !selectedSubCategory
-      ) {
-        if (toolMode === "Aisle") {
-          setDisplayComponent("aisleProperties");
-          return;
+    useEffect(() => {
+        if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) {
+            setSubModule("mechanics");
+        } else if (!selectedEventData && !selectedEventSphere) {
+            if (activeModule === "simulation") {
+                setSubModule("simulations");
+            }
         }
-        if (toolMode === "Wall") {
-          setDisplayComponent("wallProperties");
-          return;
+        if (activeModule !== "simulation") {
+            setSubModule("properties");
         }
-        if (toolMode === "Floor") {
-          setDisplayComponent("floorProperties");
-          return;
+    }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
+
+    useEffect(() => {
+        if (activeModule === "visualization") {
+            setDisplayComponent("visualization");
+            return;
         }
-        setDisplayComponent("globalProperties");
-        return;
-      }
-    }
 
-    if (
-      subModule === "zoneProperties" &&
-      (activeModule === "builder" || activeModule === "simulation")
-    ) {
-      setDisplayComponent("zoneProperties");
-      return;
-    }
+        if (!isVersionSaved && activeModule === "simulation") {
+            if (subModule === "simulations") {
+                setDisplayComponent("simulations");
+                return;
+            }
+            if (subModule === "mechanics") {
+                setDisplayComponent("mechanics");
+                return;
+            }
+            if (subModule === "analysis") {
+                setDisplayComponent("analysis");
+                return;
+            }
+            if (subModule === "resourceManagement") {
+                setDisplayComponent("resourceManagement");
+                return;
+            }
+        }
 
-    setDisplayComponent("none");
-  }, [
-    viewVersionHistory,
-    activeModule,
-    subModule,
-    isVersionSaved,
-    selectedFloorItem,
-    selectedWall,
-    selectedFloor,
-    selectedAisle,
-    toolMode,
-    selectedSubCategory,
-  ]);
+        if (activeModule === "simulation" || activeModule === "builder") {
+            if (subModule === "resourceManagement") {
+                setDisplayComponent("resourceManagement");
+                return;
+            }
+        }
 
-  const renderComponent = () => {
-    switch (displayComponent) {
-      case "versionHistory":
-        return <VersionHistory />;
-      case "globalProperties":
-        return <GlobalProperties />;
-      case "aisleProperties":
-        return <AisleProperties />;
-      case "wallProperties":
-        return <WallProperties />;
-      case "floorProperties":
-        return <FloorProperties />;
-      case "assetProperties":
-        return <AssetProperties />;
-      case "selectedWallProperties":
-        return <SelectedWallProperties />;
-      case "selectedFloorProperties":
-        return <SelectedFloorProperties />;
-      case "zoneProperties":
-        return <ZoneProperties />;
-      case "simulations":
-        return <Simulations />;
-      case "mechanics":
-        return <EventProperties />;
-      case "analysis":
-        return <Analysis />;
-      case "visualization":
-        return <Visualization />;
-      case "selectedDecalProperties":
-        return <DecalProperties />;
-      case "resourceManagement":
-        return <ResourceManagement />;
-      default:
-        return null;
-    }
-  };
+        if (subModule === "properties" && activeModule !== "visualization") {
+            if (selectedFloorItem) {
+                setDisplayComponent("assetProperties");
+                return;
+            }
+            if (!selectedFloorItem && !selectedFloor && !selectedAisle && selectedWall) {
+                setDisplayComponent("selectedWallProperties");
+                return;
+            }
+            if (!selectedFloorItem && !selectedWall && !selectedAisle && selectedFloor) {
+                setDisplayComponent("selectedFloorProperties");
+                return;
+            }
+            if (viewVersionHistory) {
+                setDisplayComponent("versionHistory");
+                return;
+            }
+            if (selectedDecal) {
+                setDisplayComponent("selectedDecalProperties");
+                return;
+            }
+            if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedDecal) {
+                if (toolMode === "Aisle") {
+                    setDisplayComponent("aisleProperties");
+                    return;
+                }
+                if (toolMode === "Wall") {
+                    setDisplayComponent("wallProperties");
+                    return;
+                }
+                if (toolMode === "Floor") {
+                    setDisplayComponent("floorProperties");
+                    return;
+                }
+                setDisplayComponent("globalProperties");
+                return;
+            }
+        }
 
-  return (
-    <div
-      className={`sidebar-right-wrapper ${
-        toggleUIRight && (!isVersionSaved || activeModule !== "simulation")
-          ? "open"
-          : "closed"
-      }`}
-    >
-      <Header />
-      {toggleUIRight && (
-        <>
-          {(!isVersionSaved || activeModule !== "simulation") && (
-            <div className="sidebar-actions-container">
-              {activeModule !== "simulation" && (
+        if (subModule === "zoneProperties" && (activeModule === "builder" || activeModule === "simulation")) {
+            setDisplayComponent("zoneProperties");
+            return;
+        }
+
+        setDisplayComponent("none");
+    }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal]);
+
+    const renderComponent = () => {
+        switch (displayComponent) {
+            case "versionHistory":
+                return <VersionHistory />;
+            case "globalProperties":
+                return <GlobalProperties />;
+            case "aisleProperties":
+                return <AisleProperties />;
+            case "wallProperties":
+                return <WallProperties />;
+            case "floorProperties":
+                return <FloorProperties />;
+            case "assetProperties":
+                return <AssetProperties />;
+            case "selectedWallProperties":
+                return <SelectedWallProperties />;
+            case "selectedFloorProperties":
+                return <SelectedFloorProperties />;
+            case "zoneProperties":
+                return <ZoneProperties />;
+            case "simulations":
+                return <Simulations />;
+            case "mechanics":
+                return <EventProperties />;
+            case "analysis":
+                return <Analysis />;
+            case "visualization":
+                return <Visualization />;
+            case "selectedDecalProperties":
+                return <SelectedDecalProperties />;
+            case "resourceManagement":
+                return <ResourceManagement />;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"}`}>
+            <Header />
+            {toggleUIRight && (
                 <>
-                  <button
-                    id="sidebar-action-list-properties"
-                    className={`sidebar-action-list ${
-                      subModule === "properties" ? "active" : ""
-                    }`}
-                    onClick={() => {
-                      setSubModule("properties");
-                      setVersionHistoryVisible(false);
-                    }}
-                  >
-                    <div className="tooltip">properties</div>
-                    <PropertiesIcon isActive={subModule === "properties"} />
-                  </button>
+                    {(!isVersionSaved || activeModule !== "simulation") && (
+                        <div className="sidebar-actions-container">
+                            {activeModule !== "simulation" && (
+                                <>
+                                    <button
+                                        id="sidebar-action-list-properties"
+                                        className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+                                            }`}
+                                        onClick={() => {
+                                            setSubModule("properties");
+                                            setVersionHistoryVisible(false);
+                                        }}
+                                    >
+                                        <div className="tooltip">properties</div>
+                                        <PropertiesIcon isActive={subModule === "properties"} />
+                                    </button>
+                                </>
+                            )}
+
+                            {activeModule === "simulation" && (
+                                <>
+                                    <button
+                                        id="sidebar-action-list-simulation"
+                                        className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
+                                            }`}
+                                        onClick={() => {
+                                            setSubModule("simulations");
+                                            setVersionHistoryVisible(false);
+                                        }}
+                                    >
+                                        <div className="tooltip">simulations</div>
+                                        <SimulationIcon isActive={subModule === "simulations"} />
+                                    </button>
+                                    <button
+                                        id="sidebar-action-list-mechanics"
+                                        className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
+                                            }`}
+                                        onClick={() => {
+                                            setSubModule("mechanics");
+                                            setVersionHistoryVisible(false);
+                                        }}
+                                    >
+                                        <div className="tooltip">mechanics</div>
+                                        <MechanicsIcon isActive={subModule === "mechanics"} />
+                                    </button>
+                                    <button
+                                        id="sidebar-action-list-analysis"
+                                        className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
+                                            }`}
+                                        onClick={() => {
+                                            setSubModule("analysis");
+                                            setVersionHistoryVisible(false);
+                                        }}
+                                    >
+                                        <div className="tooltip">analysis</div>
+                                        <AnalysisIcon isActive={subModule === "analysis"} />
+                                    </button>
+                                </>
+                            )}
+
+                            {(activeModule === "builder" ||
+                                activeModule === "simulation") && (
+                                    <button
+                                        id="sidebar-action-list-properties"
+                                        className={`sidebar-action-list ${subModule === "resourceManagement" ? "active" : ""
+                                            }`}
+                                        onClick={() => {
+                                            setSubModule("resourceManagement");
+                                            setVersionHistoryVisible(false);
+                                        }}
+                                    >
+                                        <div className="tooltip">Resource Management</div>
+                                        <FilePackageIcon
+                                            isActive={subModule === "resourceManagement"}
+                                        />
+                                    </button>
+                                )}
+                        </div>
+                    )}
+
+                    {displayComponent !== "none" && (
+                        <div className="sidebar-right-container">
+                            <div className="sidebar-right-content-container">
+                                {renderComponent()}
+                                {/* <ResourceManagement /> */}
+                            </div>
+                        </div>
+                    )}
                 </>
-              )}
-
-              {activeModule === "simulation" && (
-                <>
-                  <button
-                    id="sidebar-action-list-simulation"
-                    className={`sidebar-action-list ${
-                      subModule === "simulations" ? "active" : ""
-                    }`}
-                    onClick={() => {
-                      setSubModule("simulations");
-                      setVersionHistoryVisible(false);
-                    }}
-                  >
-                    <div className="tooltip">simulations</div>
-                    <SimulationIcon isActive={subModule === "simulations"} />
-                  </button>
-                  <button
-                    id="sidebar-action-list-mechanics"
-                    className={`sidebar-action-list ${
-                      subModule === "mechanics" ? "active" : ""
-                    }`}
-                    onClick={() => {
-                      setSubModule("mechanics");
-                      setVersionHistoryVisible(false);
-                    }}
-                  >
-                    <div className="tooltip">mechanics</div>
-                    <MechanicsIcon isActive={subModule === "mechanics"} />
-                  </button>
-                  <button
-                    id="sidebar-action-list-analysis"
-                    className={`sidebar-action-list ${
-                      subModule === "analysis" ? "active" : ""
-                    }`}
-                    onClick={() => {
-                      setSubModule("analysis");
-                      setVersionHistoryVisible(false);
-                    }}
-                  >
-                    <div className="tooltip">analysis</div>
-                    <AnalysisIcon isActive={subModule === "analysis"} />
-                  </button>
-                </>
-              )}
-
-              {(activeModule === "builder" ||
-                activeModule === "simulation") && (
-                <button
-                  id="sidebar-action-list-properties"
-                  className={`sidebar-action-list ${
-                    subModule === "resourceManagement" ? "active" : ""
-                  }`}
-                  onClick={() => {
-                    setSubModule("resourceManagement");
-                    setVersionHistoryVisible(false);
-                  }}
-                >
-                  <div className="tooltip">Resource Management</div>
-                  <FilePackageIcon
-                    isActive={subModule === "resourceManagement"}
-                  />
-                </button>
-              )}
-            </div>
-          )}
-
-          {displayComponent !== "none" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                {renderComponent()}
-                {/* <ResourceManagement /> */}
-              </div>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
+            )}
+        </div>
+    );
 };
 
 export default SideBarRight;

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

@@ -1,30 +1,37 @@
 import React from "react";
 
 interface RotationInputProps {
+  heading?: string; // Optional label for the input
+  label?: string; // Optional label for the input
   onChange: (value: string) => void; // Callback for value change
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
   value?: number;
+  disabled?: boolean; // Disable the input if true
 }
 
 const RotationInput: React.FC<RotationInputProps> = ({
+  label = "Rotate :", // Default label
+  heading = "Rotation", // Default heading
   onChange,
   placeholder = "Enter value", // Default placeholder
   type = "number", // Default type
   value = "number",
+  disabled = false,
 }) => {
   return (
     <div className="custom-input-container">
-      <div className="header">Rotation</div>
+      <div className="header">{heading}</div>
       <div className="inputs-container" style={{ display: "block" }}>
         <div className="input-container">
-          <div className="custom-input-label">Rotate : </div>
+          <div className="custom-input-label">{label}</div>
           <input
             className="custom-input-field"
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
             value={value}
+            disabled={disabled}
           />
         </div>
       </div>

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

@@ -57,6 +57,7 @@ const AssetProperties: React.FC = () => {
       <section>
         {objectPosition && (
           <PositionInput
+            disabled={true}
             onChange={() => { }}
             value1={parseFloat(objectPosition.x.toFixed(5))}
             value2={parseFloat(objectPosition.z.toFixed(5))}
@@ -64,6 +65,7 @@ const AssetProperties: React.FC = () => {
         )}
         {objectRotation && (
           <RotationInput
+            disabled={true}
             onChange={() => { }}
             value={parseFloat(objectRotation.y.toFixed(5))}
           />

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

@@ -1,53 +0,0 @@
-import {
-  LayeringBottomIcon,
-  LayeringTopIcon,
-} from "../../../icons/ExportCommonIcons";
-import InputRange from "../../../ui/inputs/InputRange";
-import RotationInput from "../customInput/RotationInput";
-import Vector3Input from "../customInput/Vector3Input";
-
-const DecalProperties = () => {
-  return (
-    <div className="decal-transformation-container">
-      <div className="header">Decal Propertis</div>
-      <section>
-        <RotationInput
-          onChange={() => {}}
-          value={10}
-        />
-        <Vector3Input
-          onChange={(value) => console.log(value)}
-          header="Scale"
-          value={[0, 0, 0] as [number, number, number]}
-        />
-      </section>
-
-      <section>
-        <InputRange
-          label="Opacity"
-          value={1}
-          min={0}
-          step={0.1}
-          max={1}
-          onChange={(value: number) => console.log(value)}
-          key={"6"}
-        />
-
-        <div className="transformation-wrapper opacity">
-          <div className="transformation-header">Layering</div>
-
-          <div className="layers-list">
-            <button className="layer-move-btn">
-              <LayeringBottomIcon />
-            </button>
-            <button className="layer-move-btn">
-              <LayeringTopIcon />
-            </button>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default DecalProperties;

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

@@ -0,0 +1,49 @@
+import { LayeringBottomIcon, LayeringTopIcon } from "../../../icons/ExportCommonIcons";
+import InputRange from "../../../ui/inputs/InputRange";
+import RotationInput from "../customInput/RotationInput";
+
+const SelectedDecalProperties = () => {
+    return (
+        <div className="decal-transformation-container">
+            <div className="header">Decal Properties</div>
+            <section>
+                <RotationInput
+                    onChange={() => { }}
+                    value={10}
+                />
+                <RotationInput
+                    heading="Scaling"
+                    label="Scale :"
+                    onChange={() => { }}
+                    value={10}
+                />
+            </section>
+
+            <section>
+                <InputRange
+                    label="Opacity"
+                    value={1}
+                    min={0}
+                    step={0.1}
+                    max={1}
+                    onChange={(value: number) => console.log(value)}
+                />
+
+                <div className="transformation-wrapper opacity">
+                    <div className="transformation-header">Layering</div>
+
+                    <div className="layers-list">
+                        <button className="layer-move-btn">
+                            <LayeringBottomIcon />
+                        </button>
+                        <button className="layer-move-btn">
+                            <LayeringTopIcon />
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+};
+
+export default SelectedDecalProperties;