From b464511522b99784afe044e0f043a8142c761bf8 Mon Sep 17 00:00:00 2001
From: CalDescent <>
Date: Tue, 8 Mar 2022 09:11:37 +0000
Subject: [PATCH] Started implementing dark mode colors, based on designs by
 Scythian

---
 qortal-ui-core/font/switch-theme.css          | 30 +++++++++++--------
 qortal-ui-core/src/components/app-info.js     |  2 +-
 qortal-ui-core/src/components/app-view.js     |  2 +-
 .../components/settings-view/user-settings.js | 10 +++----
 qortal-ui-core/src/components/sidenav-menu.js | 12 ++++----
 .../src/components/wallet-profile.js          |  2 +-
 .../functional-components/copy-text-menu.js   |  2 +-
 .../plugins/core/components/ChatHead.js       |  4 +--
 .../group-management/group-management.src.js  |  2 +-
 .../plugins/core/messaging/messaging.src.js   |  2 +-
 .../plugins/core/minting/minting-info.src.js  |  2 +-
 .../name-registration.src.js                  |  2 +-
 .../plugins/core/puzzles/puzzles.src.js       |  2 +-
 .../data-management/data-management.src.js    |  2 +-
 .../plugins/core/qdn/websites.src.js          |  2 +-
 .../core/reward-share/reward-share.src.js     |  2 +-
 .../plugins/core/wallet/wallet-app.src.js     | 12 ++++----
 17 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css
index 15bd7bf0..53170400 100644
--- a/qortal-ui-core/font/switch-theme.css
+++ b/qortal-ui-core/font/switch-theme.css
@@ -15,27 +15,31 @@ html {
   --txtfieldborder: #666666;
   --txtfieldhoverborder: #00000;
   --relaynodetxt: #646464;
-  --chatmenuhover: #eeeeee;
-  --chatmenuactive: #ebebeb;
+  --menuhover: #eeeeee;
+  --menuactive: #ebebeb;
+  --mainmenutext:#080808;
+  --mainmenutexthover:#080808;
 }
 
 html[theme="dark"] {
-  --white: #36393f;
-  --black: #f8f8f8;
+  --white: #0f1a2e;
+  --black: #c9d2d9;
   --gray: #d8d8d8;
-  --graylight: #dddddd;
-  --plugback: #36393f;
-  --border: #fcfcfc;
-  --border2: #fdfdfd;
+  --graylight: #0b305e;
+  --plugback: #0f1a2e;
+  --border: #0b305e;
+  --border2: #0b305e;
   --copybutton: #d0d6de;
   --sectxt: #bbc3cd;
   --vdicon: #d0d6de;
-  --tradehead: #e8ebf0;
-  --tradeborder: #cccccc;
+  --tradehead: #008fd5;
+  --tradeborder: #0b305e;
   --tradehave: #dddddd;
-  --txtfieldborder: #cccccc;
+  --txtfieldborder: #0b305e;
   --txtfieldhoverborder: #ffffff;
   --relaynodetxt: #d4d4d4;
-  --chatmenuhover: #666666;
-  --chatmenuactive: #6b6b6b;
+  --menuhover: #008fd5;
+  --menuactive: #008fd5;
+  --mainmenutext:#008fd5;
+  --mainmenutexthover:#0f1a2e;
 }
diff --git a/qortal-ui-core/src/components/app-info.js b/qortal-ui-core/src/components/app-info.js
index 92c98a4b..16937bc2 100644
--- a/qortal-ui-core/src/components/app-info.js
+++ b/qortal-ui-core/src/components/app-info.js
@@ -53,7 +53,7 @@ class AppInfo extends connect(store)(LitElement) {
                 #profileInMenu {
                     flex: 0 0 100px;
                     padding:12px;
-                    border-top: 1px solid #eee;
+                    border-top: 1px solid var(--border);
                     background: var(--white);
                 }
                 .info {
diff --git a/qortal-ui-core/src/components/app-view.js b/qortal-ui-core/src/components/app-view.js
index 792b15cf..64de88e5 100644
--- a/qortal-ui-core/src/components/app-view.js
+++ b/qortal-ui-core/src/components/app-view.js
@@ -48,7 +48,7 @@ class AppView extends connect(store)(LitElement) {
                 app-toolbar {
                     background: var(--white);
                     color: var(--black);
-                    border-top: 1px solid rgb(238, 238, 238);
+                    border-top: var(--border);
                 }
 
                 #sideBar {
diff --git a/qortal-ui-core/src/components/settings-view/user-settings.js b/qortal-ui-core/src/components/settings-view/user-settings.js
index 5d1293d0..0170fdcd 100644
--- a/qortal-ui-core/src/components/settings-view/user-settings.js
+++ b/qortal-ui-core/src/components/settings-view/user-settings.js
@@ -85,7 +85,7 @@ class UserSettings extends connect(store)(LitElement) {
             .leftBar {
                 background-color: var(--white);
                 color: var(--black);
-                border: 1px solid #a1a1a1;
+                border: 1px solid var(--border);
                 padding: 20px 0 0 0;
                 border-radius: 5px;
             }
@@ -107,7 +107,7 @@ class UserSettings extends connect(store)(LitElement) {
             }
 
             .leftBar ul li {
-                border-bottom: 1px solid #DDD;    
+                border-bottom: 1px solid var(--border);
             }
 
             .leftBar ul li:last-child {
@@ -129,7 +129,7 @@ class UserSettings extends connect(store)(LitElement) {
             }
 
             .leftBar ul li a:hover {
-                background-color: #f6f6f6;
+                background-color: var(--menuhover);
                 color: #515151;
             }
 
@@ -139,7 +139,7 @@ class UserSettings extends connect(store)(LitElement) {
 
             .leftBar ul li a.active {
                 color: #515151;
-                background-color: #eee;
+                background-color: var(--menuactive);
                 border-left: 2px solid #515151;
                 margin-left: -2px;
             }
@@ -147,7 +147,7 @@ class UserSettings extends connect(store)(LitElement) {
             .mainPage {
                 background-color: var(--white);
                 color: var(--black);
-                border: 1px solid #a1a1a1;
+                border: 1px solid var(--border);
                 padding: 20px 0 10px 0;
                 border-radius: 5px;
                 font-size: 16px;
diff --git a/qortal-ui-core/src/components/sidenav-menu.js b/qortal-ui-core/src/components/sidenav-menu.js
index 55a4367e..e407ad28 100644
--- a/qortal-ui-core/src/components/sidenav-menu.js
+++ b/qortal-ui-core/src/components/sidenav-menu.js
@@ -38,11 +38,11 @@ class SidenavMenu extends connect(store)(LitElement) {
           display: block;
           text-decoration: none;
           padding-left: 20px;
-          color: var(--black);
+          color: var(--mainmenutext);
           text-align: left;
           height: 48px;
           position: relative;
-          border-bottom: 1px solid #EEE;
+          border-bottom: 1px solid var(--border);
           outline: none;
         }
 
@@ -75,14 +75,14 @@ class SidenavMenu extends connect(store)(LitElement) {
         }
 
         .mcd-menu li:hover > a {
-            background: #f8f8f8;
-            color: #515151;
+            background: var(--menuhover);
+            color: var(--mainmenutexthover);
         }
 
         .mcd-menu li a.active {
           position: relative;
           color: #515151;
-          background-color: #eee;
+          background-color: var(--menuactive);
           outline: none;
         }
 
@@ -153,7 +153,7 @@ class SidenavMenu extends connect(store)(LitElement) {
         .mcd-menu li ul li a {
           text-align: left;
           border: 0;
-          border-bottom: 1px solid #EEE;
+          border-bottom: 1px solid var(--border);
           height: auto;
           outline: none;
         }
diff --git a/qortal-ui-core/src/components/wallet-profile.js b/qortal-ui-core/src/components/wallet-profile.js
index 4f98c85d..be67c5cd 100644
--- a/qortal-ui-core/src/components/wallet-profile.js
+++ b/qortal-ui-core/src/components/wallet-profile.js
@@ -35,7 +35,7 @@ class WalletProfile extends connect(store)(LitElement) {
             <style>
                 #profileInMenu {
                     padding: 12px;
-                    border-top: 1px solid rgb(238, 238, 238);
+                    border-top: var(--border);
                     background: var(--white);
                     color: var(--black);
                 }
diff --git a/qortal-ui-core/src/functional-components/copy-text-menu.js b/qortal-ui-core/src/functional-components/copy-text-menu.js
index b0759377..7add3a13 100644
--- a/qortal-ui-core/src/functional-components/copy-text-menu.js
+++ b/qortal-ui-core/src/functional-components/copy-text-menu.js
@@ -41,7 +41,7 @@ class CopyTextMenu extends connect(store)(LitElement) {
                     position: absolute;
                     pointer-events: none;
                     padding: 5px, 0;
-                    border: 1px solid #B2B2B2;
+                    border: 1px solid var(--border);
                     min-width: 150px;
                     max-width: 300px;
                     background: #F9F9F9;
diff --git a/qortal-ui-plugins/plugins/core/components/ChatHead.js b/qortal-ui-plugins/plugins/core/components/ChatHead.js
index b08ca7d9..4ec0fab2 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatHead.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatHead.js
@@ -25,11 +25,11 @@ class ChatHead extends LitElement {
             }
 
             li:hover {
-                background-color: var(--chatmenuhover);
+                background-color: var(--menuhover);
             }
 
             .active {
-                background: var(--chatmenuactive);
+                background: var(--menuactive);
                 border-left: 4px solid #3498db;
             }
 
diff --git a/qortal-ui-plugins/plugins/core/group-management/group-management.src.js b/qortal-ui-plugins/plugins/core/group-management/group-management.src.js
index 311a8b53..a8a2fbd5 100644
--- a/qortal-ui-plugins/plugins/core/group-management/group-management.src.js
+++ b/qortal-ui-plugins/plugins/core/group-management/group-management.src.js
@@ -75,7 +75,7 @@ class GroupManagement extends LitElement {
             }
 
             .divCard {
-                border: 1px solid #eee;
+                border: 1px solid var(--border);
                 padding: 1em;
                 box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
                 margin-bottom: 2em;
diff --git a/qortal-ui-plugins/plugins/core/messaging/messaging.src.js b/qortal-ui-plugins/plugins/core/messaging/messaging.src.js
index 19a6fe6f..68ebe567 100644
--- a/qortal-ui-plugins/plugins/core/messaging/messaging.src.js
+++ b/qortal-ui-plugins/plugins/core/messaging/messaging.src.js
@@ -67,7 +67,7 @@ class Messaging extends LitElement {
             }
 
             .divCard {
-                border: 1px solid #eee;
+                border: 1px solid var(--border);
                 padding: 1em;
                 box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
                 margin-bottom: 1.5rem;
diff --git a/qortal-ui-plugins/plugins/core/minting/minting-info.src.js b/qortal-ui-plugins/plugins/core/minting/minting-info.src.js
index 74a8c66d..ee8784bf 100644
--- a/qortal-ui-plugins/plugins/core/minting/minting-info.src.js
+++ b/qortal-ui-plugins/plugins/core/minting/minting-info.src.js
@@ -96,7 +96,7 @@ class MintingInfo extends LitElement {
         }
 
         .content-box {
-            border: 1px solid #a1a1a1;
+            border: 1px solid var(--border);
             border-radius: 10px;
             padding: 10px 25px;
             text-align: center;
diff --git a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
index 66ddc9a2..acba8ff6 100644
--- a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
+++ b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
@@ -50,7 +50,7 @@ class NameRegistration extends LitElement {
             }
 
             .divCard {
-                border: 1px solid #eee;
+                border: 1px solid var(--border);
                 padding: 1em;
                 box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
             }
diff --git a/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js b/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
index 657c2af1..6351e370 100644
--- a/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
+++ b/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
@@ -76,7 +76,7 @@ class Puzzles extends LitElement {
 		}
 
 		.divCard {
-			border: 1px solid #eee;
+			border: 1px solid var(--border);
 			padding: 1em;
 			box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
 			margin-bottom: 2em;
diff --git a/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js b/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js
index 006792b7..6a7de60a 100644
--- a/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js
+++ b/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js
@@ -92,7 +92,7 @@ class DataManagement extends LitElement {
             }
 
             .divCard {
-                border: 1px solid #eee;
+                border: 1px solid var(--border);
                 padding: 1em;
                 box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
                 margin-bottom: 2em;
diff --git a/qortal-ui-plugins/plugins/core/qdn/websites.src.js b/qortal-ui-plugins/plugins/core/qdn/websites.src.js
index 62b29bc8..3eb65edf 100644
--- a/qortal-ui-plugins/plugins/core/qdn/websites.src.js
+++ b/qortal-ui-plugins/plugins/core/qdn/websites.src.js
@@ -121,7 +121,7 @@ class Websites extends LitElement {
             }
 
             .divCard {
-                border: 1px solid #eee;
+                border: 1px solid var(--border);
                 padding: 1em;
                 box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
                 margin-bottom: 2em;
diff --git a/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js b/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
index 82c38759..2b8bff8c 100644
--- a/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
+++ b/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
@@ -56,7 +56,7 @@ class RewardShare extends LitElement {
             }
 
             .divCard {
-                border: 1px solid #eee;
+                border: 1px solid var(--border);
                 padding: 1em;
                 box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
             }
diff --git a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
index 2487c0c4..43f671ad 100644
--- a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
+++ b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
@@ -246,7 +246,7 @@ class MultiWallet extends LitElement {
 				height: 100vh;
 				border-top-left-radius: inherit;
 				border-bottom-left-radius: inherit;
-    				border-right: 1px solid #eee;
+    			border-right: 1px solid var(--border);
 			}
 
 			.transactions-wrapper {
@@ -278,7 +278,7 @@ class MultiWallet extends LitElement {
 				margin-top: 60px;
 				margin-left: 20px;
 				margin-right: 20px;
-				border-top: 1px solid #e5e5e5;
+				border-top: 1px solid var(--border);
 				padding-top: 0px;
 				height: 100%;
 			}
@@ -353,11 +353,11 @@ class MultiWallet extends LitElement {
 			}
 
 			.currency-box:not(:last-child) {
-				border-bottom: 1px solid #eee;
+				border-bottom: var(--border);
 			}
 
 			.active {
-				background: #bbb;
+				background: var(--menuactive);
 			}
 
 			.currency-image {
@@ -376,7 +376,7 @@ class MultiWallet extends LitElement {
 			}
 
 			.currency-box:hover {
-				background: #bbb;
+				background: var(--menuhover);
 			}
 
 			.currency-box.active,
@@ -566,7 +566,7 @@ class MultiWallet extends LitElement {
         return html`
 			<div class="wrapper">
 				<div class="wallet">
-					<div style="font-size: 20px; color: var(--black); padding: 16px; border-bottom: 1px solid #eee;">Wallets</div>
+					<div style="font-size: 20px; color: var(--black); padding: 16px; border-bottom: 1px solid var(--border);">Wallets</div>
 					<div class="cards">
 						<div coin="qort" class="currency-box qort active">
 							<div class="currency-image"></div>