From 3cd30b61e488b8865ccb1f49f684d76d1c451d1c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 27 Feb 2021 08:23:06 +0100
Subject: [PATCH] More style fixes for dark theme

---
 src/common/MenuLayout.scss               |  2 +-
 src/common/react-tagsinput.scss          |  8 +++++++-
 src/domains/DomainSelector.scss          | 11 +++++++++--
 src/domains/DomainSelector.tsx           |  2 +-
 src/index.scss                           |  6 +++++-
 src/servers/Overview.scss                |  2 +-
 src/short-urls/helpers/ShortUrlsRow.scss |  2 +-
 src/theme/theme.scss                     |  6 +++++-
 src/utils/DropdownBtn.scss               |  2 +-
 src/utils/base.scss                      |  1 +
 10 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss
index 63f476c5..7eae132d 100644
--- a/src/common/MenuLayout.scss
+++ b/src/common/MenuLayout.scss
@@ -22,7 +22,7 @@
   z-index: 1035;
   font-size: 1.5rem;
   cursor: pointer;
-  color: var(--primary-color-alfa);
+  color: rgba(255, 255, 255, .5);
 
   @media (max-width: $smMax) {
     display: inline-block;
diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss
index 54a5facb..6ecd1cd3 100644
--- a/src/common/react-tagsinput.scss
+++ b/src/common/react-tagsinput.scss
@@ -1,3 +1,5 @@
+@import '../utils/base';
+
 .react-tagsinput {
   background-color: var(--input-color);
   border: 1px solid var(--input-border-color);
@@ -44,7 +46,11 @@
   width: 100%;
   margin-bottom: 6px;
   font-size: 1.25rem;
-  color: #495057;
+  color: var(--input-text-color);
+}
+
+.react-tagsinput-input::placeholder {
+  color: $textPlaceholder;
 }
 
 .react-autosuggest__suggestion--highlighted {
diff --git a/src/domains/DomainSelector.scss b/src/domains/DomainSelector.scss
index 89e02433..729f58ea 100644
--- a/src/domains/DomainSelector.scss
+++ b/src/domains/DomainSelector.scss
@@ -1,12 +1,19 @@
+@import '../utils/base';
 @import '../utils/mixins/vertical-align';
 
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn,
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:hover,
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:active {
+  color: $textPlaceholder !important;
+}
+
 .domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active,
 .domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:hover,
 .domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:active {
-  color: #495057 !important;
+  color: var(--input-text-color) !important;
 }
 
 .domains-dropdown__back-btn.domains-dropdown__back-btn,
 .domains-dropdown__back-btn.domains-dropdown__back-btn:hover {
-  border-color: #ced4da;
+  border-color: var(--border-color);
 }
diff --git a/src/domains/DomainSelector.tsx b/src/domains/DomainSelector.tsx
index c843f409..5ab1e591 100644
--- a/src/domains/DomainSelector.tsx
+++ b/src/domains/DomainSelector.tsx
@@ -54,7 +54,7 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
   ) : (
     <DropdownBtn
       text={valueIsEmpty ? 'Domain' : `Domain: ${value}`}
-      className={!valueIsEmpty ? 'domains-dropdown__toggle-btn--active' : ''}
+      className={!valueIsEmpty ? 'domains-dropdown__toggle-btn--active' : 'domains-dropdown__toggle-btn'}
     >
       {domains.map(({ domain, isDefault }) => (
         <DropdownItem
diff --git a/src/index.scss b/src/index.scss
index cbc87b15..65ebc4f1 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -60,7 +60,8 @@ body,
 .page-item.disabled .page-link,
 .dropdown-divider,
 .dropdown-menu,
-.list-group-item {
+.list-group-item,
+.modal-content {
   border-color: var(--border-color);
 }
 
@@ -116,6 +117,8 @@ body,
   background-color: var(--brand-color);
 }
 
+.close,
+.close:hover,
 .table,
 .table-hover tbody tr:hover {
   color: var(--text-color);
@@ -129,6 +132,7 @@ body,
 .form-control:focus {
   background-color: var(--primary-color);
   border-color: var(--input-border-color);
+  color: var(--input-text-color);
 }
 
 .form-control.disabled,
diff --git a/src/servers/Overview.scss b/src/servers/Overview.scss
index d7f4dba2..f8b49ad7 100644
--- a/src/servers/Overview.scss
+++ b/src/servers/Overview.scss
@@ -7,5 +7,5 @@
 
 .overview__card-title {
   text-transform: uppercase;
-  color: #6c757d;
+  color: $textPlaceholder;
 }
diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
index 89255646..17ec51ac 100644
--- a/src/short-urls/helpers/ShortUrlsRow.scss
+++ b/src/short-urls/helpers/ShortUrlsRow.scss
@@ -5,7 +5,7 @@
   @media (max-width: $responsiveTableBreakpoint) {
     display: block;
     margin-bottom: 10px;
-    border-bottom: 1px solid $lightGrey;
+    border-bottom: 1px solid var(--border-color);
     position: relative;
   }
 }
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 3316a644..e4f8cc64 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -10,13 +10,14 @@ $lightTableBorderColor: $mediumGrey;
 $lightActiveColor: $lightGrey;
 $lightBrandColor: $mainColor;
 $lightInputColor: $lightPrimaryColor;
+$lightInputTextColor: #495057;
 $lightDisabledInputColor: $lightColor;
 $lightBorderInputColor: rgba(0, 0, 0, .19);
 $lightTableHighlightColor: rgba(0, 0, 0, .075);
 
 // Dark theme colors
 $darkPrimaryColor: #161b22;
-$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .7);
+$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
 $darkSecondaryColor: #0f131a;
 $darkTextColor: rgb(201, 209, 217);
 $darkBorderColor: rgba(255, 255, 255, .15);
@@ -24,6 +25,7 @@ $darkTableBorderColor: #393d43;
 $darkActiveColor: $darkSecondaryColor;
 $darkBrandColor: #0b2d4e;
 $darkInputColor: darken($darkPrimaryColor, 2%);
+$darkInputTextColor: $darkTextColor;
 $darkDisabledInputColor: lighten($darkPrimaryColor, 2%);
 $darkBorderInputColor: $darkBorderColor;
 $darkTableHighlightColor: $darkBorderColor;
@@ -39,6 +41,7 @@ html:not([data-theme='dark']) {
   --input-color: #{$lightInputColor};
   --input-disabled-color: #{$lightDisabledInputColor};
   --input-border-color: #{$lightBorderInputColor};
+  --input-text-color: #{$lightInputTextColor};
   --table-border-color: #{$lightTableBorderColor};
   --table-highlight-color: #{$lightTableHighlightColor};
 }
@@ -54,6 +57,7 @@ html[data-theme='dark'] {
   --input-color: #{$darkInputColor};
   --input-disabled-color: #{$darkDisabledInputColor};
   --input-border-color: #{$darkBorderInputColor};
+  --input-text-color: #{$darkInputTextColor};
   --table-border-color: #{$darkTableBorderColor};
   --table-highlight-color: #{$darkTableHighlightColor};
 }
diff --git a/src/utils/DropdownBtn.scss b/src/utils/DropdownBtn.scss
index 663e8e09..f5c40c27 100644
--- a/src/utils/DropdownBtn.scss
+++ b/src/utils/DropdownBtn.scss
@@ -9,7 +9,7 @@
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
 .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
   text-align: left;
-  color: #6c757d;
+  color: var(--input-text-color);
   background-color: var(--primary-color);
   border-color: var(--input-border-color);
 }
diff --git a/src/utils/base.scss b/src/utils/base.scss
index ff82f97f..d5c52b2c 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -15,6 +15,7 @@ $lightColor: #f5f6fe;
 $lightGrey: #eeeeee;
 $dangerColor: #dc3545;
 $mediumGrey: #dee2e6;
+$textPlaceholder: #6c757d;
 
 // Misc
 $headerHeight: 57px;