style: footer link component apply

DaleStudy · Jan 24, 2025 · b2d69b5 · b2d69b5
1 parent 6db5d68
commit b2d69b5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
@@ -8,12 +8,12 @@
     flex-direction: column;
     align-items: center;
 
-    padding: 180px 0 100px;
+    padding: 172px 0 99px;
   }
 
   section {
     display: flex;
-    row-gap: 68px;
+    row-gap: 61px;
 
     flex-direction: column;
 
@@ -32,49 +32,51 @@
     border-top: 1px solid rgba(253, 253, 255, 0.2);
     margin-bottom: 0;
 
-    margin-top: 27px;
+    margin-top: 20px;
     padding-top: 20px;
 
     @media (min-width: 768px) {
       width: 80%;
 
-      margin-top: 50px;
+      margin-top: 43px;
       padding-top: 48px;
     }
   }
 }
 
 .leftMenu {
   display: flex;
-  color: var(--bg-100);
-  font-size: 16px;
-  line-height: 20px;
   vertical-align: middle;
   row-gap: 10px;
 
   flex-direction: column;
   padding-left: 4px;
 
+  li {
+    a,
+    a:visited {
+      color: var(--bg-100);
+    }
+  }
+
   @media (min-width: 768px) {
     column-gap: 80px;
-
     flex-direction: row;
+    align-items: center;
     padding-left: 0px;
   }
-
-  & > li {
-    height: 20px;
-  }
 }
 
 .rightMenu {
   display: flex;
   align-items: center;
   column-gap: 40px;
 
-  & > li > a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  li {
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,3 +1,4 @@
+import Link from "../Link/Link";
 import styles from "./Footer.module.css";
 
 export default function Footer() {
@@ -47,19 +48,24 @@ export default function Footer() {
         <ul className={styles.leftMenu}>
           {leftMenu.map(({ label, link }) => (
             <li key={link}>
-              <a href={link} target="_blank" aria-label={label}>
+              <Link
+                variant="text"
+                href={link}
+                target="_blank"
+                aria-label={label}
+              >
                 {label}
-              </a>
+              </Link>
             </li>
           ))}
         </ul>
 
         <ul className={styles.rightMenu}>
           {rightMenu.map(({ label, link, component }) => (
             <li key={link}>
-              <a href={link} target="_blank" aria-label={label}>
+              <Link href={link} target="_blank" aria-label={label}>
                 {component}
-              </a>
+              </Link>
             </li>
           ))}
         </ul>