From a3d905e95e5ab3fbeb5b816cd9fd69b6c7b7e5b8 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Tue, 3 Jun 2025 07:52:13 +0300
Subject: [PATCH] Fix animation

---
 frontend/src/components/AddAppModal.jsx | 12 ++----------
 frontend/src/style/AddAppModal.css      | 11 ++++++-----
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/AddAppModal.jsx b/frontend/src/components/AddAppModal.jsx
index 5826ad3..364d6f1 100644
--- a/frontend/src/components/AddAppModal.jsx
+++ b/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 && (
diff --git a/frontend/src/style/AddAppModal.css b/frontend/src/style/AddAppModal.css
index 067a32e..c9995ee 100644
--- a/frontend/src/style/AddAppModal.css
+++ b/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);
 }
+