From bcfdddc60b9347ad3fd47ea53e6b5da4adaffea8 Mon Sep 17 00:00:00 2001
From: yashgoyal0110 <149111979+yashgoyal0110@users.noreply.github.com>
Date: Mon, 13 Jan 2025 03:52:04 +0530
Subject: [PATCH] Adding effects to icon on hover (#426)

* updated index.css

* feature: "effect-on-icon-hover'

* separated className logic

* Update DisplayIcon.tsx

---------

Co-authored-by: Arkadii Yakovets <2201626+arkid15r@users.noreply.github.com>
Co-authored-by: Kate Golovanova <kate@kgthreads.com>
---
 frontend/src/components/DisplayIcon.tsx | 26 +++++++++++++++++++++++--
 frontend/src/index.css                  | 16 +++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 87f6c7b24..a4d3e2822 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -14,11 +14,33 @@ export default function DisplayIcon({
   icons: IconType
   idx: number
 }) {
+  // className for the container
+  const containerClassName = [
+    'flex flex-col items-center justify-center gap-1 border-b border-l border-t border-border px-4 pb-1 sm:border-t-0',
+    idx === 0 || (idx === -1 && Object.keys(icons).length === 1)
+      ? 'rounded-bl-none sm:rounded-bl-md'
+      : '',
+    idx === -1 ? 'border-r sm:border-r-0' : '',
+    item === 'idx_updated_at' || item === 'idx_stars_count' ? 'rotate-container' : '',
+    item === 'idx_forks_count' || item === 'idx_contributors_count' ? 'flip-container' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  // className for the FontAwesome icon
+  const iconClassName = [
+    'text-gray-600 dark:text-gray-300',
+    item === 'idx_updated_at' || item === 'idx_stars_count' ? 'icon-rotate' : '',
+    item === 'idx_forks_count' || item === 'idx_contributors_count' ? 'icon-flip' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
   return icons[item] ? (
     <div
       data-tooltip-id={`icon-tooltip-${item}`}
       data-tooltip-content={`${Icons[item as keyof typeof Icons]?.label}`}
-      className={`flex flex-col items-center justify-center gap-1 border-b border-l border-border px-4 pb-1 ${idx === 0 || (idx === -1 && Object.keys(icons).length === 1) ? 'rounded-bl-none sm:rounded-bl-md' : ''} ${idx === -1 ? 'border-r sm:border-r-0' : ''} border-t sm:border-t-0`}
+      className={containerClassName}
     >
       {/* Display formatted number if the value is a number */}
       <span className="text-gray-600 dark:text-gray-300">
@@ -28,7 +50,7 @@ export default function DisplayIcon({
       </span>
       <span>
         <FontAwesomeIconWrapper
-          className="text-gray-600 dark:text-gray-300"
+          className={iconClassName}
           icon={Icons[item as IconKeys]?.icon} // Display corresponding icon
         />
       </span>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 08575666a..6058fdebe 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -174,3 +174,19 @@ a {
     @apply bg-background text-foreground;
   }
 }
+
+.icon-rotate {
+  transition: transform 2.5s ease;
+}
+
+.rotate-container:hover .icon-rotate {
+  transform: rotate(360deg);
+}
+
+.icon-flip {
+  transition: transform 1s ease;
+}
+
+.flip-container:hover .icon-flip {
+  transform: rotateY(180deg);
+}