Merge pull request #46 from MarianaSouza/chore/adjust-general-styling

Adjust general styling

Author: mariana-caldas

components/Footer.js

@@ -1,20 +1,19 @@
 import Link from "next/link";
-import footerStyles from "../styles/Footer.module.css";
-import layoutStyles from "../styles/Layout.module.css";
+import footerStyles from "../styles/Footer.module.scss";
 import { linksNav, linksSocial } from "../utils/links";
 
 export default function Footer() {
   return (
     <footer className={footerStyles.footer}>
       <div
-        className={`${layoutStyles.widthContainer} ${footerStyles.container}`}
+        className={footerStyles.container}
       >
         <div className={footerStyles.columnLeft}>
           <ul className={footerStyles.footerList}>
             {linksNav.map((link) => (
               <li className={footerStyles.footerItem} key={link.href}>
-                <Link href={link.href}>
-                  <a>{link.text}</a>
+                <Link href={link.href} >
+                  <a title={link.text}>{link.text}</a>
                 </Link>
               </li>
             ))}
@@ -50,9 +49,11 @@ export default function Footer() {
           </div>
         </div>
       </div>
-      <p className={`${layoutStyles.widthContainer} ${footerStyles.copyright}`}>
-        Web Dev Path 2021. All rights reserved.
-      </p>
+      <div className={footerStyles.copyright}>
+        <p>
+          Web Dev Path 2021. All rights reserved.
+        </p>
+      </div>
     </footer>
   );
 }

components/Layout.js

@@ -6,7 +6,7 @@ export default function Layout({ children }) {
   return (
     <>
       <Nav />
-      <div className={`${styles.widthContainer} ${styles.container}`}>
+      <div className={styles.container}>
         <main className={styles.main}>{children}</main>
       </div>
       <Footer />

components/Nav.js

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import styles from "../styles/Nav.module.css";
-import layoutStyles from "../styles/Layout.module.css";
 import { linksNav } from "../utils/links";
 
 export default function Nav() {
@@ -24,7 +23,7 @@ export default function Nav() {
   return (
     <header className={styles.header}>
       <div
-        className={`${styles.navContainer} ${styles.row} ${layoutStyles.widthContainer}`}
+        className={`${styles.navContainer} ${styles.row}`}
       >
         <div className={styles.align}>
           <Link href="/">
@@ -47,7 +46,7 @@ export default function Nav() {
             {linksNav.map((link) => (
               <li className={styles.navItem} key={link.href}>
                 <Link href={link.href}>
-                  <a className={styles.navLink}>{link.text}</a>
+                  <a className={styles.navLink} title={link.text}>{link.text}</a>
                 </Link>
               </li>
             ))}