Replace some images
4
.vscode/settings.json
vendored
@ -1 +1,3 @@
|
|||||||
{}
|
{
|
||||||
|
"editor.minimap.enabled": false
|
||||||
|
}
|
BIN
src/images/screenshots/new/dashboard-dark.png
Normal file
After Width: | Height: | Size: 399 KiB |
BIN
src/images/screenshots/new/dashboard-light.png
Normal file
After Width: | Height: | Size: 392 KiB |
BIN
src/images/screenshots/new/dashboard-reasons-dark.png
Normal file
After Width: | Height: | Size: 422 KiB |
BIN
src/images/screenshots/new/dashboard-reasons-light.png
Normal file
After Width: | Height: | Size: 416 KiB |
BIN
src/images/screenshots/new/dashboard-scores-dark.png
Normal file
After Width: | Height: | Size: 436 KiB |
BIN
src/images/screenshots/new/dashboard-scores-light.png
Normal file
After Width: | Height: | Size: 430 KiB |
Before Width: | Height: | Size: 360 KiB |
Before Width: | Height: | Size: 224 KiB |
Before Width: | Height: | Size: 358 KiB |
Before Width: | Height: | Size: 357 KiB |
BIN
src/images/screenshots/new/settings-participating.png
Normal file
After Width: | Height: | Size: 245 KiB |
BIN
src/images/screenshots/new/settings-watching.png
Normal file
After Width: | Height: | Size: 245 KiB |
Before Width: | Height: | Size: 222 KiB |
1
src/images/svg/icons/bedtime.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 313 B |
1
src/images/svg/icons/insights.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 714 B |
1
src/images/svg/icons/push_pin.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 379 B |
1
src/images/svg/icons/rule.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 403 B |
1
src/images/svg/icons/smart_button.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 605 B |
@ -13,8 +13,8 @@ import {
|
|||||||
import WorkflowToggle from '../Home/WorkflowToggle';
|
import WorkflowToggle from '../Home/WorkflowToggle';
|
||||||
|
|
||||||
import SettingsPng from '../../images/screenshots/new/settings.png'
|
import SettingsPng from '../../images/screenshots/new/settings.png'
|
||||||
import ParticipatingPng from '../../images/screenshots/new/participating.png'
|
import ParticipatingPng from '../../images/screenshots/new/settings-participating.png'
|
||||||
import WatchingPng from '../../images/screenshots/new/watching.png'
|
import WatchingPng from '../../images/screenshots/new/settings-watching.png'
|
||||||
|
|
||||||
import '../../styles/gradient.css';
|
import '../../styles/gradient.css';
|
||||||
import '../../styles/font.css';
|
import '../../styles/font.css';
|
||||||
|
@ -12,20 +12,20 @@ import {
|
|||||||
} from '../common';
|
} from '../common';
|
||||||
import WorkflowToggle from './WorkflowToggle';
|
import WorkflowToggle from './WorkflowToggle';
|
||||||
|
|
||||||
import {ReactComponent as CloudOffSvg} from '../../images/svg/icons/cloud_off.svg'
|
import {ReactComponent as ServerlessSvg} from '../../images/svg/icons/cloud_off.svg'
|
||||||
import {ReactComponent as NotificationsActiveSvg} from '../../images/svg/icons/notifications_active.svg'
|
import {ReactComponent as DesktopNotificationsSvg} from '../../images/svg/icons/notifications_active.svg'
|
||||||
import {ReactComponent as PriorityHighSvg} from '../../images/svg/icons/priority_high.svg'
|
import {ReactComponent as AutoSortingSvg} from '../../images/svg/icons/smart_button.svg'
|
||||||
import {ReactComponent as TuneSvg} from '../../images/svg/icons/tune.svg'
|
import {ReactComponent as FilterNoiseSvg} from '../../images/svg/icons/tune.svg'
|
||||||
import {ReactComponent as SpeedSvg} from '../../images/svg/icons/speed.svg'
|
import {ReactComponent as UndoActionsSvg} from '../../images/svg/icons/rule.svg'
|
||||||
import {ReactComponent as GpsFixedSvg} from '../../images/svg/icons/gps_fixed.svg'
|
import {ReactComponent as LiveUpdatesSvg} from '../../images/svg/icons/gps_fixed.svg'
|
||||||
import {ReactComponent as WbIridescentSvg} from '../../images/svg/icons/wb_iridescent.svg'
|
import {ReactComponent as PinnedNotificationsSvg} from '../../images/svg/icons/push_pin.svg'
|
||||||
import {ReactComponent as TimelineSvg} from '../../images/svg/icons/timeline.svg'
|
import {ReactComponent as StatisticsSvg} from '../../images/svg/icons/insights.svg'
|
||||||
|
|
||||||
import ItemPng from '../../images/screenshots/item.png';
|
import ItemPng from '../../images/screenshots/item.png';
|
||||||
import ItemTwoPng from '../../images/screenshots/item-2.png';
|
import ItemTwoPng from '../../images/screenshots/item-2.png';
|
||||||
import ScreenshotPng from '../../images/screenshots/new/dashboard.png';
|
import ScreenshotPng from '../../images/screenshots/new/dashboard-light.png';
|
||||||
import ScoresPng from '../../images/screenshots/new/scores.png';
|
import ReasonsPng from '../../images/screenshots/new/dashboard-reasons-dark.png';
|
||||||
import ReasonsPng from '../../images/screenshots/new/reasons.png';
|
import ScoresPng from '../../images/screenshots/new/dashboard-scores-light.png';
|
||||||
|
|
||||||
import RobinLogo from '../../images/logos/robin-logo.png';
|
import RobinLogo from '../../images/logos/robin-logo.png';
|
||||||
import ForwardLogo from '../../images/logos/forward-logo.png';
|
import ForwardLogo from '../../images/logos/forward-logo.png';
|
||||||
@ -482,43 +482,43 @@ export default function Scene (props) {
|
|||||||
{'for optimizing your workday'}</Subtitle>
|
{'for optimizing your workday'}</Subtitle>
|
||||||
<HorizontalFlexContainer>
|
<HorizontalFlexContainer>
|
||||||
<FeatureItem color={'#9C27B0'}>
|
<FeatureItem color={'#9C27B0'}>
|
||||||
<CloudOffSvg />
|
<ServerlessSvg />
|
||||||
<h3>{'Serverless'}</h3>
|
<h3>{'Serverless'}</h3>
|
||||||
<p>{'Any notification scoring and storing is done completely offline.'}</p>
|
<p>{'Any notification scoring and storing is done completely offline.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
<FeatureItem color={'#ffc915'}>
|
<FeatureItem color={'#ffc915'}>
|
||||||
<NotificationsActiveSvg />
|
<DesktopNotificationsSvg />
|
||||||
<h3>{'Desktop Notifications'}</h3>
|
<h3>{'Desktop Notifications'}</h3>
|
||||||
<p>{'Get notified when we do – ability to turn on desktop notifications.'}</p>
|
<p>{'Get notified when we do – ability to turn on desktop notifications.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
<FeatureItem color={'#27B768'}>
|
<FeatureItem color={'#27B768'}>
|
||||||
<PriorityHighSvg />
|
<AutoSortingSvg />
|
||||||
<h3>{'Auto Sorting'}</h3>
|
<h3>{'Auto Sorting'}</h3>
|
||||||
<p>{'Keep your most important notifications at the top of the list.'}</p>
|
<p>{'Keep your most important notifications at the top of the list.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
<FeatureItem color={'#00A0F5'}>
|
<FeatureItem color={'#00A0F5'}>
|
||||||
<TuneSvg />
|
<FilterNoiseSvg />
|
||||||
<h3>{'Filter Noise'}</h3>
|
<h3>{'Filter Noise'}</h3>
|
||||||
<p>{'Any notifications that don\'t directly involve you are hidden.'}</p>
|
<p>{'Any notifications that don\'t directly involve you are hidden.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
<FlexBreak />
|
<FlexBreak />
|
||||||
<FeatureItem color={'#EE3F46'}>
|
<FeatureItem color={'#EE3F46'}>
|
||||||
<SpeedSvg />
|
<UndoActionsSvg />
|
||||||
<h3>{'Dead Simple'}</h3>
|
<h3>{'Undo Actions'}</h3>
|
||||||
<p>{'No integrations – just log in and start working.'}</p>
|
<p>{'Mark notifications as unread if you change your mind.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
<FeatureItem color={'#10293c'}>
|
<FeatureItem color={'#10293c'}>
|
||||||
<GpsFixedSvg />
|
<LiveUpdatesSvg />
|
||||||
<h3>{'Live Updates'}</h3>
|
<h3>{'Live Updates'}</h3>
|
||||||
<p>{'All of your notifications are processed in real time.'}</p>
|
<p>{'All of your notifications are processed in real time.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
<FeatureItem color={'#fd9446'}>
|
<FeatureItem color={'#fd9446'}>
|
||||||
<WbIridescentSvg />
|
<PinnedNotificationsSvg />
|
||||||
<h3>{'Reasoning'}</h3>
|
<h3>{'Pinnable'}</h3>
|
||||||
<p>{'We\'ll also tell you why you\'re getting each notification.'}</p>
|
<p>{'Keep your important tasks at the top of your list.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
<FeatureItem color={'#fc46fd'}>
|
<FeatureItem color={'#fc46fd'}>
|
||||||
<TimelineSvg />
|
<StatisticsSvg />
|
||||||
<h3>{'Statistics'}</h3>
|
<h3>{'Statistics'}</h3>
|
||||||
<p>{'Better understand how you work with data visualizations.'}</p>
|
<p>{'Better understand how you work with data visualizations.'}</p>
|
||||||
</FeatureItem>
|
</FeatureItem>
|
||||||
|
@ -107,6 +107,7 @@ class StorageProvider extends React.Component {
|
|||||||
|
|
||||||
this.setState({ notifications });
|
this.setState({ notifications });
|
||||||
|
|
||||||
|
// Faux notifications for sample screenshots.
|
||||||
// const mockNotifications = createMockNotifications(20);
|
// const mockNotifications = createMockNotifications(20);
|
||||||
// this.setState({ notifications: mockNotifications });
|
// this.setState({ notifications: mockNotifications });
|
||||||
}
|
}
|
||||||
|
@ -10,11 +10,11 @@ function* createCounterGenerator () {
|
|||||||
const uidGen = createCounterGenerator();
|
const uidGen = createCounterGenerator();
|
||||||
const indexGen = createCounterGenerator();
|
const indexGen = createCounterGenerator();
|
||||||
|
|
||||||
const getMockReasons = n => {
|
const getMockReasons = (n, ra) => {
|
||||||
const reasons = Object.values(Reasons);
|
const reasons = Object.values(Reasons);
|
||||||
const len = reasons.length;
|
const len = reasons.length;
|
||||||
return new Array(n).fill(0).map(_ => ({
|
return new Array(n).fill(0).map(_ => ({
|
||||||
reason: reasons[Math.floor(Math.random() * len)],
|
reason: reasons[Math.floor(ra * len)],
|
||||||
time: moment().format()
|
time: moment().format()
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
@ -32,24 +32,25 @@ function getMockName (index) {
|
|||||||
return names[index % names.length];
|
return names[index % names.length];
|
||||||
}
|
}
|
||||||
|
|
||||||
const getMockNotification = randomNumber => ({
|
const getMockNotification = (ra, rb, rc) => ({
|
||||||
id: uidGen.next().value,
|
id: uidGen.next().value,
|
||||||
updated_at: moment().subtract(randomNumber * 500, 'minutes').utc().format(),
|
updated_at: moment().subtract(ra * 500, 'minutes').utc().format(),
|
||||||
isAuthor: randomNumber < 0.2,
|
isAuthor: ra < 0.2,
|
||||||
status: randomNumber < 0.4 ? Status.QUEUED : randomNumber < 0.6 ? Status.STAGED : Status.CLOSED,
|
status: ra < 0.4 ? Status.Unread : rb < 0.6 ? Status.Read : Status.Archived,
|
||||||
reasons: getMockReasons(Math.ceil(randomNumber * 10)),
|
reasons: getMockReasons(Math.ceil(rb * 10), ra),
|
||||||
type: ['PullRequest', 'Issue'][Math.floor(randomNumber * 2)],
|
type: ['PullRequest', 'Issue'][rc > .7 ? 1 : 0],
|
||||||
name: getMockName(indexGen.next().value),
|
name: getMockName(indexGen.next().value),
|
||||||
url: 'https://github.com/test/repo/pull',
|
url: 'https://github.com/test/repo/pull',
|
||||||
repository: ['BuckleScript/bucklescript', 'nickzuber/meteorite'][Math.floor(randomNumber * 2)],
|
repository: ['BuckleScript/bucklescript', 'nickzuber/meteorite'][Math.floor(rb * 2)],
|
||||||
number: Math.ceil(randomNumber * 1000),
|
number: Math.ceil(rc * 1000),
|
||||||
repositoryUrl: 'https://github.com/test/repo',
|
repositoryUrl: 'https://github.com/test/repo',
|
||||||
});
|
});
|
||||||
|
|
||||||
export function createMockNotifications (n = 50) {
|
export function createMockNotifications (n = 50) {
|
||||||
const mockNotifications = new Array(n);
|
const mockNotifications = new Array(n);
|
||||||
for (let i = 0; i < mockNotifications.length; i++) {
|
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;
|
return mockNotifications;
|
||||||
}
|
}
|
||||||
|