Improve Ingredients form styles

recipes/src/components/Button/index.tsx

@@ -19,7 +19,7 @@ type CBKButtonProps = {
 export default function CBKButton(props: any) {
   if (props.icon) {
     return (
-      <IconButton onClick={props.onClick} {...props}>
+      <IconButton onClick={props.onClick} {...props} >
         <Icon material icon={props.icon}/>
       </IconButton>
     );

recipes/src/components/RecipeForm/index.tsx

@@ -52,13 +52,23 @@ const SubrecipeForm = (props: any) => {
         </li>
       </ul>
       <div className='ingredients-form'>
-        <div className='ingredients-form-header'>
-          <div>Ingredient Name</div>
-          <div>Quantity</div>
-          <div>Unit</div>
-          <div>Notes</div>
-          <div>Original</div>
-        </div>
+        <Row className='ingredients-form-header'>
+          <Cell columns={4}>
+            Ingredient Name
+          </Cell>
+          <Cell columns={1}>
+            Quantity
+          </Cell>
+          <Cell columns={1}>
+            Unit
+          </Cell>
+          <Cell columns={2}>
+            Notes
+          </Cell>
+          <Cell columns={3}>
+            Original
+          </Cell>
+        </Row>
         <FieldArray
           name={`ingredients[${selectedTab}].ingredients`}
           render={ (ingredientHelpers: any) => {
@@ -66,26 +76,39 @@ const SubrecipeForm = (props: any) => {
               <div>
                 {
                   form.values.ingredients[selectedTab].ingredients.map((ingredient: Ingredient, index: number) => (
-                    <div key={index}>
-                      <div className='ingredients-form-item'>
-                        <Field name={`ingredients[${selectedTab}].ingredients[${index}].name`}/>
-                        <Field name={`ingredients[${selectedTab}].ingredients[${index}].quantity`}/>
-                        <Field component='select' name={`ingredients[${selectedTab}].ingredients[${index}].unit`}>
-                          {
-                            measurements.map((measure, measureIdx) => (
-                              <option key={measureIdx} value={measure}>{measure}</option>    
-                            ))
-                          }
-                          <option value=''></option>
-                        </Field>
-                        <Field name={`ingredients[${selectedTab}].ingredients[${index}].notes`}/>
-                        <Field name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
-                        <button type='button' onClick={() => ingredientHelpers.remove(index)}>x</button>
-                      </div>
-                      <div className='ingredients-form-suggestions'>
+                    <div key={index} className='ingredients-form-item'>
+                      <Row className='ingredient-detail'>
+                        <Cell columns={4}>
+                          <Field name={`ingredients[${selectedTab}].ingredients[${index}].name`}/>
+                        </Cell>
+                        <Cell columns={1}>
+                          <Field name={`ingredients[${selectedTab}].ingredients[${index}].quantity`}/>
+                        </Cell>
+                        <Cell columns={1}>
+                          <Field component='select' name={`ingredients[${selectedTab}].ingredients[${index}].unit`}>
+                            {
+                              measurements.map((measure, measureIdx) => (
+                                <option key={measureIdx} value={measure}>{measure}</option>    
+                              ))
+                            }
+                            <option value=''></option>
+                          </Field>  
+                        </Cell>
+                        <Cell columns={2}>
+                          <Field name={`ingredients[${selectedTab}].ingredients[${index}].notes`}/>
+                        </Cell>
+                        <Cell columns={3}>
+                          <Field name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
+                        </Cell>
+                        <Cell columns={1}>  
+                          <Button type='button' icon='clear' className='remove' onClick={() => ingredientHelpers.remove(index)}></Button>
+                        </Cell>
+                      </Row>
+                      <div className='ingredient-suggestions'>
                         {
                           ingredient.suggestions && ingredient.suggestions.map((suggestion, sugIdx) => (
                             <button
+                              className='suggestion'
                               type='button'
                               key={sugIdx}
                               onClick={() => {
@@ -101,7 +124,7 @@ const SubrecipeForm = (props: any) => {
                     </div>
                   ))
                 }
-                <button type='button' onClick={() => ingredientHelpers.push({ ..._ingredient })}>add ingredient</button>
+                <Button type='button' onClick={() => ingredientHelpers.push({ ..._ingredient })}>add ingredient</Button>
               </div>
             )
           }}

recipes/src/components/RecipeForm/styles.scss

@@ -25,14 +25,10 @@
         cursor: pointer;
         align-self: center;
         position: relative;
-        
-        &:hover {
-          background-color: rgb(248, 248, 248);
-          cursor: pointer;
-        }
+        @include ripple($grey-200, $grey-300);
     
         &--selected {
-          background-color: rgb(248, 248, 248);
+          background-color: $grey-200;
         }
 
         &--selected.tab span::before {
@@ -63,19 +59,22 @@
           -moz-transition: all 0.4s;
           transition: all 0.4s;
         
-          background: #7f7f7f;
+          background: $grey-600;
         }
 
         input {
           @include button();
+          line-height: 1rem;
           font-family: 'Roboto';
           border-bottom: 0;
         }
 
+
         &__content {
           flex-basis: 90%;
           width: 100;
           cursor: pointer;
+          line-height: 2.5rem;
         }
 
         &--add {
@@ -109,17 +108,58 @@
     min-height: 400px;
     
     &-header {
-      display: flex;
       color: $grey-600;
       & > * {
-        flex: 1;
-        align-self: center;
         @include button();
       }
     }
 
     &-item {
-      display: flex;
+
+      .ingredient-detail {
+        align-items: end;
+      }
+      input {
+        line-height: 1.5rem;
+        width: 100%;
+      }
+
+      select {
+        width: 100%;
+        height: 1.5rem;
+      }
+
+      input:disabled {
+        font-style: italic
+      }
+
+      .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);
+        }
+
+      }
+      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;
+        }
+      }
     }
   }
 }

recipes/src/styles/_mixins.scss

@@ -1,8 +1,8 @@
 @mixin ripple($color, $active-color) {
   background-position: center;
   transition: background 0.5s;
-
-  &:hover { 
+  cursor: pointer;
+  &:hover {
     background: $color radial-gradient(circle, transparent 1%, $color 1%) center/15000%;
   }
 

recipes/src/styles/_ui.scss

@@ -1,5 +1,15 @@
 $box-shadow: 0 2px 2px 0 rgba(0,0,0,.16), 0 0 2px 0 rgba(0,0,0,.12);
 
+@mixin button-reset {
+  border: none;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  box-shadow: 0;
+  outline: 0;
+}
+
 @mixin lightInput() {
   width: 100%;
   position: relative;