fix(ui): more consistent colors on navbar elements

This commit is contained in:
Łukasz Mierzwa
2019-12-13 10:30:46 +00:00
parent f58f11c512
commit 51a67d03d8
6 changed files with 22 additions and 9 deletions

View File

@@ -238,7 +238,7 @@ const History = observer(
<button
ref={ref}
onClick={this.collapse.toggle}
className="input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2"
className="input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon"
type="button"
data-toggle="dropdown"
aria-haspopup="true"

View File

@@ -4,7 +4,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
"
<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
<div class=\\"input-group-prepend\\">
<span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent text-white\\">
<span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -45,7 +45,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
</div>
</div>
<div class=\\"input-group-append bg-transparent\\">
<button class=\\"input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
<button class=\\"input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon\\"
type=\\"button\\"
data-toggle=\\"dropdown\\"
aria-haspopup=\\"true\\"

View File

@@ -162,7 +162,7 @@ const FilterInput = onClickOutside(
}`}
>
<div className="input-group-prepend">
<span className="input-group-text px-2 border-0 rounded-0 bg-transparent text-white">
<span className="input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon">
<FontAwesomeIcon icon={faSearch} />
</span>
</div>

View File

@@ -1,12 +1,15 @@
.navbar-brand {
min-width: 2.5rem;
&:hover,
&:focus {
color: $green !important;
}
}
.components-navbar-button:hover {
border-bottom: $border-width solid $info;
}
.components-navbar-icon {
color: $navbar-dark-color;
&.cursor-pointer:hover {
color: $navbar-dark-hover-color;
}
}

View File

@@ -22,6 +22,11 @@ $light: $gray-800;
// make links light gray by default instead of green
$link-color: $gray-400;
$navbar-dark-brand-color: $navbar-dark-color;
$navbar-dark-brand-hover-color: $white;
$navbar-dark-hover-color: $white;
$navbar-dark-active-color: $white;
// fix active tab color, for some reason it ends up with $primary as bg color
$nav-tabs-link-active-bg: $gray-800;

View File

@@ -20,6 +20,11 @@ $btn-active-box-shadow: 0;
// make links light gray by default instead of green
$link-color: $gray-700;
$navbar-dark-brand-color: $navbar-dark-color;
$navbar-dark-brand-hover-color: $gray-500;
$navbar-dark-hover-color: $gray-500;
$navbar-dark-active-color: $gray-500;
// fix active tab color, for some reason it ends up with $primary as bg color
$nav-tabs-link-active-bg: #fff;