Merge pull request #489 from MeetDOD/issue-485

Feat: Added hover effect on user profile social icons successfuly issue 485
VaibhavArora314 · Jul 24, 2024 · 8a5f935 · 8a5f935
2 parents 5618b34 + 286d7e9
commit 8a5f935
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
@@ -120,10 +120,10 @@ const Profile = () => {
               </p>
             </div>
             <div className="flex flex-row justify-center space-x-2 mb-3">
-              {user?.twitter && <a href={user.twitter} target="_blank" rel="noopener noreferrer"><FaSquareXTwitter size={30} /></a>}
-              {user?.github && <a href={user.github} target="_blank" rel="noopener noreferrer"><FaGithubSquare size={30} /></a>}
-              {user?.linkedin && <a href={user.linkedin} target="_blank" rel="noopener noreferrer"><FaLinkedin size={30} /></a>}
-              {user?.portfolio && <a href={user.portfolio} target="_blank" rel="noopener noreferrer"><FaSquareParking size={30} /></a>}
+              {user?.twitter && <a href={user.twitter} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaSquareXTwitter size={30} /></a>}
+              {user?.github && <a href={user.github} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaGithubSquare size={30} /></a>}
+              {user?.linkedin && <a href={user.linkedin} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaLinkedin size={30} /></a>}
+              {user?.portfolio && <a href={user.portfolio} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaSquareParking size={30} /></a>}
             </div>
             <div className="flex flex-col items-center mb-2">
               <button type="button" onClick={() => { setClickUpdate(true) }} className="bg-red-500 py-2 px-5 text-white font-semibold rounded-md text-sm hover:bg-red-600">

diff --git a/frontend/src/pages/ShowProfile.tsx b/frontend/src/pages/ShowProfile.tsx
@@ -128,10 +128,10 @@ const ShowProfile = () => {
             </p>          
             </div>
             <div className="flex flex-row justify-center space-x-2 mb-3">
-              {user?.twitter && <a href={user.twitter} target="_blank" rel="noopener noreferrer"><FaSquareXTwitter size={30} /></a>}
-              {user?.github && <a href={user.github} target="_blank" rel="noopener noreferrer"><FaGithubSquare size={30} /></a>}
-              {user?.linkedin && <a href={user.linkedin} target="_blank" rel="noopener noreferrer"><FaLinkedin size={30} /></a>}
-              {user?.portfolio && <a href={user.portfolio} target="_blank" rel="noopener noreferrer"><FaSquareParking size={30} /></a>}
+              {user?.twitter && <a href={user.twitter} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaSquareXTwitter size={30} /></a>}
+              {user?.github && <a href={user.github} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaGithubSquare size={30} /></a>}
+              {user?.linkedin && <a href={user.linkedin} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaLinkedin size={30} /></a>}
+              {user?.portfolio && <a href={user.portfolio} target="_blank" rel="noopener noreferrer" className="hover:-translate-y-1 transition-transform duration-300"><FaSquareParking size={30} /></a>}
             </div>
           </div>
           {user?.id && currentUser?.id && currentUser?.id !== user?.id && (