Makes colorings on top bar elements consistent

This commit is contained in:
Vignesh Joglekar 2021-05-25 15:21:03 -05:00
parent fa7f6c2268
commit 81c5e05760
3 changed files with 6 additions and 5 deletions

View File

@ -161,10 +161,10 @@ class DatePicker extends React.Component {
const leftClasses = `flex items-center px-2 border-r border-gray-300 rounded-l const leftClasses = `flex items-center px-2 border-r border-gray-300 rounded-l
dark:border-gray-500 dark:text-gray-100 ${ dark:border-gray-500 dark:text-gray-100 ${
disabledLeft ? "bg-gray-200 dark:bg-gray-900" : "" disabledLeft ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-200 dark:hover:bg-gray-900"
}`; }`;
const rightClasses = `flex items-center px-2 rounded-r dark:text-gray-100 ${ const rightClasses = `flex items-center px-2 rounded-r dark:text-gray-100 ${
disabledRight ? "bg-gray-200 dark:bg-gray-900" : "" disabledRight ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-200 dark:hover:bg-gray-900"
}`; }`;
return ( return (
<div className="flex rounded shadow bg-white mr-4 cursor-pointer dark:bg-gray-800"> <div className="flex rounded shadow bg-white mr-4 cursor-pointer dark:bg-gray-800">
@ -242,7 +242,7 @@ class DatePicker extends React.Component {
onKeyPress={this.open} onKeyPress={this.open}
className="flex items-center justify-between rounded bg-white dark:bg-gray-800 shadow px-4 className="flex items-center justify-between rounded bg-white dark:bg-gray-800 shadow px-4
pr-3 py-2 leading-tight cursor-pointer text-sm font-medium text-gray-800 pr-3 py-2 leading-tight cursor-pointer text-sm font-medium text-gray-800
dark:text-gray-200 h-full" dark:text-gray-200 h-full hover:bg-gray-200 dark:hover:bg-gray-900"
tabIndex="0" tabIndex="0"
role="button" role="button"
aria-haspopup="true" aria-haspopup="true"
@ -312,7 +312,7 @@ class DatePicker extends React.Component {
to={{from: false, to: false, period, ...opts}} to={{from: false, to: false, period, ...opts}}
onClick={this.close.bind(this)} onClick={this.close.bind(this)}
query={this.props.query} query={this.props.query}
className={`${boldClass } px-4 py-2 md:text-sm leading-tight hover:bg-gray-100 className={`${boldClass } px-4 py-2 md:text-sm leading-tight hover:bg-gray-200
dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 flex items-center justify-between`} dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 flex items-center justify-between`}
> >
{text} {text}

View File

@ -284,7 +284,7 @@ class Filters extends React.Component {
return ( return (
<div id="filters" className="flex flex-grow pl-2 flex-wrap"> <div id="filters" className="flex flex-grow pl-2 flex-wrap">
{(this.appliedFilters.map((filter) => this.renderListFilter(history, filter, query)))} {(this.appliedFilters.map((filter) => this.renderListFilter(history, filter, query)))}
<Link to={`/${encodeURIComponent(site.domain)}/filter${window.location.search}`} className={`button ${viewport <= 768 ? "px-2 mr-1" : "px-3 mr-2"} py-2 cursor-pointer ml-auto text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-800`}> <Link to={`/${encodeURIComponent(site.domain)}/filter${window.location.search}`} className={`button ${viewport <= 768 ? "px-2 mr-1" : "px-3 mr-2"} py-2 cursor-pointer ml-auto text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900 shadow`}>
<svg className={`${viewport <= 768 ? "mr-1" : "mr-2"} h-4 w-4 text-indigo-500`} fill="none" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg> <svg className={`${viewport <= 768 ? "mr-1" : "mr-2"} h-4 w-4 text-indigo-500`} fill="none" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
{viewport <= 768 ? "Filter" : "Add Filter"} {viewport <= 768 ? "Filter" : "Add Filter"}
</Link> </Link>

View File

@ -14,6 +14,7 @@ module.exports = {
extend: { extend: {
colors: { colors: {
orange: colors.orange, orange: colors.orange,
'gray-950': 'rgb(13, 18, 30)',
'gray-850': 'rgb(26, 32, 44)', 'gray-850': 'rgb(26, 32, 44)',
'gray-825': 'rgb(37, 47, 63)' 'gray-825': 'rgb(37, 47, 63)'
}, },