Improve form UI

recipes/src/components/DurationPicker/styles.scss

@@ -1,11 +1,21 @@
+@import 'styles/_variables.scss';
+
 .cbk-duration {
+  label {
+    @include display();
+    text-transform: uppercase;
+  }
   &__input {
     display: flex;
     .cbk-light-input {
+      input {
+        text-align: center;
+      }
       label {
         position: absolute;
         right: 25px;
         top: 5px;
+        color: $grey-500;
       }
     }
   }

recipes/src/components/Input/styles.scss

@@ -68,6 +68,9 @@
     @include display();
     text-transform: uppercase;
   }
+  input:disabled {
+    border-color: $grey-400;
+  }
 }
 
 .cbk-input-2 {

recipes/src/components/RecipeForm/index.tsx

@@ -321,17 +321,20 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
             </section>
         
             <h5>Instructions</h5>
-            <section>
+            <section className='instructions-set'>
               <FieldArray name='instructions'>
                 {({ remove, push }) => (
                   <div>
                     {
                       values.instructions.map((instruction, instructionIdx) => (
                         <Row key={instructionIdx}>
-                          <Cell columns={11}>
-                            <Field name={`instructions[${instructionIdx}]`}/>
+                          <Cell columns={11} className='instructions-set__text'>
+                            <div className='instructions-set__text__number'>
+                            {instructionIdx + 1}
+                            </div>
+                            <FormikTextarea name={`instructions[${instructionIdx}]`}/>
                           </Cell>
-                          <Cell columns={1}>
+                          <Cell columns={1} className='instructions-set__action'>
                             <Button icon='clear' onClick={() => remove(instructionIdx)} small></Button>
                           </Cell>
                         </Row>

recipes/src/components/RecipeForm/styles.scss

@@ -126,6 +126,15 @@
       select {
         width: 100%;
         height: 1.5rem;
+        @include box();
+        @include button-reset();
+        @include button();
+        option {
+          &:focus,
+          &:checked {
+            background-color: $yellow;
+          }
+        }
       }
 
       input:disabled {
@@ -147,6 +156,18 @@
       }
     }
   }
+
+  .instructions-set {
+    &__text {
+      display: flex;
+      &__number {
+        padding: 0 $spacing-xs;
+        @include button();
+        line-height: 1.5rem;
+        color: $grey-600;
+      }
+    }
+  }
   button.remove,
   button.cbk-convert__button {
     align-self: center;

recipes/src/components/Select/index.tsx

@@ -43,8 +43,8 @@ export const CBKSelect2: React.FunctionComponent<CBKSelectProps> = (props) => (
   <select defaultValue={props.value || ''} className='cbk-select-2' onChange={props.onChange} placeholder={props.label}>
     <option value='' disabled> {props.label} </option>
     { 
-      props.options.map(option => (
-        <option key={option.value} disabled={option.disabled} value={option.value}> {option.label} </option>
+      props.options.map((option, key) => (
+        <option key={key} disabled={option.disabled} value={option.value}> {option.label} </option>
       ))
     }
   </select>

recipes/src/styles/_spacing.scss

@@ -1,3 +1,4 @@
+$spacing-xs: 8px;
 $spacing-small: 16px;
 $spacing-regular: 24px;
 $spacing-large: 48px;

recipes/src/styles/_ui.scss

@@ -22,7 +22,7 @@ $phone: "(max-width: 839px)";
     width: 100%;
     border: 0;
     padding: 4px 0;
-    border-bottom: 1px solid #000;
+    border-bottom: 1px solid #9E9E9E;
     background-color: transparent;
     resize: vertical;
   }
@@ -44,7 +44,7 @@ $phone: "(max-width: 839px)";
     bottom: 0px;
     left: 0;
     width: 0;
-    height: 2px;
+    height: 1px;
   
     -webkit-transition: all 0.4s;
     -o-transition: all 0.4s;

recipes/src/styles/app.scss

@@ -59,9 +59,10 @@ h4:after {
 h5 {
   margin: 0;
   font-family: $font-family-display;
-  font-size: $font-size-regular;
+  font-size: $font-size-large;
   font-weight: $font-weight-bold;
   letter-spacing: $letter-spacing-enhanced;
+  text-shadow: 1px 1px 1px $yellow;
 }
 
 code {