Added appropriate icon for error UI; reformatted error UI text to emp…

…hasisze the proper information.

src/components/AppView/AppView.js

@@ -9,6 +9,7 @@ import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
 export default function AppView({ setDarkMode }) {
 	// Create stateful variables.
@@ -115,6 +116,9 @@ export default function AppView({ setDarkMode }) {
 			alignItems: "center",
 			justifyContent: "center",
 			marginTop: theme.spacing(6)
+		},
+		errorIcon: {
+			fontSize: "10rem"
 		}
 	});
 	const classes = useStyles();
@@ -129,14 +133,12 @@ export default function AppView({ setDarkMode }) {
 					value={selectedQueues}
 					setValue={setSelectedQueues}
 				/>{error ? <Box classes={{ root: classes.errorContainer }}>
-					<Typography variant="h1">
-						{response.status}
-					</Typography>
-					<Typography variant="h3">
-						Something went wrong.
+					<ErrorOutlineIcon classes={{ root: classes.errorIcon }} />
+					<Typography align="center" variant="h3">
+						{`${response.message}`}
 					</Typography>
-					<Typography variant="h5">
-						{response.message}
+					<Typography align="center" variant="h5">
+						{`Error Code:${response.status}`}
 					</Typography>
 				</Box> : <ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading} />}
 			</Box>