From f313a39b8183f3ea986ebb7bb46991f8f1a6a0c8 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 15 Feb 2021 23:45:13 +0100
Subject: [PATCH] Added brand color and input styles to dark theme

---
 src/App.scss                    | 14 -----
 src/common/AsideMenu.scss       |  8 +--
 src/common/MainHeader.scss      |  2 +-
 src/common/react-tagsinput.scss | 10 +++-
 src/index.scss                  | 98 +++++++++++++++++++++++----------
 src/servers/Overview.scss       |  2 +-
 src/short-urls/Paginator.scss   |  2 +-
 src/tags/TagCard.scss           |  6 +-
 src/theme/theme.scss            | 47 ++++++++++++++++
 src/utils/DateInput.scss        | 17 ++++++
 src/utils/DropdownBtn.scss      |  4 +-
 src/utils/base.scss             | 13 +----
 src/visits/VisitsStats.scss     |  2 +-
 13 files changed, 152 insertions(+), 73 deletions(-)
 create mode 100644 src/theme/theme.scss

diff --git a/src/App.scss b/src/App.scss
index ca211d43..a6566e27 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -24,17 +24,3 @@
     padding: 0 15px;
   }
 }
-
-html:not([data-theme='dark']) {
-  --primary-color: #{$lightPrimaryColor};
-  --primary-color-alfa: #{$lightPrimaryColorAlfa};
-  --secondary-color: #{$lightSecondaryColor};
-  --text-color: #{$lightTextColor};
-}
-
-html[data-theme='dark'] {
-  --primary-color: #{$darkPrimaryColor};
-  --primary-color-alfa: #{$darkPrimaryColorAlfa};
-  --secondary-color: #{$darkSecondaryColor};
-  --text-color: #{$darkTextColor};
-}
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index d92eccf6..35b0339e 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -52,14 +52,10 @@
   background-color: var(--secondary-color);
 }
 
-.aside-menu__item--selected {
-  color: #ffffff;
-  background-color: $mainColor;
-}
-
+.aside-menu__item--selected,
 .aside-menu__item--selected:hover {
   color: #ffffff;
-  background-color: $mainColor;
+  background-color: var(--brand-color);
 }
 
 .aside-menu__item--divider {
diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss
index 89279c68..03d9ce80 100644
--- a/src/common/MainHeader.scss
+++ b/src/common/MainHeader.scss
@@ -1,8 +1,8 @@
 @import '../utils/base';
 
 .main-header.main-header {
-  background-color: $mainColor !important;
   color: white;
+  background-color: var(--brand-color) !important;
 
   .navbar-brand {
     color: inherit !important;
diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss
index 6753a0f9..54a5facb 100644
--- a/src/common/react-tagsinput.scss
+++ b/src/common/react-tagsinput.scss
@@ -1,6 +1,6 @@
 .react-tagsinput {
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
+  background-color: var(--input-color);
+  border: 1px solid var(--input-border-color);
   border-radius: .25rem;
   overflow: hidden;
   min-height: 2.6rem;
@@ -10,7 +10,7 @@
 
 .react-tagsinput--focused {
   border-color: #80bdff;
-  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
+  box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
 }
 
 .react-tagsinput-tag {
@@ -46,3 +46,7 @@
   font-size: 1.25rem;
   color: #495057;
 }
+
+.react-autosuggest__suggestion--highlighted {
+  background-color: var(--active-color);
+}
diff --git a/src/index.scss b/src/index.scss
index f4835f92..691c537e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,7 @@
 @import './utils/base';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tagsinput.scss';
+@import './theme/theme';
 
 * {
   outline: none !important;
@@ -14,24 +15,69 @@ body,
   color: var(--text-color);
 }
 
+@media (min-width: $smMin) {
+  #root {
+    transition: filter 300ms;
+  }
+
+  .modal-open #root {
+    filter: blur(1.5px);
+  }
+}
+
 .bg-main {
   background-color: $mainColor !important;
 }
 
-.card {
-  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
-}
-
-.card,
+.card-body,
 .card-header,
-.card-body {
-  background-color: var(--primary-color);
+.list-group-item {
+  background-color: transparent;
 }
 
 .card-footer {
   background-color: var(--primary-color-alfa);
 }
 
+.card {
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+  background-color: var(--primary-color);
+}
+
+.modal-content,
+.page-link,
+.page-item.disabled .page-link,
+.dropdown-menu {
+  background-color: var(--primary-color);
+}
+
+.modal-header,
+.modal-footer,
+.card-header,
+.card-footer,
+.table thead th,
+.table th,
+.table td,
+.page-link,
+.page-link:hover,
+.page-item.disabled .page-link,
+.dropdown-divider {
+  border-color: var(--border-color);
+}
+
+.page-link:hover {
+  background-color: var(--secondary-color);
+}
+
+.page-item.active .page-link {
+  background-color: var(--brand-color);
+  border-color: var(--brand-color);
+}
+
+.pagination .page-link {
+  cursor: pointer;
+}
+
 .container-xl {
   @media (min-width: $xlgMin) {
     max-width: 1320px;
@@ -43,22 +89,29 @@ body,
   }
 }
 
+.dropdown-item {
+  color: var(--text-color);
+}
+
 .dropdown-item:not(:disabled) {
   cursor: pointer;
 }
 
+.dropdown-item:focus:not(:disabled),
+.dropdown-item:hover:not(:disabled),
 .dropdown-item.active:not(:disabled),
 .dropdown-item:active:not(:disabled) {
-  background-color: $lightGrey !important;
-  color: inherit !important;
+  background-color: var(--active-color) !important;
+  color: var(--text-color) !important;
 }
 
 .badge-main {
   color: #ffffff;
-  background-color: $mainColor;
+  background-color: var(--brand-color);
 }
 
-.table {
+.table,
+.table-hover tbody tr:hover {
   color: var(--text-color);
 }
 
@@ -66,13 +119,10 @@ body,
   background-color: var(--secondary-color);
 }
 
-.react-datepicker__input-container,
-.react-datepicker-wrapper {
-  display: block !important;
-}
-
-.react-datepicker-popper {
-  z-index: 2;
+.form-control,
+.form-control:focus {
+  background-color: var(--input-color);
+  border-color: var(--input-border-color);
 }
 
 .navbar-brand {
@@ -81,10 +131,6 @@ body,
   }
 }
 
-.pagination .page-link {
-  cursor: pointer;
-}
-
 .indivisible {
   white-space: nowrap;
 }
@@ -99,14 +145,6 @@ body,
   white-space: nowrap;
 }
 
-.react-datepicker__day--keyboard-selected {
-  background-color: $mainColor;
-
-  &:hover {
-    background-color: darken($mainColor, 12%);
-  }
-}
-
 .progress-bar {
   background-color: $mainColor;
 }
diff --git a/src/servers/Overview.scss b/src/servers/Overview.scss
index 75a56ec4..d7f4dba2 100644
--- a/src/servers/Overview.scss
+++ b/src/servers/Overview.scss
@@ -2,7 +2,7 @@
 
 .overview__card.overview__card {
   text-align: center;
-  border-top: 3px solid $mainColor;
+  border-top: 3px solid var(--brand-color);
 }
 
 .overview__card-title {
diff --git a/src/short-urls/Paginator.scss b/src/short-urls/Paginator.scss
index fbee7e23..b28b471a 100644
--- a/src/short-urls/Paginator.scss
+++ b/src/short-urls/Paginator.scss
@@ -3,5 +3,5 @@
   bottom: 0;
   background-color: var(--primary-color-alfa);
   padding: .75rem 0;
-  border-top: 1px solid rgba(black, .125);
+  border-top: 1px solid var(--border-color);
 }
diff --git a/src/tags/TagCard.scss b/src/tags/TagCard.scss
index ce6849aa..ecb79abe 100644
--- a/src/tags/TagCard.scss
+++ b/src/tags/TagCard.scss
@@ -1,3 +1,5 @@
+@import '../utils/base';
+
 .tag-card.tag-card {
   margin-bottom: .5rem;
 }
@@ -26,11 +28,11 @@
 }
 
 .tag-card__tag-name {
-  color: #007bff;
+  color: $mainColor;
   cursor: pointer;
 }
 
 .tag-card__tag-name:hover {
-  color: #0056b3;
+  color: darken($mainColor, 15%);
   text-decoration: underline;
 }
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
new file mode 100644
index 00000000..5d9dd194
--- /dev/null
+++ b/src/theme/theme.scss
@@ -0,0 +1,47 @@
+@import '../utils/base';
+
+// Light theme colors
+$lightPrimaryColor: #ffffff;
+$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
+$lightSecondaryColor: $lightColor;
+$lightTextColor: #212529;
+$lightBorderColor: rgba(0, 0, 0, .125);
+$lightActiveColor: $lightGrey;
+$lightBrandColor: $mainColor;
+$lightInputColor: $lightPrimaryColor;
+$lightBorderInputColor: rgba(0, 0, 0, .19);
+
+// Dark theme colors
+$darkPrimaryColor: #161b22;
+$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .7);
+$darkSecondaryColor: #0f131a;
+$darkTextColor: rgb(201, 209, 217);
+$darkBorderColor: rgba(0, 0, 0, .2);
+$darkActiveColor: $darkSecondaryColor;
+$darkBrandColor: #0b2d4e;
+$darkInputColor: darken($darkPrimaryColor, 2%);
+$darkBorderInputColor: rgba(0, 0, 0, .3);
+
+html:not([data-theme='dark']) {
+  --primary-color: #{$lightPrimaryColor};
+  --primary-color-alfa: #{$lightPrimaryColorAlfa};
+  --secondary-color: #{$lightSecondaryColor};
+  --text-color: #{$lightTextColor};
+  --border-color: #{$lightBorderColor};
+  --active-color: #{$lightActiveColor};
+  --brand-color: #{$lightBrandColor};
+  --input-color: #{$lightInputColor};
+  --input-border-color: #{$lightBorderInputColor};
+}
+
+html[data-theme='dark'] {
+  --primary-color: #{$darkPrimaryColor};
+  --primary-color-alfa: #{$darkPrimaryColorAlfa};
+  --secondary-color: #{$darkSecondaryColor};
+  --text-color: #{$darkTextColor};
+  --border-color: #{$darkBorderColor};
+  --active-color: #{$darkActiveColor};
+  --brand-color: #{$darkBrandColor};
+  --input-color: #{$darkInputColor};
+  --input-border-color: #{$darkBorderInputColor};
+}
diff --git a/src/utils/DateInput.scss b/src/utils/DateInput.scss
index 9653c38b..ee27d849 100644
--- a/src/utils/DateInput.scss
+++ b/src/utils/DateInput.scss
@@ -32,3 +32,20 @@
   background-color: #333333;
   font-size: 14px;
 }
+
+.react-datepicker__input-container,
+.react-datepicker-wrapper {
+  display: block !important;
+}
+
+.react-datepicker-popper {
+  z-index: 2;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: $mainColor;
+
+  &:hover {
+    background-color: darken($mainColor, 12%);
+  }
+}
diff --git a/src/utils/DropdownBtn.scss b/src/utils/DropdownBtn.scss
index 2327d45b..d81c18fe 100644
--- a/src/utils/DropdownBtn.scss
+++ b/src/utils/DropdownBtn.scss
@@ -7,9 +7,9 @@
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
 .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
   color: #6c757d;
-  background-color: var(--primary-color);
+  background-color: var(--input-color);
   text-align: left;
-  border-color: rgba(0, 0, 0, .125);
+  border-color: var(--input-border-color);
 }
 
 .dropdown-btn__toggle.dropdown-btn__toggle:after {
diff --git a/src/utils/base.scss b/src/utils/base.scss
index 62870475..ff82f97f 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -12,21 +12,10 @@ $responsiveTableBreakpoint: $mdMax;
 // Colors
 $mainColor: #4696e5;
 $lightColor: #f5f6fe;
-$lightGrey: #dddddd;
+$lightGrey: #eeeeee;
 $dangerColor: #dc3545;
 $mediumGrey: #dee2e6;
 
-// Themes
-$lightPrimaryColor: #ffffff;
-$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
-$lightSecondaryColor: $lightColor;
-$lightTextColor: #212529;
-
-$darkPrimaryColor: #161b22;
-$darkPrimaryColorAlfa: rgba(#161b22, .5);
-$darkSecondaryColor: #0d1117;
-$darkTextColor: #ffffff;
-
 // Misc
 $headerHeight: 57px;
 $asideMenuWidth: 260px;
diff --git a/src/visits/VisitsStats.scss b/src/visits/VisitsStats.scss
index dc945d12..1caafc6d 100644
--- a/src/visits/VisitsStats.scss
+++ b/src/visits/VisitsStats.scss
@@ -25,6 +25,6 @@
 
 .visits-stats__nav-link.active {
   border-color: $mainColor;
-  background-color: white !important;
+  background-color: var(--primary-color) !important;
   color: $mainColor !important;
 }