Improve RecipeForm UI

recipes/src/components/ImageUploader/styles.scss

@@ -21,7 +21,7 @@
     background-position: center;
     display: flex;
     flex-direction: column;
-    justify-content: end;
+    justify-content: flex-start;
     align-items: flex-end;
 
     button {

recipes/src/components/Input/styles.scss

@@ -70,6 +70,7 @@
   }
   input:disabled {
     border-color: $grey-400;
+    font-style: italic;
   }
 }
 

recipes/src/components/RecipeForm/index.tsx

@@ -198,8 +198,9 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
                             <li
                               className={`tab${selectedTab === subrecipeIdx ? ' tab--selected' : ''}`}
                               key={subrecipeIdx}
+                              onClick={()=> setSelectedTab(subrecipeIdx)}
                             >
-                              <div className='tab__content' onClick={()=> setSelectedTab(subrecipeIdx)}> 
+                              <div className='tab__content'> 
                                 <Field name={`ingredients[${subrecipeIdx}].name`} placeholder='subrecipe name'/>
                               </div>
                               <Button
@@ -218,42 +219,32 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
                         </li>
                       </ul>
                       <div className='ingredients-form'>
-                        <Row className='ingredients-form-header'>
-                          <Cell columns={3}>
-                            Ingredient Name
-                          </Cell>
-                          <Cell columns={2}>
-                            Quantity
-                          </Cell>
-                          <Cell columns={1}>
-                            Unit
-                          </Cell>
-                          <Cell columns={2}>
-                            Notes
-                          </Cell>
-                          <Cell columns={3}>
-                            Original
-                          </Cell>
-                        </Row>
-                        <FieldArray name={`ingredients[${selectedTab}].ingredients`}>
-                          { (ingredientHelpers: any) => {
-                            return (
-                              <div>
-                                {
-                                  values.ingredients[selectedTab] && values.ingredients[selectedTab].ingredients.map((ingredient, index, array) => (
-                                    <div key={index} className='ingredients-form-item'>
-                                      <Row className='ingredient-detail'>
-                                        <Cell columns={3}>
-                                          <FormikFocusInput name={`ingredients[${selectedTab}].ingredients[${index}].name`} 
-                                            ref={(ref: any) => {
-                                              if(index === array.length-1 && ref && focusLast) {
-                                                ref.focus();
-                                                setFocusLast(false);
-                                              }
-                                            }}
-                                          />
-                                        </Cell>
-                                        <Cell columns={2}>
+                        <div className='ingredients-form__header'>
+                          <div>ingredient name</div>
+                          <div>quantity</div>
+                          <div>unit</div>
+                          <div>notes</div>
+                          <div>original</div>
+                        </div>
+                        <div className="ingredients-form__content">
+                          <FieldArray name={`ingredients[${selectedTab}].ingredients`}>
+                            { (ingredientHelpers: any) => {
+                              return (
+                                <>
+                                  {
+                                    values.ingredients[selectedTab] && values.ingredients[selectedTab].ingredients.map((ingredient, index, array) => (
+                                      <div className='ingredients-form__content__item' key={index}>
+                                        <FormikFocusInput name={`ingredients[${selectedTab}].ingredients[${index}].name`} 
+                                          ref={(ref: any) => {
+                                            if(index === array.length-1 && ref && focusLast) {
+                                              ref.focus();
+                                              setFocusLast(false);
+                                            }
+                                          }}
+                                          key={index}
+                                        />
+                                        
+                                        <div>
                                           <FormikInput name={`ingredients[${selectedTab}].ingredients[${index}].quantity`} type='number'/>
                                           {ingredient.unit && ingredient.quantity ? (
                                             <Dialog
@@ -261,58 +252,60 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
                                               onConvert={result => ingredientHelpers.replace(index, { ...ingredient, ...result })}
                                             />
                                           ): null}
-                                        </Cell>
-                                        <Cell columns={1}>
-                                          <Field component='select' name={`ingredients[${selectedTab}].ingredients[${index}].unit`}>
-                                            <option value=''></option>
-                                            {
-                                              MeasuresTypes.map((measure, measureIdx) => (
-                                                <option key={measureIdx} value={measure}>{measure}</option>    
-                                              ))
-                                            }
-                                          </Field>  
-                                        </Cell>
-                                        <Cell columns={2}>
-                                          <FormikInput name={`ingredients[${selectedTab}].ingredients[${index}].notes`}/>
-                                        </Cell>
-                                        <Cell columns={3}>
-                                          <FormikInput name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
-                                        </Cell>
-                                        <Cell columns={1}> 
-                                          <Button type='button' icon='clear' onClick={() => {
+                                        </div>
+                                        
+                                        <Field component='select' name={`ingredients[${selectedTab}].ingredients[${index}].unit`}>
+                                          <option value=''></option>
+                                          {
+                                            MeasuresTypes.map((measure, measureIdx) => (
+                                              <option key={measureIdx} value={measure}>{measure}</option>    
+                                            ))
+                                          }
+                                        </Field>  
+                                        
+                                        <FormikInput name={`ingredients[${selectedTab}].ingredients[${index}].notes`}/>
+                                        
+                                        <FormikInput name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
+                                        
+                                        <Button
+                                          type='button'
+                                          icon='clear'
+                                          onClick={() => {
                                             ingredientHelpers.remove(index)
                                           }}
                                           disabled={values.ingredients[selectedTab].ingredients.length === 1}
-                                          small></Button>
-                                        </Cell>
-                                      </Row>
-                                      <div className='ingredient-suggestions'>
-                                        {
-                                          ingredient.suggestions && ingredient.suggestions.map((suggestion, sugIdx) => (
-                                            <button
-                                              className='suggestion'
-                                              type='button'
-                                              key={sugIdx}
-                                              onClick={() => {
-                                                setFieldValue(
-                                                  `ingredients[${selectedTab}].ingredients[${index}]`,
-                                                  convertIngredient(ingredient, suggestion)
-                                                )
-                                              }}
-                                            >{suggestion.name}</button>
-                                          ))
-                                        }
+                                          small
+                                        />
+                                        <div className='ingredient-suggestions'>
+                                          {
+                                            ingredient.suggestions && ingredient.suggestions.map((suggestion, sugIdx) => (
+                                              <Button
+                                                className='suggestion'
+                                                type='button'
+                                                key={sugIdx}
+                                                onClick={() => {
+                                                  setFieldValue(
+                                                    `ingredients[${selectedTab}].ingredients[${index}]`,
+                                                    convertIngredient(ingredient, suggestion)
+                                                  )
+                                                }}
+                                              >{suggestion.name}</Button>
+                                            ))
+                                          }
+                                        </div>
                                       </div>
-                                    </div>
-                                  ))
-                                }
-                                <Button type='button' onClick={() => { ingredientHelpers.push({ ..._ingredient }); setFocusLast(true);}}>
-                                  add ingredient
-                                </Button>
-                              </div>
-                            )
-                          }}
-                        </FieldArray>
+                                    ))
+                                  }
+                                  <div className='ingredients-form__content__actions'>
+                                    <Button type='button' onClick={() => { ingredientHelpers.push({ ..._ingredient }); setFocusLast(true);}}>
+                                      add ingredient
+                                    </Button>
+                                  </div>
+                                </>
+                              )
+                            }}
+                          </FieldArray>
+                        </div>
                       </div>
                     </div>
                   );

recipes/src/components/RecipeForm/styles.scss

@@ -4,157 +4,106 @@
   width: 100%;
 
   .subrecipe-tabs {
+    display: flex;
+    flex-direction: column;
+    @include box();
+
     ul.tab-header {
       display: flex;
       width: 100%;
-      justify-content: space-evenly;
+      border-bottom: 3px solid #000;
 
-      .tab {
-        padding: 0 $spacing-small;
-        width: 100%;
+      li.tab {
+        flex-grow: 1;
         display: flex;
-        justify-content: space-between;
+        align-items: center;
+        padding: 0px $spacing-xs;
+        border-right: 3px solid #000;
         cursor: pointer;
-        align-self: center;
-        position: relative;
-        @include ripple($grey-200, $grey-300);
-    
-        &--selected {
-          background-color: $grey-100;
-        }
-
-        &--selected.tab span::before {
-          width: 100%;
-        }
-
-        span {
-          position: absolute;
-          display: block;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          pointer-events: none;
-        }
-
-        span::before {
-          content: "";
-          display: block;
-          position: absolute;
-          bottom: -2px;
-          left: 0;
-          width: 0;
-          height: 2px;
-        
-          -webkit-transition: all 0.4s;
-          -o-transition: all 0.4s;
-          -moz-transition: all 0.4s;
-          transition: all 0.4s;
         
-          background: $grey-600;
+        &:last-child {
+          border: 0px;
         }
 
-        input {
-          @include button();
-          line-height: 1rem;
-          font-family: 'Roboto';
-          border-bottom: 0;
+        &--selected {
+          background-color: black;
+          color: $white;
+          
+          input {
+            color: $white;
+            &::placeholder {
+              color: rgba(255, 255, 255, 0.6);
+            }
+          }
         }
 
-
-        &__content {
-          flex-basis: 90%;
-          width: 100;
-          cursor: pointer;
-          line-height: 2.5rem;
+        .tab__content {
+          flex-grow: 1;
+          input {
+            @include button();
+            width: 100%;
+            line-height: 1rem;
+            font-family: 'Roboto';
+            border-bottom: 0;
+          }
         }
-
         &--add {
-          flex-basis: 0;
-        }
-
-        &--add:hover {
-          background: transparent;
-        }
-
-        button.remove {
-          align-self: center;
-          --mdc-ripple-fg-size: 14px;
-          --mdc-ripple-left: 5px;
-          --mdc-ripple-top: 5px;
-          width: 24px;
-          height: 24px;
-          padding: 6px;
-          font-size: 12px;
-  
-          .material-icons {
-            font-size: 12px;
-          }
+          flex-grow: 0;
+          padding: 0px;
         }
       }
-    }
-    
-  }
 
-  .ingredients-form {
-    min-height: 400px;
-    
-    &-header {
-      color: $grey-600;
-      & > * {
-        @include button();
-      }
     }
 
-    &-item {
+    .ingredients-form {
+      padding: $spacing-xs;
 
-      .ingredient-detail {
-        align-items: end;
+      &__header {
+        display: grid;
+        grid-template-columns: 2.5fr 0.75fr 0.75fr 1fr 1.5fr 24px;
+        column-gap: $spacing-xs;
+        color: $grey-600;
         & > * {
-          display: flex;
+          @include button();
         }
       }
-      .cbk-light-input {
-        margin: 0;
-      }
-      
-      input {
-        line-height: 1rem;
-        width: 100%;
-      }
 
-      select {
-        width: 100%;
-        height: 1.5rem;
-        @include box();
-        @include button-reset();
-        @include button();
-        option {
-          &:focus,
-          &:checked {
-            background-color: $yellow;
+      &__content {
+        min-height: 300px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        &__item {
+          display: grid;
+          grid-template-columns: 2.5fr 0.75fr 0.75fr 1fr 1.5fr 24px;
+          column-gap: $spacing-xs;
+          
+          > div {
+            display: flex;
           }
-        }
-      }
 
-      input:disabled {
-        font-style: italic
-      }
+          .cbk-light-input {
+            margin-bottom: 0;
+          }
 
-      .ingredient-suggestions {
-        height: .7rem;
-        margin-bottom: 12px;
-        button {
-          @include button-reset();
-          text-transform: uppercase;
-          font-size: .6rem;
-          letter-spacing: .2px;
-          color: $grey-600;
-          @include ripple($grey-200, $grey-300);
+          .ingredient-suggestions {
+            height: .7rem;
+            margin-bottom: 12px;
+            button {
+              font-size: .6rem;
+              letter-spacing: .2px;
+              color: #757575;
+              line-height: 0rem;
+              padding: .5rem 0.1rem;
+              
+            }
+    
+          }
         }
-
       }
     }
+    
   }
 
   .instructions-set {