From 94279b74c94a0037c829d058ae7ea075e039f338 Mon Sep 17 00:00:00 2001
From: Jan-Niklas Weghorn <jrester379@gmail.com>
Date: Fri, 10 Nov 2023 11:17:20 +0100
Subject: [PATCH 1/5] improve dark theme

---
 cookbook/static/themes/tandoor_dark.min.css   | 172 +++++++++++++-----
 cookbook/templates/base.html                  |  36 ++--
 vue/src/apps/MealPlanView/MealPlanView.vue    |   4 +
 .../apps/RecipeEditView/RecipeEditView.vue    |   2 +-
 4 files changed, 150 insertions(+), 64 deletions(-)

diff --git a/cookbook/static/themes/tandoor_dark.min.css b/cookbook/static/themes/tandoor_dark.min.css
index 67cc1ac1..0d2771b5 100644
--- a/cookbook/static/themes/tandoor_dark.min.css
+++ b/cookbook/static/themes/tandoor_dark.min.css
@@ -241,7 +241,7 @@ a {
 }
 
 a:hover {
-    color: #000;
+    color: #FFF;
     text-decoration: underline
 }
 
@@ -1813,8 +1813,8 @@ pre code {
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
+    color: #fff;
+    background-color: rgb(20,20,20);
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: .25rem;
@@ -1835,8 +1835,8 @@ pre code {
 }
 
 .form-control:focus {
-    color: #495057;
-    background-color: #fff;
+    color: #fff;
+    background-color: rgb(20,20,20);
     border-color: #0014b7;
     outline: 0;
     box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .25)
@@ -1868,8 +1868,8 @@ pre code {
 }
 
 .form-control:disabled, .form-control[readonly] {
-    background-color: #e9ecef;
-    opacity: 1
+    background-color: #5D5D5D;
+    opacity: 1;
 }
 
 select.form-control:focus::-ms-value {
@@ -2504,7 +2504,7 @@ a.btn.disabled, fieldset:disabled a.btn {
 
 .btn-light {
     color: #212529;
-    background-color: #cfd5cd;
+    background-color: #535353;
     border-color: #cfd5cd
 }
 
@@ -2570,7 +2570,7 @@ a.btn.disabled, fieldset:disabled a.btn {
 }
 
 .btn-outline-primary.focus, .btn-outline-primary:focus {
-    box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .5)
+    box-shadow: 0 0 0 .2rem var(--primary)
 }
 
 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
@@ -3603,10 +3603,10 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
+    color: #fff;
     text-align: center;
     white-space: nowrap;
-    background-color: #e9ecef;
+    background-color: #3F3F3F;
     border: 1px solid #ced4da;
     border-radius: .25rem
 }
@@ -3927,10 +3927,11 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     width: 100%;
     height: 1.4rem;
     padding: 0;
-    background-color: transparent;
+    background-color: transparent !important;
     -webkit-appearance: none;
     -moz-appearance: none;
-    appearance: none
+    appearance: none;
+    border: transparent !important;
 }
 
 .custom-range:focus {
@@ -3938,15 +3939,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 1px #000, 0 0 0 .2rem rgba(0, 6, 55, .25)
 }
 
 .custom-range:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 1px #000, 0 0 0 .2rem rgba(0, 6, 55, .25)
 }
 
 .custom-range:focus::-ms-thumb {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 1px #000, 0 0 0 .2rem rgba(0, 6, 55, .25)
 }
 
 .custom-range::-moz-focus-outer {
@@ -3974,7 +3975,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range::-webkit-slider-thumb:active {
-    background-color: #0019ea
+    background-color: var(--secondary)
 }
 
 .custom-range::-webkit-slider-runnable-track {
@@ -3982,7 +3983,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     height: .5rem;
     color: transparent;
     cursor: pointer;
-    background-color: #dee2e6;
+    background-color: #000;
     border-color: transparent;
     border-radius: 1rem
 }
@@ -4007,7 +4008,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range::-moz-range-thumb:active {
-    background-color: #0019ea
+    background-color: var(--secondary)
 }
 
 .custom-range::-moz-range-track {
@@ -4015,9 +4016,9 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     height: .5rem;
     color: transparent;
     cursor: pointer;
-    background-color: #dee2e6;
+    background-color: rgb(20,20,20);
     border-color: transparent;
-    border-radius: 1rem
+    border-radius: 1rem;
 }
 
 .custom-range::-ms-thumb {
@@ -4042,7 +4043,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range::-ms-thumb:active {
-    background-color: #0019ea
+    background-color: var(--secondary)
 }
 
 .custom-range::-ms-track {
@@ -4144,8 +4145,8 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
-    color: #495057;
-    background-color: #fff;
+    color: #fff;
+    background-color: #303030;
     border-color: #dee2e6 #dee2e6 #fff
 }
 
@@ -4500,19 +4501,19 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .navbar-dark .navbar-nav .nav-link {
-    color: hsla(0, 0%, 18%, .5)
+    color: hsla(0, 0%, 5%, .5)
 }
 
 .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
-    color: hsla(0, 0%, 18%, .75)
+    color: hsla(0, 0%, 5%, .75)
 }
 
 .navbar-dark .navbar-nav .nav-link.disabled {
-    color: hsla(0, 0%, 18%, .25)
+    color: hsla(0, 0%, 5%, .25)
 }
 
 .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
-    color: #2e2e2e
+    color: #1E1E1E
 }
 
 .navbar-dark .navbar-toggler {
@@ -4776,7 +4777,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     padding: .75rem 1rem;
     margin-bottom: 1rem;
     list-style: none;
-    background-color: #e9ecef;
+    background-color: #303030;
     border-radius: .25rem
 }
 
@@ -4846,16 +4847,16 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 .page-item.active .page-link {
     z-index: 1;
     color: #fff;
-    background-color: #b98766;
+    background-color: var(--primary);
     border-color: #b98766
 }
 
 .page-item.disabled .page-link {
-    color: #6c757d;
+    color: #fff;
     pointer-events: none;
     cursor: auto;
-    background-color: #fff;
-    border-color: #dee2e6
+    background-color: #303030;
+    border-color: #303030
 }
 
 .pagination-lg .page-link {
@@ -5053,7 +5054,7 @@ a.badge-dark.focus, a.badge-dark:focus {
 .jumbotron {
     padding: 2rem 1rem;
     margin-bottom: 2rem;
-    background-color: #f7f7f7;
+    background-color: #3F3F3F;
     border-radius: .3rem
 }
 
@@ -5313,7 +5314,7 @@ a.badge-dark.focus, a.badge-dark:focus {
     display: block;
     padding: .75rem 1.25rem;
     margin-bottom: -1px;
-    background-color: #fff;
+    background-color: #3F3F3F;
     border: 1px solid rgba(0, 0, 0, .125)
 }
 
@@ -6164,7 +6165,8 @@ a.close.disabled {
 
 .popover-body {
     padding: .5rem .75rem;
-    color: #212529
+    color: #fff;
+    background-color: #242424;
 }
 
 .carousel {
@@ -10408,11 +10410,11 @@ footer a:hover {
 
 .form-control {
     font-size: 14px;
-    background-color: rgb(20 20 20);
+    background-color: rgb(20,20,20);
 }
 
 .form-control, .form-control:focus {
-    background-color: #f6f7fb;
+    background-color: rgb(20,20,20);
     border: none
 }
 
@@ -10456,24 +10458,72 @@ footer a:hover {
     background-color: transparent !important;
 }
 
-textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([class="select2-search__field"]):not([class="vue-treeselect__input"]), select {
+textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([class="select2-search__field"]):not([class="vue-treeselect__input"]):not([class="custom-range"]), select {S
     background-color: rgb(20 20 20);
     color: #fff;
     border-radius: .25rem !important;
     border: 1px solid #ced4da !important;
 }
 
-.multiselect__tag, .multiselect__option--highlight, .multiselect__option--highlight:after, .vue-treeselect__multi-value-item {
-    background-color: #cfd5cd !important;
-    color: #212529 !important;
+.b-calendar-grid-help,
+.v-note-op, 
+.content-input-wrapper, 
+.auto-textarea-input, 
+.bottom-action-bar,
+.custom-select,
+.multiselect__tag,
+.multiselect__tags, 
+.multiselect__input, 
+.multiselect__option--highlight, 
+.multiselect__option--highlight:after, 
+.multiselect__option--selected, 
+.multiselect__option--selected:after, 
+.vue-treeselect__multi-value-item {
+    background-color: rgb(20, 20, 20) !important;
+    color: #fff !important;
 }
 
 .multiselect__tag-icon:hover, .multiselect__tag-icon:focus {
-    background-color: #a7240e !important;
+    background-color: rgb(20, 20, 20) !important;
 }
 
 .multiselect__tag-icon:after, .vue-treeselect__icon vue-treeselect__value-remove, .vue-treeselect__value-remove {
-    color: #212529 !important
+    color: rgb(20, 20, 20) !important
+}
+
+.multiselect__input::-webkit-input-placeholder {
+    color: #fff !important;
+}
+
+.multiselect__input::-moz-placeholder {
+    color: #fff !important;
+}
+
+.multiselect__input:-ms-input-placeholder {
+    color: #fff !important;
+}
+
+.multiselect__input::-ms-input-placeholder {
+    color: #fff !important;
+}
+
+.multiselect__input::placeholder {
+    color: #fff !important;
+}
+
+.multiselect__single, .multiselect__content-wrapper {
+    background-color: rgb(20,20,20) !important;
+}
+
+.multiselect__content-wrapper {
+    color: #7A7A7A;
+}
+
+.custom-select {
+    background-color: rgb(20, 20, 20) !important;
+    color: #fff !important;
+    /* add the arrow on the right */
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
 }
 
 .form-control-search {
@@ -10483,4 +10533,36 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
 .ghost {
     opacity: 0.5 !important;
     background: #b98766 !important;
-}
\ No newline at end of file
+}
+
+/* Meal-Plan */
+
+.cv-header {
+    background-color: #303030 !important;
+}
+
+.cv-weeknumber, .cv-header-day {
+    background-color: #303030 !important;
+    color: #fff !important;
+}
+
+.cv-day.past {
+    background-color: #333333 !important;
+}
+
+.cv-day.today {
+    background-color: var(--primary) !important;
+}
+
+.cv-day.outsideOfMonth {
+    background-color: #0d0d0d !important;
+}
+
+.cv-item {
+    background-color: #4E4E4E !important;
+}
+
+.dropdown-item {
+    color: #fff !important;
+}
+
diff --git a/cookbook/templates/base.html b/cookbook/templates/base.html
index 56602710..d288c892 100644
--- a/cookbook/templates/base.html
+++ b/cookbook/templates/base.html
@@ -136,10 +136,10 @@
                         <i class="fas fa-fw fa-toolbox fa-lg"></i>
                     </a>
                     <div class="dropdown-menu dropdown-menu-center dropdown-menu-center-large">
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_keyword' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-tags fa-2x"></i>
                                         </div>
@@ -151,7 +151,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_food' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-leaf fa-2x"></i>
                                         </div>
@@ -163,7 +163,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_unit' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-balance-scale fa-2x"></i>
                                         </div>
@@ -174,10 +174,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_supermarket' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-store-alt fa-2x"></i>
                                         </div>
@@ -189,7 +189,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_supermarket_category' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card  p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-cubes fa-2x"></i>
                                         </div>
@@ -201,7 +201,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_automation' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-robot fa-2x"></i>
                                         </div>
@@ -212,10 +212,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_user_file' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-file fa-2x"></i>
                                         </div>
@@ -227,7 +227,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'data_batch_edit' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-edit fa-2x"></i>
                                         </div>
@@ -239,7 +239,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'view_history' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-history fa-2x"></i>
                                         </div>
@@ -250,10 +250,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'view_ingredient_editor' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-th-list fa-2x"></i>
                                         </div>
@@ -265,7 +265,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'view_export' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-file-export fa-2x"></i>
                                         </div>
@@ -277,7 +277,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_property_type' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-database fa-2x"></i>
                                         </div>
@@ -288,10 +288,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_unit_conversion' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-exchange-alt fa-2x"></i>
                                         </div>
diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 1f6b5c7b..39f1990f 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -796,4 +796,8 @@ having to override as much.
         font-size: 18px !important;
     }
 }
+
+.b-calendar-grid-help {
+    padding: 0.25rem;
+}
 </style>
diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 573cc091..2a9dee82 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -689,7 +689,7 @@
             <br/>
 
             <!-- bottom buttons save/close/view -->
-            <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
+            <div class="row fixed-bottom p-2 b-2 border-top text-center bg-white bottom-action-bar"
                  v-if="recipe !== undefined">
                 <div class="col-3 col-md-6 mb-1 mb-md-0 pr-2 pl-2">
                     <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"

From 8205812c84bbd64eb17281f2852c477291218e84 Mon Sep 17 00:00:00 2001
From: Jan-Niklas Weghorn <jrester379@gmail.com>
Date: Fri, 10 Nov 2023 11:52:26 +0100
Subject: [PATCH 2/5] fix markdown editor and sidebar

---
 cookbook/static/themes/tandoor_dark.min.css | 28 +++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/cookbook/static/themes/tandoor_dark.min.css b/cookbook/static/themes/tandoor_dark.min.css
index 0d2771b5..8981ef86 100644
--- a/cookbook/static/themes/tandoor_dark.min.css
+++ b/cookbook/static/themes/tandoor_dark.min.css
@@ -2776,7 +2776,7 @@ a.btn.disabled, fieldset:disabled a.btn {
 }
 
 .btn-link:hover {
-    color: #000;
+    color: #fff;
     text-decoration: underline
 }
 
@@ -3379,15 +3379,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .dropdown-item:focus, .dropdown-item:hover {
-    color: #16181b;
+    color: #fff !important;
     text-decoration: none;
-    background-color: #f8f9fa
+    background-color: #4E4E4E !important;
 }
 
 .dropdown-item.active, .dropdown-item:active {
     color: #fff;
     text-decoration: none;
-    background-color: #b98766
+    background-color: #b98766 !important;
 }
 
 .dropdown-item.disabled, .dropdown-item:disabled {
@@ -3676,7 +3676,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-control-input:focus ~ .custom-control-label:before {
-    box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 .2rem var(--primary)
 }
 
 .custom-control-input:focus:not(:checked) ~ .custom-control-label:before {
@@ -5612,13 +5612,13 @@ a.badge-dark.focus, a.badge-dark:focus {
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1;
-    color: #000;
+    color: #fff;
     text-shadow: 0 1px 0 #fff;
     opacity: .5
 }
 
 .close:hover {
-    color: #000;
+    color: #fff;
     text-decoration: none
 }
 
@@ -10467,6 +10467,10 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
 
 .b-calendar-grid-help,
 .v-note-op, 
+.v-note-show,
+.v-show-content,
+.op-icon.dropdown-item,
+.popup-dropdown,
 .content-input-wrapper, 
 .auto-textarea-input, 
 .bottom-action-bar,
@@ -10483,6 +10487,11 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
     color: #fff !important;
 }
 
+.op-icon:hover, .op-icon.selected {
+    background-color: #303030 !important;
+    color: #fff !important;
+}
+
 .multiselect__tag-icon:hover, .multiselect__tag-icon:focus {
     background-color: rgb(20, 20, 20) !important;
 }
@@ -10562,7 +10571,6 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
     background-color: #4E4E4E !important;
 }
 
-.dropdown-item {
-    color: #fff !important;
+.b-sidebar-body {
+    background-color: #303030 !important;
 }
-

From 243cac038929bf69ff59e8b51869cdc0a2cafe97 Mon Sep 17 00:00:00 2001
From: Jan-Niklas Weghorn <jrester379@gmail.com>
Date: Fri, 10 Nov 2023 12:16:43 +0100
Subject: [PATCH 3/5] cleanup

---
 cookbook/static/themes/tandoor_dark.min.css | 22 ++++-----------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/cookbook/static/themes/tandoor_dark.min.css b/cookbook/static/themes/tandoor_dark.min.css
index 8981ef86..efd92cd2 100644
--- a/cookbook/static/themes/tandoor_dark.min.css
+++ b/cookbook/static/themes/tandoor_dark.min.css
@@ -10500,26 +10500,14 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
     color: rgb(20, 20, 20) !important
 }
 
+.multiselect__input::placeholder
+.multiselect__input::-ms-input-placeholder
+.multiselect__input:-ms-input-placeholder
+.multiselect__input::-moz-placeholder,
 .multiselect__input::-webkit-input-placeholder {
     color: #fff !important;
 }
 
-.multiselect__input::-moz-placeholder {
-    color: #fff !important;
-}
-
-.multiselect__input:-ms-input-placeholder {
-    color: #fff !important;
-}
-
-.multiselect__input::-ms-input-placeholder {
-    color: #fff !important;
-}
-
-.multiselect__input::placeholder {
-    color: #fff !important;
-}
-
 .multiselect__single, .multiselect__content-wrapper {
     background-color: rgb(20,20,20) !important;
 }
@@ -10529,8 +10517,6 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
 }
 
 .custom-select {
-    background-color: rgb(20, 20, 20) !important;
-    color: #fff !important;
     /* add the arrow on the right */
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
 }

From 9b367e5d087dd6d6b885698d5904daa4ede318e8 Mon Sep 17 00:00:00 2001
From: Jan-Niklas Weghorn <jrester379@gmail.com>
Date: Fri, 10 Nov 2023 14:09:24 +0100
Subject: [PATCH 4/5] fix bottom navigation bar

---
 cookbook/static/themes/tandoor_dark.min.css     |  8 ++++++++
 vue/src/apps/CookbookView/CookbookView.vue      |  2 +-
 vue/src/apps/MealPlanView/MealPlanView.vue      |  2 +-
 .../apps/RecipeSearchView/RecipeSearchView.vue  |  2 +-
 vue/src/apps/RecipeView/RecipeView.vue          |  2 +-
 .../apps/ShoppingListView/ShoppingListView.vue  |  2 +-
 vue/src/components/BottomNavigationBar.vue      | 17 +++++++++++------
 7 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/cookbook/static/themes/tandoor_dark.min.css b/cookbook/static/themes/tandoor_dark.min.css
index efd92cd2..16e143b5 100644
--- a/cookbook/static/themes/tandoor_dark.min.css
+++ b/cookbook/static/themes/tandoor_dark.min.css
@@ -10560,3 +10560,11 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
 .b-sidebar-body {
     background-color: #303030 !important;
 }
+
+.bottom-nav-link {
+    color: #898989 !important;
+}
+
+.bottom-nav-link-active {
+    color: var(--primary) !important;
+}
diff --git a/vue/src/apps/CookbookView/CookbookView.vue b/vue/src/apps/CookbookView/CookbookView.vue
index b53079a1..bc922d7e 100644
--- a/vue/src/apps/CookbookView/CookbookView.vue
+++ b/vue/src/apps/CookbookView/CookbookView.vue
@@ -56,7 +56,7 @@
         </div>
 
 
-        <bottom-navigation-bar>
+        <bottom-navigation-bar active-view="view_books">
             <template #custom_create_functions>
                 <div class="dropdown-divider" ></div>
                 <h6 class="dropdown-header">{{ $t('Books')}}</h6>
diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 39f1990f..8a5f4264 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -230,7 +230,7 @@
             :current_period="current_period"
         ></auto-meal-plan-modal>
 
-        <bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
+        <bottom-navigation-bar active-view="view_plan" :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
             <template #custom_create_functions>
                 <h6 class="dropdown-header">{{ $t('Meal_Plan') }}</h6>
                 <a class="dropdown-item" @click="createEntryClick(new Date())"><i
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index d80fe4ef..6f0a901b 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -846,7 +846,7 @@
 
                 <meal-plan-edit-modal :entry="mealplan_entry_edit" :create_date="mealplan_default_date"></meal-plan-edit-modal>
 
-                <bottom-navigation-bar></bottom-navigation-bar>
+                <bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>
             </div>
         </div>
     </div>
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 27b894fe..119c902e 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -2,7 +2,7 @@
     <div id="app" v-if="recipe_id !== undefined">
         <recipe-view-component :recipe_id="recipe_id"></recipe-view-component>
 
-        <bottom-navigation-bar></bottom-navigation-bar>
+        <bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>
     </div>
 </template>
 
diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 7dc59d4a..309a8276 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -566,7 +566,7 @@
         <shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)"
                         :modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe"/>
 
-        <bottom-navigation-bar>
+        <bottom-navigation-bar active-view="view_shopping">
             <template #custom_create_functions>
 
                 <div class="dropdown-divider"></div>
diff --git a/vue/src/components/BottomNavigationBar.vue b/vue/src/components/BottomNavigationBar.vue
index 6c858fe8..01fae4fd 100644
--- a/vue/src/components/BottomNavigationBar.vue
+++ b/vue/src/components/BottomNavigationBar.vue
@@ -1,17 +1,17 @@
 <template>
     <!-- bottom button nav -->
-    <div class="fixed-bottom p-1 pt-2 pl-2 pr-2 border-top text-center d-lg-none d-print-none" style="background: white">
+    <div class="fixed-bottom p-1 pt-2 pl-2 pr-2 border-top text-center d-lg-none d-print-none bottom-action-bar bg-white">
         <div class="d-flex flex-row justify-content-around">
             <div class="flex-column" v-if="show_button_1">
                 <slot name="button_1">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_search')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_search' }" v-bind:href="resolveDjangoUrl('view_search')">
                         <i class="fas fa-fw fa-book " style="font-size: 1.5em"></i><br/><small>{{ $t('Recipes') }}</small></a> <!-- TODO localize -->
                 </slot>
 
             </div>
             <div class="flex-column" v-if="show_button_2">
                 <slot name="button_2">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_plan')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_plan' }" v-bind:href="resolveDjangoUrl('view_plan')">
                         <i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>{{ $t('Meal_Plan') }}</small></a>
                 </slot>
 
@@ -20,7 +20,7 @@
                 <slot name="button_create">
                     <div class="dropup">
                         <a class="nav-link bottom-nav-link p-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
-                           aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link"></i>
+                           aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link bottom-nav-link-active"></i>
                         </a>
                         <div class="dropdown-menu center-dropup" aria-labelledby="navbarDropdownMenuLink">
 
@@ -46,14 +46,14 @@
             </div>
             <div class="flex-column" v-if="show_button_3">
                 <slot name="button_3">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_shopping')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_shopping' }" v-bind:href="resolveDjangoUrl('view_shopping')">
                         <i class="fas fa-shopping-cart" style="font-size: 1.5em"></i><br/><small>{{ $t('Shopping_list') }}</small></a>
                 </slot>
             </div>
             <div class="flex-column">
 
                 <slot name="button_4" v-if="show_button_4">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_books')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_books' }" v-bind:href="resolveDjangoUrl('view_books')">
                         <i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>{{ $t('Books') }}</small></a> <!-- TODO localize -->
                 </slot>
 
@@ -80,6 +80,7 @@ export default {
         show_button_3: {type: Boolean, default: true},
         show_button_4: {type: Boolean, default: true},
         show_button_create: {type: Boolean, default: true},
+        activeView: {type: String, default: ""}
     }
 }
 </script>
@@ -90,6 +91,10 @@ export default {
     color: #666666
 }
 
+.bottom-nav-link-active {
+    color: var(--primary);
+}
+
 .center-dropup {
     right: auto;
     left: 50%;

From b69c6bc97a0ea698646951431dc731a1ab6e01ab Mon Sep 17 00:00:00 2001
From: Jan-Niklas Weghorn <jrester379@gmail.com>
Date: Wed, 15 Nov 2023 09:52:16 +0100
Subject: [PATCH 5/5] fix placeholder text

---
 cookbook/static/assets/recipe_no_image.svg     |  7 -------
 cookbook/static/themes/tandoor.min.css         |  8 +++++---
 cookbook/static/themes/tandoor_dark.min.css    | 18 ++++++------------
 vue/src/apps/RecipeEditView/RecipeEditView.vue |  2 ++
 4 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/cookbook/static/assets/recipe_no_image.svg b/cookbook/static/assets/recipe_no_image.svg
index f2650c45..1128e2ca 100644
--- a/cookbook/static/assets/recipe_no_image.svg
+++ b/cookbook/static/assets/recipe_no_image.svg
@@ -51,13 +51,6 @@
      inkscape:window-y="54"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg4" />
-  <rect
-     style="fill:#f5f5f6;fill-opacity:1;stroke:#d8dde0;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="rect817"
-     width="1717.1526"
-     height="1092.339"
-     x="-602.57629"
-     y="-290.16949" />
   <path
      d="m 235.62851,202.1526 c -3.38906,-0.31992 -6.54323,1.7722 -7.40937,5.07666 l -3.10593,11.84344 c 39.34747,1.15551 65.965,27.49017 67.63017,66.72064 l 11.9414,-3.32129 c 3.29677,-0.91767 5.34573,-4.14216 4.95356,-7.55606 -4.37894,-38.04972 -35.85985,-69.14953 -74.00983,-72.76339 z m -12.26226,23.57322 -20.94044,79.87325 a 3.3995443,3.4118034 0 0 0 4.19438,4.15688 L 286.10367,287.635 c -0.8955,-36.81001 -25.8122,-61.48823 -62.73742,-61.90076 z m 5.78824,63.9529 a 6.7110067,6.7352075 0 1 1 6.711,-6.73521 6.7110067,6.7352075 0 0 1 -6.711,6.73521 z M 239.221,257.68648 a 6.7110067,6.7352075 0 1 1 6.71101,-6.7352 6.7110067,6.7352075 0 0 1 -6.71101,6.7352 z m 21.81077,21.88943 a 6.7110067,6.7352075 0 1 1 6.71101,-6.73521 6.7110067,6.7352075 0 0 1 -6.71101,6.73521 z"
      id="path2"
diff --git a/cookbook/static/themes/tandoor.min.css b/cookbook/static/themes/tandoor.min.css
index a9749252..a7740b7f 100644
--- a/cookbook/static/themes/tandoor.min.css
+++ b/cookbook/static/themes/tandoor.min.css
@@ -4634,13 +4634,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 .card-img-top {
     width: 100%;
     border-top-left-radius: calc(.25rem - 1px);
-    border-top-right-radius: calc(.25rem - 1px)
+    border-top-right-radius: calc(.25rem - 1px);
+    background-color: #f5f5f6;
 }
 
 .card-img-bottom {
     width: 100%;
     border-bottom-right-radius: calc(.25rem - 1px);
-    border-bottom-left-radius: calc(.25rem - 1px)
+    border-bottom-left-radius: calc(.25rem - 1px);
+    background-color: #f5f5f6;
 }
 
 .card-deck {
@@ -10479,4 +10481,4 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
 .ghost {
     opacity: 0.5 !important;
     background: #b98766 !important;
-}
\ No newline at end of file
+}
diff --git a/cookbook/static/themes/tandoor_dark.min.css b/cookbook/static/themes/tandoor_dark.min.css
index 16e143b5..97c9cf6c 100644
--- a/cookbook/static/themes/tandoor_dark.min.css
+++ b/cookbook/static/themes/tandoor_dark.min.css
@@ -4637,13 +4637,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 .card-img-top {
     width: 100%;
     border-top-left-radius: calc(.25rem - 1px);
-    border-top-right-radius: calc(.25rem - 1px)
+    border-top-right-radius: calc(.25rem - 1px);
+    background-color: #141414;
 }
 
 .card-img-bottom {
     width: 100%;
     border-bottom-right-radius: calc(.25rem - 1px);
-    border-bottom-left-radius: calc(.25rem - 1px)
+    border-bottom-left-radius: calc(.25rem - 1px);
+    background-color: #141414;
 }
 
 .card-deck {
@@ -10500,11 +10502,7 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
     color: rgb(20, 20, 20) !important
 }
 
-.multiselect__input::placeholder
-.multiselect__input::-ms-input-placeholder
-.multiselect__input:-ms-input-placeholder
-.multiselect__input::-moz-placeholder,
-.multiselect__input::-webkit-input-placeholder {
+.multiselect__input::placeholder {
     color: #fff !important;
 }
 
@@ -10562,9 +10560,5 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
 }
 
 .bottom-nav-link {
-    color: #898989 !important;
-}
-
-.bottom-nav-link-active {
-    color: var(--primary) !important;
+    color: #898989;
 }
diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 2a9dee82..0b408501 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -425,6 +425,7 @@
                                                                      v-if="!ingredient.is_header">
                                                                     <input
                                                                             class="form-control"
+                                                                            style="height: 100%;"
                                                                             v-model="ingredient.amount"
                                                                             type="number"
                                                                             step="any"
@@ -506,6 +507,7 @@
                                                                     <input
                                                                             class="form-control"
                                                                             maxlength="256"
+                                                                            style="height: 100%;"
                                                                             v-model="ingredient.note"
                                                                             v-bind:placeholder="$t('Note')"
                                                                             v-on:keydown.tab="