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

---
 static/css/appearance.css          |  4 ++++
 static/css/base.css                |  4 ++--
 static/css/bootstrap-colors.css    |  8 +++++++-
 static/css/log.css                 |  2 +-
 static/css/my_checks.css           |  2 +-
 static/css/my_checks_desktop.css   |  8 ++++----
 static/css/projects.css            |  8 ++++----
 static/css/variables.css           |  9 ++++++++-
 static/js/appearance.js            |  2 +-
 templates/accounts/appearance.html | 23 ++++++++++++-----------
 10 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/static/css/appearance.css b/static/css/appearance.css
index a1a30b8f..a47918c6 100644
--- a/static/css/appearance.css
+++ b/static/css/appearance.css
@@ -1,3 +1,7 @@
+.theme label {
+    cursor: pointer;
+}
+
 .theme img {
     border: 1px solid var(--border-color);
     padding: 4px;
diff --git a/static/css/base.css b/static/css/base.css
index 08b8125d..1c4a8d25 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -16,7 +16,7 @@ body {
     width: 100%;
     /* Set the fixed height of the footer here */
     height: 84px;
-    color: #AAA;
+    color: var(--text-muted);
     border-top: 1px solid var(--border-muted);
 }
 
@@ -140,7 +140,7 @@ pre {
 }
 
 .nav-pills > li > a {
-    color: #888;
+    color: var(--text-muted);
 }
 
 .jumbotron p {
diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css
index 6fbb67c3..0261ca3d 100644
--- a/static/css/bootstrap-colors.css
+++ b/static/css/bootstrap-colors.css
@@ -150,6 +150,12 @@ code {
     color: var(--text-muted);
 }
 
+
+h1 small,
 h2 small {
     color: var(--text-muted);
-}
\ No newline at end of file
+}
+
+.help-block {
+    color: var(--text-muted);
+}
diff --git a/static/css/log.css b/static/css/log.css
index 32ad7977..f6589ae3 100644
--- a/static/css/log.css
+++ b/static/css/log.css
@@ -41,7 +41,7 @@
 #log .details span.ua-body {
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 11.7px;
-    color: #888;
+    color: var(--text-muted);
 }
 
 #log tr.ok {
diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 3f485674..44bd09b1 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -200,7 +200,7 @@
 }
 
 .add-check-note {
-    color: #888;
+    color: var(--text-muted);
     text-align: center;
     margin-top: 10px;
     font-size: 12px;
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index 265c8381..cf1686c0 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -7,7 +7,7 @@
 }
 
 .my-checks-name.unnamed {
-    color: #999;
+    color: var(--text-muted);
     font-style: italic;
 }
 
@@ -74,7 +74,7 @@
 }
 
 .checks-subline {
-    color: #888;
+    color: var(--text-muted);
     white-space: nowrap;
 }
 
@@ -113,7 +113,7 @@ tr:hover .copy-link {
 }
 
 .url-cell .base {
-    color: #888;
+    color: var(--text-muted);
 }
 
 .my-checks-url {
@@ -124,7 +124,7 @@ tr:hover .copy-link {
 }
 
 .checks-subline-duration {
-    color: #888;
+    color: var(--text-muted);
     white-space: nowrap;
 }
 
diff --git a/static/css/projects.css b/static/css/projects.css
index 0f172326..d45773d2 100644
--- a/static/css/projects.css
+++ b/static/css/projects.css
@@ -7,7 +7,7 @@
 }
 
 #project-selector a:hover .project {
-    border-color: #0091EA;
+    border-color: var(--link-color);
 }
 
 #project-selector .project {
@@ -26,7 +26,7 @@
 }
 
 #project-selector .project.selected {
-    border-color: #0091EA;
+    border-color: var(--link-color);
 }
 
 #project-selector .project .status {
@@ -45,7 +45,7 @@
 }
 
 #project-selector #add-project:hover .project {
-    border-color: #0091EA;
-    color: #333;
+    border-color: var(--link-color);
+    color: var(--text-color);
 }
 
diff --git a/static/css/variables.css b/static/css/variables.css
index bb73904f..4f4bd479 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -1,4 +1,5 @@
 :root {
+    color-scheme: light;
     --alert-info-bg: #d9edf7;
     --alert-info-border: #bce8f1;
     --alert-info-color: #31708f;
@@ -62,11 +63,12 @@
     --tag-up-border: #ccc;
     --tag-up-color: #333;
     --text-color: #333;
-    --text-muted:  #666;
+    --text-muted:  #767676;
 }
 
 
 body.dark {
+    color-scheme: dark;
     --alert-info-bg: #123051;
     --alert-info-border: #163c64;
     --alert-info-color: #e0e2f5;
@@ -132,3 +134,8 @@ body.dark {
     --text-color: #e0e0e2;
     --text-muted: hsl(240, 3%, 55%);
 }
+
+
+
+
+
diff --git a/static/js/appearance.js b/static/js/appearance.js
index da938cb0..48ac5f83 100644
--- a/static/js/appearance.js
+++ b/static/js/appearance.js
@@ -1,5 +1,5 @@
 $(function () {
     $("input[type=radio][name=theme]").change(function() {
-        document.body.classList.toggle("dark", this.value == "dark");
+        this.form.submit();
     });
 });
diff --git a/templates/accounts/appearance.html b/templates/accounts/appearance.html
index 219d6214..1316f9a1 100644
--- a/templates/accounts/appearance.html
+++ b/templates/accounts/appearance.html
@@ -34,12 +34,15 @@
 
                     <div class="row">
                         <div class="col-sm-6 theme">
-                            <img
-                                src="{% static 'img/theme-light.png' %}"
-                                alt="Light theme preview">
+                            <label for="theme-light">
+                                <img
+                                    src="{% static 'img/theme-light.png' %}"
+                                    alt="Light theme preview">
+                            </label>
 
                             <label class="radio-container">
                                 <input
+                                    id="theme-light"
                                     type="radio"
                                     name="theme"
                                     value=""
@@ -49,12 +52,15 @@
                             </label>
                         </div>
                         <div class="col-sm-6 theme">
-                            <img
-                                src="{% static 'img/theme-dark.png' %}"
-                                alt="Dark theme preview">
+                            <label for="theme-dark">
+                                <img
+                                    src="{% static 'img/theme-dark.png' %}"
+                                    alt="Dark theme preview">
+                            </label>
 
                             <label class="radio-container">
                                 <input
+                                    id="theme-dark"
                                     type="radio"
                                     name="theme"
                                     value="dark"
@@ -64,11 +70,6 @@
                             </label>
                         </div>
                     </div>
-
-
-                    <button
-                        type="submit"
-                        class="btn btn-default pull-right">Save Changes</button>
                 </form>
             </div>
             {% if status == "info" %}