diff --git a/src/components/SearchBar.css b/src/components/SearchBar.css index 4bec76d..abbbf76 100644 --- a/src/components/SearchBar.css +++ b/src/components/SearchBar.css @@ -23,6 +23,11 @@ display: flex; justify-content: center; align-items: center; + background: #2a71a5; +} + +.searchbar__container .searchbar__button--submit:hover { + background: #266594; } .searchbar__container .searchbar__button--submit.r4r-DEFAULT { diff --git a/src/views/home/index.css b/src/views/home/index.css index cd7f8fd..7a95d84 100644 --- a/src/views/home/index.css +++ b/src/views/home/index.css @@ -22,15 +22,11 @@ } .home-nav__tiles.r4r-DEFAULT { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: baseline; margin-bottom: 10px; } .home-nav__tile.r4r-DEFAULT { - width: 48%; + width: 100%; display: flex; padding: 15px 0; } @@ -44,8 +40,8 @@ height: 80px; margin-right: 20px; flex: inherit; - stroke: #620788; - fill: #620788; + stroke: #2a71a5; + fill: #2a71a5; } .home-tile__text { @@ -85,32 +81,22 @@ @media only screen and (max-width: 768px){ - .home-nav__tile.r4r-DEFAULT { - width: 100%; + .home-nav__tiles.r4r-DEFAULT { + margin: 0; } - .home-nav__tile.r4r-DEFAULT:nth-of-type(odd){ + .home-nav__tile.r4r-DEFAULT{ border-top: 1px solid #777; - padding-top: 25px; - } - - .home-nav__tile.r4r-DEFAULT:nth-of-type(even){ - padding: 0; - margin-bottom: 25px; + padding: 25px 0; } .r4r-home .home__main { flex-direction: column; - } .r4r-home .searchbar__container{ margin: 0 auto; } - - .home-nav__tiles.r4r-DEFAULT { - margin: 0; - } .home-nav__main{ flex-direction: column; diff --git a/src/views/home/index.js b/src/views/home/index.js index 0da7792..c862bfa 100644 --- a/src/views/home/index.js +++ b/src/views/home/index.js @@ -94,37 +94,33 @@ export class Home extends React.Component {

Search For Resources

-

Search for resources by keyword or phrase.

+
- - -

Browse Resources

-

Browse resources by tool type or research area or view all resources.

+

Browse resources by tool type or research area or + + { ` view all ${ this.props.totalResources ? `(${ this.props.totalResources })` : '' } resources.` } + +

- - - { `View All Resources${ this.props.totalResources ? ` (${ this.props.totalResources })` : '' }` } - - diff --git a/src/views/results/index.css b/src/views/results/index.css index 26770ef..430672b 100644 --- a/src/views/results/index.css +++ b/src/views/results/index.css @@ -117,11 +117,16 @@ width: 130px; height: auto; font-size: 16px; - background: #620788; + background-color: #2a71a5; color: white; cursor: pointer; + transition: background-color .3s ease-out; } + .results__filter-button.r4r-DEFAULT:hover { + background-color: #266594; + } + .results__search-container.r4r-DEFAULT .results__filter-button.r4r-DEFAULT { margin-left: 30px; }