From 783c42dc0e1ba273e5d150c858c233c225740e2e Mon Sep 17 00:00:00 2001
From: Arash Abbasi <s.arash.abbasi@gmail.com>
Date: Sat, 13 Feb 2021 13:18:01 -0800
Subject: [PATCH 1/2] Create top level header component

---
 app/pages/Admin/Categories/Categories.jsx     |  2 ++
 app/pages/Admin/Categories/TopLevelHeader.jsx | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 app/pages/Admin/Categories/TopLevelHeader.jsx

diff --git a/app/pages/Admin/Categories/Categories.jsx b/app/pages/Admin/Categories/Categories.jsx
index 8951e188a..c6804280b 100644
--- a/app/pages/Admin/Categories/Categories.jsx
+++ b/app/pages/Admin/Categories/Categories.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import React from 'react';
 import fake_data from './fake_data';
+import TopLevelHeader from './TopLevelHeader';
 
 class Categories extends React.Component {
   constructor(props) {
@@ -49,6 +50,7 @@ class Categories extends React.Component {
     return (
       <div>
         <div>initialize the Categories page</div>
+        <TopLevelHeader />
       </div>
     );
   }
diff --git a/app/pages/Admin/Categories/TopLevelHeader.jsx b/app/pages/Admin/Categories/TopLevelHeader.jsx
new file mode 100644
index 000000000..c37adf5a8
--- /dev/null
+++ b/app/pages/Admin/Categories/TopLevelHeader.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const divStyle = {
+  'display': 'flex',
+  'justify-content': 'space-between',
+  'height': '40px',
+  'width': '700px',
+  'margin': 'auto',
+  'border-style': 'inset',
+  'border-color': 'gray',
+  'border-width': '5px',
+  'padding': '5px',
+  'background': 'lightgray',
+  'font-weight': '600',
+}
+
+const TopLevelHeader = (props) => {
+  return (
+    <div style={divStyle}>
+      <span>Top Level Categories</span>
+      <span>+ Add Category</span>
+    </div>
+  )
+}
+
+export default TopLevelHeader;
\ No newline at end of file

From 969f9ab450cab4dd7bb54796de51caea6f1e71c6 Mon Sep 17 00:00:00 2001
From: Arash Abbasi <s.arash.abbasi@gmail.com>
Date: Sat, 20 Feb 2021 19:45:33 -0800
Subject: [PATCH 2/2] Move style to Admin.module.scss

---
 app/pages/Admin/Admin.module.scss             | 13 +++++++++++++
 app/pages/Admin/Categories/TopLevelHeader.jsx | 16 ++--------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/pages/Admin/Admin.module.scss b/app/pages/Admin/Admin.module.scss
index e69de29bb..ee3a10fab 100644
--- a/app/pages/Admin/Admin.module.scss
+++ b/app/pages/Admin/Admin.module.scss
@@ -0,0 +1,13 @@
+.topLevelHeader {
+  display: flex;
+  justify-content: space-between;
+  height: 40px;
+  width: 700px;
+  margin: auto;
+  border-style: inset;
+  border-color: gray;
+  border-width: 5px;
+  padding: 5px;
+  background: lightgray;
+  font-weight: 600;
+}
\ No newline at end of file
diff --git a/app/pages/Admin/Categories/TopLevelHeader.jsx b/app/pages/Admin/Categories/TopLevelHeader.jsx
index c37adf5a8..353d2f6ea 100644
--- a/app/pages/Admin/Categories/TopLevelHeader.jsx
+++ b/app/pages/Admin/Categories/TopLevelHeader.jsx
@@ -1,22 +1,10 @@
 import React from 'react';
 
-const divStyle = {
-  'display': 'flex',
-  'justify-content': 'space-between',
-  'height': '40px',
-  'width': '700px',
-  'margin': 'auto',
-  'border-style': 'inset',
-  'border-color': 'gray',
-  'border-width': '5px',
-  'padding': '5px',
-  'background': 'lightgray',
-  'font-weight': '600',
-}
+import styles from '.././Admin.module.scss';
 
 const TopLevelHeader = (props) => {
   return (
-    <div style={divStyle}>
+    <div className={styles.topLevelHeader}>
       <span>Top Level Categories</span>
       <span>+ Add Category</span>
     </div>