Add icons for different notification types in recent notification dropdown [SCI-1865]

app/javascript/src/components/Navigation/components/NotificationImage.jsx

@@ -1,8 +1,47 @@
 import React from "react";
+import { Image } from "react-bootstrap";
+import PropTypes from "prop-types";
 
-export default () =>
-  <div className="text-center">
-    <span className="assignment">
-      <i className="fa fa-newspaper-o" />
-    </span>
-  </div>;
+const NotificationImage = ({className, type, avatar}) => {
+  const delegator = {
+      recent_changes: (
+          <Image
+              className="avatar"
+              src={`${avatar }?${new Date().getTime()}`}
+              circle
+          />
+      ),
+      system_message: (
+          <span className="system-message">
+              <i className="glyphicon glyphicon-tower" />
+          </span>
+      ),
+      deliver: (
+          <span className="deliver">
+              <i className="fa fa-truck" />
+          </span>
+      ),
+      assignment: (
+          <span className="assignment">
+              <i className="fa fa-newspaper-o" />
+          </span>
+      )
+  }
+  return (
+    <div className={`text-center ${className}`} >
+      {delegator[type]}
+    </div>
+  );
+};
+
+NotificationImage.defaultProps = {
+  avatar: ''
+};
+
+NotificationImage.propTypes = {
+  className: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  avatar: PropTypes.string
+};
+
+export default NotificationImage;

app/javascript/src/components/Navigation/components/NotificationItem.jsx

@@ -6,6 +6,12 @@ import styled from "styled-components";
 
 import CustomNavItem from "./CustomNavItem";
 import NotificationImage from "./NotificationImage";
+import {
+  MAIN_COLOR_BLUE,
+  COLOR_ORANGE,
+  ICON_GREEN_COLOR,
+  WILD_SAND_COLOR
+} from "../../../config/constants/colors";
 
 const StyledListItem = styled(CustomNavItem)`
   border-bottom: 1px solid #d2d2d2;
@@ -13,14 +19,58 @@ const StyledListItem = styled(CustomNavItem)`
   padding-top: 10px;
 `;
 
+const StyledNotificationImage = styled(NotificationImage)`
+  margin-left: 12px;
+
+  .avatar {
+    top: 0px;
+    margin-top: 5px;
+    height: 45px;
+    width: 45px;
+  }
+
+  .assignment {
+    background-color: ${MAIN_COLOR_BLUE};
+    border-radius: 50%;
+    color: ${WILD_SAND_COLOR};
+    display: block;
+    font-size: 23px;
+    height: 45px;
+    padding-top: 5px;
+    width: 45px;
+  }
+
+  .deliver {
+    background-color: ${COLOR_ORANGE};
+    border-radius: 50%;
+    color: ${WILD_SAND_COLOR};
+    display: block;
+    font-size: 23px;
+    height: 45px;
+    padding-top: 5px;
+    width: 45px;
+  }
+
+  .system-message {
+    background-color: ${ICON_GREEN_COLOR};
+    border-radius: 50%;
+    color: ${WILD_SAND_COLOR};
+    display: block;
+    font-size: 23px;
+    height: 45px;
+    padding-top: 8px;
+    width: 45px;
+  }
+`;
+
 const NotificationItem = ({ notification }) => {
-  const { title, message, created_at, type_of } = notification;
+  const { title, message, created_at, type_of, avatarThumb } = notification;
 
   return (
     <StyledListItem>
       <Row>
         <Col xs={2}>
-          <NotificationImage type={type_of} />
+          <StyledNotificationImage type={type_of} avatar={avatarThumb} />
         </Col>
 
         <Col xs={10}>

app/javascript/src/config/constants/colors.js

@@ -19,3 +19,4 @@ export const COLOR_ALTO = "#dddddd";
 export const COLOR_GRAY = "#909088";
 export const COLOR_ALABASTER = "#fcfcfc";
 export const COLOR_APPLE_BLOSSOM = "#a94442";
+export const COLOR_ORANGE = "#ff900b";

app/views/client_api/notifications/index.json.jbuilder

@@ -4,4 +4,7 @@ json.array! notifications do |notification|
   json.message notification.message
   json.type_of notification.type_of
   json.created_at notification.created_at
+  if notification.type_of == 'recent_changes'
+    json.avatarThumb avatar_path(notification.generator_user, :icon_small)
+  end
 end