feat: Change how section backgrounds are rendered

newrelic · Jun 23, 2020 · e6d1fe3 · e6d1fe3
1 parent 26763ac
commit e6d1fe3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git 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
@@ -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;
+  }
 }