styled notifications dorpdown

app/javascript/packs/shared/constants/colors.js

@@ -1,3 +1,5 @@
-export const MAIN_COLOR_BLUE = '#37a0d9';
-export const WHITE_COLOR = '#fff';
-export const BORDER_GRAY_COLOR = '#d2d2d2';
+export const MAIN_COLOR_BLUE = "#37a0d9";
+export const WHITE_COLOR = "#fff";
+export const BORDER_GRAY_COLOR = "#d2d2d2";
+export const WILD_SAND_COLOR = "#f5f5f5";
+export const MYSTIC_COLOR = "#eaeff2";

app/javascript/packs/shared/navigation/components/CustomNavItem.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default props =>
-  <li role="presentation">
-    {props.children}
+export default ({ className, children }) =>
+  <li className={className} role="presentation">
+    {children}
   </li>;

app/javascript/packs/shared/navigation/components/NotificationItem.jsx

@@ -2,14 +2,21 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Col, Row } from "react-bootstrap";
 import { FormattedTime } from "react-intl";
+import styled from "styled-components";
 
 import CustomNavItem from "./CustomNavItem";
 
+const StyledListItem = styled(CustomNavItem)`
+  border-bottom: 1px solid #d2d2d2;
+  padding-bottom: 10px;
+  padding-top: 10px;
+`;
+
 const NotificationItem = ({ notification }) => {
   const { title, message, created_at, type_of } = notification;
 
   return (
-    <CustomNavItem>
+    <StyledListItem>
       <Row>
         <Col xs={2}>
           <div className="text-center">
@@ -20,7 +27,7 @@ const NotificationItem = ({ notification }) => {
         </Col>
 
         <Col xs={10}>
-          <span dangerouslySetInnerHTML={{ __html: title }} />
+          <strong dangerouslySetInnerHTML={{ __html: title }} />
           <br />
           <FormattedTime
             value={created_at}
@@ -29,11 +36,10 @@ const NotificationItem = ({ notification }) => {
             year="numeric"
             hour="numeric"
             minute="numeric"
-          />
-          | <span dangerouslySetInnerHTML={{ __html: message }} />
+          />&nbsp;|&nbsp;<span dangerouslySetInnerHTML={{ __html: message }} />
         </Col>
       </Row>
-    </CustomNavItem>
+    </StyledListItem>
   );
 };
 

app/javascript/packs/shared/navigation/components/NotificationsDropdown.jsx

@@ -2,13 +2,48 @@ import React, { Component } from "react";
 import { NavDropdown } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
 import axios from "axios";
+import styled from "styled-components";
 
 import { RECENT_NOTIFICATIONS_PATH } from "../../../app/routes";
+import {
+  MAIN_COLOR_BLUE,
+  WILD_SAND_COLOR,
+  MYSTIC_COLOR
+} from "../../constants/colors";
 
 import NotificationItem from "./NotificationItem";
 import Spinner from "../../Spinner";
 import CustomNavItem from "./CustomNavItem";
 
+const StyledListHeader = styled(CustomNavItem)`
+  background-color: ${MAIN_COLOR_BLUE};
+  color: ${WILD_SAND_COLOR};
+  font-weight: bold;
+  padding: 8px;
+
+  & a, a:hover, a:active {
+    color: ${WILD_SAND_COLOR};
+  }
+`;
+
+const StyledListFooter = styled(CustomNavItem)`
+  background-color: ${MYSTIC_COLOR};
+  padding: 8px;
+  text-align: center;
+`;
+
+const StyledNavDropdown = styled(NavDropdown)`
+  & > .dropdown-menu {
+    max-height: 500px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding-bottom: 0;
+    padding-top: 0;
+    width: 450px;
+    word-wrap: break-word;
+  }
+`;
+
 class NotificationsDropdown extends Component {
   constructor(props) {
     super(props);
@@ -45,13 +80,13 @@ class NotificationsDropdown extends Component {
 
   render() {
     return (
-      <NavDropdown
+      <StyledNavDropdown
         noCaret
         id="notifications-dropdown"
         title={<i className="fa fa-bell" />}
         onClick={this.getRecentNotifications}
       >
-        <CustomNavItem>
+        <StyledListHeader>
           <span>
             <FormattedMessage id="notifications.dropdown_title" />
           </span>
@@ -60,14 +95,14 @@ class NotificationsDropdown extends Component {
               <FormattedMessage id="notifications.dropdown_settings_link" />
             </a>
           </span>
-        </CustomNavItem>
+        </StyledListHeader>
         {this.renderNotifications()}
-        <CustomNavItem>
+        <StyledListFooter>
           <a href="/users/notifications">
             <FormattedMessage id="notifications.dropdown_show_all" />
           </a>
-        </CustomNavItem>
-      </NavDropdown>
+        </StyledListFooter>
+      </StyledNavDropdown>
     );
   }
 }