fix: added the hover affect to icons

components/icons/Github.js

@@ -1,11 +1,13 @@
 export default function IconGithub({ className }) {
+
   return (
     <svg
       className={className}
-      fill="currentColor"
-      viewBox="0 0 24 24"
+      fill='currentColor'
+      viewBox="0 0 45 45"
     >
-      <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+      <path d="M44,24c0,8.96-5.88,16.54-14,19.08V38c0-1.71-0.72-3.24-1.86-4.34c5.24-0.95,7.86-4,7.86-9.66c0-2.45-0.5-4.39-1.48-5.9 c0.44-1.71,0.7-4.14-0.52-6.1c-2.36,0-4.01,1.39-4.98,2.53C27.57,14.18,25.9,14,24,14c-1.8,0-3.46,0.2-4.94,0.61 C18.1,13.46,16.42,12,14,12c-1.42,2.28-0.84,4.74-0.3,6.12C12.62,19.63,12,21.57,12,24c0,5.66,2.62,8.71,7.86,9.66 c-0.67,0.65-1.19,1.44-1.51,2.34H16c-1.44,0-2-0.64-2.77-1.68c-0.77-1.04-1.6-1.74-2.59-2.03c-0.53-0.06-0.89,0.37-0.42,0.75 c1.57,1.13,1.68,2.98,2.31,4.19C13.1,38.32,14.28,39,15.61,39H18v4.08C9.88,40.54,4,32.96,4,24C4,12.95,12.95,4,24,4 S44,12.95,44,24z" />
     </svg>
-  )
+  );
 }
+

components/icons/LinkedIn.js

@@ -1,15 +1,17 @@
 export default function IconLinkedIn({ className }) {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 21 22"
-      enableBackground="new 0 0 21 22"
-      fill="currentColor"
+     <svg
       className={className}
-    >
-      <path d="M5,3c0,1.1-0.7,2-2,2C1.8,5,1,4.1,1,3.1C1,2,1.8,1,3,1S5,1.9,5,3z M1,19h4V6H1V19z M14.6,6.2c-2.1,0-3.3,1.2-3.8,2h-0.1
-	l-0.2-1.7H6.9C6.9,7.6,7,8.9,7,10.4V19h4v-7.1c0-0.4,0-0.7,0.1-1c0.3-0.7,0.8-1.6,1.9-1.6c1.4,0,2,1.2,2,2.8V19h4v-7.4
-	C19,7.9,17.1,6.2,14.6,6.2z"/>
-    </svg>
-  )
-}
+      fill='currentColor'
+      viewBox="0 0 19 19"
+     >
+       <path
+         fillRule="evenodd"
+         d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
+         clipRule="evenodd"
+       />
+     </svg>
+   );
+ }
+
+

components/icons/Twitter.js

@@ -1,12 +1,12 @@
-export default function IconTwitter({ className }) {
-  return (
-    <svg className={className} width="50px" height="50px" viewBox="0 0 1200 1227" fill="currentColor" >
-    <path
-        fillRule="evenodd"
-        d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
-        fill="currentColor"
-        clip-fillrule="evenodd" >
-        </path>
-    </svg>
-  )
+export default function IconTwitter({ className, isHovered, setIsHovered }) {
+	return (
+		<svg 
+      className={className}
+      fill='currentColor'
+      viewBox="0 0 23 23"
+    >
+			<path d="M 2.3671875 3 L 9.4628906 13.140625 L 2.7402344 21 L 5.3808594 21 L 10.644531 14.830078 L 14.960938 21 L 21.871094 21 L 14.449219 10.375 L 20.740234 3 L 18.140625 3 L 13.271484 8.6875 L 9.2988281 3 L 2.3671875 3 z M 6.2070312 5 L 8.2558594 5 L 18.033203 19 L 16.001953 19 L 6.2070312 5 z" />
+		</svg>
+	);
 }
+

pages/community/tsc.js

@@ -3,6 +3,10 @@ import TSCMembersList from "../../config/MAINTAINERS.json";
 import {sortBy} from 'lodash';
 import NewsletterSubscribe from "../../components/NewsletterSubscribe";
 import TextLink from '../../components/typography/TextLink';
+import { useState } from 'react';
+import IconGithub from '../../components/icons/Github';
+import IconLinkedIn from '../../components/icons/LinkedIn';
+import IconTwitter from '../../components/icons/Twitter';
 
 function addAdditionalUserInfo(user) {
   const userData = {
@@ -241,44 +245,44 @@ function QuestionCard() {
 }
 
 function TwitterSVG() {
-  return (
-    <svg
+	const [ isHovered, setIsHovered ] = useState(false);
+
+	return (
+		<div 
       className="w-5 h-5"
-      aria-hidden="true"
-      fill="currentColor"
-      viewBox="0 0 20 20"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
-    </svg>
-  );
+      <IconTwitter className={isHovered ? 'hover:fill-black' : ''} />
+    </div>
+	);
 }
 
 function GithubSVG() {
-  return (
-    <svg
+	const [ isHovered, setIsHovered ] = useState(false);
+
+	return (
+		<div 
       className="w-5 h-5"
-      fill="currentColor"
-      aria-hidden="true"
-      viewBox="0 0 48 48"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <path d="M44,24c0,8.96-5.88,16.54-14,19.08V38c0-1.71-0.72-3.24-1.86-4.34c5.24-0.95,7.86-4,7.86-9.66c0-2.45-0.5-4.39-1.48-5.9 c0.44-1.71,0.7-4.14-0.52-6.1c-2.36,0-4.01,1.39-4.98,2.53C27.57,14.18,25.9,14,24,14c-1.8,0-3.46,0.2-4.94,0.61 C18.1,13.46,16.42,12,14,12c-1.42,2.28-0.84,4.74-0.3,6.12C12.62,19.63,12,21.57,12,24c0,5.66,2.62,8.71,7.86,9.66 c-0.67,0.65-1.19,1.44-1.51,2.34H16c-1.44,0-2-0.64-2.77-1.68c-0.77-1.04-1.6-1.74-2.59-2.03c-0.53-0.06-0.89,0.37-0.42,0.75 c1.57,1.13,1.68,2.98,2.31,4.19C13.1,38.32,14.28,39,15.61,39H18v4.08C9.88,40.54,4,32.96,4,24C4,12.95,12.95,4,24,4 S44,12.95,44,24z" />
-    </svg>
-  );
+      <IconGithub className={isHovered ? 'hover:fill-black' : ''} />
+    </div>  
+	);
 }
 
 function LinkedInSVG() {
-  return (
-    <svg
+	const [ isHovered, setIsHovered ] = useState(false);
+
+	return (
+		<div 
       className="w-5 h-5"
-      aria-hidden="true"
-      fill="currentColor"
-      viewBox="0 0 20 20"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <path
-        fillRule="evenodd"
-        d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
+      {/* Use the imported SVG icon component */}
+      <IconLinkedIn className={isHovered ? 'hover:fill-linkedin':'' } />
+    </div>
+	);
 }

pages/tools/generator.js

@@ -20,7 +20,7 @@ export default function GeneratorPage() {
           className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
         /> */}
         <GithubButton
-          className="w-full sm:w-auto"
+          className="ml-2 block mt-2 md:mt-0 md:inline-block w-full sm:w-auto"
           href="https://www.github.com/asyncapi/generator"
         />
        <Button text="View Docs" href="/docs/tools/generator" className="ml-2 mt-2 md:mt-0 w-full sm:w-auto"/>

tailwind.config.js

@@ -133,7 +133,8 @@ module.exports = {
           maximize: '#28c93f',
         },
         violet:'#8054F2',
-        darkGunMetal:'#212526'
+        darkGunMetal:'#212526',
+        linkedin: '#0077b5'
       },
       scale: {
         25: '.25',