Replace some images

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+  "editor.minimap.enabled": false
+}

src/images/svg/icons/bedtime.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M12.34,2.02C6.59,1.82,2,6.42,2,12c0,5.52,4.48,10,10,10c3.71,0,6.93-2.02,8.66-5.02C13.15,16.73,8.57,8.55,12.34,2.02z"/></g></g></svg>

src/images/svg/icons/insights.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>

src/images/svg/icons/push_pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z" fill-rule="evenodd"/></g></svg>

src/images/svg/icons/rule.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/><path d="M16.54,11L13,7.46l1.41-1.41l2.12,2.12l4.24-4.24l1.41,1.41L16.54,11z M11,7H2v2h9V7z M21,13.41L19.59,12L17,14.59 L14.41,12L13,13.41L15.59,16L13,18.59L14.41,20L17,17.41L19.59,20L21,18.59L18.41,16L21,13.41z M11,15H2v2h9V15z"/></g></svg>

src/images/svg/icons/smart_button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/><path d="M22,9v6c0,1.1-0.9,2-2,2h-1l0-2h1V9H4v6h6v2H4c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h16C21.1,7,22,7.9,22,9z M14.5,19 l1.09-2.41L18,15.5l-2.41-1.09L14.5,12l-1.09,2.41L11,15.5l2.41,1.09L14.5,19z M17,14l0.62-1.38L19,12l-1.38-0.62L17,10l-0.62,1.38 L15,12l1.38,0.62L17,14z M14.5,19l1.09-2.41L18,15.5l-2.41-1.09L14.5,12l-1.09,2.41L11,15.5l2.41,1.09L14.5,19z M17,14l0.62-1.38 L19,12l-1.38-0.62L17,10l-0.62,1.38L15,12l1.38,0.62L17,14z"/></g></svg>

src/pages/Guide/Scene.js

@@ -13,8 +13,8 @@ import {
 import WorkflowToggle from '../Home/WorkflowToggle';
 
 import SettingsPng from '../../images/screenshots/new/settings.png'
-import ParticipatingPng from '../../images/screenshots/new/participating.png'
-import WatchingPng from '../../images/screenshots/new/watching.png'
+import ParticipatingPng from '../../images/screenshots/new/settings-participating.png'
+import WatchingPng from '../../images/screenshots/new/settings-watching.png'
 
 import '../../styles/gradient.css';
 import '../../styles/font.css';

src/pages/Home/Scene.js

@@ -12,20 +12,20 @@ import {
 } from '../common';
 import WorkflowToggle from './WorkflowToggle';
 
-import {ReactComponent as CloudOffSvg} from '../../images/svg/icons/cloud_off.svg'
-import {ReactComponent as NotificationsActiveSvg} from '../../images/svg/icons/notifications_active.svg'
-import {ReactComponent as PriorityHighSvg} from '../../images/svg/icons/priority_high.svg'
-import {ReactComponent as TuneSvg} from '../../images/svg/icons/tune.svg'
-import {ReactComponent as SpeedSvg} from '../../images/svg/icons/speed.svg'
-import {ReactComponent as GpsFixedSvg} from '../../images/svg/icons/gps_fixed.svg'
-import {ReactComponent as WbIridescentSvg} from '../../images/svg/icons/wb_iridescent.svg'
-import {ReactComponent as TimelineSvg} from '../../images/svg/icons/timeline.svg'
+import {ReactComponent as ServerlessSvg} from '../../images/svg/icons/cloud_off.svg'
+import {ReactComponent as DesktopNotificationsSvg} from '../../images/svg/icons/notifications_active.svg'
+import {ReactComponent as AutoSortingSvg} from '../../images/svg/icons/smart_button.svg'
+import {ReactComponent as FilterNoiseSvg} from '../../images/svg/icons/tune.svg'
+import {ReactComponent as UndoActionsSvg} from '../../images/svg/icons/rule.svg'
+import {ReactComponent as LiveUpdatesSvg} from '../../images/svg/icons/gps_fixed.svg'
+import {ReactComponent as PinnedNotificationsSvg} from '../../images/svg/icons/push_pin.svg'
+import {ReactComponent as StatisticsSvg} from '../../images/svg/icons/insights.svg'
 
 import ItemPng from '../../images/screenshots/item.png';
 import ItemTwoPng from '../../images/screenshots/item-2.png';
-import ScreenshotPng from '../../images/screenshots/new/dashboard.png';
-import ScoresPng from '../../images/screenshots/new/scores.png';
-import ReasonsPng from '../../images/screenshots/new/reasons.png';
+import ScreenshotPng from '../../images/screenshots/new/dashboard-light.png';
+import ReasonsPng from '../../images/screenshots/new/dashboard-reasons-dark.png';
+import ScoresPng from '../../images/screenshots/new/dashboard-scores-light.png';
 
 import RobinLogo from '../../images/logos/robin-logo.png';
 import ForwardLogo from '../../images/logos/forward-logo.png';
@@ -482,43 +482,43 @@ export default function Scene (props) {
                   {'for optimizing your workday'}</Subtitle>
         <HorizontalFlexContainer>
           <FeatureItem color={'#9C27B0'}>
-            <CloudOffSvg />
+            <ServerlessSvg />
             <h3>{'Serverless'}</h3>
             <p>{'Any notification scoring and storing is done completely offline.'}</p>
           </FeatureItem>
           <FeatureItem color={'#ffc915'}>
-            <NotificationsActiveSvg />
+            <DesktopNotificationsSvg />
             <h3>{'Desktop Notifications'}</h3>
             <p>{'Get notified when we do – ability to turn on desktop notifications.'}</p>
           </FeatureItem>
           <FeatureItem color={'#27B768'}>
-            <PriorityHighSvg />
+            <AutoSortingSvg />
             <h3>{'Auto Sorting'}</h3>
             <p>{'Keep your most important notifications at the top of the list.'}</p>
           </FeatureItem>
           <FeatureItem color={'#00A0F5'}>
-            <TuneSvg />
+            <FilterNoiseSvg />
             <h3>{'Filter Noise'}</h3>
             <p>{'Any notifications that don\'t directly involve you are hidden.'}</p>
           </FeatureItem>
           <FlexBreak />
           <FeatureItem color={'#EE3F46'}>
-            <SpeedSvg />
-            <h3>{'Dead Simple'}</h3>
-            <p>{'No integrations – just log in and start working.'}</p>
+            <UndoActionsSvg />
+            <h3>{'Undo Actions'}</h3>
+            <p>{'Mark notifications as unread if you change your mind.'}</p>
           </FeatureItem>
           <FeatureItem color={'#10293c'}>
-            <GpsFixedSvg />
+            <LiveUpdatesSvg />
             <h3>{'Live Updates'}</h3>
             <p>{'All of your notifications are processed in real time.'}</p>
           </FeatureItem>
           <FeatureItem color={'#fd9446'}>
-            <WbIridescentSvg />
-            <h3>{'Reasoning'}</h3>
-            <p>{'We\'ll also tell you why you\'re getting each notification.'}</p>
+            <PinnedNotificationsSvg />
+            <h3>{'Pinnable'}</h3>
+            <p>{'Keep your important tasks at the top of your list.'}</p>
           </FeatureItem>
           <FeatureItem color={'#fc46fd'}>
-            <TimelineSvg />
+            <StatisticsSvg />
             <h3>{'Statistics'}</h3>
             <p>{'Better understand how you work with data visualizations.'}</p>
           </FeatureItem>

src/providers/Storage.js

@@ -107,6 +107,7 @@ class StorageProvider extends React.Component {
 
     this.setState({ notifications });
 
+    // Faux notifications for sample screenshots.
     // const mockNotifications = createMockNotifications(20);
     // this.setState({ notifications: mockNotifications });
   }

src/utils/mocks.js

@@ -10,11 +10,11 @@ function* createCounterGenerator () {
 const uidGen = createCounterGenerator();
 const indexGen = createCounterGenerator();
 
-const getMockReasons = n => {
+const getMockReasons = (n, ra) => {
   const reasons = Object.values(Reasons);
   const len = reasons.length;
   return new Array(n).fill(0).map(_ => ({
-    reason: reasons[Math.floor(Math.random() * len)],
+    reason: reasons[Math.floor(ra * len)],
     time: moment().format()
   }));
 };
@@ -32,24 +32,25 @@ function getMockName (index) {
   return names[index % names.length];
 }
 
-const getMockNotification = randomNumber => ({
+const getMockNotification = (ra, rb, rc) => ({
   id: uidGen.next().value,
-  updated_at: moment().subtract(randomNumber * 500, 'minutes').utc().format(),
-  isAuthor: randomNumber < 0.2,
-  status: randomNumber < 0.4 ? Status.QUEUED : randomNumber < 0.6 ? Status.STAGED : Status.CLOSED,
-  reasons: getMockReasons(Math.ceil(randomNumber * 10)),
-  type: ['PullRequest', 'Issue'][Math.floor(randomNumber * 2)],
+  updated_at: moment().subtract(ra * 500, 'minutes').utc().format(),
+  isAuthor: ra < 0.2,
+  status: ra < 0.4 ? Status.Unread : rb < 0.6 ? Status.Read : Status.Archived,
+  reasons: getMockReasons(Math.ceil(rb * 10), ra),
+  type: ['PullRequest', 'Issue'][rc > .7 ? 1 : 0],
   name: getMockName(indexGen.next().value),
   url: 'https://github.com/test/repo/pull',
-  repository: ['BuckleScript/bucklescript', 'nickzuber/meteorite'][Math.floor(randomNumber * 2)],
-  number: Math.ceil(randomNumber * 1000),
+  repository: ['BuckleScript/bucklescript', 'nickzuber/meteorite'][Math.floor(rb * 2)],
+  number: Math.ceil(rc * 1000),
   repositoryUrl: 'https://github.com/test/repo',
 });
 
 export function createMockNotifications (n = 50) {
   const mockNotifications = new Array(n);
   for (let i = 0; i < mockNotifications.length; i++) {
-    mockNotifications[i] = getMockNotification(Math.random());
+    let a = Math.random(), b = Math.random(), c = Math.random();
+    mockNotifications[i] = getMockNotification(a, b, c);
   }
   return mockNotifications;
 }