From e6d1fe3e4e43bc248d7bfc564b5574ecdd4f4b75 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Mon, 22 Jun 2020 23:58:28 -0700
Subject: [PATCH] feat: Change how section backgrounds are rendered

---
 src/components/Section.js          | 12 +++++-------
 src/components/Section.module.scss | 16 +++++++---------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/Section.js b/src/components/Section.js
index 6db63c93e..2273d5e01 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -5,13 +5,11 @@ import styles from './Section.module.scss';
 
 const Section = ({ backgroundBanner, children, className }) => {
   return (
-    <div className={styles.section}>
-      <div
-        className={cx(
-          { [styles.backgroundBanner]: backgroundBanner },
-          className
-        )}
-      />
+    <div
+      className={cx(styles.section, {
+        [styles.backgroundBanner]: backgroundBanner,
+      })}
+    >
       {children}
     </div>
   );
diff --git a/src/components/Section.module.scss b/src/components/Section.module.scss
index c98ef1f34..684a77871 100644
--- a/src/components/Section.module.scss
+++ b/src/components/Section.module.scss
@@ -1,13 +1,11 @@
 .section {
-  position: relative;
-}
+  --surface-background-color: var(--secondary-surface-background-color);
 
-.backgroundBanner {
-  position: absolute;
-  top: -2rem;
-  bottom: -2rem;
-  left: -2rem;
-  right: -2rem;
-  z-index: -1;
+  position: relative;
   background-color: var(--secondary-background-color);
+
+  &.backgroundBanner {
+    margin: -2rem;
+    padding: 2rem;
+  }
 }