[WCMSRR-217] Search Page Design Tweaks (#4)

* Change purple icons and buttons to blue * Change from 4 tiles to 2 on home page * Override cgov default submit button background color * Remove horizontal layout for old 4 tile grid * Further styles tweaks to search bar width * Fix mismatch of hover color on buttons
NCIOCPL · Dec 4, 2018 · 7c7457b · 7c7457b
1 parent c6da7fe
commit 7c7457b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 45 deletions.
diff --git 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
@@ -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
@@ -94,37 +94,33 @@ export class Home extends React.Component {
                             <SVG iconType="searchIcon" className="home-tile__icon" />
                             <div className="home-tile__text">
                                 <h2>Search For Resources</h2>
-                                <p>Search for resources by keyword or phrase.</p>
+                                <SearchBar
+                                    value={ this.props.searchBarValue }
+                                    onChange={ this.props.searchBarOnChange }
+                                    onSubmit={ this.newTextSearch }
+                                    placeholder="Search Resources for Researchers"
+                                    page='home'
+                                />
                             </div>
                         </Theme>
-                        <Theme element="div" className="home-nav__tile">
-                            <SearchBar
-                                value={ this.props.searchBarValue }
-                                onChange={ this.props.searchBarOnChange }
-                                onSubmit={ this.newTextSearch }
-                                placeholder="Search Resources for Researchers"
-                                page='home'
-                            />
-                        </Theme>
                         <Theme element="div" className="home-nav__tile">
                             <SVG iconType="browseIcon" className="home-tile__icon"/>
                             <div className="home-tile__text">
                                 <h2>Browse Resources</h2>
-                                <p>Browse resources by tool type or research area or view all resources.</p>
+                                <p>Browse resources by tool type or research area or 
+                                    <Theme element="a" className="view-all__link"
+                                        /* This is used instead of a pseudo element because of cgov outline styles being disabled */
+                                        onClick={ this.viewAllOnClick }
+                                        onKeyPress={ keyHandler({
+                                            fn: this.viewAllOnClick,
+                                        })}
+                                        tabIndex="0"
+                                    >
+                                        { ` view all ${ this.props.totalResources ? `(${ this.props.totalResources })` : '' } resources.` }
+                                    </Theme>
+                                </p>
                             </div>
                         </Theme>
-                        <Theme element="div" className="home-nav__tile">
-                            <Theme element="a" className="view-all__link"
-                                /* This is used instead of a pseudo element because of cgov outline styles being disabled */
-                                onClick={ this.viewAllOnClick }
-                                onKeyPress={ keyHandler({
-                                    fn: this.viewAllOnClick,
-                                })}
-                                tabIndex="0"
-                            >
-                                { `View All Resources${ this.props.totalResources ? ` (${ this.props.totalResources })` : '' }` }
-                            </Theme>
-                        </Theme>
                     </Theme>
                     <Theme element="div" className="home-nav__main">
                         <Theme element="div" className="home-nav__section" aria-label="Browse by Tool Type">

diff --git 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;
     }