From b185a28676109e375b82a6b1e1d96df9154461e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Fri, 18 Jun 2021 15:28:35 +0300
Subject: [PATCH] Fix contrast issues

---
 static/css/base.css                       |  9 +++----
 static/css/bootstrap-colors.css           | 18 ++++++++++++-
 static/css/icomoon.css                    |  3 +++
 static/css/my_checks.css                  |  4 +--
 static/css/my_checks_desktop.css          |  4 +--
 static/css/nouislider.dark.css            |  2 +-
 static/css/variables.css                  | 32 ++++++++++++++++-------
 templates/front/my_checks_desktop.html    |  2 +-
 templates/front/verify_email_success.html |  2 +-
 9 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index e4cce25a..08b8125d 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -112,18 +112,17 @@ body {
 .status.ic-down { color: #d9534f; }
 
 .label.label-start {
-    background-color: #FFF;
-    color: #117a3f;;
+    color: var(--label-start-color);
     border: 1px solid #117a3f;
 }
 
 .label.label-ign {
-    background: #e0e0e0;
-    color: #333;
+    background: var(--label-ign-bg);
+    color: var(--label-ign-color);
 }
 
 .hc-dialog {
-    background: #FFF;
+    background-color: var(--panel-bg);
     padding: 2em;
     margin-top: 100px;
 }
diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css
index 4b5f66ea..6fbb67c3 100644
--- a/static/css/bootstrap-colors.css
+++ b/static/css/bootstrap-colors.css
@@ -1,3 +1,7 @@
+a {
+    color:  var(--link-color);
+}
+
 .panel {
     background-color: var(--panel-bg);
 }
@@ -26,7 +30,7 @@
 .btn-default:focus,
 .btn-default:active,
 .btn-default.active:hover {
-    color: var(--btn-default-color);
+    color: var(--btn-active-color);
     background-color: var(--btn-active-bg);
     border-color: var(--btn-active-border);
 }
@@ -104,6 +108,10 @@ hr {
     background-color:  var(--breadcrumb-bg);
 }
 
+.breadcrumb > .active {
+    color: var(--breadcrumb-active-color);
+}
+
 .modal-header {
     border-bottom-color:  var(--border-muted);
 }
@@ -137,3 +145,11 @@ code {
     border-color: var(--input-border);
     color:  var(--input-color);
 }
+
+.text-muted {
+    color: var(--text-muted);
+}
+
+h2 small {
+    color: var(--text-muted);
+}
\ No newline at end of file
diff --git a/static/css/icomoon.css b/static/css/icomoon.css
index 120abff8..689e8e77 100644
--- a/static/css/icomoon.css
+++ b/static/css/icomoon.css
@@ -91,6 +91,9 @@
   content: "\e90a";
   color: #4f5d73;
 }
+body.dark .ic-email:before {
+  color: #76a6f0;
+}
 .ic-webhook:before {
   content: "\e908";
   color: #c73a63;
diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 423598da..3f485674 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -128,7 +128,7 @@
     font-size: small;
     font-family: monospace;
     text-align: right;
-    color: #888;
+    color: var(--text-muted);
 }
 
 #period-slider {
@@ -153,7 +153,7 @@
 }
 
 .update-timeout-terms {
-    color: #999;
+    color: var(--text-muted);
 }
 
 .update-timeout-terms p {
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index f58a20db..265c8381 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -24,7 +24,7 @@
 }
 
 #checks-table tr:hover a.default {
-    color: #0091EA;
+    color: var(--link-color);
 }
 
 #checks-table td {
@@ -90,7 +90,7 @@ button.copy-link {
     text-align: left;
 
     font-family: "Open Sans", Arial, sans-serif;
-    color: #0091ea;
+    color: var(--link-color);
     cursor :pointer;
     transition: opacity 0.1s linear;
 }
diff --git a/static/css/nouislider.dark.css b/static/css/nouislider.dark.css
index 5ea6c0c3..c7339a48 100644
--- a/static/css/nouislider.dark.css
+++ b/static/css/nouislider.dark.css
@@ -23,5 +23,5 @@ body.dark .noUi-marker {
 }
 
 body.dark .noUi-pips {
-    color: #777780;
+    color: hsl(240, 3%, 55%);
 }
diff --git a/static/css/variables.css b/static/css/variables.css
index 77c85014..bb73904f 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -11,9 +11,11 @@
     --body-bg: #FFF;
     --border-color: #ddd;
     --border-muted:  #eee;
+    --breadcrumb-active-color: #777;
     --breadcrumb-bg: #f5f5f5;
     --btn-active-bg: #e6e6e6;
     --btn-active-border: #adadad;
+    --btn-active-color: #333;
     --btn-default-bg: #fff;
     --btn-default-border: #ccc;
     --btn-default-color: #333;
@@ -29,6 +31,10 @@
     --input-color:  #555;
     --input-group-addon-bg: #eeeeee;
     --jumbotron-bg:  #eee;
+    --label-ign-bg: #e0e0e0;
+    --label-ign-color: #333;
+    --label-start-color: #117a3f;
+    --link-color: #0091EA;
     --log-missing-bg: #fff3f2;
     --modal-content-bg: #fff;
     --nav-pills-active-link-hover-bg: #eee;
@@ -56,7 +62,7 @@
     --tag-up-border: #ccc;
     --tag-up-color: #333;
     --text-color: #333;
-    --text-muted:  #777;
+    --text-muted:  #666;
 }
 
 
@@ -70,19 +76,21 @@ body.dark {
     --alert-success-bg: #0f2c1c;
     --alert-success-border: #2b4939;
     --alert-success-color: #ebf5ef;
-    --body-bg: #161619;
-    --border-color: #303033;
-    --border-muted: #303033;
-    --breadcrumb-bg: #25252a;
+    --body-bg: hsl(240, 6%, 10%);
+    --border-color: hsl(240, 3%, 22%);
+    --border-muted: hsl(240, 3%, 22%);
+    --breadcrumb-active-color: hsl(240, 3%, 60%);
+    --breadcrumb-bg: hsl(240, 6%, 16%);
     --btn-active-bg: #6f6f7f;
     --btn-active-border: #818191;
+    --btn-active-color: hsl(240, 3%, 98%);
     --btn-default-bg: #383840;
     --btn-default-border: #4e4e59;
-    --btn-default-color: #e0e0e2;
+    --btn-default-color: hsl(240, 3%, 88%);
     --btn-remove-bg: #202024;
     --btn-remove-color: #ff4c46;
     --btn-remove-hover: #3f1a22;
-    --channel-off-color: #464649;
+    --channel-off-color: hsl(240, 2%, 40%);
     --close-color: #fff;
     --debug-warning-bg: #60002d;
     --get-started-bg: #2c2e2c;
@@ -91,10 +99,14 @@ body.dark {
     --input-color:  #b0b0b2;
     --input-group-addon-bg: #29292c;
     --jumbotron-bg: #1f1f22;
+    --label-ign-bg: #383840;
+    --label-ign-color: #e0e0e2;
+    --label-start-color: #e0e0e2;
+    --link-color: hsl(202.8, 100%, 55%);
     --log-missing-bg: #2d1e21;
     --modal-content-bg: #1f1f22;
     --nav-pills-active-link-hover-bg: #383840;
-    --panel-bg: #25252a;
+    --panel-bg: hsl(240, 6%, 16%);
     --panel-success-bg: #165b35;
     --plan-business-border:  #90CAF9;
     --plan-business-color: #e8f2f9;
@@ -106,7 +118,7 @@ body.dark {
     --plan-supporter-color: #fff0c4;
     --pre-bg: #29292c;
     --small-text-color: #f0f0f2;
-    --status-new-color: #464649;
+    --status-new-color: hsl(240, 2%, 40%);
     --table-bg-hover: #25252a;
     --tag-bg: #303033;
     --tag-checked-bg: #fff;
@@ -118,5 +130,5 @@ body.dark {
     --tag-up-border: #303033;
     --tag-up-color: #e0e0e2;
     --text-color: #e0e0e2;
-    --text-muted: #777780;
+    --text-muted: hsl(240, 3%, 55%);
 }
diff --git a/templates/front/my_checks_desktop.html b/templates/front/my_checks_desktop.html
index 477605d6..2eb7ac2d 100644
--- a/templates/front/my_checks_desktop.html
+++ b/templates/front/my_checks_desktop.html
@@ -41,7 +41,7 @@
             </a>
             {% else %}
             <a href="?sort=-last_ping" data-toggle="tooltip" class="default sort-last-ping">
-                Last Ping</span>
+                Last Ping
             </a>
             {% endif %}
             {% if show_last_duration %}
diff --git a/templates/front/verify_email_success.html b/templates/front/verify_email_success.html
index bda8e0d1..4f3e02b2 100644
--- a/templates/front/verify_email_success.html
+++ b/templates/front/verify_email_success.html
@@ -8,7 +8,7 @@
             <h1>Email Address Verified!</h1>
             <div class="dialog-body">
                 <p>
-                    Success! You've verified this email
+                    Success! You have verified this email
                     address, and it will now receive
                     {{ site_name }} notifications.
                 </p>