Move root styles to wrapper layout component

AllenInstitute · May 21, 2024 · 9164470 · 9164470
1 parent b3c13e4
commit 9164470
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     );
 }