More style fixes for dark theme

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;

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 {

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);
 }

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

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,

src/servers/Overview.scss

@@ -7,5 +7,5 @@
 
 .overview__card-title {
   text-transform: uppercase;
-  color: #6c757d;
+  color: $textPlaceholder;
 }

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;
   }
 }

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};
 }

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);
 }

src/utils/base.scss

@@ -15,6 +15,7 @@ $lightColor: #f5f6fe;
 $lightGrey: #eeeeee;
 $dangerColor: #dc3545;
 $mediumGrey: #dee2e6;
+$textPlaceholder: #6c757d;
 
 // Misc
 $headerHeight: 57px;