Merge pull request #275 from Web-Dev-Path/refactor/to-scss-footer

Refactor/to scss footer

Author: Satoshi-Sh

CHANGELOG.md

@@ -183,6 +183,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - BlogSearch
   - Layout
   - RelatedPosts
+  - Footer
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling

components/buttons/ButtonLink/ButtonLink.module.scss

@@ -1,3 +1,5 @@
+@use '@/styles/mixins' as *;
+
 .buttonLink {
   padding: 0.5rem 2rem;
   color: var(--color-white);
@@ -11,7 +13,7 @@
   display: inline-block;
   border: 1px solid var(--color-primary-content);
   text-decoration: none;
-  transition: all 0.3s ease;
+  @include transition(all 0.3s ease);
 
   &:hover {
     text-decoration: none;

components/buttons/SubmitButton/SubmitButton.module.scss

@@ -12,7 +12,7 @@
   text-align: center;
   display: block;
   border: 1px solid var(--color-primary-content);
-  transition: all 0.3s ease;
+  @include transition(all 0.3s ease);
 
   &:hover {
     color: var(--color-primary-content);

components/layout/Footer/Footer.module.scss

@@ -0,0 +1,115 @@
+@use '@/styles/index' as *;
+
+.footer {
+  background-color: var(--dark-bg);
+  color: var(--color-white);
+}
+
+.inner {
+  padding-top: 2.5rem;
+  text-align: center;
+
+  @include tablet {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+  }
+}
+
+.logo {
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  @include tablet {
+    margin: 0;
+    max-width: max-content;
+  }
+}
+
+.navSocialsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav {
+  @include tablet {
+    min-width: 6.5rem;
+    order: 2;
+  }
+
+  @include large-desktop {
+    font-size: 1.5rem;
+  }
+}
+
+.navList {
+  padding: 0;
+
+  @include tablet {
+    display: flex;
+  }
+}
+
+.navItem {
+  margin: 0.5rem 0;
+
+  @include tablet {
+    padding-left: 3.125rem;
+  }
+}
+
+.socialList {
+  display: flex;
+  justify-content: center;
+  margin: revert;
+  padding: 0;
+
+  @include tablet {
+    justify-content: end;
+  }
+}
+
+.socialItem {
+  cursor: pointer;
+  @include transition(all 0.3s ease);
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  @include tablet {
+    padding-left: 1.75rem;
+    max-width: 100%;
+  }
+}
+
+.bottomText {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @include tablet {
+    align-items: flex-end;
+  }
+}
+
+.copyright {
+  text-align: center;
+  margin: 0;
+  font-size: 1rem;
+  padding-bottom: 1rem;
+
+  @include tablet {
+    text-align: end;
+  }
+}
+
+.netlify {
+  @extend .copyright;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

components/layout/Footer/index.js

@@ -2,39 +2,39 @@ import Image from 'next/image';
 import { linksNav, linksSocial } from '@/utils/links';
 import NewsletterSubscribe from '@/components/NewsletterSubscribe';
 import Container from '@/components/containers/Container';
-import S from './styles';
+import styles from './Footer.module.scss';
 
 export default function Footer() {
   return (
-    <S.Footer>
+    <footer className={styles.footer}>
       <NewsletterSubscribe />
-      <S.Inner>
-        <S.Logo href='/' title='Go to the Homepage'>
+      <Container className={styles.inner}>
+        <a className={styles.logo} href='/' title='Go to the Homepage'>
           <Image
             src='/images/svg/logo.svg'
             height={250}
             width={250}
             alt='Our footer logo'
           />
-        </S.Logo>
-        <S.NavSocialsContainer>
-          <S.Nav aria-label='Main'>
-            <S.NavList>
+        </a>
+        <div className={styles.navSocialsContainer}>
+          <nav className={styles.nav} aria-label='Main'>
+            <ul className={styles.navList}>
               {linksNav.map(link => (
-                <S.NavItem key={link.text}>
+                <li className={styles.navItem} key={link.text}>
                   <a href={link.href} title={link.text}>
                     {link.text}
                   </a>
-                </S.NavItem>
+                </li>
               ))}
-            </S.NavList>
-          </S.Nav>
+            </ul>
+          </nav>
           <div>
-            <S.SocialList>
+            <ul className={styles.socialList}>
               {linksSocial
                 .filter(link => link.isVisible)
                 .map(link => (
-                  <S.SocialItem key={link.text}>
+                  <li className={styles.socialItem} key={link.text}>
                     <a href={link.href} title={link.text} target='_blank'>
                       <Image
                         href={link.href}
@@ -44,26 +44,26 @@ export default function Footer() {
                         alt={link.alt}
                       />
                     </a>
-                  </S.SocialItem>
+                  </li>
                 ))}
-            </S.SocialList>
+            </ul>
           </div>
-        </S.NavSocialsContainer>
-      </S.Inner>
-      <S.BottomText>
-        <S.Copyright>
+        </div>
+      </Container>
+      <Container className={styles.bottomText}>
+        <p className={styles.copyright}>
           © Web Dev Path {new Date().getFullYear()}. All rights reserved.
-        </S.Copyright>
-        <S.Netlify>
+        </p>
+        <p className={styles.netlify}>
           This site is powered by
           <Image
             src='/images/svg/logo-netlify-small-fullcolor-darkmode.svg'
             width={50}
             height={50}
             alt='Netlify Logo'
           />
-        </S.Netlify>
-      </S.BottomText>
-    </S.Footer>
+        </p>
+      </Container>
+    </footer>
   );
 }