From dd889246605d23c3813e2919e65ec36b5870067d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Fri, 16 Jul 2021 12:25:16 +0300
Subject: [PATCH] Fix dark mode styling issues in Cron Syntax Cheatsheet

---
 CHANGELOG.md                   |  3 +++
 static/css/bootstrap.css       |  8 ++++----
 static/css/docs_cron.css       | 10 +++++-----
 static/css/selectize.hc.css    |  3 +--
 static/css/variables.css       |  6 ++++++
 stuff/bootstrap/variables.less |  4 ++--
 6 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 477743c9..52afaab7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ All notable changes to this project will be documented in this file.
 ### Improvements
 - Use multicolor channel icons for better appearance in the dark mode
 
+### Bug Fixes
+- Fix dark mode styling issues in Cron Syntax Cheatsheet
+
 ## v1.21.0 - 2020-07-02
 
 ### Improvements
diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css
index f14a2576..420771db 100644
--- a/static/css/bootstrap.css
+++ b/static/css/bootstrap.css
@@ -4647,16 +4647,16 @@ button.list-group-item-danger.active:focus {
   border-color: var(--border-color);
 }
 .panel-default > .panel-heading {
-  color: #333333;
-  background-color: #f5f5f5;
+  color: var(--text-color);
+  background-color: var(--panel-default-heading-bg);
   border-color: var(--border-color);
 }
 .panel-default > .panel-heading + .panel-collapse > .panel-body {
   border-top-color: var(--border-color);
 }
 .panel-default > .panel-heading .badge {
-  color: #f5f5f5;
-  background-color: #333333;
+  color: var(--panel-default-heading-bg);
+  background-color: var(--text-color);
 }
 .panel-default > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: var(--border-color);
diff --git a/static/css/docs_cron.css b/static/css/docs_cron.css
index b318da8e..16d10933 100644
--- a/static/css/docs_cron.css
+++ b/static/css/docs_cron.css
@@ -1,7 +1,7 @@
 
 
 .cron-example th {
-    background: #f5f5f5;
+    background: var(--cheatsheet-example-bg);
 }
 
 .cron-example th div {
@@ -24,8 +24,8 @@
     bottom: 15px;
     width: 40%;
 
-    border-left: 2px dotted #ddd;
-    border-bottom: 2px dotted #ddd;
+    border-left: 2px dotted var(--cheatsheet-dotted-color);
+    border-bottom: 2px dotted var(--cheatsheet-dotted-color);
 }
 
 .desc {
@@ -33,7 +33,7 @@
     font-weight: bold;
     font-style: italic;
     font-size: 20px;
-    color: #333;
+    color: var(--text-color);
     padding: 8px;
     margin-bottom: 8px;
 }
@@ -50,5 +50,5 @@
 }
 
 .cron-example td.minor {
-    color: #999;
+    color: var(--text-muted);
 }
\ No newline at end of file
diff --git a/static/css/selectize.hc.css b/static/css/selectize.hc.css
index 0f532fe5..b3c688a8 100644
--- a/static/css/selectize.hc.css
+++ b/static/css/selectize.hc.css
@@ -149,8 +149,7 @@
   border-radius: 1px;
 }
 .selectize-dropdown .option,
-.selectize-dropdown .optgroup-header,
-.selectize-dropdown .create {
+.selectize-dropdown .optgroup-header {
   padding: 3px 12px;
 }
 .selectize-dropdown .option,
diff --git a/static/css/variables.css b/static/css/variables.css
index 64d0ac2c..aafa3ed1 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -22,6 +22,8 @@
     --btn-remove-hover: #ffebea;
     --channel-off-color: #ddd;
     --channel-off-inside-color: #FFF;
+    --cheatsheet-example-bg: #f5f5f5;
+    --cheatsheet-dotted-color: #ccc;
     --close-color: #000;
     --debug-warning-bg:  #eee;
     --dropdown-bg: #fff;
@@ -41,6 +43,7 @@
     --modal-content-bg: #fff;
     --nav-link-hover-bg: #eee;
     --panel-bg: #fff;
+    --panel-default-heading-bg: #f5f5f5;
     --panel-success-bg: #dff0d8;
     --plan-business-border:  #90CAF9;
     --plan-business-color: #141c22;
@@ -96,6 +99,8 @@ body.dark {
     --btn-remove-hover: #3f1a22;
     --channel-off-color: hsl(240, 6.7%, 23.5%);
     --channel-off-inside-color: hsl(240, 3.7%, 43.5%);
+    --cheatsheet-example-bg: #383840;
+    --cheatsheet-dotted-color: #6f6f7f;
     --close-color: #fff;
     --debug-warning-bg: #60002d;
     --dropdown-bg: hsl(240, 6%, 16%);
@@ -115,6 +120,7 @@ body.dark {
     --modal-content-bg: #1f1f22;
     --nav-link-hover-bg: #383840;
     --panel-bg: hsl(240, 6%, 16%);
+    --panel-default-heading-bg: #383840;
     --panel-success-bg: #165b35;
     --plan-business-border:  #90CAF9;
     --plan-business-color: #e8f2f9;
diff --git a/stuff/bootstrap/variables.less b/stuff/bootstrap/variables.less
index 34f38fce..813022ac 100755
--- a/stuff/bootstrap/variables.less
+++ b/stuff/bootstrap/variables.less
@@ -713,9 +713,9 @@
 @panel-inner-border:          #ddd;
 @panel-footer-bg:             #f5f5f5;
 
-@panel-default-text:          @gray-dark;
+@panel-default-text:          var(--text-color);
 @panel-default-border:        var(--border-color);
-@panel-default-heading-bg:    #f5f5f5;
+@panel-default-heading-bg:    var(--panel-default-heading-bg);
 
 @panel-primary-text:          #fff;
 @panel-primary-border:        @brand-primary;