the-collab-lab · prophen · Feb 9, 2020 · Feb 6, 2020 · Feb 6, 2020 · Feb 6, 2020
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,39 @@
+import React from 'react';
+import { Image, Header, Segment, Button } from 'semantic-ui-react';
+import Logo from '../assets/logo.png';
+import { Link } from 'react-router-dom';
+
+function AppHeader(props) {
+  return (
+    <Segment textAlign="center" style={{ borderRadius: 0 }}>
+      {props.showBackArrow && (
+        <Button
+          basic
+          as={Link}
+          to="/"
+          icon="arrow left"
+          size="medium"
+          color="blue"
+          circular
+          floated="left"
+        ></Button>
+      )}
+      <header>
+        <Image
+          src={Logo}
+          centered
+          size="tiny"
+          verticalAlign="middle"
+          alt="Shopping List"
+        />
+        <Header as="h1" style={{ display: 'inline-block', marginLeft: '10px' }}>
+          <Header.Content>{props.children}</Header.Content>
+        </Header>
+      </header>
+    </Segment>
+  );
+}
+AppHeader.defaultProps = {
+  showBackArrow: false,
+};
+export default AppHeader;
diff --git a/src/components/JoinList.js b/src/components/JoinList.js
@@ -2,51 +2,95 @@ import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import '../pages/HomePage.css';
 import useListToken from '../useListToken';
+import AppHeader from './AppHeader';
+import { Link } from 'react-router-dom';
+import {
+  Input,
+  Button,
+  Segment,
+  Divider,
+  Container,
+  Responsive,
+} from 'semantic-ui-react';
 
 const JoinList = () => {
   const { saveToken } = useListToken();
   const history = useHistory();
 
   const [joinToken, setJoinToken] = useState('');
-  const [loading, setLoading] = useState();
+  // const [loading, setLoading] = useState();
 
   const handleChange = event => {
     setJoinToken(event.target.value);
   };
 
   const handleSubmit = event => {
-    setLoading(true);
+    // setLoading(true);
     event.preventDefault();
     saveToken(joinToken);
-    joinToken && setLoading(false);
+    // joinToken && setLoading(false);
 
     return joinToken && history.push('/list');
   };
 
   // token to use: jimmy torn jolt, conner oaken liz
 
   return (
-    <div>
-      <form onSubmit={handleSubmit} className="form-flex-container">
-        <label htmlFor="join-list-input">
-          Need to join a list? Enter your share code below, then tap "Grab Your
-          List"
-        </label>
-
-        <input
-          className="token-input"
-          name="join-list-input"
-          placeholder="Enter share code here"
-          type="text"
-          onChange={handleChange}
-        />
-
-        <button type="submit" className="cta-button">
-          Grab Your List
-        </button>
-        {loading && <p>Fetching your list...</p>}
-      </form>
-    </div>
+    <>
+      <AppHeader>Welcome to Your Smart Shopping List!</AppHeader>
+      <Container textAlign="center">
+        <Segment basic textAlign="center">
+          <form onSubmit={handleSubmit} className="form-flex-container">
+            <p>
+              Need to join a list? Enter your share code below, then tap "Grab
+              Your List"
+            </p>
+
+            <Responsive
+              as={Input}
+              minWidth={432}
+              action={{ color: 'blue', content: 'Grab Your List' }}
+              size="large"
+              icon="list"
+              iconPosition="left"
+              placeholder="Enter share code"
+              onChange={handleChange}
+            />
+            <Responsive maxWidth={431}>
+              <Input
+                size="large"
+                icon="list"
+                iconPosition="left"
+                placeholder="Enter share code"
+                onChange={handleChange}
+              />
+              <Button
+                style={{ margin: '1em' }}
+                className="grab-list-button"
+                size="large"
+                color="blue"
+                type="submit"
+              >
+                Grab Your List
+              </Button>
+            </Responsive>
+
+            <Divider horizontal>Or</Divider>
+
+            <Button
+              as={Link}
+              to="/add-item"
+              size="large"
+              color="teal"
+              content="Create a New Shopping List"
+              icon="add"
+              labelPosition="left"
+            />
+          </form>
+        </Segment>
+        {/* {loading && <p>Fetching your list...</p>} */}
+      </Container>
+    </>
   );
 };
 

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
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import '../pages/HomePage.css';
+// import '../pages/HomePage.css';
+import { Button, Container } from 'semantic-ui-react';
+import AppHeader from '../components/AppHeader';
 import JoinList from '../components/JoinList';
 
 const JoinListView = props => {
@@ -20,15 +22,16 @@ const NewListView = props => {
     <>
       {!joinViewVisible && (
         <div className="new-list-view">
-          <p>Tap "Create Shopping List" to get started</p>
-
           <Link to="/list">
-            <button className="cta-button">Create Shopping List</button>
+            <Button size="massive" color="green">
+              Create Shopping List
+            </Button>
           </Link>
 
           <p>
-            You can also{' '}
+            You can also
             <button
+              style={{ display: 'inline' }}
               className="borderless-button"
               onClick={() => setJoinViewVisible(true)}
             >
@@ -44,12 +47,10 @@ const NewListView = props => {
 
 const Welcome = props => {
   return (
-    <main className="flex-container">
-      <div>
-        <h1>Welcome to Your Smart Shopping List!</h1>
-        <NewListView />
-      </div>
-    </main>
+    <Container textAlign="center">
+      <AppHeader>Welcome to Your Smart Shopping List!</AppHeader>
+      <NewListView />
+    </Container>
   );
 };
 

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}>