github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1250 from prymitive/tweak-filter-input

Browse Source 
fix(ui): follow navbar button colors when setting color for filter in…
This commit is contained in:
Łukasz Mierzwa
2019-12-13 11:01:31 +00:00
committed by GitHub
parent da38bcc2ff 51a67d03d8
commit 6ec256f573
7 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/Components/NavBar/FilterInput/History.js
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"

6
ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
View File

@@ -2,9 +2,9 @@
exports[`<FilterInput /> matches snapshot on default render 1`] = `
"
<div class=\\"input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light bg-transparent\\">
<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\\"

4
ui/src/Components/NavBar/FilterInput/index.js
View File

@@ -157,12 +157,12 @@ const FilterInput = onClickOutside(
data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
>
<div
className={`input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light ${
className={`input-group w-100 mr-2 components-filterinput-outer ${
this.inputStore.focused ? "bg-focused" : "bg-transparent"
}`}
>
<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>

7
ui/src/Styles/Components/FilterInput.scss
View File

@@ -1,3 +1,10 @@
.input-group.components-filterinput-outer {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: $border-width solid $filterinput-border;
}
.form-control.components-filterinput {
cursor: text;
height: auto;

13
ui/src/Styles/Components/NavBar.scss
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;
}
}

6
ui/src/Styles/DarkTheme.scss
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;
@@ -64,6 +69,7 @@ $accordion-active-bg: $gray-700;
$filter-input-hoover-bg: $gray-700;
$filter-input-hoover-color: $white;
$placeholder-color: $gray-600;
$filterinput-border: $navbar-dark-color;
$datepicker__background-color: $gray-700;
$datepicker__border-color: $gray-800;

6
ui/src/Styles/LightTheme.scss
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;
@@ -55,6 +60,7 @@ $accordion-active-bg: $gray-200;
$filter-input-hoover-bg: $white;
$filter-input-hoover-color: $black;
$placeholder-color: $secondary;
$filterinput-border: $navbar-dark-color;
$datepicker__background-color: $white;
$datepicker__border-color: $gray-300;