Update ItemMetadataView to use new EmalHeader component

src/components/ItemMetadataView/ItemMetadataView.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, Card, CardHeader, Avatar, Typography } from '@material-ui/core';
+import { makeStyles, Typography } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import webqueue2Theme from "../../theme";
-import UserAvatar from "../UserAvatar/";
+import EmailHeader from '../EmailHeader/EmailHeader';
 
 
 export default function ItemMetadataView({item}){
 
 	const theme = webqueue2Theme(false);
 	const useStyles = makeStyles({
-		"verticalPadding": {
-			paddingTop: theme.spacing(1),
-			paddingBottom: theme.spacing(1),
+		"verticalSpacing": {
+			marginTop: theme.spacing(1),
+			marginBottom: theme.spacing(1),
 		},
 		"removeCardHeaderPadding": {
 			padding: "0"
@@ -28,55 +28,23 @@ export default function ItemMetadataView({item}){
 		);
 	};
 
-
-	/**
-	 * Returns the title for the user.
-	 * @example
-	 * // Has alias and name
-	 * return "campb303 (Justin Campbell)"
-	 * // Has alias but no name
-	 * return "campb303"
-	 * // Has no alias and no name
-	 * return ""
-	 * @returns {string}
-	 */
-	function buildTitle(){
-		let title = "";		
-		const isNotEmpty = (value) => {
-			return value === "" || value === null ? false : true;
-		};
-		if (isNotEmpty(item.userName)){
-			title += `${item.userName}`;
-		};
-		if (isNotEmpty(item.userEmail)){
-			title += ` <${item.userEmail}>`
-		}
-		return title;
-	};
-
 	const metadataFields = ["userEmail", "userAlias", "subject", "dateReceived",
 							"assignedTo", "status", "priority", "department", "building"];
 
 	return(
 		<>
 			{item.isLocked ? LockedAlert() : ""}
 
-			<Typography variant="h4" classes={{root: classes.verticalPadding}}>
+			<Typography variant="h4" classes={{root: classes.verticalSpacing}}>
 				{item.subject}
 			</Typography>
 
-			<Card elevation={0} classes={{root: classes.verticalPadding}}>
-				<CardHeader
-					avatar={<UserAvatar userName={item.userName} />}
-					title={buildTitle()}
-					subheader={Date(item.dateReceived)}
-					classes={{root: classes.removeCardHeaderPadding}}
-				/>
-			</Card>
+			<EmailHeader name={item.userName} date={item.dateReceived} email={item.userEmail} />
 
-			<Typography variant="subtitle2" classes={{root: classes.verticalPadding}}>
+			<Alert severity="info" classes={{root: classes.verticalSpacing}}>
 				Status, assignments, priority, refile, archive and delete controls coming soon to a theater near you.
-			</Typography>
+			</Alert>
+
 		</>
 	);
 }