add hover states and empty case

app/assets/stylesheets/notifications.scss.erb

@@ -1,4 +1,5 @@
 $notifications-border-color: #DDDDDD;
+$notifications-hover-color: #F6F6F6;
 $unread_notifications_dot_size: 8px;
 
 .unread-notifications-dot {
@@ -48,6 +49,20 @@ $unread_notifications_dot_size: 8px;
     ul.notifications {
       max-height: 500px;
       overflow-y: auto;
+
+      .notification {
+        font-size: 13px;
+
+        .notification-body {
+          border-bottom: 1px solid $notifications-border-color;
+        }
+      }
+
+      .notificationsEmpty {
+        font-family: din-regular, helvetica, sans-serif;
+        margin: 50px 10px;
+        text-align: center;
+      }
     }
 
     .notificationsBoxSeeAll {
@@ -56,15 +71,11 @@ $unread_notifications_dot_size: 8px;
       text-align: center;
       padding: 6px 0;
       font-family: din-regular, helvetica, sans-serif;
-      color: #4fb5c0;
       border-top: 1px solid rgba(0, 0, 0, 0.1);
-    }
 
-    .notification {
+      &:hover {
-      font-size: 13px;
+        color: #333;
-
+        background: $notifications-hover-color;
-      .notification-body {
-        border-bottom: 1px solid $notifications-border-color;
       }
     }
   }
@@ -150,8 +161,12 @@ ul.notifications {
   position: relative;
   font-family: 'din-regular', Sans-Serif;
 
+  &.unread {
+    background: #EEE;
+  }
+
   &:hover {
-    background: #F6F6F6;
+    background: $notifications-hover-color;
 
     .notification-read-unread {
       display:block;
@@ -219,8 +234,4 @@ ul.notifications {
       cursor: pointer;
     }
   }
-
-  &.unread {
-    background: #EEE;
-  }
 }

frontend/src/components/App/NotificationBox.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import onClickOutsideAddon from 'react-onclickoutside'
 import Notification from '../Notification'
+import Loading from '../Loading'
 
 class NotificationBox extends Component {
 
@@ -27,10 +28,15 @@ class NotificationBox extends Component {
 
   render = () => {
     const { notifications, markAsRead, markAsUnread } = this.props
+    const empty = notifications && notifications.length === 0
     return <div className='notificationsBox'>
       <div className='notificationsBoxTriangle' />
       <ul className='notifications'>
-        {!notifications && <li>loading...</li>}
+        {!notifications && <li><Loading margin='30px auto' /></li>}
+        {empty && <li className='notificationsEmpty'>
+          You have no notifications. <br />
+          More time for dancing.
+        </li>}
         {notifications && notifications.slice(0, 10).map(n => {
           return <Notification notification={n}
             markAsRead={markAsRead}
@@ -38,7 +44,10 @@ class NotificationBox extends Component {
             key={`notification-${n.id}`} />
         })}
       </ul>
-      <a href='/notifications' className='notificationsBoxSeeAll'>See all</a>
+      {notifications && !empty && <a href='/notifications'
+        className='notificationsBoxSeeAll'>
+        See all
+      </a>}
     </div>
   }
 }

frontend/src/components/Loading.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// based on https://www.npmjs.com/package/react-loading-animation
+
+const loading_style = {
+    position: 'relative',
+    margin: '0 auto',
+    width: '30px',
+    height: '30px',
+}
+
+const svg_style = {
+    animation: 'rotate 2s linear infinite',
+    height: '100%',
+    transformOrigin: 'center center',
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 'auto'
+}
+
+const circle_style = {
+    strokeDasharray: '1,200',
+    strokeDashoffset: '0',
+    animation: 'dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite',
+    strokeLinecap: 'round'
+}
+
+const animation = `@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1,200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89,200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89,200;
+        stroke-dashoffset: -124px;
+    }
+}
+@keyframes color {
+    100%, 0% {
+        stroke: #a354cd;
+    }
+    50% {
+        stroke: #4fb5c0;
+    }
+}`
+
+class Loading extends React.Component {
+    static propTypes = {
+        style: PropTypes.object,
+        width: PropTypes.string,
+        height: PropTypes.string,
+        margin: PropTypes.string
+    }
+
+    static defaultProps = {
+        style: {},
+        width: '30px',
+        height: '30px',
+        margin: '0 auto'
+    }
+
+    render () {
+      let { width, height, margin, style } = this.props
+
+      loading_style.width = width
+      loading_style.height = height
+      loading_style.margin = margin
+
+      return <div style={Object.assign({}, loading_style, style)}>
+        <style>{animation}</style>
+        <svg style={svg_style} viewBox="25 25 50 50">
+            <circle style={circle_style} cx="50" cy="50" r="20" fill="none" strokeWidth="4" strokeMiterlimit="10"/>
+        </svg>
+      </div>
+    }
+}
+
+export default Loading