More style fixes for dark theme

This commit is contained in:
Alejandro Celaya 2021-02-27 08:23:06 +01:00
parent ae4921b865
commit 3cd30b61e4
10 changed files with 32 additions and 10 deletions

View file

@ -22,7 +22,7 @@
z-index: 1035; z-index: 1035;
font-size: 1.5rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
color: var(--primary-color-alfa); color: rgba(255, 255, 255, .5);
@media (max-width: $smMax) { @media (max-width: $smMax) {
display: inline-block; display: inline-block;

View file

@ -1,3 +1,5 @@
@import '../utils/base';
.react-tagsinput { .react-tagsinput {
background-color: var(--input-color); background-color: var(--input-color);
border: 1px solid var(--input-border-color); border: 1px solid var(--input-border-color);
@ -44,7 +46,11 @@
width: 100%; width: 100%;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 1.25rem; font-size: 1.25rem;
color: #495057; color: var(--input-text-color);
}
.react-tagsinput-input::placeholder {
color: $textPlaceholder;
} }
.react-autosuggest__suggestion--highlighted { .react-autosuggest__suggestion--highlighted {

View file

@ -1,12 +1,19 @@
@import '../utils/base';
@import '../utils/mixins/vertical-align'; @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,
.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:hover, .domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:hover,
.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:active { .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,
.domains-dropdown__back-btn.domains-dropdown__back-btn:hover { .domains-dropdown__back-btn.domains-dropdown__back-btn:hover {
border-color: #ced4da; border-color: var(--border-color);
} }

View file

@ -54,7 +54,7 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
) : ( ) : (
<DropdownBtn <DropdownBtn
text={valueIsEmpty ? 'Domain' : `Domain: ${value}`} 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 }) => ( {domains.map(({ domain, isDefault }) => (
<DropdownItem <DropdownItem

View file

@ -60,7 +60,8 @@ body,
.page-item.disabled .page-link, .page-item.disabled .page-link,
.dropdown-divider, .dropdown-divider,
.dropdown-menu, .dropdown-menu,
.list-group-item { .list-group-item,
.modal-content {
border-color: var(--border-color); border-color: var(--border-color);
} }
@ -116,6 +117,8 @@ body,
background-color: var(--brand-color); background-color: var(--brand-color);
} }
.close,
.close:hover,
.table, .table,
.table-hover tbody tr:hover { .table-hover tbody tr:hover {
color: var(--text-color); color: var(--text-color);
@ -129,6 +132,7 @@ body,
.form-control:focus { .form-control:focus {
background-color: var(--primary-color); background-color: var(--primary-color);
border-color: var(--input-border-color); border-color: var(--input-border-color);
color: var(--input-text-color);
} }
.form-control.disabled, .form-control.disabled,

View file

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

View file

@ -5,7 +5,7 @@
@media (max-width: $responsiveTableBreakpoint) { @media (max-width: $responsiveTableBreakpoint) {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid $lightGrey; border-bottom: 1px solid var(--border-color);
position: relative; position: relative;
} }
} }

View file

@ -10,13 +10,14 @@ $lightTableBorderColor: $mediumGrey;
$lightActiveColor: $lightGrey; $lightActiveColor: $lightGrey;
$lightBrandColor: $mainColor; $lightBrandColor: $mainColor;
$lightInputColor: $lightPrimaryColor; $lightInputColor: $lightPrimaryColor;
$lightInputTextColor: #495057;
$lightDisabledInputColor: $lightColor; $lightDisabledInputColor: $lightColor;
$lightBorderInputColor: rgba(0, 0, 0, .19); $lightBorderInputColor: rgba(0, 0, 0, .19);
$lightTableHighlightColor: rgba(0, 0, 0, .075); $lightTableHighlightColor: rgba(0, 0, 0, .075);
// Dark theme colors // Dark theme colors
$darkPrimaryColor: #161b22; $darkPrimaryColor: #161b22;
$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .7); $darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
$darkSecondaryColor: #0f131a; $darkSecondaryColor: #0f131a;
$darkTextColor: rgb(201, 209, 217); $darkTextColor: rgb(201, 209, 217);
$darkBorderColor: rgba(255, 255, 255, .15); $darkBorderColor: rgba(255, 255, 255, .15);
@ -24,6 +25,7 @@ $darkTableBorderColor: #393d43;
$darkActiveColor: $darkSecondaryColor; $darkActiveColor: $darkSecondaryColor;
$darkBrandColor: #0b2d4e; $darkBrandColor: #0b2d4e;
$darkInputColor: darken($darkPrimaryColor, 2%); $darkInputColor: darken($darkPrimaryColor, 2%);
$darkInputTextColor: $darkTextColor;
$darkDisabledInputColor: lighten($darkPrimaryColor, 2%); $darkDisabledInputColor: lighten($darkPrimaryColor, 2%);
$darkBorderInputColor: $darkBorderColor; $darkBorderInputColor: $darkBorderColor;
$darkTableHighlightColor: $darkBorderColor; $darkTableHighlightColor: $darkBorderColor;
@ -39,6 +41,7 @@ html:not([data-theme='dark']) {
--input-color: #{$lightInputColor}; --input-color: #{$lightInputColor};
--input-disabled-color: #{$lightDisabledInputColor}; --input-disabled-color: #{$lightDisabledInputColor};
--input-border-color: #{$lightBorderInputColor}; --input-border-color: #{$lightBorderInputColor};
--input-text-color: #{$lightInputTextColor};
--table-border-color: #{$lightTableBorderColor}; --table-border-color: #{$lightTableBorderColor};
--table-highlight-color: #{$lightTableHighlightColor}; --table-highlight-color: #{$lightTableHighlightColor};
} }
@ -54,6 +57,7 @@ html[data-theme='dark'] {
--input-color: #{$darkInputColor}; --input-color: #{$darkInputColor};
--input-disabled-color: #{$darkDisabledInputColor}; --input-disabled-color: #{$darkDisabledInputColor};
--input-border-color: #{$darkBorderInputColor}; --input-border-color: #{$darkBorderInputColor};
--input-text-color: #{$darkInputTextColor};
--table-border-color: #{$darkTableBorderColor}; --table-border-color: #{$darkTableBorderColor};
--table-highlight-color: #{$darkTableHighlightColor}; --table-highlight-color: #{$darkTableHighlightColor};
} }

View file

@ -9,7 +9,7 @@
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover, .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
.show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle { .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
text-align: left; text-align: left;
color: #6c757d; color: var(--input-text-color);
background-color: var(--primary-color); background-color: var(--primary-color);
border-color: var(--input-border-color); border-color: var(--input-border-color);
} }

View file

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