Start contact modal

frontend/src/pages/Contacts/ContactModal.js

@@ -5,8 +5,19 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	modal: {
+		"& .MuiTextField-root": {
+			margin: theme.spacing(1),
+			width: "25ch",
+		},
+	},
+}));
 
 const AddContactModal = ({ modalOpen, setModalOpen, handleAddContact }) => {
+	const classes = useStyles();
 	const initialState = { name: "", number: "" };
 	const [contact, setContact] = useState(initialState);
 
@@ -24,30 +35,34 @@ const AddContactModal = ({ modalOpen, setModalOpen, handleAddContact }) => {
 				open={modalOpen}
 				onClose={handleClose}
 				aria-labelledby="form-dialog-title"
+				// maxWidth="lg"
+				maxHeight="xs"
+				scroll="paper"
+				className={classes.modal}
 			>
 				<DialogTitle id="form-dialog-title">Adicionar contato</DialogTitle>
 				<DialogContent>
 					<TextField
 						autoComplete="false"
-						autoFocus
 						margin="dense"
+						autoFocus
+						variant="outlined"
 						name="number"
 						id="contactNumber"
-						label="Número"
+						label="Número de Telefone"
 						type="text"
 						value={contact.number}
 						onChange={handleChangeInput}
-						fullWidth
 					/>
 					<TextField
 						margin="dense"
+						variant="outlined"
 						name="name"
 						id="contactName"
-						label="Nome do contato"
+						label="Nome Completo"
 						type="text"
 						value={contact.name}
 						onChange={handleChangeInput}
-						fullWidth
 					/>
 				</DialogContent>
 				<DialogActions>

frontend/src/pages/Contacts/ContactsList.js

@@ -22,6 +22,7 @@ import EditIcon from "@material-ui/icons/Edit";
 
 import PaginationActions from "./PaginationActions";
 import api from "../../util/api";
+import ContactModal from "./ContactModal";
 
 const useStyles = makeStyles(theme => ({
 	mainContainer: {
@@ -74,6 +75,8 @@ const Contacts = () => {
 	const [searchParam, setSearchParam] = useState("");
 	const [contacts, setContacts] = useState([]);
 
+	const [modalOpen, setModalOpen] = useState(true);
+
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
@@ -108,8 +111,22 @@ const Contacts = () => {
 		setSearchParam(event.target.value.toLowerCase());
 	};
 
+	const handleClickOpen = () => {
+		setModalOpen(true);
+	};
+
+	const handleClose = () => {
+		setModalOpen(false);
+	};
+
 	return (
 		<Container className={classes.mainContainer}>
+			<ContactModal
+				modalOpen={modalOpen}
+				onClose={handleClose}
+				setModalOpen={setModalOpen}
+				aria-labelledby="form-dialog-title"
+			></ContactModal>
 			<div className={classes.contactsHeader}>
 				<h2>Todos os contatos</h2>
 
@@ -130,7 +147,7 @@ const Contacts = () => {
 					<Button variant="contained" color="primary">
 						Importar contatos
 					</Button>
-					<Button variant="contained" color="primary">
+					<Button variant="contained" color="primary" onClick={handleClickOpen}>
 						Adicionar contato
 					</Button>
 				</div>