Add a wrapper component to define section bg color

Author: mariana-caldas

components/containers/Row.js

@@ -1,5 +1,16 @@
-import styles from '@/styles/Row.module.scss';
+import rowStyles from '@/styles/Row.module.scss';
 
-export default function Row({ children }) {
-  return <section className={styles.wrapper}>{children}</section>;
+export default function Row({ customClass, children, styles }) {
+  return (
+    <div
+      className={
+        customClass
+          ? `${rowStyles.row} ${rowStyles[customClass]}`
+          : rowStyles.row
+      }
+      style={styles}
+    >
+      {children}
+    </div>
+  );
 }

components/containers/Wrapper.js

@@ -0,0 +1,15 @@
+import wrapperStyles from '@/styles/Wrapper.module.scss';
+
+export default function Wrapper({ customClass, children }) {
+  return (
+    <div
+      className={
+        customClass
+          ? `${wrapperStyles.wrapper} ${wrapperStyles[customClass]}`
+          : wrapperStyles.wrapper
+      }
+    >
+      {children}
+    </div>
+  );
+}

pages/about.js

@@ -9,6 +9,7 @@ import {
 import rowStyles from '@/styles/Row.module.scss';
 import CardsColumns from '@/components/containers/CardsColumns';
 import Title from '@/components/snippets/Title';
+import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import Row from '@/components/containers/Row';
 import Member from '@/components/containers/Member';
@@ -218,30 +219,27 @@ export default function AboutUs() {
         />
       </RevealContentContainer>
       <RevealContentContainer>
-        <section className={rowStyles.primaryBg}>
+        <Wrapper customClass='primary__accent'>
           <Container>
             <Title title='Who we are' />
-
-            <Row>
-              <div className={rowStyles.align__left}>
-                {whoWeAre.map(_ => {
-                  return (
-                    <Member
-                      key={_?.name}
-                      image={_?.image}
-                      name={_?.name}
-                      title={_?.title}
-                      position={_?.position}
-                      linkedIn={_?.linkedIn}
-                      portfolio={_?.portfolio}
-                      about={_?.about}
-                    />
-                  );
-                })}
-              </div>
+            <Row customClass='align__left'>
+              {whoWeAre.map(_ => {
+                return (
+                  <Member
+                    key={_?.name}
+                    image={_?.image}
+                    name={_?.name}
+                    title={_?.title}
+                    position={_?.position}
+                    linkedIn={_?.linkedIn}
+                    portfolio={_?.portfolio}
+                    about={_?.about}
+                  />
+                );
+              })}
             </Row>
           </Container>
-        </section>
+        </Wrapper>
       </RevealContentContainer>
     </div>
   );

styles/Row.module.scss

@@ -1,16 +1,13 @@
 @use './variables' as *;
 @use './mixins' as *;
 
-.primaryBg {
-  background-color: $primary-accent-color;
-  min-width: 100%;
-  padding: 1rem 0;
-}
-
-.align__left {
+.row {
   display: flex;
   flex-wrap: wrap;
-  justify-content: left;
+
+  &.align__left {
+    justify-content: left;
+  }
 
   @include desktop-breakpoint-minus {
     justify-content: space-between;

styles/Wrapper.module.scss

@@ -0,0 +1,10 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.wrapper {
+  padding: 1rem 0;
+
+  &.primary__accent {
+    background-color: $primary-accent-color;
+  }
+}