ingredient and recipie collapse design

src/scripts/components/AddRecipie.js

@@ -20,6 +20,7 @@ let AddRecipie = ({dispatch}) => {
         type="text"
         className="c-recipie__control__textbox"
         ref={(node) => {input=node}}
+        placeholder="Add a recipie"
       />
     <button type="submit" className="c-recipie__control__submit">+</button>
       </form>

src/scripts/components/Ingredient.js

@@ -1,14 +1,29 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import '../../styles/css/Ingredient.css';
 
 let Ingredient = ({ingredient}) => {
   return(
     <li className="c-ingredient__item">
     <span className="c-ingredient__name">{ingredient.name}</span>
-    <button className="c-ingredient__delete">x</button>
-    <button className="c-ingredient__edit">Edit</button>
+    <svg
+      className="c-ingredient__delete"
+      onClick={()=>{}}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 8 8">
+      <use xlinkHref="#trash"></use>
+    </svg>
+    <svg
+      className="c-ingredient__edit"
+      onClick={()=>{}}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 8 8">
+      <use xlinkHref="#pencil"></use>
+    </svg>
     </li>
   )
 }
 
+Ingredient.propTypes = {
+  ingredient: PropTypes.object.isRequired
+}
 export default Ingredient;

src/scripts/components/IngredientList.js

@@ -24,14 +24,15 @@ let IngredientList =({recipie,dispatch})=> {
       <section className="o-ingredient__section">
         <header className="c-ingredient__header">
           <h3 className="c-ingredient__title">Ingredients</h3>
+          <div className="c-add__ingredient">
           <form className="c-ingredient__new__form" onSubmit={add}>
             <input
               type="text"
               className="c-ingredient__add--editable"
               ref={(node) => {input=node}}>
             </input>
             <button className="c-ingredient__add" type="submit">+</button>
-          </form>
+          </form></div>
         </header>
         <ul className="c-ingredient__list">
           {ingredients}
@@ -41,6 +42,15 @@ let IngredientList =({recipie,dispatch})=> {
 
 }
 
+IngredientList.propTypes = {
+  recipie: PropTypes.shape(
+      {
+        id: PropTypes.number.isRequired,
+        ingredients: PropTypes.array.isRequired
+      }
+  ).isRequired
+}
+
 IngredientList=connect()(IngredientList);
 
 export default IngredientList;

src/scripts/components/Recipie.js

@@ -19,11 +19,14 @@ let Recipie = ({recipie,dispatch}) => {
     let recipieHeader=(recipie)=>{
       let header;
       let ingredientList;
+      let collapsedClass="";
       if(!recipie.collapsed){
-        ingredientList=<IngredientList recipie={recipie}></IngredientList>
+        ingredientList=<IngredientList recipie={recipie}></IngredientList>;
+      }else{
+        collapsedClass="c-recipie--collapsed";        
       }
       if(recipie.editable){
-        header=<li className="c-recipie">
+        header=<li className={"c-recipie " + collapsedClass}>
           <form className="c-recipie__update--form" onSubmit={updateItem}>
             <input
               className="c-recipie__name--editable"
@@ -45,7 +48,7 @@ let Recipie = ({recipie,dispatch}) => {
           {ingredientList}
         </li>;
       }else{
-        header=<li className="c-recipie">
+        header=<li className={"c-recipie " + collapsedClass}>
           <header className="c-recipie__header">
             <h2 className="c-recipie__name" onClick={recipie.toggleIngredients}>{recipie.name}</h2>
             <svg

src/styles/css/AddRecipie.css

@@ -8,6 +8,8 @@
   font-size: 1.5em; }
   .c-recipie__control__textbox:focus {
     background-color: #E0EDE2; }
+  .c-recipie__control__textbox::-webkit-input-placeholder {
+    color: #E0EDE2; }
   @media (min-width: 400px) {
     .c-recipie__control__textbox {
       width: 85%; } }

src/styles/css/Ingredient.css

@@ -1,7 +1,30 @@
 .c-ingredient__item {
-  padding: 5px;
-  margin-bottom: 5px;
   display: flex;
-  background-color: rgba(255, 255, 255, 0.2); }
+  margin-bottom: 8px;
+  padding: 5px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 0.6); }
+  .c-ingredient__item .c-ingredient__name {
+    color: #293351; }
   .c-ingredient__item .c-ingredient__delete {
     margin-left: auto; }
+  .c-ingredient__item .c-ingredient__delete {
+    font-size: 1.1em;
+    border: 0;
+    margin-left: auto;
+    width: 16px;
+    height: 16px;
+    fill: #ABB2C4; }
+    .c-ingredient__item .c-ingredient__delete:hover {
+      fill: #3A4973;
+      cursor: pointer; }
+  .c-ingredient__item .c-ingredient__edit {
+    font-size: 1.1em;
+    border: 0;
+    fill: #ABB2C4;
+    margin: auto 15px;
+    width: 16px;
+    height: 16px; }
+    .c-ingredient__item .c-ingredient__edit:hover {
+      cursor: pointer;
+      fill: #3A4973; }

src/styles/css/IngredientList.css

@@ -2,16 +2,29 @@
   padding: 5px; }
   .o-ingredient__section .c-ingredient__header {
     display: flex;
-    margin-bottom: 10px; }
+    margin: 10px auto; }
   .o-ingredient__section .c-ingredient__title {
-    color: #fff;
+    color: #3A4973;
     margin: 0 5px; }
-  .o-ingredient__section .c-ingredient__new__form {
+  .o-ingredient__section .c-add__ingredient {
     display: flex;
-    margin-left: auto;
-    width: 60%; }
+    margin-left: auto; }
   .o-ingredient__section .c-ingredient__add--editable {
-    width: 80%; }
+    border: 0;
+    border-radius: 5px 0 0 5px;
+    padding: 2px;
+    width: 80%;
+    background-color: rgba(217, 220, 228, 0.8);
+    font-size: 1.2em;
+    color: #3A4973; }
+  .o-ingredient__section .c-ingredient__add {
+    border: 0;
+    border-radius: 0 5px 5px 0;
+    padding: 2px;
+    width: 20%;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #3A8544;
+    font-size: 1.2em; }
   .o-ingredient__section .c-ingredient__list {
     list-style: none;
     padding: 0; }

src/styles/css/Recipie.css

@@ -2,14 +2,16 @@
   background-color: #7E88A4;
   background-color: rgba(126, 136, 164, 0.8);
   border-radius: 5px;
-  margin-bottom: 10px; }
+  margin-bottom: 10px;
+  position: relative; }
   .c-recipie .c-recipie__header {
     border-radius: 5px;
     background-color: #3a4973;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    padding: 5px; }
+    padding: 5px;
+    padding-left: 25px; }
   .c-recipie .c-recipie__name {
     font-size: 1.5em;
     padding: 5px;
@@ -19,6 +21,16 @@
     color: rgba(255, 255, 255, 0.8);
     flex: 99;
     cursor: pointer; }
+    .c-recipie .c-recipie__name:after {
+      content: '';
+      border: 8px solid transparent;
+      border-top: 8px solid #ABB2C4;
+      width: 0;
+      height: 0;
+      display: block;
+      margin-left: -25px;
+      margin-top: -16px;
+      position: absolute; }
   .c-recipie .c-recipie__update--form {
     flex: 99; }
   .c-recipie .c-recipie__name--editable {
@@ -62,3 +74,14 @@
     .c-recipie .c-recipie__edit:hover {
       cursor: pointer;
       fill: #D9DCE4; }
+
+.c-recipie--collapsed .c-recipie__name:after {
+  content: '';
+  border: 8px solid transparent;
+  border-left: 8px solid #59678B;
+  width: 0;
+  height: 0;
+  display: block;
+  margin-left: -20px;
+  margin-top: -20px;
+  position: absolute; }

src/styles/scss/AddRecipie.scss

@@ -15,6 +15,9 @@
   &:focus {
     background-color: $color-secondary-2-1;
   }
+  &::-webkit-input-placeholder{
+    color: $color-secondary-2-1;
+  }
   @media (min-width: 400px) {
     width: 85%;
   }

src/styles/scss/Ingredient.scss

@@ -1,11 +1,42 @@
-@import "settings";
+@import 'settings';
 
-.c-ingredient__item{
-  padding: 5px;
-  margin-bottom: 5px;
+.c-ingredient__item {
   display: flex;
-  background-color: transparentize($color-white, .8);
+
+  margin-bottom: 8px;
+  padding: 5px;
+  border-radius: 3px;
+  background-color: transparentize($color-white, .4);
+
+  .c-ingredient__name {
+    color: darken($color-secondary-1-4, 10%);
+  }
+
   .c-ingredient__delete {
     margin-left: auto;
   }
+  .c-ingredient__delete{
+    font-size: 1.1em;
+    border: 0;
+    margin-left: auto;
+    width: 16px;
+    height: 16px;
+    fill: $color-secondary-1-2;
+    &:hover{
+      fill: $color-secondary-1-4;
+      cursor: pointer;
+    }
+  }
+  .c-ingredient__edit{
+    font-size: 1.1em;
+    border: 0;
+    fill: $color-secondary-1-2;
+    margin: auto 15px;
+    width: 16px;
+    height: 16px;
+    &:hover{
+      cursor: pointer;
+      fill: $color-secondary-1-4;
+    }
+  }
 }

src/styles/scss/IngredientList.scss

@@ -2,24 +2,40 @@
 
 .o-ingredient__section {
   padding: 5px;
+
   .c-ingredient__header {
     display: flex;
-    margin-bottom: 10px;
+    margin: 10px auto;
   }
 
   .c-ingredient__title {
-    color: $color-white;
+    color: $color-secondary-1-4;
     margin: 0 5px;
   }
-  .c-ingredient__new__form{
+
+  .c-add__ingredient {
     display: flex;
     margin-left: auto;
-    width: 60%;
   }
+
   .c-ingredient__add--editable{
+    border: 0;
+    border-radius: 5px 0 0 5px;
+    padding: 2px;
     width: 80%;
+    background-color: transparentize($color-secondary-1-1, .2);
+    font-size: 1.2em;
+    color: $color-secondary-1-4;
+  }
+  .c-ingredient__add {
+    border: 0;
+    border-radius: 0 5px 5px 0;
+    padding: 2px;
+    width: 20%;
+    background-color: transparentize($color-white, .2);
+    color: $color-secondary-2-4;
+    font-size: 1.2em;
   }
-
   .c-ingredient__list{
     list-style: none;
     padding: 0;

src/styles/scss/Recipie.scss

@@ -5,6 +5,9 @@
     background-color: transparentize($color-secondary-1-0,.2);
     border-radius: 5px;
     margin-bottom: 10px;
+    position: relative;
+
+
 
     .c-recipie__header{
     border-radius: 5px;
@@ -13,9 +16,22 @@
     align-items: center;
     justify-content: flex-start;
     padding: 5px;
+    padding-left: 25px;
+
   }
 
   .c-recipie__name{
+    &:after {
+      content: '';
+      border: 8px solid transparent;
+      border-top: 8px solid $color-secondary-1-2;
+      width: 0;
+      height: 0;
+      display: block;
+      margin-left: -25px;
+      margin-top: -16px;
+      position: absolute;
+    }
     font-size: 1.5em;
     padding: 5px;
     margin: 0;
@@ -82,3 +98,18 @@
     }
   }
 }
+.c-recipie--collapsed{
+  .c-recipie__name{
+    &:after {
+      content: '';
+      border: 8px solid transparent;
+      border-left: 8px solid $color-secondary-1-3;
+      width: 0;
+      height: 0;
+      display: block;
+      margin-left: -20px;
+      margin-top: -20px;
+      position: absolute;
+    }
+  }
+}