From f20db9b746b5e09878fd032f54e7c5cde2767b80 Mon Sep 17 00:00:00 2001 From: eug-vs 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(-) 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 Date: Sun, 7 Jun 2020 19:11:22 +0300 Subject: feat: add searchbar and improve header --- package-lock.json | 8 ++++++++ package.json | 1 + src/Header/Header.tsx | 52 +++++++++++++++++++++++++----------------------- src/Header/SearchBar.tsx | 32 +++++++++++++++++++++++++++++ src/index.tsx | 2 +- 5 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 src/Header/SearchBar.tsx diff --git a/package-lock.json b/package-lock.json index 52e71f8..670ba1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1366,6 +1366,14 @@ "react-transition-group": "^4.4.0" } }, + "@material-ui/icons": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz", + "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, "@material-ui/styles": { "version": "4.10.0", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz", diff --git a/package.json b/package.json index c4dbec6..0ace916 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^4.10.1", + "@material-ui/icons": "^4.9.1", "@types/node": "^12.12.44", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", 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 = ({ page /* , setPage */ }) => { +const Header: React.FC = () => { const classes = useStyles(); const handleChange = () => {}; return ( - - - {tabs.map((tab: string) => ( - - ))} - + + + Which + + +
+ + + + + + +
); 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 ( +
+ + +
+ ); +}; + + +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 ( -
+
); -- cgit v1.2.3 From 4a6ba7568598bf39fc3be775c22929ebfb8fc78f Mon Sep 17 00:00:00 2001 From: eug-vs 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(-) 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 ( - + Which -- cgit v1.2.3 From 26911f1e971b798aac51e15ae3b54a4f40dd334a Mon Sep 17 00:00:00 2001 From: eug-vs 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(-) 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 = ({ setPage }) => { const classes = useStyles(); - const handleChange = () => {}; + const handleHome = (): void => { + setPage('feed'); + }; + + const handleProfile = (): void => { + setPage('profile'); + }; + + const handleNotifications = (): void => {}; return ( @@ -36,10 +49,13 @@ const Header: React.FC = () => {
- + + + + - +
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 ( -
+
+

We are on page {page}!

); }; -- cgit v1.2.3 From 796271adc4bf815c19c58f4231019502cb0bed24 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 7 Jun 2020 19:40:15 +0300 Subject: style: allow multiple expressions in one line --- .eslintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 4899960..ac3fbd3 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,6 +21,7 @@ "linebreak-style": 0, "react/prop-types": 0, "react/no-children-prop": 0, - "react/no-danger": 0 + "react/no-danger": 0, + "react/jsx-one-expression-per-line": 0 } } -- cgit v1.2.3