remove exported custom styles into a MUIStyles.js

src/App.jsx

@@ -8,24 +8,6 @@ import { useShoppingLists } from './api';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-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 function App() {
 	/**
 	 * This custom hook takes the path of a shopping list

src/components/AddItems.jsx

@@ -5,7 +5,7 @@ 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 '../views';
+import { buttonStyle } from './index';
 
 const radioGroupStyle = {
 	mx: 1,

src/components/ConfirmDialog.jsx

@@ -8,7 +8,7 @@ import {
 	Button,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import { buttonStyle } from '../views';
+import { buttonStyle } from './index';
 import './ConfirmDialog.css';
 
 // MUI's Dialog already comes with built-in focus management and accessibility features.
@@ -23,11 +23,6 @@ const dialogStyle = {
 	backgroundColor: 'rgb(20, 20, 20)',
 };
 
-export const typographyStyle = {
-	padding: '1em',
-	color: 'white',
-};
-
 export function ConfirmDialog({ props }) {
 	const { handleDelete, title, setOpen, open } = props;
 

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,7 +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 { DeleteIconWithTooltip, tooltipStyle, ConfirmDialog } from './index';
+import { DeleteIconWithTooltip, ConfirmDialog, tooltipStyle } from './index';
 import {
 	ListItem as MaterialListItem,
 	Tooltip,

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,5 +1,5 @@
 import { Radio, Tooltip, FormControlLabel } from '@mui/material';
-import { tooltipStyle } from './DeleteIconWithTooltip';
+import { tooltipStyle } from './MUIStyles';
 
 const radioStyle = {
 	color: 'white',

src/components/ShareList.jsx

@@ -2,8 +2,7 @@ import { useStateWithStorage, useAuth } from '../hooks';
 import { shareList } from '../api';
 import { toast } from 'react-toastify';
 import { Box, Button } from '@mui/material';
-import { TextInputElement } from './index.js';
-import { buttonWithTopMarginStyle } from '../views/Home';
+import { TextInputElement, buttonWithTopMarginStyle } from './index.js';
 
 export function ShareList() {
 	const [listPath] = useStateWithStorage('tcl-shopping-list-path', null);

src/components/TextInputElement.jsx

@@ -1,5 +1,5 @@
 import { TextField, Typography } from '@mui/material';
-import { typographyStyle } from './ConfirmDialog';
+import { typographyStyle } from '../components/index';
 
 const textFieldStyle = {
 	'& .MuiInputBase-input': {

src/components/index.js

@@ -6,3 +6,4 @@ export * from './TextInputElement';
 export * from './RadioInputElement';
 export * from './ConfirmDialog';
 export * from './DeleteIconWithTooltip';
+export * from './MUIStyles';

src/views/Home.jsx

@@ -10,20 +10,14 @@ import {
 	Button,
 	List as UnorderedList,
 } from '@mui/material';
-import { SingleList, TextInputElement } from '../components';
-import { lightPaperStyle, darkPaperStyle } from '../App';
+import {
+	SingleList,
+	TextInputElement,
+	lightPaperStyle,
+	darkPaperStyle,
+} from '../components';
 import './Home.css';
 
-export const buttonStyle = {
-	color: 'white',
-	fontSize: '1.5rem',
-};
-
-export const buttonWithTopMarginStyle = {
-	...buttonStyle,
-	marginTop: '0.5rem',
-};
-
 const dividerStyle = {
 	borderColor: 'primary.main',
 };

src/views/List.jsx

@@ -11,8 +11,13 @@ import {
 	Button,
 } from '@mui/material';
 import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
-import { ListItem, AddItems, TextInputElement } from '../components';
-import { darkPaperStyle, lightPaperStyle } from '../App';
+import {
+	ListItem,
+	AddItems,
+	TextInputElement,
+	darkPaperStyle,
+	lightPaperStyle,
+} from '../components';
 
 // React.memo is needed to prevent unnecessary re-renders of the List component
 // when the props (data and listPath) haven't changed,