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