animation to star

Author: KamathAnjali

src/components/Table/index.js

@@ -115,13 +115,13 @@ const Table = () => {
   const [showPatterns, setShowPatterns] = useState(
     JSON.parse(localStorage.getItem('showPatterns')) || new Array(1).fill(true),
   );
-
   const savedImportant = JSON.parse(localStorage.getItem('importantProblems'));
   const [important, setImportant] = useState(
     savedImportant && savedImportant.length === questions.length
       ? savedImportant
       : new Array(questions.length).fill(false),
   );
+  const [starAnimation, setStarAnimation] = useState({});
 
   // Returns an array of question objects that are starred
   const getStarredQuestions = () => {
@@ -508,46 +508,47 @@ const Table = () => {
               const id = Number(row?.original?.id);
               if (Number.isNaN(id)) return '❌';
 
+              const handleToggle = () => {
+                const updatedImportant = [...important];
+                updatedImportant[id] = !updatedImportant[id];
+                setImportant(updatedImportant);
+                toast(
+                  updatedImportant[id]
+                    ? 'Marked as Important'
+                    : 'Removed from Important',
+                  {
+                    type: updatedImportant[id] ? 'success' : 'info',
+                    autoClose: 1200,
+                    hideProgressBar: true,
+                    position: 'bottom-center',
+                  },
+                );
+                // Trigger animation
+                setStarAnimation(prev => ({ ...prev, [id]: true }));
+                setTimeout(() => {
+                  setStarAnimation(prev => ({ ...prev, [id]: false }));
+                }, 400);
+              };
+
               const handleKeyPress = e => {
                 if (e.key === 'Enter' || e.key === ' ') {
-                  const updatedImportant = [...important];
-                  updatedImportant[id] = !updatedImportant[id];
-                  setImportant(updatedImportant);
-                  toast(
-                    updatedImportant[id]
-                      ? 'Marked as Important'
-                      : 'Removed from Important',
-                    {
-                      type: updatedImportant[id] ? 'success' : 'info',
-                      autoClose: 1200,
-                      hideProgressBar: true,
-                      position: 'bottom-center',
-                    },
-                  );
+                  handleToggle();
                 }
               };
 
               return (
                 <span
                   role="button"
                   tabIndex={0}
-                  style={{ cursor: 'pointer', fontSize: '1.2em' }}
-                  onClick={() => {
-                    const updatedImportant = [...important];
-                    updatedImportant[id] = !updatedImportant[id];
-                    setImportant(updatedImportant);
-                    toast(
-                      updatedImportant[id]
-                        ? 'Marked as Important'
-                        : 'Removed from Important',
-                      {
-                        type: updatedImportant[id] ? 'success' : 'info',
-                        autoClose: 1200,
-                        hideProgressBar: true,
-                        position: 'bottom-center',
-                      },
-                    );
+                  style={{
+                    cursor: 'pointer',
+                    fontSize: '1.2em',
+                    transition: 'color 0.2s',
                   }}
+                  className={
+                    important[id] && starAnimation[id] ? 'star-animate' : ''
+                  }
+                  onClick={handleToggle}
                   onKeyDown={handleKeyPress}
                   aria-label="Mark as important for revision"
                   data-tip="Mark as important for revision"

src/components/Table/styles.scss

@@ -123,3 +123,25 @@ body.dark-mode .modal-content {
     text-wrap: nowrap;
   }
 }
+
+.star-animate {
+  animation: pop-star 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes pop-star {
+  0% {
+    transform: scale(1) rotate(0deg);
+    color: #ffd700;
+    filter: drop-shadow(0 0 0 #ffd700);
+  }
+  60% {
+    transform: scale(1.5) rotate(-15deg);
+    color: #ffd700;
+    filter: drop-shadow(0 0 8px #ffd700);
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+    color: #ffd700;
+    filter: drop-shadow(0 0 0 #ffd700);
+  }
+}