lots of clean up of Notification component and styles. It's not BEM I…

… know. I didn't get a change to refactor that.

src/components/Notification/Notification.examples.md

@@ -1,7 +1,6 @@
 #### Notification Menu
 
 ```js
-const Flexbox = require('flexbox-react').default;
 const notifications1 = [];
 
 let notifications = [
@@ -59,7 +58,7 @@ initialState = {
   notifications: notifications
 };
 
-<div>
+<div className='notifcationexample' style={{textAlign: 'right'}}>
   <Notification
     notifications={state.notifications}
     selectedNotification={state.selectedNotification}

src/components/Notification/Notification.jsx

@@ -39,13 +39,14 @@ const Notification = props => {
       <Notification.Body
         selectedNotification={selectedNotification}
         notifications={notifications}
-        removeItem={3}
         onNotificationClicked={onNotificationClicked}
         onClearNotification={onClearNotification}
       />
-      {selectedNotification ? null : (
-        <Notification.Footer onClearAll={onClearAll} />
-      )}
+      <Notification.Footer
+        onClearAll={onClearAll}
+        selectedNotification={selectedNotification}
+        empty={!notificationCount}
+      />
     </Notification.Tray>
   )
 

src/components/Notification/NotificationBody.jsx

@@ -39,7 +39,6 @@ const NotificationBody = props => {
   const {
     children,
     notifications,
-    removeItem,
     onNotificationClicked,
     onClearNotification,
     ...rest

src/components/Notification/NotificationDetail.jsx

@@ -5,9 +5,8 @@ import { getAlertIconClassName } from '../../util/getAlertIconClassName'
 
 const NotificationDetail = props => {
   const { notification, onClearNotification, ...rest } = props
-  const { id, type, title, description, timeStamp, isMsgRead } = notification
+  const { id, type, title, description, timeStamp } = notification
   const icon = getAlertIconClassName(type)
-  const isReadStyle = isMsgRead ? 'normal' : 'bold'
 
   function handleClearClicked (e, notification) {
     onClearNotification(notification)
@@ -25,12 +24,7 @@ const NotificationDetail = props => {
       <Flexbox title={title}>
         <Icon className={`notificationIcon ${type} ${icon}`} />
         <Flexbox flexDirection='column' className={`notificationContent`}>
-          <div
-            className='notificationTitle'
-            style={{ fontWeight: isReadStyle }}
-          >
-            {title}
-          </div>
+          <div className='notificationTitle'>{title}</div>
           <div className='notificationTime'>{timeStamp}</div>
           <div className='notificationDesc '>{description}</div>
           <div className='notificationActions'>

src/components/Notification/NotificationEmpty.jsx

@@ -5,20 +5,18 @@ const NotificationEmpty = props => {
   const { children, ...rest } = props
   return (
     <div className='empty__notification_panel' {...rest}>
-      <div className='empty__circle'>
-        <div className='bell_icon'>
-          <Icon name='bell outline' size='big' />
+      <div className='outer-circle'>
+        <div className='inner-circle'>
+          <Icon name='bell outline bell_icon' size='big' />
+          <div className='info_text'>
+            <span>No New Notifications!</span>
+          </div>
         </div>
-        <div className='info_text'>
-          <span>No New Notifications!</span>
-        </div>
-      </div>
-      <div className='title'>
-        <span>
-          Check back again for updates, alerts and any other general
-          notifications.
-        </span>
       </div>
+      <p className='large-copy'>
+        Check back again for updates, alerts and any other general
+        notifications.
+      </p>
     </div>
   )
 }

src/components/Notification/NotificationFooter.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
 
 const NotificationFooter = props => {
-  const { children, onClearAll, ...rest } = props
+  const { children, onClearAll, empty, selectedNotification, ...rest } = props
   function handleClearAllClicked () {
     onClearAll()
   }
+  if (empty) return <div className='empty-footer' />
+  if (selectedNotification) return null
   return (
-    <div className={'notificationFooter clearfix'} {...rest}>
-      <a onClick={() => handleClearAllClicked()}>Clear All</a>
+    <div className={'notificationFooter'} {...rest}>
+      {empty ? null : <a onClick={() => handleClearAllClicked()}>Clear All</a>}
     </div>
   )
 }

src/components/Notification/NotificationHeader.jsx

@@ -22,7 +22,7 @@ const NotificationHeader = props => {
       {...rest}
     >
       <Icon className='angle left backarrow' />
-      <span className='backbtn'>BACK</span>
+      <h4 className='backbtn'>BACK</h4>
     </div>
   )
   const listView = (

src/components/Notification/NotificationMessage.jsx

@@ -14,7 +14,7 @@ const NotificationMessage = props => {
   const { id, type, title, description, timeStamp, isMsgRead } = notification
   const icon = getAlertIconClassName(type)
   const isReadStyle = isMsgRead ? 'normal' : 'bold'
-  console.log('isRead: !' + isMsgRead)
+  console.log('id: ' + id + ' isRead: !' + isMsgRead)
 
   function handleNotificationClicked (notification) {
     onNotificationClicked(notification)
@@ -43,7 +43,7 @@ const NotificationMessage = props => {
           >
             {title}
           </div>
-          <div className='notificationDesc '>{description}</div>
+          <div className='notificationDesc'>{description}</div>
           <div className='notificationActions'>
             <a
               className='notificationClear'