relative times

src/components/Icon/svg/next.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

src/components/Icon/svg/prev.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

src/pages/Notifications/SceneAlt.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import {Link} from "@reach/router";
 import styled from 'react-emotion';
 import Icon from '../../components/Icon';
@@ -13,6 +14,28 @@ import '../../styles/gradient.css';
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
+function getRelativeTime (time) {
+  const currentTime = moment();
+  const targetTime = moment(time);
+  const diffMinutes = currentTime.diff(targetTime, 'minutes');
+  if (diffMinutes < 1)
+    return 'Just now';
+  if (diffMinutes < 5)
+    return 'Few minutes ago';
+  if (diffMinutes < 60)
+    return diffMinutes + ' minutes ago';
+  if (diffMinutes < 60 * 24)
+    return Math.floor(diffMinutes / 60) + ' hours ago';
+
+  const diffDays = currentTime.diff(targetTime, 'days');
+  if (diffDays === 1)
+    return 'Yesterday';
+  if (diffDays <= 7)
+    return 'Last ' + targetTime.format('dddd');
+  // @TODO implement longer diffs
+  return 'Long time ago';
+}
+
 const FixedContainer = styled('div')({
   position: 'fixed'
 });
@@ -263,7 +286,6 @@ const EnhancedSearchInput = withOnEnter(SearchInput);
 const NotificationRow = styled('tr')({
   position: 'relative',
   cursor: 'pointer',
-  // borderBottom: '1px solid #f2f2f2',
   display: 'block',
   textAlign: 'left',
   width: '100%',
@@ -284,12 +306,21 @@ const NotificationTab = styled(Tab)({
   margin: 0,
 });
 
+const Timestamp = styled('span')({
+  position: 'relative',
+  margin: 0,
+  marginLeft: 10,
+  fontSize: 11,
+  opacity: 0.5,
+});
+
 const NotificationTitle = styled('span')({
   position: 'relative',
+  display: 'block'
 }, ({img}) => img && ({
   paddingLeft: 20,
   '::before': {
-    content: "''",
+    content: '""',
     position: 'absolute',
     display: 'block',
     background: `url(${img}) center center no-repeat`,
@@ -590,13 +621,14 @@ export default function Scene ({
                         {getPRIssueIcon(n.type, n.reasons)}
                       </div>
                     </TableItem>
-                    <TableItem width={400} onClick={() => {
+                    <TableItem style={{height: 36}} width={400} onClick={() => {
                       window.open(n.url);
                       onStageThread(n.id)
                     }}>
                       <NotificationTitle>
                         <PRIssue>{n.name}</PRIssue>
                       </NotificationTitle>
+                      <Timestamp>{getRelativeTime(n.updated_at)}</Timestamp>
                     </TableItem>
                     {/* <TableItem width={200}>
                       <Repository>{n.reasons.map(r => r.reason).join(', ')}</Repository>