From 34014635d0628ee0490037e306cd29b5e3564925 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Thu, 12 Jan 2023 21:59:50 -0300
Subject: [PATCH] Improve colors, fix contrast for accessability on web
 interface

- Changes
  - Use blue color for khoj heading font
    - This fixes the title color issue

  - Update background to lighter shade
    - This fixes the body text color issue

  - Update colors for todo, done, miscellaneous todo state, tag color
    - This does not fix the color contrast issue but seems like an acceptable solution
    - Using white text rather than black text on blue background
      better even though the black text on blue background passes the
      WCAG acceptable contrast score
    - For details see blog post:
      https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/

  - Add border to tags to give them tag pills look and differntiate
    from todo states

  - Buttons and inputs
    - Change background color of input fields like type dropdown,
      update button and results count counter, to match background
      color of page
    - Add shadow on hover over button, dropdowns

Resolves #111
---
 src/interface/web/index.html | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/interface/web/index.html b/src/interface/web/index.html
index 8c13a235..66ca85e1 100644
--- a/src/interface/web/index.html
+++ b/src/interface/web/index.html
@@ -173,14 +173,14 @@
         <h1>Khoj</h1>
 
         <!--Add Text Box To Enter Query, Trigger Incremental Search OnChange -->
-        <input type="text" id="query" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?">
+        <input type="text" id="query" class="option" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?">
 
         <div id="options">
             <!--Add Dropdown to Select Query Type -->
-            <select id="type" onchange="setTypeFieldInUrl(this)"></select>
+            <select id="type" class="option" onchange="setTypeFieldInUrl(this)"></select>
 
             <!--Add Button To Regenerate -->
-            <button id="update" onclick="updateIndex()">Update</button>
+            <button id="update" class="option" onclick="updateIndex()">Update</button>
 
             <!--Add Results Count Input To Set Results Count -->
             <input type="number" id="results-count" min="1" max="100" value="6" placeholder="results count" onchange="setCountFieldInUrl(this)">
@@ -216,8 +216,8 @@
         body {
             padding: 0px;
             margin: 0px;
-            background: #eee;
-            color: #888;
+            background: #f8fafc;
+            color: #475569;
             text-align: center;
             font-family: roboto, karma, segoe ui, sans-serif;
             font-size: 20px;
@@ -230,7 +230,7 @@
         }
         h1 {
             font-weight: 200;
-            color: #888;
+            color: #017eff;
         }
 
         #options {
@@ -241,7 +241,11 @@
         #options > * {
             padding: 15px;
             border-radius: 5px;
-            border: 1px solid #ccc;
+            border: 1px solid #475569;
+            background: #f9fafc
+        }
+        .option:hover {
+            box-shadow: 0 0 11px #aaa;
         }
         #options > select {
             margin-right: 10px;
@@ -268,7 +272,7 @@
         .image {
             width: 20vw;
             border-radius: 10px;
-            border: 1px solid #ccc;
+            border: 1px solid #475569;
         }
         #json {
             white-space: pre-wrap;
@@ -296,16 +300,16 @@
             padding: 3.5px 3.5px 0;
             margin-right: 5px;
             border-radius: 5px;
-            background-color: #ed6f00;
+            background-color: #eab308;
             font-size: medium;
         }
         span.music-task-status.todo,
         span.task-status.todo {
-            background-color: #048ba8
+            background-color: #3b82f6
         }
         span.music-task-status.done,
         span.task-status.done {
-            background-color: #06a77d;
+            background-color: #22c55e;
         }
         span.music-task-tag,
         span.task-tag {
@@ -313,7 +317,8 @@
             padding: 3.5px 3.5px 0;
             margin-right: 5px;
             border-radius: 5px;
-            background-color: #bbb;
+            border: 1px solid #475569;
+            background-color: #ef4444;
             font-size: small;
         }
     </style>