diff --git a/src/assets/show-ingredients.svg b/src/assets/show-ingredients.svg
new file mode 100644
index 0000000..179eb12
--- /dev/null
+++ b/src/assets/show-ingredients.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/src/components/meals/EditMealPage.vue b/src/components/meals/EditMealPage.vue
index 69a0f8c..484a524 100644
--- a/src/components/meals/EditMealPage.vue
+++ b/src/components/meals/EditMealPage.vue
@@ -11,19 +11,33 @@
Recipes
- -
-
-
-
+ -
+
+
+
+
-
-
- servings
-
+
+
+ servings
+
+
+
+
+
+
-
+
@@ -45,6 +59,7 @@
@@ -250,7 +284,7 @@ li {
font-style: italic;
}
-.delete-button {
+.icon-button {
background: none;
border: none;
cursor: pointer;
@@ -258,9 +292,28 @@ li {
padding: 0.5em;
}
-.delete-button:hover {
+.icon-button:hover {
/* Invert the colors of the trash icon */
filter: invert(1);
}
+.show-ingredient-checkbox {
+ display: none;
+}
+
+.show-ingredient-checkbox + label {
+ cursor: pointer;
+ background-color: #fff;
+ padding: 0.5em;
+ border-radius: 1em;
+}
+
+.show-ingredient-checkbox + label:hover {
+ background-color: #eee;
+}
+
+.show-ingredient-checkbox:checked + label {
+ filter: invert(1);
+}
+
\ No newline at end of file