Merge pull request #89 from Web-Dev-Path/chore/adjust-section-containers

Normalizing the container use on components

Author: mariana-caldas

CHANGELOG.md

@@ -28,3 +28,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - fixed scroll-x added by the layout container, adjust README
 - updated TwoColumn.js component with style props
 - updated favicon icon and add OG
+- normalized container use on components

components/CardsColumns.js

@@ -1,4 +1,5 @@
 import Card from './Card';
+import Container from './Container';
 import styles from '../styles/CardsColumns.module.scss';
 
 export default function CardsColumns({
@@ -10,7 +11,7 @@ export default function CardsColumns({
   linkText,
 }) {
   return (
-    <section className={styles.container}>
+    <Container>
       <div className={styles.inner__content}>
         {titles.map((title, index) => {
           return (
@@ -26,6 +27,6 @@ export default function CardsColumns({
           );
         })}
       </div>
-    </section>
+    </Container>
   );
 }

components/Container.js

@@ -1,9 +1,10 @@
 import containerStyles from '../styles/Container.module.scss';
 
-export default function Container({ className, children }) {
+export default function Container({ className, children, styles }) {
   return (
     <div
       className={`${containerStyles.container} ${className ? className : ''}`}
+      style={styles}
     >
       {children}
     </div>

components/Footer.js

@@ -3,12 +3,13 @@ import footerStyles from '../styles/Footer.module.scss';
 import { linksNav } from '../utils/links';
 import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
+import Container from './Container';
 
 export default function Footer() {
   return (
     <footer className={footerStyles.footer}>
       <NewsletterSubscribe />
-      <section className={footerStyles.footer__section}>
+      <Container className={footerStyles.footer__inner}>
         <nav className={footerStyles.footer__nav} aria-label="Main">
           <ul className={footerStyles.footer__navList}>
             {linksNav.map(link => (
@@ -25,10 +26,11 @@ export default function Footer() {
               height={326}
               width={326}
               alt="Logo"
+              priority
             />
           </a>
         </Link>
-      </section>
+      </Container>
     </footer>
   );
 }

components/TwoColumn.js

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import ButtonLink from './ButtonLink';
+import Container from './Container';
 import styles from '../styles/TwoColumn.module.scss';
 import buttonStyles from '../styles/ButtonLink.module.scss';
 
@@ -24,17 +25,17 @@ export default function TwoColumn({
       color: btnColor,
       backgroundColor: btnBg,
     },
-    container: {
+    wrapper: {
       color: color,
       backgroundColor: bgColor,
     },
   };
 
   return (
-    <section className={styles.container} style={styleProps.container}>
-      <div
+    <section className={styles.wrapper} style={styleProps.wrapper}>
+      <Container
         className={`${styles.inner} ${styles[customInnerClass]}`}
-        style={{ flexDirection: rowOrder }}
+        styles={{ flexDirection: rowOrder }}
       >
         <div className={styles.inner__content}>
           <h2 className={styles.title} style={{ color: color }}>
@@ -63,7 +64,7 @@ export default function TwoColumn({
             />
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/mailchimp/NewsletterForm.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { decode } from 'html-entities';
+import Container from '../Container';
 import newsletterStyles from '../../styles/Newsletter.module.scss';
 
 const NewsletterForm = ({ status, message, onValidated }) => {
@@ -65,7 +66,7 @@ const NewsletterForm = ({ status, message, onValidated }) => {
 
   return (
     <section className={newsletterStyles.newsletter}>
-      <div className={newsletterStyles.newsletter__container}>
+      <Container className={newsletterStyles.newsletter__inner}>
         <h4 className={newsletterStyles.newsletter__title}>
           Sign up for news &#62;
         </h4>
@@ -114,7 +115,7 @@ const NewsletterForm = ({ status, message, onValidated }) => {
             )}
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 };

pages/index.js

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import Bracket from '../components/Bracket';
 import Stick from '../components/Stick';
 import TwoColumn from '../components/TwoColumn';
@@ -33,7 +32,6 @@ export default function Home() {
           content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
           rowOrder="row-reverse"
           customInnerClass="get-involved"
-          color={primary}
           bgColor={white}
         />
 

public/images/web-dev-path-logo-small.png

@@ -2,14 +2,20 @@
 @use './mixins' as *;
 
 .card {
-  margin: 1.5rem;
+  margin: 1.5rem 0;
   padding: 1.5rem;
   border-radius: 1.5rem;
   box-shadow: $box-shadow;
-  min-width: 28%;
+  min-width: 32%;
+
   @include desktop {
-    flex-basis: 28%;
-    margin-bottom: 0;
+    flex-basis: 32%;
+    margin: 1.5rem 1.5rem 0 1.5rem;
+
+    &:first-child,
+    &:last-child {
+      margin: 1.5rem 0 0 0;
+    }
   }
 
   .title {