Changed alerts to look a lot cleaner.

src/components/Alert.js

 import React from 'react';
 import classNames from 'classnames';
 import {findLink} from '../utils/nameUtils';
+import Chip from 'material-ui/Chip';
 
 const Alert = ({alert}) => {
     const getUrgencyClass = () => {
@@ -20,11 +21,13 @@ const Alert = ({alert}) => {
     const getMessage = () => {
         const links = findLink(alert.message);
         if (!links) {
-            return alert.message;
+            return (<span className={'alert-message'}>
+                {alert.message}
+            </span>);
         }
 
         return (
-            <span>
+            <span className={'alert-message'}>
                 {alert.message.substring(0, links.index)}
                 <a href={links[0]} className={'alert-link'} target="_blank" rel="noopener">{links[0]}</a>
                 {alert.message.substring(links.index + links[0].length)}
@@ -32,9 +35,12 @@ const Alert = ({alert}) => {
         );
     };
 
+    const getChipLabel = () => alert.urgency_tag.charAt(0).toUpperCase() + alert.urgency_tag.slice(1);
+
     return (
-        <div className={classNames('alert', getUrgencyClass())}>
+        <div className={'alert'}>
             {getMessage()}
+            <Chip label={getChipLabel()} className={classNames('alert-urgency-chip', getUrgencyClass())}/>
         </div>
     );
 };

src/containers/AlertContainer.js

@@ -4,6 +4,7 @@ import IconButton from 'material-ui/IconButton';
 import Popover from 'material-ui/Popover';
 import Alert from '../components/Alert';
 import NotificationsIcon from 'material-ui-icons/Notifications';
+import CloseIcon from 'material-ui-icons/Close';
 import Typography from 'material-ui/Typography';
 import {connect} from 'react-redux';
 import {viewAlert} from '../actions/api';
@@ -50,7 +51,9 @@ class AlertContainer extends React.Component {
         const activeAlerts = alerts.filter(this.isAlertActive);
         return (
             <div>
-                <IconButton color={'primary'} ref={this.handleBtnRef} onClick={this.handleOpen}>
+                <IconButton classes={{
+                    root: 'alert-container-btn'
+                }} ref={this.handleBtnRef} onClick={this.handleOpen}>
                     {activeAlerts.filter((alert) => !alert.viewed).length !== 0 &&
                     <span className={'alert-container-number'}>
                         <Typography type={'caption'} className={'alert-container-number-text'}>
@@ -74,11 +77,29 @@ class AlertContainer extends React.Component {
                     }}
                     onClose={this.handleClose}>
                     <div className={'alert-container-popover'}>
-                        {activeAlerts.map((alert) => {
-                            return (
-                                <Alert key={alert.id} alert={alert}/>
-                            );
-                        })}
+                        <div className={'alert-container-header'}>
+                            <Typography type={'title'} className={'alert-container-title'}>
+                                Alerts
+                            </Typography>
+                            <IconButton className={'alert-container-close-btn'} onClick={this.handleClose}>
+                                <CloseIcon className={'alert-container-close-icon'}/>
+                            </IconButton>
+                        </div>
+                        {
+                            activeAlerts.length === 0 ?
+                                <div>
+                                    <div className={'alert'}>
+                                        <span>There are no alerts at this time.</span>
+                                    </div>
+                                </div> :
+                                <div>
+                                    {activeAlerts.map((alert) => {
+                                        return (
+                                            <Alert key={alert.id} alert={alert}/>
+                                        );
+                                    })}
+                                </div>
+                        }
                     </div>
                 </Popover>
             </div>

src/styles/components/alert.scss

 .alert {
-  margin: 8px;
-  padding: 6px 24px;
-  border-radius: 5px;
-  color: rgba(255, 255, 255, 1);
+  padding: 8px 16px;
   display: flex;
-  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
   font-size: 0.875rem;
   font-weight: 400;
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   line-height: 1.46429em;
+  cursor: default;
+  position: relative;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
 }
 
+.alert-message {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: 10px;
+}
+
+.alert-urgency-chip {
+  height: 20px !important;
+  font-size: 12px !important;
+  line-height: 1;
+  color: white !important;
+}
+
+
 .alert-link {
-  color: rgba(255, 255, 255, 1) !important;
+  color: #0645AD;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 .alert-info {
-  background-color: #42A5F5;
+  background-color: #42A5F5 !important;
 }
 
 .alert-minor {
-  background-color: #66BB6A;
+  background-color: #66BB6A !important;
 }
 
 .alert-major {
-  background-color: #FFA726;
+  background-color: #FFA726 !important;
 }
 
 .alert-emergency {
-  background-color: #EF5350;
+  background-color: #EF5350 !important;
 }
\ No newline at end of file

src/styles/containers/alertContainer.scss

+.alert-container-btn {
+  color: rgba(0, 0, 0, 0.4) !important;
+}
+
 .alert-container-popover {
   max-width: 450px;
+  max-height: 300px;
+}
+
+.alert-container-close-btn {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.alert-container-close-icon {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.alert-container-header {
+  padding: 8px 16px;
+  background-color: rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.alert-container-title {
+  font-weight: 400 !important;
+  font-size: 20px !important;
 }
 
 .alert-container-number {
@@ -15,4 +43,6 @@
 
 .alert-container-number-text {
   color: rgba(255, 255, 255, 1) !important;
+  height: 10px !important;
+  line-height: 10px !important;
 }
\ No newline at end of file