improvement(style): better styles in contacts list

frontend/src/pages/Contacts/index.js

@@ -33,10 +33,15 @@ import { i18n } from "../../translate/i18n";
 const useStyles = makeStyles(theme => ({
 	mainContainer: {
 		flex: 1,
-		// backgroundColor: "#eee",
 		padding: theme.spacing(2),
 		height: `calc(100% - 48px)`,
+	},
+
+	contentWrapper: {
+		height: "100%",
 		overflowY: "hidden",
+		display: "flex",
+		flexDirection: "column",
 	},
 
 	contactsHeader: {
@@ -46,6 +51,7 @@ const useStyles = makeStyles(theme => ({
 	},
 
 	actionButtons: {
+		flex: "none",
 		marginLeft: "auto",
 		"& > *": {
 			margin: theme.spacing(1),
@@ -53,16 +59,14 @@ const useStyles = makeStyles(theme => ({
 	},
 
 	mainPaper: {
-		height: "87%",
+		flex: 1,
 		padding: theme.spacing(2),
-
 		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
 			width: "8px",
 			height: "8px",
 		},
 		"&::-webkit-scrollbar-thumb": {
-			// borderRadius: "2px",
 			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
 			backgroundColor: "#e8e8e8",
 		},
@@ -107,11 +111,11 @@ const Contacts = () => {
 	useEffect(() => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.on("contact", data => {
-			if ((data.action === "update" || data.action === "create") && !loading) {
+			if (data.action === "update" || data.action === "create") {
 				updateContacts(data.contact);
 			}
 
-			if (data.action === "delete" && !loading) {
+			if (data.action === "delete") {
 				deleteContact(data.contactId);
 			}
 		});
@@ -119,7 +123,7 @@ const Contacts = () => {
 		return () => {
 			socket.disconnect();
 		};
-	}, [loading]);
+	}, []);
 
 	const updateContacts = contact => {
 		setContacts(prevState => {
@@ -221,6 +225,7 @@ const Contacts = () => {
 					? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
 					: `${i18n.t("contacts.confirmationModal.importMessage")}`}
 			</ConfirmationModal>
+			<div className={classes.contentWrapper}>
 				<div className={classes.contactsHeader}>
 					<Typography variant="h5" gutterBottom>
 						{i18n.t("contacts.title")}
@@ -256,7 +261,7 @@ const Contacts = () => {
 						</Button>
 					</div>
 				</div>
-			<Paper className={classes.mainPaper}>
+				<Paper className={classes.mainPaper} variant="outlined">
 					<Table size="small">
 						<TableHead>
 							<TableRow>
@@ -324,6 +329,7 @@ const Contacts = () => {
 						</TableFooter>
 					</Table>
 				</Paper>
+			</div>
 		</Container>
 	);
 };