From 0655019ed3f711f5ba7be34cb65cbdba2fdd34ae Mon Sep 17 00:00:00 2001
From: ransome1 <spam-github@datenkrake.eu>
Date: Sat, 23 Jan 2021 14:17:30 +0100
Subject: [PATCH] Enhanced recurrence picker (fix for dark mode)

---
 src/css/dark.css    | 12 +++++++++
 src/css/style.css   |  2 +-
 src/index.html      | 64 ++++++++++++++++++++++++---------------------
 src/scss/dark.scss  | 14 ++++++++++
 src/scss/style.scss |  2 +-
 5 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/src/css/dark.css b/src/css/dark.css
index e8dd9f6e..3c6909f9 100644
--- a/src/css/dark.css
+++ b/src/css/dark.css
@@ -206,6 +206,18 @@ nav {
 #modalForm button:hover {
   color: #CCCDCF !important; }
 
+#modalForm .field input,
+#modalForm .field input::placeholder,
+#modalForm .field select,
+#modalForm .field select::placeholder {
+  color: white !important; }
+
+#modalForm .field select option {
+  background: #2c2d30; }
+
+#modalForm ::after {
+  border-color: white !important; }
+
 .modal .modal-content .card {
   background: #3B3B3B;
   color: #CCCDCF; }
diff --git a/src/css/style.css b/src/css/style.css
index 515ca4cc..5915d459 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -601,7 +601,7 @@ nav {
     #modalForm .field input::placeholder,
     #modalForm .field select,
     #modalForm .field select::placeholder {
-      background: none;
+      background: none !important;
       border: none;
       color: #3273dc !important; }
   #modalForm #btnItemStatus {
diff --git a/src/index.html b/src/index.html
index a0ff23f3..fcb0f35c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -107,37 +107,41 @@ <h1 id="noResultContainerHeadline" class="title is-1"></h1>
               <article class="message">
                 <div id="modalFormAlert" class="message-body"></div>
               </article>
-              <div class="select field">
-                  <select id="priorityPicker" tabindex="309">
-                    <option value="">-</option>
-                    <option value="A">A</option>
-                    <option value="B">B</option>
-                    <option value="C">C</option>
-                    <option value="D">D</option>
-                    <option value="E">E</option>
-                    <option value="F">F</option>
-                    <option value="G">G</option>
-                    <option value="H">H</option>
-                    <option value="I">I</option>
-                    <option value="J">J</option>
-                    <option value="K">K</option>
-                    <option value="L">L</option>
-                    <option value="M">M</option>
-                    <option value="N">N</option>
-                    <option value="O">O</option>
-                    <option value="P">P</option>
-                    <option value="Q">Q</option>
-                    <option value="R">R</option>
-                    <option value="S">S</option>
-                    <option value="T">T</option>
-                    <option value="U">U</option>
-                    <option value="V">V</option>
-                    <option value="W">W</option>
-                    <option value="X">X</option>
-                    <option value="Y">Y</option>
-                    <option value="Z">Z</option>
-                  </select>
+              <div class="field">
+                <div class="control">
+                  <div class="select">
+                    <select id="priorityPicker" tabindex="309">
+                      <option value="">-</option>
+                      <option value="A">A</option>
+                      <option value="B">B</option>
+                      <option value="C">C</option>
+                      <option value="D">D</option>
+                      <option value="E">E</option>
+                      <option value="F">F</option>
+                      <option value="G">G</option>
+                      <option value="H">H</option>
+                      <option value="I">I</option>
+                      <option value="J">J</option>
+                      <option value="K">K</option>
+                      <option value="L">L</option>
+                      <option value="M">M</option>
+                      <option value="N">N</option>
+                      <option value="O">O</option>
+                      <option value="P">P</option>
+                      <option value="Q">Q</option>
+                      <option value="R">R</option>
+                      <option value="S">S</option>
+                      <option value="T">T</option>
+                      <option value="U">U</option>
+                      <option value="V">V</option>
+                      <option value="W">W</option>
+                      <option value="X">X</option>
+                      <option value="Y">Y</option>
+                      <option value="Z">Z</option>
+                    </select>
+                  </div>
                 </div>
+              </div>
               <div class="field dueDate">
                 <div class="control has-icons-left">
                   <input id="dueDatePickerInput" class="input" tabindex="310" readonly>
diff --git a/src/scss/dark.scss b/src/scss/dark.scss
index 9d7545e1..06d6f902 100644
--- a/src/scss/dark.scss
+++ b/src/scss/dark.scss
@@ -271,6 +271,20 @@ nav {
   button:hover {
     color: $grey-bright!important;
   }
+  .field {
+    input,
+    input::placeholder,
+    select,
+    select::placeholder {
+      color: white!important;
+    }
+    select option {
+      background: $grey-mid;
+    }
+  }
+  ::after {
+    border-color: white!important;
+  }
 }
 .modal {
   .modal-content {
diff --git a/src/scss/style.scss b/src/scss/style.scss
index ee23a184..f2dbe3e6 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -726,7 +726,7 @@ nav {
     input::placeholder,
     select,
     select::placeholder {
-      background: none;
+      background: none!important;
       border: none;
       color: $has-text-link!important;
     }