Updated much of the surrounding styling for the request page, still need to ble cleaned.

client/app/components/SearchRequest.jsx

@@ -10,7 +10,9 @@ class SearchRequest extends React.Component {
     // Constructor with states holding the search query and the element of reponse.
     this.state = {
       searchQuery: '',
-      responseMovieList: null
+      responseMovieList: null,
+      movieFilter: true,
+      tvshowFilter: false
     }
 
     this.URLs = {
@@ -34,6 +36,9 @@ class SearchRequest extends React.Component {
 
   fetchQuery() {
     let url = this.URLs.request + this.state.searchQuery
+    if (this.state.tvshowFilter) {
+      url = url + '&type=tv'
+    }
 
       fetch(url)
       	// Check if the response is ok
@@ -80,34 +85,141 @@ class SearchRequest extends React.Component {
     return movie.getElement();
   }
 
+  toggleFilter(filterType) {
+    if (filterType == 'movies') {
+      this.setState({
+        movieFilter: !this.state.movieFilter
+      })
+      console.log(this.state.movieFilter);
+    } 
+    else if (filterType == 'tvshows') {
+      this.setState({
+        tvshowFilter: !this.state.tvshowFilter
+      })
+      console.log(this.state.tvshowFilter);
+    }
+  }
+
 
   render(){
 
     var body = {
-      fontFamily: "'Roboto', 'Open Sans', sans-serif",
+      fontFamily: "'Open Sans', sans-serif",
-      display: 'inline-block'
+      backgroundColor: '#f7f7f7',
-
+      margin: 0,
+      padding: 0,
+      minHeight: '100%',
+      position: 'relative'
     }
-    var requestMovieList = {
+
+    var backgroundHeader = {
+      width: '100%',
+      minHeight: '400px',
+      backgroundColor: '#011c23',
+      zIndex: 1,
+      position: 'absolute'
+    }
+
+
+    var requestWrapper = {
+      top: '300px',
+      width: '90%',
+      maxWidth: '1200px',
+      margin: 'auto',
+      paddingTop: '20px',
+      backgroundColor: 'white',
+      position: 'relative',
+      zIndex: '10',
+      boxShadow: '0 2px 10px black'
+    }
+
+    var pageTitle = {
       display: 'flex',
-      flexWrap: 'wrap',
+      alignItems: 'center',
       justifyContent: 'center'
     }
 
+    var pageTitleSpan = {
+      color: 'white',
+      fontSize: '3em',
+      marginTop: '4vh',
+      marginBottom: '6vh'
+    }
+
+    var box = {
+      width: '90%',
+      height: '50px',
+      maxWidth: '1200px',
+      margin: '0 auto'
+    }
+
+    var container = {
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      position: 'relative',
+      display: 'flex',
+      justifyContent: 'center'
+    }
+
+    var searchIcon = {
+      position: 'absolute',
+      marginLeft: '17px',
+      marginTop: '17px',
+      zIndex: '1',
+      color: '#4f5b66'
+    }
+
+    var searchBar = {
+      width: '60%',
+      minWidth: '120px',
+      height: '50px',
+      background: '#ffffff',
+      border: 'none',
+      fontSize: '10pt',
+      float: 'left',
+      color: '#63717f',
+      paddingLeft: '45px',
+      borderRadius: '5px',
+      marginRight: '15px'
+    }
+
+    var searchFilter = {
+      color: 'white',
+      fontSize: '1em',
+      paddingTop: '12px',
+      marginBottom: '12px',
+      marginLeft: '10px',
+      cursor: 'pointer'
+    }
+
     return(
      <div style={body}>
-        <input
+          <div className='backgroundHeader' style={backgroundHeader}>
-          type="text"
+            <div className='pageTitle' style={pageTitle}>
-          onKeyPress={(event) => this._handleQueryKeyPress(event)}
+              <span style={pageTitleSpan}>Request new content</span>
-          onChange={event => this.updateQueryState(event)}
+            </div>
-          value={this.state.searchQuery}
-          />
-          <button onClick={() => this.fetchQuery()}>Search</button>
-          <br></br>
 
-          <br></br>
+            <div className='box' style={box}>
-          <div id='requestMovieList' ref='requestMovieList' style={requestMovieList}>
+              <div style={container}>
-            {this.state.responseMovieList}        
+                <span style={searchIcon}><i className="fa fa-search"></i></span>
+                <input style={searchBar} type="text" id="search" placeholder="Search for new content..." 
+                  onKeyPress={(event) => this._handleQueryKeyPress(event)}
+                  onChange={event => this.updateQueryState(event)}
+                  value={this.state.searchQuery}/>
+                <span style={searchFilter} 
+                  className="search_category hvr-underline-from-center" 
+                  onClick={() => {this.toggleFilter('movies')}}
+                  id="category_active">Movies</span>
+                <span style={searchFilter} 
+                  className="search_category hvr-underline-from-center" 
+                  onClick={() => {this.toggleFilter('tvshows')}}
+                  id="category_inactive">TV Shows</span>
+              </div>
+            </div>
+          </div>
+
+          <div id='requestMovieList' ref='requestMovieList' style={requestWrapper}>
+            {this.state.responseMovieList}     
           </div>
       </div>
     )