From 305d69411a9c30695061302b66538109c3f848d1 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Wed, 14 Jul 2021 10:03:53 -0400
Subject: [PATCH] Added appropriate icon for error UI; reformatted error UI
 text to emphasisze the proper information.

---
 src/components/AppView/AppView.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
index f6762d2..4e6e088 100644
--- a/src/components/AppView/AppView.js
+++ b/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>