From 2fbb73afdb34b88d7ed7363c0d531dac43e5de68 Mon Sep 17 00:00:00 2001 From: rlacko <rlacko@sch.bme.hu> Date: Sat, 29 Aug 2020 18:44:11 +0200 Subject: [PATCH] profile modal --- package-lock.json | 8 ++++ package.json | 1 + src/core/components/CustomModal.tsx | 9 +++- src/core/components/ProfileButton.tsx | 2 +- src/core/components/ProfileModal.tsx | 60 +++++++++++++++++++++++++-- 5 files changed, 75 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 927b173..d5729b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2512,6 +2512,14 @@ } } }, + "@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 8d886b8..26d80d0 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ }, "dependencies": { "@material-ui/core": "^4.11.0", + "@material-ui/icons": "^4.9.1", "@types/styled-components": "^5.1.2", "axios": "^0.20.0", "react": "^16.13.1", diff --git a/src/core/components/CustomModal.tsx b/src/core/components/CustomModal.tsx index 43d8169..e0c6af7 100644 --- a/src/core/components/CustomModal.tsx +++ b/src/core/components/CustomModal.tsx @@ -8,7 +8,13 @@ interface ICustomModalProps { isOpen: boolean; setIsOpen: Dispatcher<boolean>; children: React.ReactNode; - customStyle: { backgroundColor?: string; padding?: string; width?: string; border?: string }; + customStyle: { + backgroundColor?: string; + padding?: string; + width?: string; + border?: string; + borderRadius?: string; + }; } const useStyles = makeStyles((theme) => ({ @@ -28,6 +34,7 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: customStyle.backgroundColor || 'theme.palette.background.paper', border: customStyle.border || 'none', padding: customStyle.padding || 'none', + borderRadius: customStyle.borderRadius || 'none', boxShadow: theme.shadows[5], '&:focus': { outline: 'none', diff --git a/src/core/components/ProfileButton.tsx b/src/core/components/ProfileButton.tsx index 65ac9a3..34451f4 100644 --- a/src/core/components/ProfileButton.tsx +++ b/src/core/components/ProfileButton.tsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { ProfileModal } from './ProfileModal'; export const ProfileButton = () => { - const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false); + const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(true); const handleProfileModalOpen = () => { setIsProfileModalOpen(true); diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx index 8d442d6..bbaaaf5 100644 --- a/src/core/components/ProfileModal.tsx +++ b/src/core/components/ProfileModal.tsx @@ -1,3 +1,7 @@ +import { + Avatar, Box, Button, IconButton, TextField, Typography, +} from '@material-ui/core'; +import CloseIcon from '@material-ui/icons/Close'; import React, { Dispatch, SetStateAction } from 'react'; import { CustomModal } from './CustomModal'; @@ -9,14 +13,64 @@ interface IProfileModalProps { } export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => { - const placeHolder = 'test text'; + const onClose = () => { + setIsOpen(false); + }; return ( <CustomModal isOpen={isOpen} setIsOpen={setIsOpen} - customStyle={{ backgroundColor: 'white', padding: '10px', width: '650px' }} + customStyle={{ + backgroundColor: '#EBEBEB', + padding: '15px', + width: '500px', + borderRadius: '8px', + }} > - {placeHolder} + <Box + fontWeight="fontWeightBold" + display="flex" + justifyContent="space-between" + alignItems="center" + pl={2} + > + <Typography variant="h5" component="h5"> + Profilom + </Typography> + <IconButton onClick={onClose}> + <CloseIcon /> + </IconButton> + </Box> + <Box display="flex" justifyContent="center" my={3}> + <Avatar alt="Profile image" variant="rounded" style={{ width: '200px', height: '200px' }} /> + </Box> + <Box px={1} mt={2} mb={1}> + <Box my={1}> + <TextField + label="Diákigazolvány szám" + variant="outlined" + color="secondary" + fullWidth + size="small" + style={{ backgroundColor: 'white' }} + /> + </Box> + <Box my={1}> + <TextField + label="Szobaszám" + variant="outlined" + color="secondary" + fullWidth + size="small" + style={{ backgroundColor: 'white' }} + /> + </Box> + <Box display="flex" justifyContent="flex-end" mt={3}> + <Button variant="contained" onClick={onClose}> + Mentés + </Button> + </Box> + </Box> </CustomModal> ); }; -- GitLab