feat: Refactor icon components and update button elements for improved accessibility and consistency

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

@@ -50,7 +50,6 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
   const actionsContainerRef = useRef<HTMLDivElement>(null);
 
   const [activeOption, setActiveOption] = useState("default");
-  const [dummyactiveOption, setTypeOption] = useState("default");
 
   const getAvailableActions = () => {
     if (assetType === "conveyor") {
@@ -136,9 +135,9 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
         <div className="actions">
           <div className="header">
             <div className="header-value">Actions</div>
-            <div className="add-button" onClick={() => {}}>
+            <button className="add-button" onClick={() => {}}>
               <AddIcon /> Add
-            </div>
+            </button>
           </div>
           <div
             className="lists-main-container"
@@ -195,7 +194,8 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
           {activeOption === "swap" && <SwapAction />} {/* done */}
           {activeOption === "despawn" && <DespawnAction />} {/* done */}
           {activeOption === "travel" && <TravelAction />} {/* done */}
-          {activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
+          {activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
+          {/* done */}
           {activeOption === "process" && <ProcessAction />} {/* done */}
           {activeOption === "store" && <StorageAction />} {/* done */}
         </div>