Fix animation

frontend/src/components/AddAppModal.jsx

@@ -5,7 +5,6 @@ import { IoIosAddCircleOutline } from "react-icons/io";
 
 function AddAppModal({ onAdded }) {
   const [open, setOpen] = useState(false);
-  const [spin, setSpin] = useState(false);
 
   const [section, setSection] = useState('');
   const [name, setName] = useState('');
@@ -13,13 +12,6 @@ function AddAppModal({ onAdded }) {
   const [description, setDescription] = useState('');
   const [url, setUrl] = useState('');
 
-  const handleOpen = () => {
-    setSpin(true);
-    setTimeout(() => {
-      setSpin(false);
-      setOpen(true);
-    }, 500); // match spin animation duration
-  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -40,8 +32,8 @@ function AddAppModal({ onAdded }) {
   return (
     <>
       <IoIosAddCircleOutline
-        className={`add-button ${spin ? 'spin' : ''}`}
-        onClick={handleOpen}
+        className="add-button"
+        onClick={() => setOpen(true)}
       />
 
       {open && (

frontend/src/style/AddAppModal.css

@@ -74,11 +74,12 @@
   background-color: #0056b3;
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+.add-button {
+  transition: transform 0.2s ease, background-color 0.3s ease;
 }
 
-.add-button.spin {
-  animation: spin 0.5s linear;
+.add-button:hover {
+  background-color: #0056b3;
+  transform: rotate(90deg);
 }
+