From 1903d50e51a88404b60c67e41a695a779d30e812 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sun, 12 May 2024 17:24:29 +1000
Subject: [PATCH] Iconography

---
 src/assets/edit-off.svg                        |  5 +++++
 src/assets/edit.svg                            |  5 +++++
 .../ingredients/EditableIngredientsPanel.vue   | 18 +++++++++++++++---
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/edit-off.svg
 create mode 100644 src/assets/edit.svg

diff --git a/src/assets/edit-off.svg b/src/assets/edit-off.svg
new file mode 100644
index 0000000..4b3391b
--- /dev/null
+++ b/src/assets/edit-off.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 10L12.2581 12.4436C12.6766 12.7574 13.2662 12.6957 13.6107 12.3021L20 5" stroke="#222222" stroke-linecap="round"/>
+<path d="M21 12C21 13.8805 20.411 15.7137 19.3156 17.2423C18.2203 18.7709 16.6736 19.9179 14.893 20.5224C13.1123 21.1268 11.187 21.1583 9.38744 20.6125C7.58792 20.0666 6.00459 18.9707 4.85982 17.4789C3.71505 15.987 3.06635 14.174 3.00482 12.2945C2.94329 10.415 3.47203 8.56344 4.51677 6.99987C5.56152 5.4363 7.06979 4.23925 8.82975 3.57685C10.5897 2.91444 12.513 2.81996 14.3294 3.30667" stroke="#222222" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/edit.svg b/src/assets/edit.svg
new file mode 100644
index 0000000..7d955aa
--- /dev/null
+++ b/src/assets/edit.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/ingredients/EditableIngredientsPanel.vue b/src/components/ingredients/EditableIngredientsPanel.vue
index 9184ac1..a81b23d 100644
--- a/src/components/ingredients/EditableIngredientsPanel.vue
+++ b/src/components/ingredients/EditableIngredientsPanel.vue
@@ -1,10 +1,22 @@
 <template>
 
 <div>
-    <button v-if="editing" @click="$emit('on-add')">Add Ingredient</button>
-    <button @click="toggleEditing">{{ editing ? 'Finished Editing' : 'Edit' }}</button>
+    <button v-if="editing" @click="$emit('on-add')">
+        <img class="icon" :src="require('@/assets/add-cart.svg')" /> <br />
+        Add Ingredient
+    </button>
+    <button @click="toggleEditing">
+        <span v-if="editing">
+            <img class="icon" :src="require('@/assets/edit-off.svg')" /> <br />
+            Done Editing
+        </span>
+        <span v-else>
+            <img class="icon" :src="require('@/assets/edit.svg')" /> <br />
+            Edit My List
+        </span>
+    </button>
     <ul>
-        <li v-for="ingredient in ingredients" :key="ingredient.id">
+        <li v-for="ingredient in ingredients" :key="ingredient">
             <div v-if="editing">
                 <p class="ingredient-line">
                     <ingredient-line