Got search bar in middle (#90)

centered searchbar
hratx-blue-ocean · May 9, 2019 · e537cc6 · e537cc6
1 parent e44b31c
commit e537cc6
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/client/src/Components/Header.js b/client/src/Components/Header.js
@@ -71,6 +71,10 @@ const styles = theme => ({
       },
     },
   },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  }
 });
 
 function SearchAppBar(props) {
@@ -84,12 +88,12 @@ function SearchAppBar(props) {
   return (
     <div className={classes.root} style={{position: 'fixed', top: 0}}>
       <AppBar position="static" style={{background: '#C4ADAE'}}>
-        <Toolbar>
+        <Toolbar className={classes.header}>
           <a href='_' className={classes.title} onClick={goHome}>
             <img alt='' src="brand_assets/logo_only_transparent.png" style={{width: "50px", height: "50px"}}/>
             <img alt='' src="brand_assets/text_only_transparent.png" style={{height: "20px", paddingLeft: "8px", paddingRight: "8px"}}/>
           </a>
-          <div className={classes.grow} />
+          {/* <div className={classes.grow} /> */}
           <div className={classes.search}>
             <div className={classes.searchIcon}>
               {/* <SearchIcon /> */}
@@ -102,12 +106,14 @@ function SearchAppBar(props) {
               }}
             />
           </div>
-          <Button onClick={(event) => {props.toggleModal(event,"login")}} className={classes.button}>
-            Login
-          </Button>
-          <Button onClick={(event) => {props.toggleModal(event,"signup")}} className={classes.button}>
-            Signup
-          </Button>
+          <div>
+            <Button onClick={(event) => {props.toggleModal(event,"login")}} className={classes.button}>
+              Login
+            </Button>
+            <Button onClick={(event) => {props.toggleModal(event,"signup")}} className={classes.button}>
+              Signup
+            </Button>
+          </div>
         </Toolbar>
       </AppBar>
     </div>