the-collab-lab · prophen · Feb 9, 2020 · Feb 6, 2020 · Feb 6, 2020 · Feb 6, 2020
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,9 @@
 # production
 /build
 
+# Semantic Theme Overrides and Variables
+/src/semantic-ui/site/
+
 # misc
 .DS_Store
 .env.local

diff --git a/craco.config.js b/craco.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
+};
diff --git a/package.json b/package.json
@@ -13,13 +13,14 @@
     "react-firestore": "^1.0.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.3.0"
+    "react-scripts": "3.3.0",
+    "semantic-ui-react": "^0.88.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
   },
   "eslintConfig": {
@@ -49,6 +50,9 @@
     ]
   },
   "devDependencies": {
-    "cypress": "^3.8.1"
+    "@craco/craco": "^5.6.3",
+    "@semantic-ui-react/craco-less": "^1.2.1",
+    "cypress": "^3.8.1",
+    "semantic-ui-less": "^2.4.1"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Smart Shopping List" />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Smart Shopping List - TCL3</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Smart Shopping List",
+  "name": "Smart Shopping List - Collab Lab Cohort 3",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.css b/src/App.css
@@ -1,22 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #09d3ac;
+header > h1 {
+  font-size: 1.6rem;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import AppRouter from './AppRouter';
+import './App.css';
 
 function App() {
   return (

diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Header, Segment, Button } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+
+function AppHeader(props) {
+  return (
+    <Segment textAlign="center" style={{ borderRadius: 0 }}>
+      {props.showBackArrow && (
+        <>
+          <Button
+            style={{ marginRight: '-37.5px' }}
+            basic
+            as={Link}
+            to="/"
+            icon="arrow left"
+            size="medium"
+            color="blue"
+            circular
+            floated="left"
+          ></Button>
+          {/* <Divider hidden /> */}
+        </>
+      )}
+
+      <header>
+        {/* <Image
+          src={Logo}
+          centered
+          size="tiny"
+          verticalAlign="middle"
+          alt="Shopping List"
+        /> */}
+        <Header as="h1">
+          <Header.Content>{props.children}</Header.Content>
+        </Header>
+      </header>
+    </Segment>
+  );
+}
+AppHeader.defaultProps = {
+  showBackArrow: false,
+};
+export default AppHeader;
diff --git a/src/components/ErrorMessage.js b/src/components/ErrorMessage.js
diff --git a/src/components/HiddenButton.js b/src/components/HiddenButton.js
diff --git a/src/components/HomePageButton.js b/src/components/HomePageButton.js
diff --git a/src/pages/ItemError.css → src/components/ItemError.css b/src/pages/ItemError.css → src/components/ItemError.css
@@ -5,7 +5,6 @@
     margin-left: 15px;
     margin-right: 15px;
     padding: 10px;
-    border-left: 10px solid rgb(178, 20, 14);
     border-radius: 2px;
     background-color: rgb(240, 128, 128, 0.1);
   }
@@ -17,7 +16,6 @@
     margin-left: 1.2rem;
     margin-right: 1.2rem;
     padding: 1rem;
-    border-left: 1rem solid rgb(178, 20, 14);
     border-radius: 2px;
     background-color: rgb(240, 128, 128, 0.1);
   }

diff --git a/src/pages/ItemError.js → src/components/ItemError.js b/src/pages/ItemError.js → src/components/ItemError.js
diff --git a/src/components/JoinList.js b/src/components/JoinList.js
diff --git a/src/components/Loading.js b/src/components/Loading.js
diff --git a/src/components/NavTabs.js b/src/components/NavTabs.js
@@ -1,20 +1,19 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import '../pages/HomePage.css';
+import { Menu, Icon } from 'semantic-ui-react';
 
 const NavTabs = () => {
   return (
-    <div className="container-container">
-      <div className="container">
-        <NavLink className="left-tab" to="/add-item">
-          to add item
-        </NavLink>
+    <Menu fluid fixed="bottom" bottom="true" widths={2}>
+      <Menu.Item as={NavLink} name="to add item" to="/add-item">
+        <Icon name="add" /> Add Item
+      </Menu.Item>
 
-        <NavLink className="right-tab" to={`/list/`}>
-          to list
-        </NavLink>
-      </div>
-    </div>
+      <Menu.Item as={NavLink} name="to list" to="/list">
+        <Icon name="list" /> Shopping List
+      </Menu.Item>
+    </Menu>
   );
 };
 

diff --git a/src/components/Welcome.js b/src/components/Welcome.js
diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import { fb as firebase } from './lib/firebase.js';
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 import { ListContextProviderWithFirestore } from './listContext';
+import 'semantic-ui-less/semantic.less';
 
 ReactDOM.render(
   <FirestoreProvider firebase={firebase}>

diff --git a/src/lib/normalizeName.js b/src/lib/normalizeName.js
@@ -1,4 +1,3 @@
-//normalized function
 const normalizeName = name => {
   return name
     .replace(/[,.;:!-?]/g, '')