Toggle deleteMode with button in Header

src/components/Form/ImageUnsplash/ImageUnsplash.vue

@@ -87,7 +87,7 @@ export default {
   }
 
   .error {
-    color: #d63031;
+    color: @text-error;
     text-align: center;
   }
 

src/components/Grid/GridItem.vue

@@ -1,6 +1,6 @@
 <template>
   <article class="grid-item">
-    <DeleteItem :item="item" />
+    <DeleteItem v-if="deleteMode" :item="item" />
     <router-link :to="`/fruit/${item.id}`">
       <div class="thumbnail">
         <img :src="item.image" :alt="item.name" />
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import DeleteItem from "./DeleteItem";
 
 export default {
@@ -28,6 +29,9 @@ export default {
   props: {
     item: Object
   },
+  computed: {
+    ...mapState(["deleteMode"])
+  },
   filters: {
     noDecimal(value) {
       return parseInt(value).toFixed();

src/components/Header.vue

@@ -5,13 +5,28 @@
       <h1>Fruits</h1>
     </router-link>
 
-    <button class="action-btn" @click="() => $store.commit('toggleModal')">+</button>
+    <div class="actions">
+      <button
+        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>
+    </div>
   </header>
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
-  name: "Header"
+  name: "Header",
+  computed: {
+    ...mapState(["deleteMode"])
+  }
 };
 </script>
 
@@ -50,19 +65,35 @@ header {
       }
     }
 
-    .action-btn {
-      width: 42px;
-      height: 42px;
-      border: none;
-      border-radius: 50%;
-      color: @color-2;
-      font-size: 28px;
-      font-weight: lighter;
-      text-align: center;
-      background: linear-gradient(112.4deg, #1c9797 11.05%, #147171 89.93%);
+    .actions {
+      display: flex;
+      align-items: center;
 
-      &:hover {
-        background: linear-gradient(0deg, #1c9797 11.05%, #147171 89.93%);
+      .action-btn {
+        width: 42px;
+        height: 42px;
+        border: none;
+        border-radius: 50%;
+        color: @color-2;
+        font-size: 28px;
+        font-weight: lighter;
+        text-align: center;
+        margin-left: 1rem;
+
+        &--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%);
+          }
+        }
       }
     }
   }