Make things pretty (#67)

* Add Semantic UI

* Start replacing components on List.js, Add header

* Convert list to Semantic components

* Add theming to App

Theming is set up so that when we decide on fonts, colors, and custom layouts we can update and/or override the default styles using less variables and css.

* Style list

* Add list icon to header, remove header from welcome page

In an earlier commit I added a site header to App.js I removed it so that the welcome page for new lists can have it's own header. I changed some colors also just to play with it. I'm not married to any style choices I made we can still talk about final design choices.

* Add color code to list

* Add delete button to list item

* Change button layout and color

* Change to outline from background color

* Clean up unused functions

* Remove animation from list

* Clean up HomePage.js

* Change Welcome prompt to Semantic

* Simplify welcome prompt

Instead of making the welcome prompt two parts it's not just one view. The join list field and button are responsive.

* Add details dropdown to list items

I added a drop down with some placeholder data and moved the delete button to inside of it. Also, I took the popup off of the delete button action because it was behaving strangely on mobile.

* All pages styled

All the pages have a basic level of styling. For usability I also added a delete item function on the shopping list view.

There was a problem where I was losing the token if the addItem screen was the entry to the app. It was because there was no communication with the list in context and we were using that list to check for duplicates.

To fix this I added a call to fetchList when addItem loads. Let me know if this breaks anything.

* Remove a CSS rule

* Add missing functions to listContext

* Remove unused files, adjust addItem styles

* Center Add Item header

* Remove test content from item details

* Clean up comments and console.log statements, adjust color code logic

* Update .gitignore

* Remove Semantic folder from gitignore

* Try ignoring /src/semantic-ui/site

* Add back theme files

* Clean up unneeded <div>, small changes

I cleaned up a an unneeded div tag, removed some blank lines, and moved the updateItem function closer to purchaseItem in listContext.js.

.gitignore

@@ -12,6 +12,9 @@
 # production
 /build
 
+# Semantic Theme Overrides and Variables
+/src/semantic-ui/site/
+
 # misc
 .DS_Store
 .env.local

craco.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
+};

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

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>

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",

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

src/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import AppRouter from './AppRouter';
+import './App.css';
 
 function App() {
   return (

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;

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

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

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

src/lib/normalizeName.js

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