From f20db9b746b5e09878fd032f54e7c5cde2767b80 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 7 Jun 2020 18:02:54 +0300
Subject: fix: remove text colors from theme

---
 src/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src')

diff --git a/src/index.tsx b/src/index.tsx
index d7efbf7..e397ca2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,10 +14,6 @@ const theme = createMuiTheme({
     primary: {
       main: teal[700]
     },
-    text: {
-      primary: '#000000',
-      secondary: 'rgba(255, 255, 255, 0.6)'
-    }
   }
 });
 
-- 
cgit v1.2.3


From dcb9b3aeb6dec55b133afa5748233494e8374fcd Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 7 Jun 2020 19:11:22 +0300
Subject: feat: add searchbar and improve header

---
 src/Header/Header.tsx    | 52 +++++++++++++++++++++++++-----------------------
 src/Header/SearchBar.tsx | 32 +++++++++++++++++++++++++++++
 src/index.tsx            |  2 +-
 3 files changed, 60 insertions(+), 26 deletions(-)
 create mode 100644 src/Header/SearchBar.tsx

(limited to 'src')

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index 8e8a301..5ce79be 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -2,45 +2,47 @@ import React from 'react';
 import {
   AppBar,
   Toolbar,
-  Tabs,
-  Tab
+  IconButton,
+  Typography
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import NotificationsIcon from '@material-ui/icons/Notifications';
 
-interface PropTypes {
-  page: string;
-  setPage: (newPage: string) => void;
-}
+import SearchBar from './SearchBar';
 
 const useStyles = makeStyles(theme => ({
-  tab: {
-    '& .MuiTab-wrapper': {
-      padding: theme.spacing(2),
-      flexDirection: 'row',
-      fontSize: '0.8125rem'
-    }
+  root: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    width: '60%',
+    margin: 'auto'
+  },
+  logo: {
+    fontWeight: 'bold',
   }
 }));
 
-const tabs = ['Profile', 'Feed'];
-
-const Header: React.FC<PropTypes> = ({ page /* , setPage */ }) => {
+const Header: React.FC = () => {
   const classes = useStyles();
 
   const handleChange = () => {};
 
   return (
     <AppBar position="static">
-      <Toolbar>
-        <Tabs onChange={handleChange} value={page}>
-          {tabs.map((tab: string) => (
-            <Tab
-              label={tab}
-              key={tab}
-              className={classes.tab}
-            />
-          ))}
-        </Tabs>
+      <Toolbar className={classes.root}>
+        <Typography variant="h5" className={classes.logo}>
+          Which
+        </Typography>
+        <SearchBar />
+        <div>
+          <IconButton>
+            <NotificationsIcon />
+          </IconButton>
+          <IconButton>
+            <AccountCircle />
+          </IconButton>
+        </div>
       </Toolbar>
     </AppBar>
   );
diff --git a/src/Header/SearchBar.tsx b/src/Header/SearchBar.tsx
new file mode 100644
index 0000000..ed59874
--- /dev/null
+++ b/src/Header/SearchBar.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import SearchIcon from '@material-ui/icons/Search';
+import { InputBase } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    background: 'rgba(255, 255, 255, 0.5)',
+    borderRadius: '2px',
+    padding: theme.spacing(0.5),
+    display: 'flex',
+    alignItems: 'center',
+    // marginRight: theme.spacing(8),
+  }
+}));
+
+const SearchBar: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <SearchIcon />
+      <InputBase
+        placeholder="Search..."
+      />
+    </div>
+  );
+};
+
+
+export default SearchBar;
+
diff --git a/src/index.tsx b/src/index.tsx
index e397ca2..b0a8fdc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Header page={page} setPage={setPage} />
+      <Header />
       <PollCard author={pollProps.author} contents={pollProps.contents} />
     </ThemeProvider>
   );
-- 
cgit v1.2.3


From 4a6ba7568598bf39fc3be775c22929ebfb8fc78f Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 7 Jun 2020 19:12:40 +0300
Subject: fix: change header position to fixed

---
 src/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index 5ce79be..c92208a 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -29,7 +29,7 @@ const Header: React.FC = () => {
   const handleChange = () => {};
 
   return (
-    <AppBar position="static">
+    <AppBar position="fixed">
       <Toolbar className={classes.root}>
         <Typography variant="h5" className={classes.logo}>
           Which
-- 
cgit v1.2.3


From 26911f1e971b798aac51e15ae3b54a4f40dd334a Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 7 Jun 2020 19:34:14 +0300
Subject: feat: change pages in header

---
 src/Header/Header.tsx    | 30 +++++++++++++++++++++++-------
 src/Header/SearchBar.tsx |  3 +--
 src/index.tsx            |  5 +++--
 3 files changed, 27 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index c92208a..0ee6b5f 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -8,10 +8,15 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import NotificationsIcon from '@material-ui/icons/Notifications';
+import HomeIcon from '@material-ui/icons/Home';
 
 import SearchBar from './SearchBar';
 
-const useStyles = makeStyles(theme => ({
+interface PropTypes {
+  setPage: (newPage: string) => void;
+}
+
+const useStyles = makeStyles({
   root: {
     display: 'flex',
     justifyContent: 'space-around',
@@ -19,14 +24,22 @@ const useStyles = makeStyles(theme => ({
     margin: 'auto'
   },
   logo: {
-    fontWeight: 'bold',
+    fontWeight: 'bold'
   }
-}));
+});
 
-const Header: React.FC = () => {
+const Header: React.FC<PropTypes> = ({ setPage }) => {
   const classes = useStyles();
 
-  const handleChange = () => {};
+  const handleHome = (): void => {
+    setPage('feed');
+  };
+
+  const handleProfile = (): void => {
+    setPage('profile');
+  };
+
+  const handleNotifications = (): void => {};
 
   return (
     <AppBar position="fixed">
@@ -36,10 +49,13 @@ const Header: React.FC = () => {
         </Typography>
         <SearchBar />
         <div>
-          <IconButton>
+          <IconButton onClick={handleHome}>
+            <HomeIcon />
+          </IconButton>
+          <IconButton onClick={handleNotifications}>
             <NotificationsIcon />
           </IconButton>
-          <IconButton>
+          <IconButton onClick={handleProfile}>
             <AccountCircle />
           </IconButton>
         </div>
diff --git a/src/Header/SearchBar.tsx b/src/Header/SearchBar.tsx
index ed59874..182a1a4 100644
--- a/src/Header/SearchBar.tsx
+++ b/src/Header/SearchBar.tsx
@@ -9,8 +9,7 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '2px',
     padding: theme.spacing(0.5),
     display: 'flex',
-    alignItems: 'center',
-    // marginRight: theme.spacing(8),
+    alignItems: 'center'
   }
 }));
 
diff --git a/src/index.tsx b/src/index.tsx
index b0a8fdc..48bad48 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,7 +13,7 @@ const theme = createMuiTheme({
   palette: {
     primary: {
       main: teal[700]
-    },
+    }
   }
 });
 
@@ -43,8 +43,9 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Header />
+      <Header setPage={setPage} />
       <PollCard author={pollProps.author} contents={pollProps.contents} />
+      <h1> We are on page {page}! </h1>
     </ThemeProvider>
   );
 };
-- 
cgit v1.2.3