diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index d48641f..c1d5894 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -57,6 +57,10 @@ import noMusic from './svg/nomusic.svg'; import leftArrow from './svg/left-arrow.svg'; import notificationsOn from './svg/notifications-on.svg'; import notificationsOff from './svg/notifications-off.svg'; +import blur from './svg/blur.svg'; +import rank from './svg/rank.svg'; +import shield from './svg/shield.svg'; +import headphones from './svg/headphones.svg'; import issue_closed from './svg/github/issue-closed.svg'; import issue_open from './svg/github/issue-open.svg'; @@ -141,6 +145,10 @@ Icon.NoMusic = createIcon(noMusic); Icon.LeftArrow = createIcon(leftArrow); Icon.NotificationsOn = createIcon(notificationsOn); Icon.NotificationsOff = createIcon(notificationsOff); +Icon.Blur = createIcon(blur); +Icon.Rank = createIcon(rank); +Icon.Shield = createIcon(shield); +Icon.Headphones = createIcon(headphones); Icon.IssueClosed = createIcon(issue_closed); Icon.IssueOpen = createIcon(issue_open); diff --git a/src/components/Icon/svg/blur.svg b/src/components/Icon/svg/blur.svg new file mode 100644 index 0000000..9dadc26 --- /dev/null +++ b/src/components/Icon/svg/blur.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icon/svg/headphones.svg b/src/components/Icon/svg/headphones.svg new file mode 100644 index 0000000..c68de15 --- /dev/null +++ b/src/components/Icon/svg/headphones.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icon/svg/rank.svg b/src/components/Icon/svg/rank.svg new file mode 100644 index 0000000..c594ec5 --- /dev/null +++ b/src/components/Icon/svg/rank.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icon/svg/shield.svg b/src/components/Icon/svg/shield.svg new file mode 100644 index 0000000..185a27f --- /dev/null +++ b/src/components/Icon/svg/shield.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Home/Scene.js b/src/pages/Home/Scene.js index 0a0463c..d74f23c 100644 --- a/src/pages/Home/Scene.js +++ b/src/pages/Home/Scene.js @@ -8,6 +8,8 @@ import Logo from '../../components/Logo'; import screenshot from '../../images/screenshot.png'; import '../../styles/gradient.css'; +const version = require('../../../package.json').version; + function createImagePlaceholder (highlight) { return ( @@ -347,14 +349,16 @@ const ImageContainer = styled('div')({ const WidthContainer = styled('div')({ margin: '0 auto', + width: '100%', maxWidth: 1500, display: 'flex', alignItems: 'center', flexDirection: 'row', +}, ({override = false}) => ({ '@media (max-width: 1400px)': { - flexDirection: 'column' + flexDirection: override ? 'row' : 'column' } -}); +})); const Section = styled('div')({ position: 'relative', @@ -399,6 +403,7 @@ const Item = styled('div')({ })); const ItemText = styled('div')({ display: 'flex', + minWidth: 200, flexDirection: 'row', margin: '20px 0', 'p': { @@ -471,7 +476,9 @@ const LandingMessage = styled(LandingHeader)({ }); const SmallLink = styled('a')({ + cursor: 'pointer', fontSize: '12px', + lineHeight: '18px', fontWeight: '700', color: '#ffffff', textDecoration: 'none', @@ -483,7 +490,17 @@ const SmallLink = styled('a')({ const SmallText = styled('span')({ fontSize: '12px', fontWeight: '500', - color: '#ffffff', + color: '#fff', + 'a': { + color: 'rgba(255, 255, 255, .9)', + fontWeight: 600, + margin: '0 3px', + textDecoration: 'none' + }, + 'a:hover': { + color: 'rgba(255, 255, 255, 1)', + textDecoration: 'underline' + } }); const BottomLinkContainer = styled(LandingHeader)({ @@ -654,39 +671,90 @@ export default function Scene ({loggedIn, onLogout, ...props}) { -
+

- Meteorite is the assistant for your
GitHub notifications. + Meteorite is an assistant for your
GitHub notifications.

+ - -

All of the information we use to make your notifications more useful is kept offline and kept on your own computer.

+ +

web notifications

 - -

Simply sign in and start working — no complicated or intrusive set up needed.

+ +

tells you why you got the notification

 - -

No distractions — we only show you updates on things that matter to you.

+ +

sorts by importance

 - -

All of the information we use to make your notifications more useful is kept offline and kept on your own computer.

+ +

Protects you from the notifications you don't care about.

 - -

Simply sign in and start working — no complicated or intrusive set up needed.

+ +

gives you the option to focus on specific things like review requested, assigned, etc

 - -

No distractions — we only show you updates on things that matter to you.

+ +

get stats on how many notifications you triage each day

 + + +
+
+ + + + + + Created by + + Nick Zuber + + and + + contributors + +
+ Home page inspiration from + + Kap + +
+ + Source + + available under + + MIT + + + + + Source code + Bug reports + Submit feedback + v{version} + +
diff --git a/src/pages/Notifications/Scene.js b/src/pages/Notifications/Scene.js index b84d0a9..dba22b5 100644 --- a/src/pages/Notifications/Scene.js +++ b/src/pages/Notifications/Scene.js @@ -992,7 +992,7 @@ export default function Scene ({ onMarkAsRead(n.id)) : undefined} + onClick={!loading ? (() => onMarkAsRead(n.id, n.repository)) : undefined} /> )} diff --git a/src/pages/Notifications/index.js b/src/pages/Notifications/index.js index 7001573..3742c27 100644 --- a/src/pages/Notifications/index.js +++ b/src/pages/Notifications/index.js @@ -209,6 +209,12 @@ class NotificationsPage extends React.Component { this.props.notificationsApi.stageThread(thread_id); } + enhancedOnMarkAsRead = (thread_id, repository) => { + this.props.storageApi.incrStat('stagedCount'); + this.props.storageApi.incrStat(repository + '-stagedCount'); + this.props.notificationsApi.markAsRead(thread_id); + } + restoreThread = thread_id => { this.props.notificationsApi.restoreThread(thread_id); } @@ -342,7 +348,6 @@ class NotificationsPage extends React.Component { const { fetchNotifications, - markAsRead, markAllAsStaged, clearCache, notificationsPermission, @@ -399,7 +404,7 @@ class NotificationsPage extends React.Component { onSearch={this.onSearch} onClearQuery={this.onClearQuery} onFetchNotifications={fetchNotifications} - onMarkAsRead={markAsRead} + onMarkAsRead={this.enhancedOnMarkAsRead} onMarkAllAsStaged={markAllAsStaged} onClearCache={clearCache} onStageThread={this.enhancedOnStageThread} diff --git a/src/styles/gradient.css b/src/styles/gradient.css index 74243e8..cdc3fe6 100644 --- a/src/styles/gradient.css +++ b/src/styles/gradient.css @@ -133,4 +133,7 @@ .item-text { width: 600px; } + .footer-links a { + display: block; + } }