From cee2d250ebd5df9c20afe5c58759e041e88b58f6 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 29 Jul 2020 14:17:11 -0700
Subject: [PATCH] fix: migrate the rest of the layout styles to emotion

---
 src/layouts/MainLayout.js          | 28 +++++++++++++++++++++++++---
 src/layouts/MainLayout.module.scss | 29 -----------------------------
 2 files changed, 25 insertions(+), 32 deletions(-)
 delete mode 100644 src/layouts/MainLayout.module.scss

diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
index ff4360762..3130bea7f 100644
--- a/src/layouts/MainLayout.js
+++ b/src/layouts/MainLayout.js
@@ -51,7 +51,16 @@ const MainLayout = ({ children }) => {
   }, []);
 
   return (
-    <div className={styles.layout}>
+    <div
+      css={css`
+        --global-header-height: 30px;
+        --sidebar-width: 300px;
+
+        min-height: 100vh;
+        display: grid;
+        grid-template-rows: auto 1fr;
+      `}
+    >
       <Helmet>
         {cookieConsent ? (
           <script>
@@ -68,7 +77,11 @@ const MainLayout = ({ children }) => {
       </Helmet>
       <GlobalHeader editUrl={editUrl} />
       <MobileHeader
-        className={styles.hideOnDesktop}
+        css={css`
+          @media (min-width: 761px) {
+            display: none;
+          }
+        `}
         isOpen={isMobileNavOpen}
         toggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
       />
@@ -91,8 +104,17 @@ const MainLayout = ({ children }) => {
         <Sidebar
           css={css`
             grid-area: sidebar;
+            position: fixed;
+            top: var(--global-header-height);
+            bottom: 0;
+            width: var(--sidebar-width);
+            height: calc(100vh - var(--global-header-height));
+            overflow: auto;
+
+            @media (max-width: 760px) {
+              display: none;
+            }
           `}
-          className={cx(styles.sidebar, styles.hideOnMobile)}
         />
         <div
           css={css`
diff --git a/src/layouts/MainLayout.module.scss b/src/layouts/MainLayout.module.scss
deleted file mode 100644
index 42d09bd19..000000000
--- a/src/layouts/MainLayout.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.layout {
-  --global-header-height: 30px;
-  --sidebar-width: 300px;
-
-  min-height: 100vh;
-  display: grid;
-  grid-template-rows: auto 1fr;
-}
-
-.sidebar {
-  position: fixed;
-  top: var(--global-header-height);
-  bottom: 0;
-  width: var(--sidebar-width);
-  height: calc(100vh - var(--global-header-height));
-  overflow: auto;
-}
-
-.hideOnDesktop {
-  @media (min-width: 760px + 1) {
-    display: none;
-  }
-}
-
-.hideOnMobile {
-  @media (max-width: 760px) {
-    display: none;
-  }
-}