From 3f05be816c6fe6722943b6463ed8d8063a7c9594 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Thu, 27 Mar 2025 22:32:04 +0530
Subject: [PATCH 01/13] changes  for the social media icons

---
 frontend/src/components/Card.tsx              | 149 ++++++++----------
 frontend/src/components/ContributorAvatar.tsx |   2 +-
 frontend/src/components/DisplayIcon.tsx       |  21 ++-
 3 files changed, 85 insertions(+), 87 deletions(-)

diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
index a4145d110a..b9bf16b1e1 100644
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -14,7 +14,6 @@ import DisplayIcon from 'components/DisplayIcon'
 import Markdown from 'components/MarkdownWrapper'
 import { Tooltip } from 'components/ui/tooltip'
 
-// Initial check for mobile screen size
 const isMobileInitial = typeof window !== 'undefined' && window.innerWidth < desktopViewMinWidth
 
 const Card = ({
@@ -32,21 +31,16 @@ const Card = ({
 }: CardProps) => {
   const [isMobile, setIsMobile] = useState(isMobileInitial)
 
-  // Resize listener to adjust display based on screen width
   useEffect(() => {
-    const checkMobile = () => {
-      const mobile = window.innerWidth < desktopViewMinWidth
-      setIsMobile(mobile)
-    }
+    const checkMobile = () => setIsMobile(window.innerWidth < desktopViewMinWidth)
     window.addEventListener('resize', checkMobile)
     return () => window.removeEventListener('resize', checkMobile)
   }, [])
 
   return (
-    <div className="mx-auto mb-2 mt-4 flex w-full max-w-[95%] flex-col items-start rounded-md border border-border bg-white px-4 pb-4 pl-4 dark:bg-[#212529] md:max-w-6xl">
-      <div className="mt-2 flex w-full flex-col items-start gap-4 pt-2 sm:flex-col sm:gap-4 md:pt-0">
+    <div className="mx-auto mb-2 mt-4 w-full max-w-[95%] rounded-md border border-border bg-white px-4 pb-4 dark:bg-[#212529] md:max-w-6xl">
+      <div className="mt-2 flex w-full flex-col gap-4 pt-2 sm:flex-col md:pt-0">
         <div className="flex items-center gap-3">
-          {/* Display project level badge (if available) */}
           {level && (
             <Tooltip
               closeDelay={100}
@@ -58,112 +52,105 @@ const Card = ({
               showArrow
             >
               <span
-                className={cn(
-                  'flex h-8 w-8 items-center justify-center rounded-full text-xs shadow'
-                )}
+                className="flex h-8 w-8 items-center justify-center rounded-full shadow"
                 style={{ backgroundColor: level.color }}
               >
                 <FontAwesomeIconWrapper icon={level.icon} className="text-white" />
               </span>
             </Tooltip>
           )}
-          {/* Project title and link */}
+
           <Link href={url} target="_blank" rel="noopener noreferrer" className="flex-1">
-            <h1
-              className="max-w-full break-words text-base font-semibold dark:text-sky-600 sm:break-normal sm:text-lg lg:text-2xl"
-              style={{
-                transition: 'color 0.3s ease',
-              }}
-            >
+            <h1 className="break-words text-base font-semibold dark:text-sky-600 sm:text-lg lg:text-2xl transition-colors hover:text-blue-500">
               {title}
             </h1>
           </Link>
         </div>
-        {/* Icons associated with the project */}
-        {icons && Object.keys(Icons).some((key) => icons[key]) ? (
-          <div className="-ml-1.5 flex flex-grow">
-            {Object.keys(Icons).map((key, index) =>
-              icons[key] ? (
-                <DisplayIcon
-                  key={`${key}-${index}`}
-                  item={key}
-                  icons={Object.fromEntries(Object.entries(icons).filter(([_, value]) => value))}
-                />
-              ) : null
+
+        {icons && Object.keys(Icons).some((key) => icons[key]) && (
+          <div className="flex flex-wrap items-center gap-2">
+            {Object.keys(Icons).map(
+              (key, index) =>
+                icons[key] && (
+                  <DisplayIcon
+                    key={`${key}-${index}`}
+                    item={key}
+                    icons={Object.fromEntries(Object.entries(icons).filter(([_, value]) => value))}
+                  />
+                )
             )}
           </div>
-        ) : null}
+        )}
       </div>
-      {/* Link to project name if provided */}
+
       {projectName && (
-        <Link href={projectLink} rel="noopener noreferrer" className="mt-2 font-medium">
+        <Link href={projectLink} rel="noopener noreferrer" className="mt-2 font-medium text-blue-600 hover:underline">
           {projectName}
         </Link>
       )}
-      {/* Render project summary using Markdown */}
+
       <Markdown content={summary} className="py-2 pr-4 text-gray-600 dark:text-gray-300" />
-      <div
-        className={
-          social && social.length > 0
-            ? 'flex w-full flex-col gap-2 pr-4'
-            : 'flex w-full items-center justify-between'
-        }
-      >
-        {/* Render top contributors as avatars */}
-        <div className="mt-3 flex w-full flex-wrap items-center gap-2">
-          {topContributors?.map((contributor, index) => (
-            <ContributorAvatar
-              key={contributor.login || `contributor-${index}`}
-              contributor={contributor}
-              uniqueKey={index.toString()}
-            />
-          ))}
-        </div>
+
+      <div className={cn(social?.length ? 'flex w-full flex-col gap-2 pr-4' : 'flex w-full items-center justify-between')}>
+        {topContributors && topContributors.length > 0 && (
+          <div className="mt-3 flex w-full flex-wrap items-center gap-2">
+            {topContributors.map((contributor, index) => (
+              <ContributorAvatar
+                key={contributor.login || `contributor-${index}`}
+                contributor={contributor}
+                uniqueKey={index.toString()}
+              />
+            ))}
+          </div>
+        )}
+
         {!social || social.length === 0 ? (
-          <div
-            className={cn(
-              'mt-3 flex items-center pr-4',
-              isMobile && 'mt-4 w-full justify-end pr-4'
-            )}
-          >
+          <div className={cn('mt-3 flex items-center pr-4', isMobile && 'mt-4 w-full justify-end')}>
             <ActionButton tooltipLabel={tooltipLabel} url={button.url} onClick={button.onclick}>
-              {button.icon}
-              {button.label}
+              <FontAwesomeIconWrapper icon={button.icon} /> {button.label}
             </ActionButton>
           </div>
         ) : (
-          <div
-            className={cn(
-              'flex w-full flex-wrap items-center justify-between gap-6',
-              isMobile && 'items-start'
-            )}
-          >
-            <div
-              className={cn('flex w-full items-center justify-between', isMobile && 'flex-wrap')}
-            >
-              {/* Render social links if available */}
+          <div className={cn('flex w-full flex-wrap items-center justify-between gap-6', isMobile && 'items-start')}>
+            <div className={cn('flex w-full items-center justify-between', isMobile && 'flex-wrap')}>
               {social && social.length > 0 && (
                 <HStack id="social" mt={2}>
                   {social.map((item) => (
-                    <Link
+                    <Tooltip
                       key={`${item.title}-${item.url}`}
-                      href={item.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      display="flex"
-                      alignItems="center"
-                      gap={2}
+                      content={item.title}
+                      recipe={TooltipRecipe}
+                      openDelay={150}
+                      closeDelay={100}
+                      showArrow
+                      positioning={{ placement: 'top' }}
                     >
-                      <FontAwesomeIcon icon={getSocialIcon(item.url)} className="h-5 w-5" />
-                    </Link>
+                      <Link
+                        href={item.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="transition-transform duration-300 hover:scale-110"
+                      >
+                        <FontAwesomeIcon
+                          icon={getSocialIcon(item.url)}
+                          className={`h-5 w-5 transition-colors duration-300 ${
+                            {
+                              discord: 'text-[#5865F2] hover:text-[#5865F2]',
+                              instagram: 'text-[#E4405F] hover:text-[#E4405F]',
+                              linkedin: 'text-[#0077B5] hover:text-[#0077B5]',
+                              youtube: 'text-[#FF0000] hover:text-[#FF0000]',
+                            }[item.title.toLowerCase()] || 'text-gray-500'
+                          }`}
+                        />
+                      </Link>
+                    </Tooltip>
                   ))}
                 </HStack>
               )}
-              {/* Action Button */}
+
               <div className="flex items-center">
                 <ActionButton tooltipLabel={tooltipLabel} url={button.url} onClick={button.onclick}>
-                  {button.icon}
-                  {button.label}
+                  <FontAwesomeIconWrapper icon={button.icon} /> {button.label}
                 </ActionButton>
               </div>
             </div>
diff --git a/frontend/src/components/ContributorAvatar.tsx b/frontend/src/components/ContributorAvatar.tsx
index 51315ee72c..40c1e8fb76 100644
--- a/frontend/src/components/ContributorAvatar.tsx
+++ b/frontend/src/components/ContributorAvatar.tsx
@@ -49,7 +49,7 @@ const ContributorAvatar = memo(({ contributor, uniqueKey }: ContributorProps) =>
     >
       <Link href={`/community/users/${login}`} target="_blank" rel="noopener noreferrer">
         <img
-          className="h-[30px] w-[30px] rounded-full grayscale hover:grayscale-0"
+          className="h-[30px] w-[30px] rounded-full grayscale transition-all duration-300 hover:grayscale-0 hover:scale-110"
           src={`${avatarUrl}${isAlgolia ? '&s=60' : ''}`}
           alt={`${displayName}'s avatar`}
         />
diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 2b3af2e3e7..45f1d6ce01 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -6,7 +6,17 @@ import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import { Tooltip } from 'components/ui/tooltip'
 
 export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
-  // className for the container
+
+  const brandColors: Record<string, string> = {
+    discord: 'text-[#7289DA] hover:text-[#5b6eae]',
+    instagram: 'text-[#E4405F] hover:text-[#c13548]',
+    linkedin: 'text-[#0077B5] hover:text-[#005582]',
+    youtube: 'text-[#FF0000] hover:text-[#cc0000]',
+  }
+
+  const isSocialMedia = Object.keys(brandColors).includes(item.toLowerCase())
+
+
   const containerClassName = [
     'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
     item === 'stars_count' || item === 'starsCount' ? 'rotate-container' : '',
@@ -20,9 +30,10 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .filter(Boolean)
     .join(' ')
 
-  // className for the FontAwesome icon
+
   const iconClassName = [
-    'text-gray-600 dark:text-gray-300',
+    isSocialMedia ? brandColors[item.toLowerCase()] : 'text-gray-600 dark:text-gray-300',
+    'transition-transform transform hover:scale-110',
     item === 'stars_count' || item === 'starsCount' ? 'icon-rotate' : '',
     item === 'forks_count' ||
     item === 'contributors_count' ||
@@ -47,13 +58,13 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
         {/* Display formatted number if the value is a number */}
         <span className="text-gray-600 dark:text-gray-300">
           {typeof icons[item] === 'number'
-            ? millify(icons[item], { precision: 1 }) // Format large numbers using 'millify' library
+            ? millify(icons[item], { precision: 1 })
             : icons[item]}
         </span>
         <span>
           <FontAwesomeIconWrapper
             className={iconClassName}
-            icon={Icons[item as IconKeys]?.icon} // Display corresponding icon
+            icon={Icons[item as IconKeys]?.icon}
           />
         </span>
       </div>

From 0abf6263fcbd1893e630b8b9ab853c6b30e282a4 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Thu, 27 Mar 2025 23:02:04 +0530
Subject: [PATCH 02/13] Update Card.tsx

---
 frontend/src/components/Card.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
index b9bf16b1e1..42148e4a73 100644
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -160,5 +160,4 @@ const Card = ({
     </div>
   )
 }
-
 export default Card

From abd92d6ac28beac0d1f487b48dad42fcc42ac8ef Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Fri, 28 Mar 2025 22:20:04 +0530
Subject: [PATCH 03/13] Update .pre-commit-config.yaml

---
 .pre-commit-config.yaml | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 81e7c9d2f1..a94eebd0cd 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -26,17 +26,6 @@ repos:
         types:
           - html
 
-  - repo: https://github.com/jumanjihouse/pre-commit-hook-yamlfmt
-    rev: 0.2.3
-    hooks:
-      - id: yamlfmt
-        args:
-          - --implicit_start
-          - --mapping=2
-          - --offset=2
-          - --sequence=4
-        exclude: (.github|frontend/pnpm-lock.yaml)
-
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v5.0.0
     hooks:

From a6fc15877048c36b0c4174bc7aace4781559d811 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Fri, 28 Mar 2025 22:40:57 +0530
Subject: [PATCH 04/13] updated for the issue -1168

---
 frontend/src/components/ContributorAvatar.tsx | 1 -
 frontend/src/components/DisplayIcon.tsx       | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ContributorAvatar.tsx b/frontend/src/components/ContributorAvatar.tsx
index 40c1e8fb76..0ebe0e84b8 100644
--- a/frontend/src/components/ContributorAvatar.tsx
+++ b/frontend/src/components/ContributorAvatar.tsx
@@ -59,5 +59,4 @@ const ContributorAvatar = memo(({ contributor, uniqueKey }: ContributorProps) =>
 })
 
 ContributorAvatar.displayName = 'ContributorAvatar'
-
 export default ContributorAvatar
diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 45f1d6ce01..0445453b0e 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -70,4 +70,5 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
       </div>
     </Tooltip>
   ) : null
+
 }

From 7d4d2c9f4581fa639b90ac4c48809ec4b17b13b6 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Sun, 30 Mar 2025 04:11:43 +0530
Subject: [PATCH 05/13] upadated

---
 frontend/src/components/Card.tsx        | 150 +++++++++++++-----------
 frontend/src/components/DisplayIcon.tsx |  41 ++-----
 2 files changed, 93 insertions(+), 98 deletions(-)

diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
index 42148e4a73..a4145d110a 100644
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -14,6 +14,7 @@ import DisplayIcon from 'components/DisplayIcon'
 import Markdown from 'components/MarkdownWrapper'
 import { Tooltip } from 'components/ui/tooltip'
 
+// Initial check for mobile screen size
 const isMobileInitial = typeof window !== 'undefined' && window.innerWidth < desktopViewMinWidth
 
 const Card = ({
@@ -31,16 +32,21 @@ const Card = ({
 }: CardProps) => {
   const [isMobile, setIsMobile] = useState(isMobileInitial)
 
+  // Resize listener to adjust display based on screen width
   useEffect(() => {
-    const checkMobile = () => setIsMobile(window.innerWidth < desktopViewMinWidth)
+    const checkMobile = () => {
+      const mobile = window.innerWidth < desktopViewMinWidth
+      setIsMobile(mobile)
+    }
     window.addEventListener('resize', checkMobile)
     return () => window.removeEventListener('resize', checkMobile)
   }, [])
 
   return (
-    <div className="mx-auto mb-2 mt-4 w-full max-w-[95%] rounded-md border border-border bg-white px-4 pb-4 dark:bg-[#212529] md:max-w-6xl">
-      <div className="mt-2 flex w-full flex-col gap-4 pt-2 sm:flex-col md:pt-0">
+    <div className="mx-auto mb-2 mt-4 flex w-full max-w-[95%] flex-col items-start rounded-md border border-border bg-white px-4 pb-4 pl-4 dark:bg-[#212529] md:max-w-6xl">
+      <div className="mt-2 flex w-full flex-col items-start gap-4 pt-2 sm:flex-col sm:gap-4 md:pt-0">
         <div className="flex items-center gap-3">
+          {/* Display project level badge (if available) */}
           {level && (
             <Tooltip
               closeDelay={100}
@@ -52,105 +58,112 @@ const Card = ({
               showArrow
             >
               <span
-                className="flex h-8 w-8 items-center justify-center rounded-full shadow"
+                className={cn(
+                  'flex h-8 w-8 items-center justify-center rounded-full text-xs shadow'
+                )}
                 style={{ backgroundColor: level.color }}
               >
                 <FontAwesomeIconWrapper icon={level.icon} className="text-white" />
               </span>
             </Tooltip>
           )}
-
+          {/* Project title and link */}
           <Link href={url} target="_blank" rel="noopener noreferrer" className="flex-1">
-            <h1 className="break-words text-base font-semibold dark:text-sky-600 sm:text-lg lg:text-2xl transition-colors hover:text-blue-500">
+            <h1
+              className="max-w-full break-words text-base font-semibold dark:text-sky-600 sm:break-normal sm:text-lg lg:text-2xl"
+              style={{
+                transition: 'color 0.3s ease',
+              }}
+            >
               {title}
             </h1>
           </Link>
         </div>
-
-        {icons && Object.keys(Icons).some((key) => icons[key]) && (
-          <div className="flex flex-wrap items-center gap-2">
-            {Object.keys(Icons).map(
-              (key, index) =>
-                icons[key] && (
-                  <DisplayIcon
-                    key={`${key}-${index}`}
-                    item={key}
-                    icons={Object.fromEntries(Object.entries(icons).filter(([_, value]) => value))}
-                  />
-                )
+        {/* Icons associated with the project */}
+        {icons && Object.keys(Icons).some((key) => icons[key]) ? (
+          <div className="-ml-1.5 flex flex-grow">
+            {Object.keys(Icons).map((key, index) =>
+              icons[key] ? (
+                <DisplayIcon
+                  key={`${key}-${index}`}
+                  item={key}
+                  icons={Object.fromEntries(Object.entries(icons).filter(([_, value]) => value))}
+                />
+              ) : null
             )}
           </div>
-        )}
+        ) : null}
       </div>
-
+      {/* Link to project name if provided */}
       {projectName && (
-        <Link href={projectLink} rel="noopener noreferrer" className="mt-2 font-medium text-blue-600 hover:underline">
+        <Link href={projectLink} rel="noopener noreferrer" className="mt-2 font-medium">
           {projectName}
         </Link>
       )}
-
+      {/* Render project summary using Markdown */}
       <Markdown content={summary} className="py-2 pr-4 text-gray-600 dark:text-gray-300" />
-
-      <div className={cn(social?.length ? 'flex w-full flex-col gap-2 pr-4' : 'flex w-full items-center justify-between')}>
-        {topContributors && topContributors.length > 0 && (
-          <div className="mt-3 flex w-full flex-wrap items-center gap-2">
-            {topContributors.map((contributor, index) => (
-              <ContributorAvatar
-                key={contributor.login || `contributor-${index}`}
-                contributor={contributor}
-                uniqueKey={index.toString()}
-              />
-            ))}
-          </div>
-        )}
-
+      <div
+        className={
+          social && social.length > 0
+            ? 'flex w-full flex-col gap-2 pr-4'
+            : 'flex w-full items-center justify-between'
+        }
+      >
+        {/* Render top contributors as avatars */}
+        <div className="mt-3 flex w-full flex-wrap items-center gap-2">
+          {topContributors?.map((contributor, index) => (
+            <ContributorAvatar
+              key={contributor.login || `contributor-${index}`}
+              contributor={contributor}
+              uniqueKey={index.toString()}
+            />
+          ))}
+        </div>
         {!social || social.length === 0 ? (
-          <div className={cn('mt-3 flex items-center pr-4', isMobile && 'mt-4 w-full justify-end')}>
+          <div
+            className={cn(
+              'mt-3 flex items-center pr-4',
+              isMobile && 'mt-4 w-full justify-end pr-4'
+            )}
+          >
             <ActionButton tooltipLabel={tooltipLabel} url={button.url} onClick={button.onclick}>
-              <FontAwesomeIconWrapper icon={button.icon} /> {button.label}
+              {button.icon}
+              {button.label}
             </ActionButton>
           </div>
         ) : (
-          <div className={cn('flex w-full flex-wrap items-center justify-between gap-6', isMobile && 'items-start')}>
-            <div className={cn('flex w-full items-center justify-between', isMobile && 'flex-wrap')}>
+          <div
+            className={cn(
+              'flex w-full flex-wrap items-center justify-between gap-6',
+              isMobile && 'items-start'
+            )}
+          >
+            <div
+              className={cn('flex w-full items-center justify-between', isMobile && 'flex-wrap')}
+            >
+              {/* Render social links if available */}
               {social && social.length > 0 && (
                 <HStack id="social" mt={2}>
                   {social.map((item) => (
-                    <Tooltip
+                    <Link
                       key={`${item.title}-${item.url}`}
-                      content={item.title}
-                      recipe={TooltipRecipe}
-                      openDelay={150}
-                      closeDelay={100}
-                      showArrow
-                      positioning={{ placement: 'top' }}
+                      href={item.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      display="flex"
+                      alignItems="center"
+                      gap={2}
                     >
-                      <Link
-                        href={item.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="transition-transform duration-300 hover:scale-110"
-                      >
-                        <FontAwesomeIcon
-                          icon={getSocialIcon(item.url)}
-                          className={`h-5 w-5 transition-colors duration-300 ${
-                            {
-                              discord: 'text-[#5865F2] hover:text-[#5865F2]',
-                              instagram: 'text-[#E4405F] hover:text-[#E4405F]',
-                              linkedin: 'text-[#0077B5] hover:text-[#0077B5]',
-                              youtube: 'text-[#FF0000] hover:text-[#FF0000]',
-                            }[item.title.toLowerCase()] || 'text-gray-500'
-                          }`}
-                        />
-                      </Link>
-                    </Tooltip>
+                      <FontAwesomeIcon icon={getSocialIcon(item.url)} className="h-5 w-5" />
+                    </Link>
                   ))}
                 </HStack>
               )}
-
+              {/* Action Button */}
               <div className="flex items-center">
                 <ActionButton tooltipLabel={tooltipLabel} url={button.url} onClick={button.onclick}>
-                  <FontAwesomeIconWrapper icon={button.icon} /> {button.label}
+                  {button.icon}
+                  {button.label}
                 </ActionButton>
               </div>
             </div>
@@ -160,4 +173,5 @@ const Card = ({
     </div>
   )
 }
+
 export default Card
diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 0445453b0e..4257961c44 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -4,18 +4,10 @@ import { IconKeys, Icons } from 'utils/data'
 import { TooltipRecipe } from 'utils/theme'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import { Tooltip } from 'components/ui/tooltip'
+import { useState } from 'react'
 
 export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
-
-  const brandColors: Record<string, string> = {
-    discord: 'text-[#7289DA] hover:text-[#5b6eae]',
-    instagram: 'text-[#E4405F] hover:text-[#c13548]',
-    linkedin: 'text-[#0077B5] hover:text-[#005582]',
-    youtube: 'text-[#FF0000] hover:text-[#cc0000]',
-  }
-
-  const isSocialMedia = Object.keys(brandColors).includes(item.toLowerCase())
-
+  const [hovered, setHovered] = useState(false)
 
   const containerClassName = [
     'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
@@ -30,20 +22,9 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .filter(Boolean)
     .join(' ')
 
-
-  const iconClassName = [
-    isSocialMedia ? brandColors[item.toLowerCase()] : 'text-gray-600 dark:text-gray-300',
-    'transition-transform transform hover:scale-110',
-    item === 'stars_count' || item === 'starsCount' ? 'icon-rotate' : '',
-    item === 'forks_count' ||
-    item === 'contributors_count' ||
-    item === 'forksCount' ||
-    item === 'contributionCount'
-      ? 'icon-flip'
-      : '',
-  ]
-    .filter(Boolean)
-    .join(' ')
+  const iconClassName = `transition-colors duration-200 ${
+    hovered ? Icons[item as IconKeys]?.colorClass || 'text-gray-600' : 'text-gray-600 dark:text-gray-300'
+  }`
 
   return icons[item] ? (
     <Tooltip
@@ -54,12 +35,13 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
       showArrow
       positioning={{ placement: 'top' }}
     >
-      <div className={containerClassName}>
-        {/* Display formatted number if the value is a number */}
+      <div
+        className={containerClassName}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
         <span className="text-gray-600 dark:text-gray-300">
-          {typeof icons[item] === 'number'
-            ? millify(icons[item], { precision: 1 })
-            : icons[item]}
+          {typeof icons[item] === 'number' ? millify(icons[item], { precision: 1 }) : icons[item]}
         </span>
         <span>
           <FontAwesomeIconWrapper
@@ -70,5 +52,4 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
       </div>
     </Tooltip>
   ) : null
-
 }

From 8e22a08e4f40f66b30d6a082c8a0f5f72e9a7ae2 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Mon, 31 Mar 2025 03:35:52 +0530
Subject: [PATCH 06/13] Update DisplayIcon.tsx

---
 frontend/src/components/DisplayIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 4257961c44..ae55e693e9 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -33,7 +33,7 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
       openDelay={150}
       closeDelay={100}
       showArrow
-      positioning={{ placement: 'top' }}
+      positioning={{ placement: 'bottom' }}
     >
       <div
         className={containerClassName}

From 07b1613ca5e8a6c56ce98331216cc3f494f13b57 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Mon, 31 Mar 2025 21:49:19 +0530
Subject: [PATCH 07/13] updated

---
 .pre-commit-config.yaml                       | 11 ++++++++
 frontend/src/components/ContributorAvatar.tsx |  4 +--
 frontend/src/components/DisplayIcon.tsx       | 27 +++++++++++++------
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 32a94b0fd3..d8d6439ffa 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -26,6 +26,17 @@ repos:
         types:
           - html
 
+  - repo: https://github.com/jumanjihouse/pre-commit-hook-yamlfmt
+    rev: 0.2.3
+    hooks:
+      - id: yamlfmt
+        args:
+          - --implicit_start
+          - --mapping=2
+          - --offset=2
+          - --sequence=4
+        exclude: (.github|frontend/pnpm-lock.yaml|^\.pre-commit-config\.yaml$)
+
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v5.0.0
     hooks:
diff --git a/frontend/src/components/ContributorAvatar.tsx b/frontend/src/components/ContributorAvatar.tsx
index 0ebe0e84b8..f6db1aced8 100644
--- a/frontend/src/components/ContributorAvatar.tsx
+++ b/frontend/src/components/ContributorAvatar.tsx
@@ -45,11 +45,11 @@ const ContributorAvatar = memo(({ contributor, uniqueKey }: ContributorProps) =>
       openDelay={100}
       closeDelay={100}
       showArrow
-      positioning={{ placement: 'top' }}
+      positioning={{ placement: 'bottom' }}
     >
       <Link href={`/community/users/${login}`} target="_blank" rel="noopener noreferrer">
         <img
-          className="h-[30px] w-[30px] rounded-full grayscale transition-all duration-300 hover:grayscale-0 hover:scale-110"
+          className="h-[30px] w-[30px] rounded-full grayscale transition-all duration-300 hover:scale-110 hover:grayscale-0"
           src={`${avatarUrl}${isAlgolia ? '&s=60' : ''}`}
           alt={`${displayName}'s avatar`}
         />
diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index ae55e693e9..a3d5ceffa4 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -9,6 +9,12 @@ import { useState } from 'react'
 export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
   const [hovered, setHovered] = useState(false)
 
+
+  const socialMediaIcons: IconKeys[] = ['linkedin', 'youtube', 'twitter', 'github']
+
+  const isSocialMediaIcon = socialMediaIcons.includes(item as IconKeys)
+
+
   const containerClassName = [
     'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
     item === 'stars_count' || item === 'starsCount' ? 'rotate-container' : '',
@@ -22,10 +28,6 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .filter(Boolean)
     .join(' ')
 
-  const iconClassName = `transition-colors duration-200 ${
-    hovered ? Icons[item as IconKeys]?.colorClass || 'text-gray-600' : 'text-gray-600 dark:text-gray-300'
-  }`
-
   return icons[item] ? (
     <Tooltip
       content={`${Icons[item as keyof typeof Icons]?.label}`}
@@ -37,15 +39,24 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     >
       <div
         className={containerClassName}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
+        onMouseEnter={() => isSocialMediaIcon && setHovered(true)}
+        onMouseLeave={() => isSocialMediaIcon && setHovered(false)}
       >
+        {/* Display formatted number if the value is a number */}
         <span className="text-gray-600 dark:text-gray-300">
-          {typeof icons[item] === 'number' ? millify(icons[item], { precision: 1 }) : icons[item]}
+          {typeof icons[item] === 'number'
+            ? millify(icons[item], { precision: 1 })
+            : icons[item]}
         </span>
         <span>
           <FontAwesomeIconWrapper
-            className={iconClassName}
+            className={`${
+              isSocialMediaIcon
+                ? hovered
+                  ? Icons[item as IconKeys]?.color || 'text-gray-600'
+                  : 'text-gray-400 dark:text-gray-500'
+                : 'text-gray-600 dark:text-gray-300'
+            } transition-colors duration-300`}
             icon={Icons[item as IconKeys]?.icon}
           />
         </span>

From 68f32042edb951f2963011f007457c71d77eafcf Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Thu, 3 Apr 2025 08:40:44 +0530
Subject: [PATCH 08/13] Update DisplayIcon.tsx

---
 frontend/src/components/DisplayIcon.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index a3d5ceffa4..03a9f364b2 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -1,20 +1,18 @@
+import { useState } from 'react'
 import { millify } from 'millify'
 import { IconType } from 'types/icon'
 import { IconKeys, Icons } from 'utils/data'
 import { TooltipRecipe } from 'utils/theme'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import { Tooltip } from 'components/ui/tooltip'
-import { useState } from 'react'
 
 export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
   const [hovered, setHovered] = useState(false)
-
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false)
 
   const socialMediaIcons: IconKeys[] = ['linkedin', 'youtube', 'twitter', 'github']
-
   const isSocialMediaIcon = socialMediaIcons.includes(item as IconKeys)
 
-
   const containerClassName = [
     'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
     item === 'stars_count' || item === 'starsCount' ? 'rotate-container' : '',
@@ -36,11 +34,19 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
       closeDelay={100}
       showArrow
       positioning={{ placement: 'bottom' }}
+      isOpen={isTooltipOpen}
+      onOpenChange={setIsTooltipOpen}
     >
       <div
         className={containerClassName}
-        onMouseEnter={() => isSocialMediaIcon && setHovered(true)}
-        onMouseLeave={() => isSocialMediaIcon && setHovered(false)}
+        onMouseEnter={() => {
+          if (isSocialMediaIcon) setHovered(true);
+          setIsTooltipOpen(true);
+        }}
+        onMouseLeave={() => {
+          if (isSocialMediaIcon) setHovered(false);
+          setIsTooltipOpen(false);
+        }}
       >
         {/* Display formatted number if the value is a number */}
         <span className="text-gray-600 dark:text-gray-300">

From 1e8dc6a1492c9d4fb1b9c494120d9848374db816 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Thu, 3 Apr 2025 08:47:46 +0530
Subject: [PATCH 09/13] Update DisplayIcon.tsx

---
 frontend/src/components/DisplayIcon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 03a9f364b2..ff81788a08 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -30,8 +30,8 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     <Tooltip
       content={`${Icons[item as keyof typeof Icons]?.label}`}
       recipe={TooltipRecipe}
-      openDelay={150}
-      closeDelay={100}
+      openDelay={50}
+      closeDelay={250}
       showArrow
       positioning={{ placement: 'bottom' }}
       isOpen={isTooltipOpen}

From cca71a27158e9ef6569fae0d2d74760e4577b1b5 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Wed, 9 Apr 2025 19:46:26 +0530
Subject: [PATCH 10/13] your commit message

---
 .pre-commit-config.yaml                 |  2 +-
 frontend/src/components/DisplayIcon.tsx | 65 ++++++++++++-------------
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 1451cb665c..6410652784 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -35,7 +35,7 @@ repos:
           - --mapping=2
           - --offset=2
           - --sequence=4
-        exclude: (.github|frontend/pnpm-lock.yaml|^\.pre-commit-config\.yaml$)
+        exclude: (.github|frontend/pnpm-lock.yaml)
 
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v5.0.0
diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index ff81788a08..ab8c033b40 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -1,18 +1,10 @@
-import { useState } from 'react'
+import { Tooltip } from '@heroui/tooltip'
 import { millify } from 'millify'
 import { IconType } from 'types/icon'
 import { IconKeys, Icons } from 'utils/data'
-import { TooltipRecipe } from 'utils/theme'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
-import { Tooltip } from 'components/ui/tooltip'
 
 export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
-  const [hovered, setHovered] = useState(false)
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false)
-
-  const socialMediaIcons: IconKeys[] = ['linkedin', 'youtube', 'twitter', 'github']
-  const isSocialMediaIcon = socialMediaIcons.includes(item as IconKeys)
-
   const containerClassName = [
     'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
     item === 'stars_count' || item === 'starsCount' ? 'rotate-container' : '',
@@ -26,29 +18,30 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .filter(Boolean)
     .join(' ')
 
+  const iconClassName = [
+    'transition-transform duration-200',
+    'hover:scale-110',
+    getBrandColorClass(item),
+    item === 'stars_count' || item === 'starsCount' ? 'icon-rotate' : '',
+    item === 'forks_count' ||
+    item === 'contributors_count' ||
+    item === 'forksCount' ||
+    item === 'contributionCount'
+      ? 'icon-flip'
+      : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
   return icons[item] ? (
     <Tooltip
       content={`${Icons[item as keyof typeof Icons]?.label}`}
-      recipe={TooltipRecipe}
-      openDelay={50}
-      closeDelay={250}
+      delay={150}
+      closeDelay={100}
       showArrow
-      positioning={{ placement: 'bottom' }}
-      isOpen={isTooltipOpen}
-      onOpenChange={setIsTooltipOpen}
+      placement="top"
     >
-      <div
-        className={containerClassName}
-        onMouseEnter={() => {
-          if (isSocialMediaIcon) setHovered(true);
-          setIsTooltipOpen(true);
-        }}
-        onMouseLeave={() => {
-          if (isSocialMediaIcon) setHovered(false);
-          setIsTooltipOpen(false);
-        }}
-      >
-        {/* Display formatted number if the value is a number */}
+      <div className={containerClassName}>
         <span className="text-gray-600 dark:text-gray-300">
           {typeof icons[item] === 'number'
             ? millify(icons[item], { precision: 1 })
@@ -56,13 +49,7 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
         </span>
         <span>
           <FontAwesomeIconWrapper
-            className={`${
-              isSocialMediaIcon
-                ? hovered
-                  ? Icons[item as IconKeys]?.color || 'text-gray-600'
-                  : 'text-gray-400 dark:text-gray-500'
-                : 'text-gray-600 dark:text-gray-300'
-            } transition-colors duration-300`}
+            className={iconClassName}
             icon={Icons[item as IconKeys]?.icon}
           />
         </span>
@@ -70,3 +57,13 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     </Tooltip>
   ) : null
 }
+function getBrandColorClass(item: string): string {
+  const brandColors: Record<string, string> = {
+    discord: 'hover:text-[#5865F2]',
+    instagram: 'hover:text-[#E4405F]',
+    linkedin: 'hover:text-[#0077B5]',
+    youtube: 'hover:text-[#FF0000]',
+  }
+
+  return brandColors[item.toLowerCase()] || 'text-gray-600 dark:text-gray-300'
+}

From 6f76ff90b58004bd695c7b0d2b2641b087d3d90e Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Wed, 9 Apr 2025 19:55:24 +0530
Subject: [PATCH 11/13] updated

---
 frontend/src/components/DisplayIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index ab8c033b40..91a2240dc9 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -39,7 +39,7 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
       delay={150}
       closeDelay={100}
       showArrow
-      placement="top"
+      placement="bottom"
     >
       <div className={containerClassName}>
         <span className="text-gray-600 dark:text-gray-300">

From ea6bb5442fe43ab1590d3b09b21983f8cfaaf00e Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Wed, 9 Apr 2025 20:04:27 +0530
Subject: [PATCH 12/13] Update DisplayIcon.tsx

---
 frontend/src/components/DisplayIcon.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 91a2240dc9..fc5f8ff9f6 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -57,6 +57,7 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     </Tooltip>
   ) : null
 }
+
 function getBrandColorClass(item: string): string {
   const brandColors: Record<string, string> = {
     discord: 'hover:text-[#5865F2]',

From 9bbb25db29e80f835986a9ef124e8bd6d8601592 Mon Sep 17 00:00:00 2001
From: srinjoy933 <srinjoymukhopadhyay@gmail.com>
Date: Tue, 22 Apr 2025 01:52:57 +0530
Subject: [PATCH 13/13] Update DisplayIcon.tsx

---
 frontend/src/components/DisplayIcon.tsx | 30 ++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index fc5f8ff9f6..7c1db8fd7a 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -34,27 +34,27 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .join(' ')
 
   return icons[item] ? (
-    <Tooltip
-      content={`${Icons[item as keyof typeof Icons]?.label}`}
-      delay={150}
-      closeDelay={100}
-      showArrow
-      placement="bottom"
-    >
-      <div className={containerClassName}>
-        <span className="text-gray-600 dark:text-gray-300">
-          {typeof icons[item] === 'number'
-            ? millify(icons[item], { precision: 1 })
-            : icons[item]}
-        </span>
+    <div className={containerClassName}>
+      <span className="text-gray-600 dark:text-gray-300">
+        {typeof icons[item] === 'number'
+          ? millify(icons[item], { precision: 1 })
+          : icons[item]}
+      </span>
+      <Tooltip
+        content={`${Icons[item as keyof typeof Icons]?.label}`}
+        delay={150}
+        closeDelay={100}
+        showArrow
+        placement="bottom"
+      >
         <span>
           <FontAwesomeIconWrapper
             className={iconClassName}
             icon={Icons[item as IconKeys]?.icon}
           />
         </span>
-      </div>
-    </Tooltip>
+      </Tooltip>
+    </div>
   ) : null
 }