header work

RomanTurner · Jun 28, 2021 · 2c21e74 · 2c21e74
1 parent 0288f87
commit 2c21e74
Show file tree

Hide file tree

Showing 9 changed files with 38,453 additions and 11,753 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,6 @@
     <title>College Reccommend</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,22 +1,24 @@
 import React from "react";
 import College from "./College";
+import Header from "./Header";
 import CollegeShow from "./CollegeShow";
 import { Switch, Route, Redirect } from "react-router";
 
 function App() {
   return (
     <Switch>
-        <Route path='/colleges'>
-          <College/>
-        </Route>
-        <Route path='colleges/:name'>
-          <CollegeShow/>
+      <Route path='/colleges'>
+        <Header />
+        <College />
+      </Route>
+      <Route path='colleges/:name'>
+        <CollegeShow />
       </Route>
       <Route path='/'>
-        <Redirect to='/colleges'/>
+        <Redirect to='/colleges' />
       </Route>
-   </Switch>
- )
+    </Switch>
+  );
 }
 
 export default App;
diff --git a/src/College.js b/src/College.js
@@ -9,6 +9,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
     textAlign: "center",
+    paddingTop: theme.spacing(2),
   },
 }));
 
@@ -17,7 +18,9 @@ function College() {
   const [results, setResults] = React.useState({results: []});
 
 
-      return (
+  return (
+    <>
+
         <Grid container className={classes.root} spacing={2}>
           <Grid item xs={12}>
             <Typography gutterBottom variant='h2' component='h1'>
@@ -35,7 +38,8 @@ function College() {
               <CollegePreview results={results} />
             </Grid>
           </Grid>
-        </Grid>
+      </Grid>
+      </>
       );
 }
 

diff --git a/src/Header.js b/src/Header.js
@@ -0,0 +1,44 @@
+import React from "react";
+import AppBar from "@material-ui/core/AppBar";
+import imgSrc from "./img/collegereco-logo.png";
+import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@material-ui/core/IconButton";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import MenuIcon from "@material-ui/icons/Menu";
+import SearchIcon from "@material-ui/icons/Search";
+import MoreIcon from "@material-ui/icons/MoreVert";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    width: '100vw'
+  },
+  toolbar: {
+    minHeight: 128,
+    alignItems: "flex-center",
+    justifyContent: "center",
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+    alignSelf: "flex-end",
+  },
+  logo: {
+    height: "100%",
+    maxWidth: "45%",
+  },
+}));
+
+export default function ProminentAppBar() {
+  const classes = useStyles();
+
+  return (
+      <AppBar className={classes.root} position='static'>
+        <Toolbar className={classes.toolbar}>
+          <img src={imgSrc} alt='logo' className={classes.logo} />
+        </Toolbar>
+      </AppBar>
+  );
+}
diff --git a/src/img/collegereco-logo.png b/src/img/collegereco-logo.png
diff --git a/src/index.js b/src/index.js
@@ -5,8 +5,8 @@ import { BrowserRouter as Router } from "react-router-dom"
 
 ReactDOM.render(
   <Router>
-    <App />
+      <App />
   </Router>,
-  document.getElementById('root')
+  document.getElementById("root")
 );