Exploring some style changes

client/public/index.html

@@ -10,9 +10,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link
       rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
-      integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
-      crossorigin="anonymous"
+      href="%PUBLIC_URL%/all.css"
     />
     <title>terracotta | Wine Inventory</title>
   </head>

client/src/App.css

@@ -1,4 +1,11 @@
-@import url('https://fonts.googleapis.com/css?family=Calibri');
+/* latin */
+@font-face {
+  font-family: 'Calibri';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/calibri.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 /* Global Styles */
 :root {
@@ -20,10 +27,21 @@ body {
   font-family: 'Calibri';
   font-size: 1rem;
   line-height: 1.6;
-  background-color: #fff;
+  background-image: url("img/so-white.png");
+  /* see also: funky-lines.png, herringbone.png, light-grey-terrazzo.png */
   color: #333;
 }
 
+#root {
+  background-color: rgba(245, 222, 179, 0.25); /* "wheat" at 25% opacity */
+  /* other (possibly) good candidates:
+  *  wheat      #F5DEB3 RGBA(245, 222, 179, 1)
+  *  whitesmoke #F5F5F5 RGBA(245, 245, 245, 1)
+  *  seashell   #FFF5EE RGBA(255, 245, 238, 1)
+  *  snow       #FFFAFA RGBA(255, 250, 250, 1)
+  */
+}
+
 a {
   color: var(--primary-color);
   text-decoration: none;
@@ -160,6 +178,7 @@ ul {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 2rem;
+  padding: 0.25rem;
 }
 
 .grid-3 {
@@ -291,8 +310,41 @@ ul {
 }
 
 /* Forms */
-input {
-  margin: 1.2rem 0;
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+input, select, fieldset {
+  margin: 0 0 1.2rem 0;
+  padding: 0.4rem;
+  font-size: 1.2rem;
+  border: 1px solid #ccc;
+}
+
+input[type='radio'] {
+  margin: initial;
+}
+
+fieldset.radiogroup {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  border: none;
+  padding: 0px;
+}
+
+fieldset.radiogroup legend {
+  font-family: 'Calibri';
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+fieldset.radiogroup label{
+  margin: 0 1em 0 0.25em;
 }
 
 .form-text {
@@ -371,16 +423,51 @@ table th {
   color: #fff;
   padding: 0.45rem;
   margin: 0 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .navbar a:hover {
   color: var(--secondary-color);
 }
 
+.navbar h1 a {
+  padding: initial;
+  margin: initial;
+  display: initial;
+}
+
+.navbar h1 a:hover {
+  color: #fff;
+}
+
 .navbar .welcome span {
   margin-right: 0.6rem;
 }
 
+.navbar ul li {
+  display: flex;
+  align-items: center;
+}
+
+.navbar ul li:first-child {
+  font-style: italic;
+  margin-right: 0.9rem;
+}
+
+.navbar ul li:first-child::after {
+  content: "";
+  margin-left: 1.8rem;
+  width: 0px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  height: 2.5rem;
+}
+
+.navbar i.fa-sign-out-alt {
+  margin-right: 0.25rem;
+}
+
 /* Animation (Add After) */
 .item-enter {
   opacity: 0;
@@ -397,6 +484,34 @@ table th {
   transition: opacity 500ms ease-in;
 }
 
+/* Login page */
+#login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#bottles-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#bottles-header h2 {
+  min-width: 15rem;;
+  text-align: initial;
+}
+
+#bottles-header input[type="search"] {
+  margin: initial;
+  padding: 0.2rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  width: 10rem;
+}
+
+
+
 /* Mobile Styles */
 @media (max-width: 700px) {
   .hide-sm {

client/src/components/auth/Login.js

@@ -47,29 +47,30 @@ const Login = () => {
   };
 
   return (
-    <div className='form-container'>
+    <div id="login-container" className='form-container'>
       <h1>
         Account <span className='text-primary'>Login</span>
       </h1>
+      <p>Sign in to use Terracotta</p>
       <form onSubmit={onSubmit}>
         <div className='form-group'>
+          <label htmlFor='email'>Email</label>
           <input
-            type='text'
+            type='email'
             name='email'
             value={email}
-            placeholder='email'
+            // placeholder='email'
             onChange={onChange}
-            // required
+            required
           />
-        </div>
-        <div className='form-group'>
+          <label htmlFor='password'>Password</label>
           <input
             type='password'
             name='password'
             value={password}
-            placeholder='password'
+            // placeholder='password'
             onChange={onChange}
-            // required
+            required
           />
         </div>
         <input

client/src/components/bottles/BottleFilter.js

@@ -4,7 +4,7 @@ import BottleContext from '../../context/bottles/BottleContext';
 const BottleFilter = () => {
   const bottleContext = useContext(BottleContext);
 
-  const { filtered, filterBottles, clearFilter } = bottleContext;
+  const { bottles, filtered, filterBottles, clearFilter } = bottleContext;
 
   const text = useRef('');
 
@@ -22,9 +22,11 @@ const BottleFilter = () => {
     }
   };
 
+  const visible = bottles !== null && bottles.length > 0;
+
   return (
     <form>
-      <input type='text' ref={text} placeholder='search' onChange={onChange} />
+      <input type='search' style={{display: visible?'initial':'none'}} ref={text} placeholder='Search' onChange={onChange} />
     </form>
   );
 };

client/src/components/bottles/Bottles.js

@@ -2,6 +2,7 @@ import React, { Fragment, useContext, useEffect } from 'react';
 import BottleContext from '../../context/bottles/BottleContext';
 import BottleItem from './BottleItem';
 import Spinner from '../layout/Spinner';
+import BottleFilter from './BottleFilter';
 
 const Bottles = () => {
   const bottleContext = useContext(BottleContext);
@@ -14,13 +15,29 @@ const Bottles = () => {
   }, []);
 
   if (bottles !== null && bottles.length === 0) {
-    return <h4>Please add a bottle</h4>;
+    return <h4>Your wine bottle collection is currently empty. Add a bottle to start building your collection.</h4>;
+  }
+  let bottleCountMessage = "";
+  if (bottles !== null) {
+    bottleCountMessage = `Showing all ${bottles.length > 1? bottles.length :''} bottles in your collection.`;
+  }
+  if (filtered !== null) {
+    if (filtered.length === 0) {
+      bottleCountMessage = 'No bottles found that match your search term.';
+    } else if (filtered.length > 0) {
+      bottleCountMessage = `Showing ${filtered.length} bottle${filtered.length > 1?'s':''} matching your search term:`;
+    }
   }
 
   return (
     <Fragment>
       {bottles !== null && !loading ? (
         <Fragment>
+          <header id="bottles-header">
+            <h2>Your bottle collection</h2>
+            <BottleFilter />
+          </header>
+          <p>{bottleCountMessage}</p>
           {filtered !== null
             ? filtered.map((bottle) => (
                 <BottleItem key={bottle._id} bottle={bottle} />