Add fruit to API

src/components/Header.vue

@@ -7,13 +7,18 @@
 
     <div class="actions">
       <button
+        :disabled="modalIsOpen"
         class="action-btn action-btn--delete"
         @click="() => $store.commit('toggleDeleteMode')"
       >
         {{ deleteMode ? "&#x1F6AB;" : "&#x1f5d1;" }}
       </button>
-      <button class="action-btn action-btn--add" @click="() => $store.commit('toggleModal')">
-        +
+      <button
+        :disabled="deleteMode"
+        class="action-btn action-btn--add"
+        @click="() => $store.commit('toggleModal')"
+      >
+        {{ modalIsOpen ? "&#x1F6AB;" : "&#x2795;" }}
       </button>
     </div>
   </header>
@@ -25,7 +30,7 @@ import { mapState } from "vuex";
 export default {
   name: "Header",
   computed: {
-    ...mapState(["deleteMode"])
+    ...mapState(["deleteMode", "modalIsOpen"])
   }
 };
 </script>
@@ -75,24 +80,23 @@ header {
         border: none;
         border-radius: 50%;
         color: @color-2;
-        font-size: 28px;
+        font-size: 24px;
         font-weight: lighter;
         text-align: center;
         margin-left: 1rem;
+        padding-top: 2px;
+        background: lighten(#cecece, 10%);
+
+        &:disabled {
+          opacity: 0.4;
+        }
 
         &--delete {
           border: 1px solid @text-error;
-          background: lighten(#cecece, 10%);
-          font-size: 24px;
-          padding-top: 2px;
         }
 
         &--add {
-          background: linear-gradient(112.4deg, #1c9797 11.05%, #147171 89.93%);
-
-          &:hover {
-            background: linear-gradient(0deg, #1c9797 11.05%, #147171 89.93%);
-          }
+          border: 1px solid @color-1;
         }
       }
     }