[ISSUE 14] - Add Material UI throughout app

src/components/AddItems.jsx

@@ -1,9 +1,16 @@
 import { useCallback } from 'react';
-import { normalizeItemName } from '../utils';
 import { useStateWithStorage } from '../hooks';
 import { addItem } from '../api';
+import { normalizeItemName } from '../utils';
 import { RadioInputElement, TextInputElement } from './index.js';
 import { toast } from 'react-toastify';
+import { Box, Button, FormControl, RadioGroup } from '@mui/material';
+import { buttonStyle } from './index';
+
+const radioGroupStyle = {
+	mx: 1,
+	justifyContent: 'space-between',
+};
 
 const daysUntilPurchaseOptions = {
 	Soon: 7,
@@ -59,27 +66,43 @@ export function AddItems({ items }) {
 	);
 
 	return (
-		<div>
-			<form onSubmit={handleSubmit}>
+		<Box component="section">
+			<Box
+				component="form"
+				noValidate
+				autoComplete="off"
+				onSubmit={handleSubmit}
+			>
 				<TextInputElement
 					type="text"
 					id="item-name"
-					placeholder="Enter item name"
-					label="Item Name:"
+					placeholder="Item name"
+					label="Add item:"
 					required={true}
 				/>
+				<FormControl fullWidth required>
+					<RadioGroup
+						aria-labelledby="purchase-date-radios"
+						name="purchase-date"
+						sx={radioGroupStyle}
+						row
+					>
+						{Object.entries(daysUntilPurchaseOptions).map(([key, value]) => (
+							<RadioInputElement
+								key={key}
+								label={key}
+								id={key}
+								value={value}
+								required={true}
+							/>
+						))}
+					</RadioGroup>
+				</FormControl>
 
-				{Object.entries(daysUntilPurchaseOptions).map(([key, value]) => (
-					<RadioInputElement
-						key={key}
-						label={key}
-						id={key}
-						value={value}
-						required={true}
-					/>
-				))}
-				<button type="submit">Submit</button>
-			</form>
-		</div>
+				<Button sx={buttonStyle} fullWidth variant="outlined" type="submit">
+					Submit
+				</Button>
+			</Box>
+		</Box>
 	);
 }

src/components/ConfirmDialog.jsx

@@ -8,7 +8,7 @@
 	Button,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import { buttonStyle } from './SingleList';
+import { buttonStyle } from './index';
 import './ConfirmDialog.css';
 
 // MUI's Dialog already comes with built-in focus management and accessibility features.
@@ -23,11 +23,6 @@
 	backgroundColor: 'rgb(20, 20, 20)',
 };
 
-const typographyStyle = {
-	padding: '1em',
-	color: 'white',
-};
-
 export function ConfirmDialog({ props }) {
 	const { handleDelete, title, setOpen, open } = props;
 
@@ -79,7 +74,7 @@
 			</IconButton>
 
 			<Typography
 				sx={typographyStyle}
 				fontSize="large"
 				variant="h5"
 				gutterBottom

src/components/DeleteIconWithTooltip.jsx

@@ -1,11 +1,6 @@
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { Tooltip, IconButton } from '@mui/material';
-
-export const tooltipStyle = {
-	fontSize: '1.5rem',
-	marginBlockStart: '0',
-	marginBlockEnd: '0',
-};
+import { tooltipStyle } from './MUIStyles';
 
 export const DeleteIconWithTooltip = ({ ariaLabel, toggleDialog }) => {
 	return (

src/components/ListItem.jsx

@@ -3,8 +3,7 @@ import { updateItem, deleteItem } from '../api';
 import { calculateDateNextPurchased, ONE_DAY_IN_MILLISECONDS } from '../utils';
 import { toast } from 'react-toastify';
 import { useConfirmDialog } from '../hooks/useConfirmDialog';
-import { ConfirmDialog } from './ConfirmDialog';
-import { DeleteIconWithTooltip, tooltipStyle } from './DeleteIconWithTooltip';
+import { DeleteIconWithTooltip, ConfirmDialog, tooltipStyle } from './index';
 import {
 	ListItem as MaterialListItem,
 	Tooltip,
@@ -29,8 +28,8 @@ const currentDate = new Date();
 const urgencyStatusIcons = {
 	overdue: OverdueIcon,
 	soon: SoonIcon,
-	kindOfSoon: KindOfSoonIcon,
-	notSoon: NotSoonIcon,
+	'kind of soon': KindOfSoonIcon,
+	'not soon': NotSoonIcon,
 	inactive: InactiveIcon,
 };
 
@@ -39,12 +38,6 @@ const urgencyStatusStyle = {
 	color: 'white',
 };
 
-const toolTipStyle = {
-	fontSize: '1.5rem',
-	marginBlockStart: '0',
-	marginBlockEnd: '0',
-};
-
 const calculateIsPurchased = (dateLastPurchased) => {
 	if (!dateLastPurchased) {
 		return false;
@@ -86,7 +79,6 @@ export function ListItem({ item, listPath, itemUrgencyStatus }) {
 	};
 
 	const handleDeleteItem = async () => {
-		console.log('attempting item deletion');
 		try {
 			await deleteItem(listPath, id);
 			toast.success('Item deleted');
@@ -102,7 +94,7 @@ export function ListItem({ item, listPath, itemUrgencyStatus }) {
 		handleDelete: handleDeleteItem,
 		title: `Are you sure you want to delete ${name}?`,
 		setOpen: isOpen,
-		open: open,
+		open,
 	};
 
 	const tooltipTitle = isPurchased
@@ -115,7 +107,7 @@ export function ListItem({ item, listPath, itemUrgencyStatus }) {
 			<MaterialListItem className="ListItem">
 				{UrgencyStatusIcon && (
 					<Tooltip
-						title={<p style={toolTipStyle}>{itemUrgencyStatus}</p>}
+						title={<p style={tooltipStyle}>{itemUrgencyStatus}</p>}
 						placement="left"
 						arrow
 					>

src/components/MUIStyles.js

@@ -0,0 +1,38 @@
+const paperStyle = {
+	color: 'white',
+	p: '1rem',
+};
+
+export const darkPaperStyle = {
+	...paperStyle,
+	paddingBlockStart: '4rem',
+	paddingBlockEnd: '4rem',
+	background: `linear-gradient(45deg, rgba(117, 124, 232, 0.2) 0%, rgba(117, 124, 232, 0.05) 100%)`, // Pale blue gradient on top
+	backdropFilter: 'blur(2px)',
+};
+
+export const lightPaperStyle = {
+	...paperStyle,
+	background: `rgba(117, 124, 232, 0.2)`,
+};
+
+export const tooltipStyle = {
+	fontSize: '1.5rem',
+	marginBlockStart: '0',
+	marginBlockEnd: '0',
+};
+
+export const buttonStyle = {
+	color: 'white',
+	fontSize: '1.5rem',
+};
+
+export const buttonWithTopMarginStyle = {
+	...buttonStyle,
+	marginTop: '0.5rem',
+};
+
+export const typographyStyle = {
+	padding: '1em',
+	color: 'white',
+};

src/components/RadioInputElement.jsx

@@ -1,15 +1,33 @@
+import { Radio, Tooltip, FormControlLabel } from '@mui/material';
+import { tooltipStyle } from './MUIStyles';
+
+const radioStyle = {
+	color: 'white',
+	m: 2,
+	my: 3,
+};
+
 export const RadioInputElement = ({ label, id, value, required }) => {
 	return (
-		<>
-			<input
-				type="radio"
-				name="purchase-date"
-				id={id}
-				value={value}
-				required={required}
-			/>
-			<label htmlFor={id}>{label}</label>
-			<br />
-		</>
+		<FormControlLabel
+			control={
+				<Radio
+					value={value}
+					id={id}
+					required={required}
+					inputProps={{ 'aria-label': label }}
+					color="success"
+					sx={radioStyle}
+				/>
+			}
+			label={
+				<Tooltip
+					title={<p style={tooltipStyle}>{`${value} days from today`}</p>}
+					arrow
+				>
+					<span style={{ fontSize: '1.8rem' }}>{label}</span>
+				</Tooltip>
+			}
+		/>
 	);
 };

src/components/ShareList.jsx

@@ -1,7 +1,8 @@
-import { shareList } from '../api';
 import { useStateWithStorage, useAuth } from '../hooks';
-import { TextInputElement } from './index.js';
+import { shareList } from '../api';
 import { toast } from 'react-toastify';
+import { Box, Button } from '@mui/material';
+import { TextInputElement, buttonWithTopMarginStyle } from './index.js';
 
 export function ShareList() {
 	const [listPath] = useStateWithStorage('tcl-shopping-list-path', null);
@@ -39,17 +40,29 @@ export function ShareList() {
 	};
 
 	return (
-		<div>
-			<form onSubmit={handleEmailInputSubmit}>
+		<Box component="section">
+			<Box
+				component="form"
+				noValidate
+				autoComplete="off"
+				onSubmit={handleEmailInputSubmit}
+			>
 				<TextInputElement
 					type="email"
 					id="email-input"
 					placeholder="Enter email"
-					label="Enter Email:"
+					label="Share this list with a friend by entering their email:"
 					required={true}
 				/>
-				<button type="submit">Invite User</button>
-			</form>
-		</div>
+				<Button
+					sx={buttonWithTopMarginStyle}
+					fullWidth
+					variant="outlined"
+					type="submit"
+				>
+					Share
+				</Button>
+			</Box>
+		</Box>
 	);
 }

src/components/SingleList.css

@@ -1,6 +1,7 @@
 .SingleList {
 	align-items: baseline;
 	display: flex;
+	width: inherit;
 	flex-direction: row;
 	align-items: center;
 	font-size: 1.2em;