small bugfixes

Author: burtonjong

components/Avatar.jsx

@@ -20,7 +20,7 @@ const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileConta
           Previously: {prevRole}
         </h2>
       )}
-      {linkedin && <FontAwesomeLink username={linkedin} icon={faLinkedin} className={`${classes}`} />}
+      {linkedin && <FontAwesomeLink username={linkedin} icon={faLinkedin} className={`${classes} fill-black `} />}
     </div>
   );
 };

components/FontAwesomeLink.jsx

@@ -1,10 +1,10 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-const FontAwesomeLink = ({ username, icon, className}) => {
-  const defaultClasses="h-6 w-6 text-[#7055FD] cursor-pointer";
-  return(
+const FontAwesomeLink = ({ username, icon, className }) => {
+  const defaultClasses = 'h-6 w-6 text-[#7055FD] hover:text-[#8A76FF] transition-all duration-300 cursor-pointer';
+  return (
     <a target="_blank" href={`https://linkedin.com/in/${username}`} rel="noopener noreferrer">
-      <FontAwesomeIcon className={`${defaultClasses} ${className}`} icon={icon}  />
+      <FontAwesomeIcon className={`${defaultClasses} ${className}`} icon={icon} />
     </a>
   );
 };

components/InternalTeam.jsx

@@ -55,12 +55,12 @@ const InternalTeam = () => {
       </div>
       <div>
         {groups.length > 0 && (
-          <Tabs value={activeTab} onChange={(val) => setActiveTab(val)}>
+          <Tabs value={activeTab}>
             <TabsHeader className="flex flex-row justify-center">
               {groups.map((group) => (
-                <Tab key={group} value={group}>
+                <Tab key={group} value={group} onClick={() => setActiveTab(group)}>
                   <div
-                    className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-300
+                    className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-200
                   ${activeTab === group ? 'bg-[#7559fc] text-white' : 'text-black'}
                   `}
                   >

components/TechnicalTeam.jsx

@@ -39,7 +39,7 @@ const TechnicalTeam = () => {
             {positions.map((position) => (
               <Tab key={position} value={position} onClick={() => setActiveTab(position)}>
                 <div
-                  className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-300
+                  className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-200
                   ${activeTab === position ? 'bg-[#7559fc] text-white' : 'text-black'}
                   `}
                 >

tailwind.config.js

@@ -10,13 +10,16 @@ module.exports = {
       },
     },
     colors: {
-      'lilac': '#A689FF',
-      'white': '#FFFFFF',
-      'orange': '#FF6B54',
-      'pink': '#FFD2DC',
-      'brightPink': '#FF4D6F',
-      'green': '00D3A9',
+      lilac: '#A689FF',
+      white: '#FFFFFF',
+      orange: '#FF6B54',
+      pink: '#FFD2DC',
+      brightPink: '#FF4D6F',
+      green: '00D3A9',
     },
   },
+  variants: {
+    fill: ['hover', 'focus'],
+  },
   plugins: [require('tailwind-scrollbar-hide')],
 };