Improve Recipe Form UI/UX

recipes/src/components/RecipeForm/index.tsx

@@ -97,14 +97,10 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
   const [focusLast, setFocusLast] = useState(false);
   return (
   <div>
-    <h4>New form</h4>
     <Formik
       enableReinitialize
       initialValues={initialValues}
-      onSubmit={(values) => {
-        console.log(values);
-        onSubmit(values);
-      }}
+      onSubmit={onSubmit}
     >
       {
         ({setFieldValue, submitForm, values}) => {
@@ -142,7 +138,6 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
             <section>
               <Row>
                 <Cell columns={2}>
-                  {/* <FormikInput name='details.preparationTime' label='preparation time' /> */}
                   <DurationPicker
                     initialValue={values.details.preparationTime}
                     onChange={(duration)=>{ setFieldValue('details.preparationTime', duration)}} 
@@ -297,7 +292,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
                                     ))
                                   }
                                   <div className='ingredients-form__content__actions'>
-                                    <Button type='button' onClick={() => { ingredientHelpers.push({ ..._ingredient }); setFocusLast(true);}}>
+                                    <Button type='button' unelevated onClick={() => { ingredientHelpers.push({ ..._ingredient }); setFocusLast(true);}}>
                                       add ingredient
                                     </Button>
                                   </div>
@@ -317,28 +312,34 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
             <section className='instructions-set'>
               <FieldArray name='instructions'>
                 {({ remove, push }) => (
-                  <div>
+                  <>
                     {
                       values.instructions.map((instruction, instructionIdx) => (
-                        <Row key={instructionIdx}>
-                          <Cell columns={11} className='instructions-set__text'>
+                        <div key={instructionIdx}>
+                          <div className='instructions-set__text'>
                             <div className='instructions-set__text__number'>
                             {instructionIdx + 1}
                             </div>
                             <FormikTextarea name={`instructions[${instructionIdx}]`}/>
-                          </Cell>
-                          <Cell columns={1} className='instructions-set__action'>
+                          </div>
+                          <div className='instructions-set__action'>
                             <Button icon='clear' onClick={() => remove(instructionIdx)} small></Button>
-                          </Cell>
-                        </Row>
+                          </div>
+                        </div>
                       ))
                     }
-                    <Button type="button" onClick={() => push('')}>Add instruction</Button>
-                  </div>
+                    <Button type="button" onClick={() => push('')} unelevated>Add instruction</Button>
+                  </>
                 )}
               </FieldArray>
             </section>
-            <Button type='button' raised unelevated onClick={() => submitForm()} >Submit</Button>
+            
+            <section className='actions'>
+              <Button type='button' outlined>Reset</Button>
+              <Button type='button' outlined>Cancel</Button>
+              <Button type='button' raised unelevated onClick={() => submitForm()} >Submit</Button>
+
+            </section>
             </Form>
           </Grid>
         )}

recipes/src/components/RecipeForm/styles.scss

@@ -7,6 +7,7 @@
     display: flex;
     flex-direction: column;
     @include box();
+    margin: $spacing-xs 0 ;
 
     ul.tab-header {
       display: flex;
@@ -107,8 +108,13 @@
   }
 
   .instructions-set {
+    & > div {
+      display: flex;
+    }
     &__text {
       display: flex;
+      flex-grow: 1;
+
       &__number {
         padding: 0 $spacing-xs;
         @include button();
@@ -117,6 +123,13 @@
       }
     }
   }
+
+  .actions {
+    margin-top: $spacing-small;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   button.remove,
   button.cbk-convert__button {
     align-self: center;

recipes/src/containers/Recipes/Create/index.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
-import { assocPath, remove } from 'ramda';
-import  Navbar from 'components/Navbar';
+import Navbar from 'components/Navbar';
 import Input from 'components/Input';
 import Button from 'components/Button';
 import RecipeForm from 'components/RecipeForm';
-import {  } from 'react-router';
+import Spinner from 'components/Spinner';
 
 import './styles.scss';
 
-import sample_img from "../../../sample.png";
-
 import Recipe, { SubRecipe, Author, Details, _recipe, _subRecipe, _ingredient, Ingredient } from 'types/recipes';
 import { scrapeRecipe, saveRecipe } from '../services';
 
@@ -20,6 +17,7 @@ interface CreateRecipeProps {
 interface CreateRecipeState {
   scrapeUrl: string,
   form: Recipe,
+  scrapingRecipe: boolean,
 };
 
 type FormKeys = keyof Recipe | keyof SubRecipe | keyof Ingredient | keyof Author | keyof Details | number;
@@ -32,19 +30,25 @@ class CreateRecipe extends React.Component<any, CreateRecipeState> {
         ..._recipe,
       },
       scrapeUrl: '',
+      scrapingRecipe: false,
     }
   }
 
   scrapeRecipe = () => {
-    scrapeRecipe(this.state.scrapeUrl).then(recipe => {
-      this.setState({
-        form: {
-          ...recipe,
-          details: {
-            ...recipe.details,
-            url: this.state.scrapeUrl,
+    this.setState({
+      scrapingRecipe: true
+    }, () => {
+      scrapeRecipe(this.state.scrapeUrl).then(recipe => {
+        this.setState({
+          scrapingRecipe: false,
+          form: {
+            ...recipe,
+            details: {
+              ...recipe.details,
+              url: this.state.scrapeUrl,
+            }
           }
-        }
+        })
       })
     })
   }
@@ -61,9 +65,12 @@ class CreateRecipe extends React.Component<any, CreateRecipeState> {
   }
 
   render() {
-    const { scrapeUrl, form } = this.state; 
+    const { scrapeUrl, form, scrapingRecipe } = this.state; 
     return (
       <div>
+        {
+          scrapingRecipe && (<Spinner/>)
+        }
         <Navbar
           title="Create a recipe"
         >
@@ -72,7 +79,7 @@ class CreateRecipe extends React.Component<any, CreateRecipeState> {
             value={scrapeUrl}
             onChange={(e: any)=> this.setState({scrapeUrl: e.currentTarget.value})}
           />
-          <Button onClick={this.scrapeRecipe}>Scrape</Button>
+          <Button onClick={this.scrapeRecipe} outlined>Scrape</Button>
         </Navbar>
         
         <div className="cbk-create-recipe">

recipes/src/containers/Recipes/Create/styles.scss

@@ -2,9 +2,9 @@
 
 .cbk-create-recipe {
     margin: $spacing-large;
-    padding: $spacing-small;
     background-color: white;
-
+    @include box();
+    
     .mdc-text-field,
     .mdc-select {
         width: 100%;

recipes/src/styles/app.scss

@@ -62,7 +62,6 @@ h5 {
   font-size: $font-size-large;
   font-weight: $font-weight-bold;
   letter-spacing: $letter-spacing-enhanced;
-  text-shadow: 1px 1px 1px $yellow;
 }
 
 code {

recipes/src/types/recipes.ts

@@ -33,7 +33,7 @@ export const _ingredient: Ingredient = {
 
 export const _subRecipe: SubRecipe = {
   name: '',
-  ingredients: [_ingredient]
+  ingredients: [{ ..._ingredient }]
 };
 
 export const _recipe: Recipe = {
@@ -48,7 +48,7 @@ export const _recipe: Recipe = {
     cookingTime: '',
     servings: 0
   },
-  ingredients: [_subRecipe],
+  ingredients: [ {..._subRecipe} ],
   instructions: [ '' ],
   name: '',
   summary: '',