BrewTrak Polish (#123)

* Separated mobile and desktop components for the sidebar. Added small helper to add brew if you don't have any brews

* Updated InputRow to have readOnly prop. Updated other readOnly fields to follow it.

* Changed brewtrak to have an AuthRoute

* Updated brew log sidebar display

* Updated mobile sidebar format and desktop sidebar color

* Sidebar set up with new design. Still has some comments left

* Updated input fields to be more tailwind design

* Updated some icons and capitalization on forms

* Added free bean name input for brew log

src/App.js

@@ -71,9 +71,9 @@ function App() {
       <ContainerRoute path='/recipe'>
         <Recipe />
       </ContainerRoute>
-      <ContainerRoute path='/brewtrak'>
+      <AuthRoute path='/brewtrak'>
         <BrewTrakPage />
-      </ContainerRoute>
+      </AuthRoute>
       <ContainerRoute path='/bean'>
         <BeanPage />
       </ContainerRoute>

src/components/Bean/Review/CreateBeanReview.js

@@ -52,7 +52,12 @@ const CreateBeanReview = (props) => {
         placeholder='Enter Barista'
         label='Barista'
       />
-      <InputRow value={name} readOnly placeholder='Enter Bean' label='Bean' />
+      <InputRow
+        value={name}
+        readOnly={true}
+        placeholder='Enter Bean'
+        label='Bean'
+      />
       <InputRow
         value={state.rating}
         onChange={onChangeGenerator('rating')}

src/components/Bean/Review/EditBeanReviewForm.js

@@ -34,13 +34,13 @@ const EditBeanReviewForm = ({ beanReview, id }) => {
         <div className='font-bold'>Edit Review</div>
         <InputRow
           value={barista.display_name}
-          readOnly
+          readOnly={true}
           placeholder='Enter Barista'
           label='Barista'
         />
         <InputRow
           value={state.bean.name}
-          readOnly
+          readOnly={true}
           placeholder='Enter Bean'
           label='Bean'
         />

src/components/BrewTrak/BrewLog.js

@@ -1,27 +1,57 @@
+import CoffeeCup from './Icons/coffee-cup.png'
 const BrewLog = ({ logs, setId, setBrewSelected }) => {
   return (
     <div
-      className='group flex flex-col px-4 py-2 text-sm leading-5 rounded-md font-medium text-gray-900 bg-gray-50 border border-gray-250 '
+      className='relative px-6 py-5 flex items-center space-x-3 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-pink-500'
       onClick={() => {
         setId(logs.id)
         setBrewSelected(true)
       }}
     >
-      <div className='flex'>{logs.date_added}</div>
-      <div className='flex'>
-        <div className='flex-col'>
-          <div className='flex pr-1'>Type: {logs.bean?.name}</div>
-        </div>
-        <div className='flex-col'>
-          <div className='flex px-1'>{logs.bean_weight}g</div>
-        </div>
-        <div className='flex-col'>
-          <div className='flex px-1'>{logs.water_temp}F</div>
+      <div className='flex-shrink-0'>
+        <img
+          className='h-10 w-10 rounded-full'
+          src={logs.bean ? logs.bean?.img : CoffeeCup}
+          alt=''
+        />
+      </div>
+      <div className='flex-1 min-w-0'>
+        <div className='focus:outline-none'>
+          {/* <!-- Extend touch target to entire panel --> */}
+          <span className='absolute inset-0' aria-hidden='true'></span>
+          <p className='text-sm font-medium text-gray-900'>
+            {logs.bean
+              ? logs.bean?.name
+              : logs.bean_name_free
+              ? logs.bean_name_free
+              : 'No Bean Provided'}
+          </p>
+          <p className='text-sm text-gray-500 truncate'>{logs.date_added}</p>
         </div>
       </div>
-      <div className='flex'>{logs.rating}/5</div>
     </div>
   )
 }
 
 export default BrewLog
+/* <div
+        className='col-span-1 flex shadow-sm rounded-md'
+        onClick={() => {
+          setId(logs.id)
+          setBrewSelected(true)
+        }}
+      >
+        <div className='flex-shrink-0 flex items-center justify-center w-16 bg-blue-400 text-white text-sm font-medium rounded-l-md'>
+          {logs.bean ? firstInitials(logs.bean?.name) : 'N/A'}
+        </div>
+        <div className='flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate'>
+          <div className='flex-1 px-4 py-2 text-sm truncate'>
+            <div className='text-gray-900 font-medium hover:text-gray-600'>
+              {logs.bean ? logs.bean?.name : 'No Bean Provided'}
+            </div>
+            <p className='text-gray-500'></p>
+          </div>
+        </div>
+      </div>
+     */
+// </div>