From 91644708690be8b03e3946213da69bda3d8fb398 Mon Sep 17 00:00:00 2001
From: Anya Wallace <anya.wallace@alleninstitute.org>
Date: Mon, 20 May 2024 17:34:05 -0700
Subject: [PATCH] Move root styles to wrapper layout component

---
 .../web/src/components/Home/Home.module.css   | 11 -----
 packages/web/src/components/Home/index.tsx    | 40 +++++++++----------
 .../src/components/Layout/Layout.module.css   | 10 +++++
 packages/web/src/components/Layout/index.tsx  |  5 ++-
 4 files changed, 32 insertions(+), 34 deletions(-)
 create mode 100644 packages/web/src/components/Layout/Layout.module.css

diff --git a/packages/web/src/components/Home/Home.module.css b/packages/web/src/components/Home/Home.module.css
index a06851b8d..57ddf1c4d 100644
--- a/packages/web/src/components/Home/Home.module.css
+++ b/packages/web/src/components/Home/Home.module.css
@@ -6,17 +6,6 @@
     position: relative;
 }
 
-.root {
-    background-color: var(--secondary-dark);
-    color: var(--secondary-text-color);
-    margin: 0;
-    border: 0;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    justify-content: center;
-}
-
 .content {
     padding: calc(4*var(--margin));
     max-width: 1200px;
diff --git a/packages/web/src/components/Home/index.tsx b/packages/web/src/components/Home/index.tsx
index fa9a36ec9..6d6d1dbf3 100644
--- a/packages/web/src/components/Home/index.tsx
+++ b/packages/web/src/components/Home/index.tsx
@@ -50,27 +50,25 @@ export default function Home() {
     ];
     return (
         <>
-            <div className={styles.root}>
-                <Banner />
-                <div className={styles.content}>
-                    <div className={styles.header}>
-                        Discover features to improve efficiency in dataset curation
-                    </div>
-                    <Features />
-                    <hr></hr>
-                    <div className={styles.optionsContainer}>
-                        <div className={styles.header}>What would you like to access today?</div>
-                        <div className={styles.options}>
-                            {options.map((option, index) => {
-                                return (
-                                    <div className={styles.option} key={`option_${index}`}>
-                                        <div className={styles.optionHeader}>{option.header}</div>
-                                        <div className={styles.optionBody}>{option.body}</div>
-                                        {option.action}
-                                    </div>
-                                );
-                            })}
-                        </div>
+            <Banner />
+            <div className={styles.content}>
+                <div className={styles.header}>
+                    Discover features to improve efficiency in dataset curation
+                </div>
+                <Features />
+                <hr></hr>
+                <div className={styles.optionsContainer}>
+                    <div className={styles.header}>What would you like to access today?</div>
+                    <div className={styles.options}>
+                        {options.map((option, index) => {
+                            return (
+                                <div className={styles.option} key={`option_${index}`}>
+                                    <div className={styles.optionHeader}>{option.header}</div>
+                                    <div className={styles.optionBody}>{option.body}</div>
+                                    {option.action}
+                                </div>
+                            );
+                        })}
                     </div>
                 </div>
             </div>
diff --git a/packages/web/src/components/Layout/Layout.module.css b/packages/web/src/components/Layout/Layout.module.css
new file mode 100644
index 000000000..7b7d05ef0
--- /dev/null
+++ b/packages/web/src/components/Layout/Layout.module.css
@@ -0,0 +1,10 @@
+.root {
+  background-color: var(--secondary-dark);
+  color: var(--secondary-text-color);
+  margin: 0;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  justify-content: center;
+}
diff --git a/packages/web/src/components/Layout/index.tsx b/packages/web/src/components/Layout/index.tsx
index 667d22ee5..67cf25017 100644
--- a/packages/web/src/components/Layout/index.tsx
+++ b/packages/web/src/components/Layout/index.tsx
@@ -1,13 +1,14 @@
 import * as React from "react";
 import { Outlet } from "react-router-dom";
 import Header from "../Header";
+import styles from "./Layout.module.css";
 
 // Basic wrapper to maintain global header
 export default function Layout() {
     return (
-        <>
+        <div className={styles.root}>
             <Header />
             <Outlet />
-        </>
+        </div>
     );
 }