From 0e84386fe75578bbbf2ac7854467070fe8608cde Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 8 Jun 2020 14:39:13 +0300 Subject: feat: add profile design and functionality to hide and show profile --- src/Feed/Feed.tsx | 1 + src/Header/Header.tsx | 1 + src/ProfileInfo/ProfileInfo.tsx | 65 +++++++++++++++++++++++++++++++++++++++++ src/index.tsx | 6 ++++ 4 files changed, 73 insertions(+) create mode 100644 src/ProfileInfo/ProfileInfo.tsx diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx index e5bc9aa..e303fa7 100644 --- a/src/Feed/Feed.tsx +++ b/src/Feed/Feed.tsx @@ -9,6 +9,7 @@ interface PropTypes { const usedStyles = makeStyles(theme => ({ feed: { + position:'relative', maxWidth: theme.spacing(75), margin: '0 auto' } diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index 0ee6b5f..3f9e7ee 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -37,6 +37,7 @@ const Header: React.FC = ({ setPage }) => { const handleProfile = (): void => { setPage('profile'); + }; const handleNotifications = (): void => {}; diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx new file mode 100644 index 0000000..233411f --- /dev/null +++ b/src/ProfileInfo/ProfileInfo.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { + Card, + CardActionArea, + CardMedia, + Avatar, + CardHeader +} from '@material-ui/core/'; +import {makeStyles} from "@material-ui/core"; +import { Poll } from '../types'; + +interface propTypes { + profile: Poll; +} +const useStyles = makeStyles({ + avatar: { + margin: '0 auto', + width: 150, + height: 150, + marginBottom: 10, + }, + name: { + fontSize:20, + textAlign: 'center', + }, + profileMenu: { + display: 'flex', + width: '100%', + height: 50, + borderBottom: '1px solid lightgray', + margin: '50px 0', + }, + menuButton: { + width: 200, + height: 50, + paddingTop: 15, + textAlign: 'center', + } +}); + +const ProfileInfo: React.FC=({profile})=>{ + const classes = useStyles(); + + return ( +

+ +

+ Nick Name +

+

+

+ Polls +

+

+ Followers +

+

+ Following +

+

+

+ ); +} + +export default ProfileInfo; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 164c78b..bc6158a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,6 +11,7 @@ import 'typeface-roboto'; import Header from './Header/Header'; import Feed from './Feed/Feed'; +import ProfileInfo from './ProfileInfo/ProfileInfo'; const theme = createMuiTheme({ palette: { @@ -58,7 +59,9 @@ const polls = [{ const useStyles = makeStyles(theme => ({ root: { + width: 600, marginTop: theme.spacing(15), + margin: '0 auto', }, })); @@ -73,6 +76,9 @@ const App: React.FC = () => {

+ { + page === 'profile' ? : null + }

We are on page {page}!

-- cgit v1.2.3 From 73693e619d63d0321848b633bbe0d93eba9dd3bb Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 8 Jun 2020 14:40:05 +0300 Subject: fix: change app title --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 6252f08..c3d52e2 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - React App + Which -- cgit v1.2.3 From 77fe6ac371160ffc385b1378093f34d0b1f2a8c9 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 8 Jun 2020 14:55:52 +0300 Subject: fix: fix eslint errors --- src/Feed/Feed.tsx | 2 +- src/Header/Header.tsx | 1 - src/ProfileInfo/ProfileInfo.tsx | 31 +++++++++++++------------------ src/index.tsx | 12 +++++------- 4 files changed, 19 insertions(+), 27 deletions(-) diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx index e303fa7..33e6d03 100644 --- a/src/Feed/Feed.tsx +++ b/src/Feed/Feed.tsx @@ -9,7 +9,7 @@ interface PropTypes { const usedStyles = makeStyles(theme => ({ feed: { - position:'relative', + position: 'relative', maxWidth: theme.spacing(75), margin: '0 auto' } diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index 3f9e7ee..0ee6b5f 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -37,7 +37,6 @@ const Header: React.FC = ({ setPage }) => { const handleProfile = (): void => { setPage('profile'); - }; const handleNotifications = (): void => {}; diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx index 233411f..ac8ef26 100644 --- a/src/ProfileInfo/ProfileInfo.tsx +++ b/src/ProfileInfo/ProfileInfo.tsx @@ -1,44 +1,39 @@ import React from 'react'; -import { - Card, - CardActionArea, - CardMedia, - Avatar, - CardHeader -} from '@material-ui/core/'; -import {makeStyles} from "@material-ui/core"; +import { Avatar } from '@material-ui/core/'; +import { makeStyles } from '@material-ui/core/styles'; import { Poll } from '../types'; -interface propTypes { +interface PropTypes { profile: Poll; } + const useStyles = makeStyles({ avatar: { margin: '0 auto', width: 150, height: 150, - marginBottom: 10, + marginBottom: 10 }, name: { - fontSize:20, - textAlign: 'center', + fontSize: 20, + textAlign: 'center' }, profileMenu: { display: 'flex', width: '100%', height: 50, borderBottom: '1px solid lightgray', - margin: '50px 0', + margin: '50px 0' }, menuButton: { width: 200, height: 50, paddingTop: 15, - textAlign: 'center', + textAlign: 'center' } }); -const ProfileInfo: React.FC=({profile})=>{ +const ProfileInfo: React.FC = ({ profile }) => { const classes = useStyles(); return ( @@ -48,7 +43,7 @@ const ProfileInfo: React.FC=({profile})=>{ Nick Name

-

+

Polls

@@ -60,6 +55,6 @@ const ProfileInfo: React.FC=({profile})=>{

); -} +}; -export default ProfileInfo; \ No newline at end of file +export default ProfileInfo; diff --git a/src/index.tsx b/src/index.tsx index bc6158a..a7df3c1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -57,15 +57,13 @@ const polls = [{ } }]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles({ root: { width: 600, marginTop: theme.spacing(15), - margin: '0 auto', - }, -})); - - + margin: '0 auto' + } +}); const App: React.FC = () => { const [page, setPage] = useState('feed'); @@ -77,7 +75,7 @@ const App: React.FC = () => {

{ - page === 'profile' ? : null + page === 'profile' ? : null }

We are on page {page}!

-- cgit v1.2.3 From 755b44e76307e04387ddacfdee7124ee00197de4 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 8 Jun 2020 15:10:36 +0300 Subject: fix: fix all review comments --- src/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index a7df3c1..0d9751c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -59,7 +59,7 @@ const polls = [{ const useStyles = makeStyles({ root: { - width: 600, + width: theme.spacing(75), marginTop: theme.spacing(15), margin: '0 auto' } @@ -75,10 +75,9 @@ const App: React.FC = () => {

{ - page === 'profile' ? : null + page === 'profile' && } -

We are on page {page}!

); -- cgit v1.2.3