Merge pull request #90 from acm-ucr/vinvyl/addHoverAnimation

added_hover_animation_to_links

src/components/user/profile/header.tsx

@@ -35,35 +35,35 @@ const Header = ({
       <div className="flex max-h-full w-full max-w-full flex-col gap-1">
         <p className="text-3xl font-bold">{name}</p>
 
-        <div className="flex items-center">
+        <div className="flex items-center gap-2 text-starlight-gray hover:text-black">
           <Link
             href={`mailto:${email}`}
-            className="text-starlight-gray"
+            className="flex items-center gap-2 rounded-md px-3 py-1"
             target="_blank"
           >
-            <Mail className="inline-block h-5 w-5 text-starlight-gray" />
+            <Mail className="inline-block h-5 w-5" />
             <span className="ml-2">{email}</span>
           </Link>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 text-starlight-gray hover:text-black">
           <Link
             href={`https://github.com/${github}`}
-            className="text-starlight-gray"
+            className="flex items-center gap-2 rounded-md px-3 py-1"
             target="_blank"
           >
-            <FaGithub className="inline h-5 w-5 text-starlight-gray" />
+            <FaGithub className="inline h-5 w-5" />
             <span className="ml-2">{github}</span>
           </Link>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 text-starlight-gray hover:text-black">
           <Link
             href={`https://discord.com/users/${discord}`}
-            className="text-starlight-gray"
+            className="flex items-center gap-2 rounded-md px-3 py-1"
             target="_blank"
           >
-            <FaDiscord className="inline-block h-5 w-5 text-starlight-gray" />
+            <FaDiscord className="inline-block h-5 w-5" />
             <span className="ml-2">{discord}</span>
           </Link>
         </div>