Merge 20805aa into ab36945

src/components/DropDown/DropDown.js

@@ -10,7 +10,6 @@ import {
 } from '@Actions/notifications';
 import { logout } from '@Actions/authActions';
 import { getProfile } from '@Actions/profileAction';
-import back from '../../../public/Rectangle.png';
 import checkMark from '../../../public/check-mark.png';
 import { formatDate } from '@Utils/';
 
@@ -58,11 +57,12 @@ export class DropDown extends Component {
           onClick={() => this.handleClick(notification.id,
             notification.resourceType, notification.resourceId)}
         >
-          <h3>{`New ${notification.resourceType}`}</h3>
           <div className="content">
-            <p className="description">
-              {notification.message}
-            </p>
+            <div className="description-container">
+              <p className="noticationDescription">
+                {notification.message}
+              </p>
+            </div>
             <div className="date">
               <p>{`${date.day} ${date.month}`}</p>
               <p>{`${date.hours}:${date.minutes < 10 ? `0${date.minutes}` : date.minutes} ${(date.hours) < 12 ? 'AM' : 'PM'}`}</p>
@@ -134,7 +134,7 @@ export class DropDown extends Component {
       case 'article':
         return history.push(`/articles/${resourceId}`);
       case 'follow':
-        return history.push(`/me/${resourceId}`);
+        return history.push(`/profiles/${resourceId}`);
       default:
         return history.push(`/profiles/${resourceId}`);
     }
@@ -150,18 +150,44 @@ export class DropDown extends Component {
       type, notifications: { notifications }, show, profile: { user },
     } = this.props;
 
-    const height = type !== 'notification' ? '400px' : '500px';
-    const width = type !== 'notification' ? '270px' : '335px';
+    const height = type !== 'notification' ? '325px' : '400px';
+    const width = type !== 'notification' ? '270px' : '300px';
+
+    let highlightStyles;
+    if (type === 'notification') {
+      highlightStyles = {
+        icon: {
+          width: '70px',
+          top: '-19%',
+        },
+        cover: {
+          width: '70px',
+          top: '-7%',
+        },
+      };
+    } else {
+      highlightStyles = {
+        icon: {
+          width: '80px',
+          top: '-23%',
+        },
+        cover: {
+          width: '80px',
+          top: '-9%',
+        },
+      };
+    }
 
     return (
       <section
         style={show ? (type === 'notification'
-          ? { right: '72%', transform: 'scaleY(1)' } : { right: '9%', transform: 'scaleY(1)' }) : { display: 'none' }}
+          ? { right: '77%', transform: 'scaleY(1)' } : { right: '9%', transform: 'scaleY(1)' }) : { display: 'none' }}
         className="dropdownSection"
         data-test="dropDownComponent"
       >
         <section className="dropDown" style={{ height }}>
-          <img className="backDrop" style={{ width }} src={back} alt="" />
+          <div className="highlightIcon" style={highlightStyles.icon}>{' '}</div>
+          <div className="highlightCover" style={highlightStyles.cover}>{' '}</div>
           <div className="dropDowncontainer" style={{ width }}>
             {type === 'notification' ? (
               <header className="header">

src/components/DropDown/DropDown.style.scss

@@ -7,48 +7,58 @@ $height: $width/2;
 
 .dropdownSection{
   position: absolute;
-  z-index: 200;
   display: flex;
   align-items: flex-end;
-  top: 40px;
+  top: 50px;
   transform: scaleY(0);
   transform-origin: 0;
   transition: all .5s ease;
+  background: white;
+  border-radius: 5px;
+  z-index: 200;
+  padding: 20px 5px 20px;
+  box-shadow: 2px 0px 5px 1px rgba(0,0,0,0.2);
 
   .dropDown{
     position: relative;
-    border-radius: 5px;
-    background: transparent;
+    background: white;
     display: flex;
-    height: 500px;
+    height: 450px;
 
-    .backDrop, .watermark{
+    .highlightIcon {
+      height: 55px;
       position: absolute;
-      top: 0;
-      left: 0;
-      z-index: -1;
-      width: 335px;
-      height: inherit;
+      background: transparent;
+      right: -5px;
+      box-shadow: 2px 0px 5px 1px rgba(0,0,0,0.2);
+      z-index: 2;
+    }
+
+    .highlightCover {
+      height: 24px;
+      position: absolute;
+      background: white;
+      right: -5px;
+      z-index: 3;
     }
 
     .dropDowncontainer{
-      padding: 65px 5px 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow: hidden;
-      max-height: 500px;
-      width: 335px;
 
       .header{
-        width: 300px;
-        margin-bottom: 10px;
+        width: 270px;
+        padding-bottom: 5px;
+        margin-bottom: 5px;
+        border-bottom: 1px solid #FFC700;
 
         h2, h3{
           display: inline;
           text-align: left;
           font-size: 16px;
-          color: #FFC700;
+          color: rgba(0,0,0,0.8);
           border: none;
           background: transparent;
         }
@@ -64,17 +74,19 @@ $height: $width/2;
 
           p{
             font-size: 14px;
-            color: #FFC700;
+            color:rgba(0,0,0,0.8);;
           }
         }
         clear: both;
       }
 
       .dropDowncontent {
         overflow: scroll;
+        min-height: 350px;
+        border-bottom: 1px solid #FFC700;
 
         .noNotifications {
-          width: 300px;
+          width: 270px;
           margin-right: 3px;
           font-size: 12px;
           padding: 7px 5px;
@@ -92,14 +104,13 @@ $height: $width/2;
 
           p {
             font-size: 14px;
-            color: #FFC700;
+            color: rgba(0,0,0,0.8);;
           }
         }
 
         .notify {
-          width: 300px;
+          width: 270px;
           margin-right: 3px;
-          background: rgba(196, 196, 196, 0.2);
           font-size: 12px;
           padding: 7px 5px;
           margin-bottom: 10px;
@@ -108,30 +119,34 @@ $height: $width/2;
           text-align: left;
           border: 0;
 
-          h3 {
-            margin-bottom: 10px;
-            font-weight: 400;
+          &:hover {
+            background: rgba(196, 196, 196, 0.2);
           }
 
           .content {
             display: flex;
             justify-content: space-between;
 
-            .description{
-              width: 75%;
-              display: -webkit-box;
-              -webkit-line-clamp: 2;
-              -webkit-box-orient: vertical;
-              overflow-y: hidden;
-              text-overflow: ellipsis;
-              font-weight: 200;
+            .description-container {
+              display: flex;
+              align-items: flex-end;
+              width: 180px;
+
+              .noticationDescription{
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow-y: hidden;
+                text-overflow: ellipsis;
+                font-weight: 200;
+              }
             }
 
             .date {
               display: flex;
               flex-direction: column;
               align-items: flex-end;
-              color: #FFC700;
+              color: rgba(0,0,0,0.8);;
             }
           }
         }

src/components/Header/Header.js

@@ -38,6 +38,17 @@ export class Header extends Component {
     this.state.currentLocation = this.props.history.location;
     this.pusher = new Pusher('5348b046f75caaacd965', { cluster: 'eu' });
     this.channel = this.pusher.subscribe('push-notifications');
+
+    const { auth: { isAuthenticated, user: { username } } } = this.props;
+    if (isAuthenticated) {
+      this.props.getNotifications();
+      this.props.getProfile();
+      this.channel.bind(`notify-${username}`, (data) => {
+        this.props.getNotifications();
+        Notification.requestPermission();
+        new Notification(data.message);
+      });
+    }
   }
 
   componentDidUpdate(prevProps) {

src/components/Header/Header.scss

@@ -61,6 +61,7 @@
 
     button {
       cursor: pointer;
+      z-index: 205;
     }