From 69561e9d85c4364b21d1ffd135436e7dda9a42fa Mon Sep 17 00:00:00 2001
From: Emilie Thoreson <emilie.thoreson@bombbomb.com>
Date: Mon, 23 Sep 2019 17:38:23 -0600
Subject: [PATCH 1/2] menu tabs are now global styles

---
 src/components/Queue/QueueContainer.jsx | 18 ++++++---------
 src/components/globalStyles/MenuBar.jsx | 21 +++++++++++++++++
 src/components/globalStyles/MenuTabs.js | 30 +++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 src/components/globalStyles/MenuBar.jsx
 create mode 100644 src/components/globalStyles/MenuTabs.js

diff --git a/src/components/Queue/QueueContainer.jsx b/src/components/Queue/QueueContainer.jsx
index f0586fc3..d027b4d7 100644
--- a/src/components/Queue/QueueContainer.jsx
+++ b/src/components/Queue/QueueContainer.jsx
@@ -3,6 +3,8 @@ import dummyData from '../dummyData';
 import PrintCardContainer from './components/PrintCardContainer';
 import './QueueContainer.css';
 import SearchBar from './components/SearchBar';
+import MenuBar from '../globalStyles/MenuBar';
+import { MenuTabs } from '../globalStyles/MenuTabs';
 
 const QueueContainer = () => {
 	const [data] = useState(dummyData);
@@ -49,20 +51,14 @@ const QueueContainer = () => {
 		<PrintCardContainer data={el} key={i} />
 	));
 
+	const setStatus = (view) => {
+		setStatusView(view);
+	}
+
 	return (
 		<div>
 			<div className='queueFilterInfo'>
-				<ul className='statusMenu'>
-					<li className={statusView === 'QUEUEING' ? 'selectedTab' : ''}>
-						<button onClick={() => setStatusView('QUEUEING')}>Queue</button>
-					</li>
-					<li className={statusView === 'DONE' ? 'selectedTab' : ''}>
-						<button onClick={() => setStatusView('DONE')}>Recently Completed</button>
-					</li>
-					<li className={statusView === 'PRINTING' ? 'selectedTab' : ''}>
-						<button onClick={() => setStatusView('PRINTING')}>In Progress</button>
-					</li>
-				</ul>
+				<MenuBar selectedTab={statusView} tabOptions={MenuTabs.QueueTabs} setView={setStatus} />
 				<SearchBar filterByTerm={filterByTerm} />
 			</div>
 			<ul className='queueBanner'>
diff --git a/src/components/globalStyles/MenuBar.jsx b/src/components/globalStyles/MenuBar.jsx
new file mode 100644
index 00000000..5bbd3a00
--- /dev/null
+++ b/src/components/globalStyles/MenuBar.jsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+const MenuBar = ({ selectedTab, tabOptions, setView }) => {
+
+    const tabDisplay = tabOptions.map((tab, index) => {
+        return (<li className={tab.name === selectedTab ? 'selectedTab' : ''}>
+            <button onClick={() => setView(tab.name)}>{tab.label}</button>
+        </li>)
+    });
+	return (
+        <div>
+            <ul className='statusMenu'>
+                {tabDisplay}
+            </ul>
+        </div>
+	);
+};
+
+export default MenuBar;
+
+
diff --git a/src/components/globalStyles/MenuTabs.js b/src/components/globalStyles/MenuTabs.js
new file mode 100644
index 00000000..81cc3a0f
--- /dev/null
+++ b/src/components/globalStyles/MenuTabs.js
@@ -0,0 +1,30 @@
+class MenuTabs {
+    QueueTabs = [
+        {
+            name: 'QUEUEING',
+            label: 'Queue'
+        },
+        {
+            name: 'PRINTING',
+            label: 'In Progress'
+        },		
+        {
+            name: 'DONE',
+            label: 'Recently Completed'
+        },
+    ];
+    ManageAccountTabs = [
+        {
+            name: 'components',
+            label: 'Components'
+        },
+        {
+            name: 'users',
+            label: 'User Profiles'
+        }
+    ]
+}
+
+const instance = new MenuTabs();
+export { instance as MenuTabs };
+export default MenuTabs;
\ No newline at end of file

From f987bf1d7cc94bed7ec5b0504384aaccf4da4b0d Mon Sep 17 00:00:00 2001
From: Emilie Thoreson <emilie.thoreson@bombbomb.com>
Date: Mon, 23 Sep 2019 17:43:53 -0600
Subject: [PATCH 2/2] move menu css properties to global folder

---
 src/components/Queue/QueueContainer.css | 60 -------------------------
 src/components/globalStyles/MenuBar.css | 56 +++++++++++++++++++++++
 src/components/globalStyles/MenuBar.jsx |  1 +
 3 files changed, 57 insertions(+), 60 deletions(-)
 create mode 100644 src/components/globalStyles/MenuBar.css

diff --git a/src/components/Queue/QueueContainer.css b/src/components/Queue/QueueContainer.css
index 298f8301..2ddcc5dc 100644
--- a/src/components/Queue/QueueContainer.css
+++ b/src/components/Queue/QueueContainer.css
@@ -14,66 +14,6 @@ body {
 	align-items: center;
 }
 
-.statusMenu {
-	display: flex;
-	flex-direction: row;
-	list-style: none;
-	align-items: center;
-}
-
-.statusMenu li {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.statusMenu button {
-	outline: none;
-	border: none;
-	background-color: var(--default-background);
-	font-size: 1em;
-}
-
-
-.statusMenu li:not(:first-child) button{
-	border-left: 1px solid black;
-}
-
-.statusMenu li:after {
-	content: "";
-	display: block;
-	color: var(--default-background);
-	border-bottom: thick solid;
-	width: 90%;
-}
-
-.statusMenu .selectedTab:after {
-	content: "";
-	display: block;
-	color: var(--light-blue);
-	border-bottom: thick solid;
-	animation-duration: .3s;
-	animation-name: slidein;
-}
-
-	
-@keyframes slidein {
-	from {
-		width: 0%; 
-	}
-	  
-	to {
-		width: 90%;
-	}
-
-}
-
-
-.statusMenu > button {
-	border: none;
-	margin: 0;
-}
-
 .search-container input {
 	padding: 2px;
 	border: none;
diff --git a/src/components/globalStyles/MenuBar.css b/src/components/globalStyles/MenuBar.css
new file mode 100644
index 00000000..5728b53f
--- /dev/null
+++ b/src/components/globalStyles/MenuBar.css
@@ -0,0 +1,56 @@
+.statusMenu {
+	display: flex;
+	flex-direction: row;
+	list-style: none;
+	align-items: center;
+}
+
+.statusMenu li {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.statusMenu button {
+	outline: none;
+	border: none;
+	background-color: var(--default-background);
+	font-size: 1em;
+}
+
+@keyframes slidein {
+	from {
+		width: 0%; 
+	}
+	  
+	to {
+		width: 90%;
+	}
+
+}
+
+.statusMenu > button {
+	border: none;
+	margin: 0;
+}
+
+.statusMenu li:not(:first-child) button{
+	border-left: 1px solid black;
+}
+
+.statusMenu li:after {
+	content: "";
+	display: block;
+	color: var(--default-background);
+	border-bottom: thick solid;
+	width: 90%;
+}
+
+.statusMenu .selectedTab:after {
+	content: "";
+	display: block;
+	color: var(--light-blue);
+	border-bottom: thick solid;
+	animation-duration: .3s;
+	animation-name: slidein;
+}
\ No newline at end of file
diff --git a/src/components/globalStyles/MenuBar.jsx b/src/components/globalStyles/MenuBar.jsx
index 5bbd3a00..9dc8c1b1 100644
--- a/src/components/globalStyles/MenuBar.jsx
+++ b/src/components/globalStyles/MenuBar.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import styles from './MenuBar.css';
 
 const MenuBar = ({ selectedTab, tabOptions, setView }) => {