Added hover effect to footer external links

Raghunandan16 · Mar 12, 2023 · ca765ed · ca765ed
1 parent 679e374
commit ca765ed
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/components/layout/Footer/index.jsx b/src/components/layout/Footer/index.jsx
@@ -13,6 +13,7 @@ import { SiHashnode } from 'react-icons/si';
 
 import styles from './index.module.css';
 
+import HeaderLink from '@/components/links/HeaderLink';
 import UnstyledLink from '@/components/links/UnstyledLink';
 
 const Footer = () => {
@@ -25,7 +26,7 @@ const Footer = () => {
  <ul>
  {OrganizationLink.map((link) => (
  <li key={link.name}>
- <UnstyledLink href={link.link}>{link.name}</UnstyledLink>
+ <HeaderLink href={link.link}>{link.name}</HeaderLink>
  </li>
  ))}
  </ul>
@@ -35,9 +36,9 @@ const Footer = () => {
  <ul>
  {CommunityLinks.map((link) => (
  <li key={link.name}>
- <UnstyledLink href={link.link} openNewTab>
+ <HeaderLink href={link.link} openNewTab>
  {link.name}
- </UnstyledLink>
+ </HeaderLink>
  </li>
  ))}
  </ul>
@@ -48,7 +49,7 @@ const Footer = () => {
  <ul>
  {socialLinks.map((link) => (
  <li key={link.name}>
- <UnstyledLink href={link.link}>{link.name}</UnstyledLink>
+ <HeaderLink href={link.link}>{link.name}</HeaderLink>
  </li>
  ))}
  </ul>
@@ -58,7 +59,7 @@ const Footer = () => {
  <ul>
  {contactLinks.map((link) => (
  <li key={link.name}>
- <UnstyledLink href={link.link}>{link.name}</UnstyledLink>
+ <HeaderLink href={link.link}>{link.name}</HeaderLink>
  </li>
  ))}
  </ul>
@@ -105,7 +106,7 @@ const CommunityLinks = [
  { link: '/events', name: 'Events' },
  { link: '/courses', name: 'Courses' },
  { link: '/webinar', name: 'Webinars' },
- { link: 'https://github.com/WeMakeDevs/roadmaps', name: 'roadmaps' },
+ { link: 'https://github.com/WeMakeDevs/roadmaps', name: 'Roadmaps' },
 ];
 
 const socialLinks = [

diff --git a/src/components/layout/Footer/index.module.css b/src/components/layout/Footer/index.module.css
@@ -98,6 +98,10 @@
  font-weight: 400;
 }
 
+.linkGroups li a {
+ padding-bottom: 3px;
+}
+
 @media (max-width: 900px) {
  .footer {
  padding-block: 2rem;