Merge pull request #222 from LaurierHawkHacks/feature/update-social-i…

…cons

Update social icons to be closer to the Figma design

src/components/SocialIcons.tsx

@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from "react";
-import { FaEnvelope, FaLinkedin, FaDiscord, FaTiktok } from "react-icons/fa";
-import { SiDevpost } from "react-icons/si";
-import { RiInstagramFill } from "react-icons/ri";
+import { RiInstagramLine, RiLinkedinLine, RiDiscordLine , RiTiktokLine } from "react-icons/ri";
+import { FaRegEnvelope } from "react-icons/fa";
+import { SiLinktree } from "react-icons/si";
+// import { SiDevpost } from "react-icons/si";
 
 interface SocialIconsProps {
     color?: string;
 }
 
 const SocialIcons: React.FC<SocialIconsProps> = ({ color = "currentColor" }) => {
     const [iconSize, setIconSize] = useState(40);
-    const hoverColor = '#0FA3B1'; 
+    const hoverColor = '#0FA3B1';
 
     useEffect(() => {
         const handleResize = () => {
@@ -28,25 +29,25 @@ const SocialIcons: React.FC<SocialIconsProps> = ({ color = "currentColor" }) =>
         return (
             <a
                 href={href}
+                target="_blank"
                 onMouseEnter={() => setIconColor(hoverColor)}
                 onMouseLeave={() => setIconColor(color)}
-                style={{ transition: 'color 0.3s' }}
             >
-                <Icon size={iconSize} color={iconColor} />
+                <Icon size={iconSize} color={iconColor} style={{transition: "color 0.5s"}} />
             </a>
         );
     };
 
     return (
         <div className="flex justify-center items-center space-x-7">
-            <SocialIconLink href="mailto:[email protected]" Icon={FaEnvelope} />
-            <SocialIconLink href="https://www.linkedin.com/company/hawkhacks/" Icon={FaLinkedin} />
-            <SocialIconLink href="https://discord.gg/CwQ7mGg98N" Icon={FaDiscord} />
-            <SocialIconLink href="https://tiktok.com/@hawkhacks" Icon={FaTiktok} />
-            <SocialIconLink href="https://www.instagram.com/wluhawkhacks/" Icon={RiInstagramFill} />
-            <SocialIconLink href="https://hawkhacks.devpost.com/" Icon={SiDevpost} />
+            <SocialIconLink href="mailto:[email protected]" Icon={FaRegEnvelope} />
+            <SocialIconLink href="https://linkedin.com/company/hawkhacks/" Icon={RiLinkedinLine} />
+            <SocialIconLink href="https://discord.gg/CwQ7mGg98N" Icon={RiDiscordLine } />
+            <SocialIconLink href="https://tiktok.com/@hawkhacks" Icon={RiTiktokLine} />
+            <SocialIconLink href="https://instagram.com/wluhawkhacks/" Icon={RiInstagramLine} />
+            <SocialIconLink href="https://linktr.ee/hawkhacks" Icon={SiLinktree} />
         </div>
     );
 };
 
-export { SocialIcons };
+export { SocialIcons };