mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-09-11 11:36:03 +03:00
Icons and footer
This commit is contained in:
parent
cd5f8b6485
commit
eeb8b48096
@ -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);
|
||||
|
1
src/components/Icon/svg/blur.svg
Normal file
1
src/components/Icon/svg/blur.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M5 17.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zM9 13c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zM3 21h18v-2H3v2zM5 9.5c.83 0 1.5-.67 1.5-1.5S5.83 6.5 5 6.5 3.5 7.17 3.5 8 4.17 9.5 5 9.5zm0 4c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zM9 17c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm8-.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM3 3v2h18V3H3zm14 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zm0 4c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM13 9c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z"/></svg>
|
After Width: | Height: | Size: 883 B |
1
src/components/Icon/svg/headphones.svg
Normal file
1
src/components/Icon/svg/headphones.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" opacity=".1" fill="none"/><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/></svg>
|
After Width: | Height: | Size: 283 B |
1
src/components/Icon/svg/rank.svg
Normal file
1
src/components/Icon/svg/rank.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
After Width: | Height: | Size: 276 B |
1
src/components/Icon/svg/shield.svg
Normal file
1
src/components/Icon/svg/shield.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
|
After Width: | Height: | Size: 253 B |
@ -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 (
|
||||
<ImagePlaceholder>
|
||||
@ -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}) {
|
||||
<Item style={{flex: '0 0 2.5%', padding: 0}} />
|
||||
</WidthContainer>
|
||||
</Section>
|
||||
<Section id="learnMore" className="section" alt={true} style={{marginTop: 0}}>
|
||||
<Section id="learnMore" className="section" alt={true} style={{marginTop: 0, paddingBottom: 100}}>
|
||||
<h2 style={{textAlign: 'center', maxWidth: 900, color: '#fff'}}>
|
||||
Meteorite is the assistant for your <br />GitHub notifications.
|
||||
Meteorite is an assistant for your <br />GitHub notifications.
|
||||
</h2>
|
||||
<WidthContainer>
|
||||
<Item style={{flex: '0 0 2.5%', padding: 0}} />
|
||||
<Item className="item-text">
|
||||
<ItemText>
|
||||
<Icon.CloudOffWhite />
|
||||
<p>All of the information we use to make your notifications more useful is kept offline and kept on your own computer.</p>
|
||||
<Icon.NotificationsOn style={{filter: 'invert(1)'}} />
|
||||
<p>web notifications</p>
|
||||
</ItemText>
|
||||
<ItemText>
|
||||
<Icon.NoPhone />
|
||||
<p>Simply sign in and start working — no complicated or intrusive set up needed.</p>
|
||||
<Icon.Sync style={{filter: 'invert(1)'}} />
|
||||
<p>tells you why you got the notification</p>
|
||||
</ItemText>
|
||||
<ItemText>
|
||||
<Icon.NoMusic />
|
||||
<p>No distractions — we only show you updates on things that matter to you.</p>
|
||||
<Icon.Rank style={{filter: 'invert(1)'}} />
|
||||
<p>sorts by importance</p>
|
||||
</ItemText>
|
||||
</Item>
|
||||
<Item className="item-text">
|
||||
<ItemText>
|
||||
<Icon.CloudOffWhite />
|
||||
<p>All of the information we use to make your notifications more useful is kept offline and kept on your own computer.</p>
|
||||
<Icon.Shield style={{filter: 'invert(1)'}} />
|
||||
<p>Protects you from the notifications you don't care about.</p>
|
||||
</ItemText>
|
||||
<ItemText>
|
||||
<Icon.NoPhone />
|
||||
<p>Simply sign in and start working — no complicated or intrusive set up needed.</p>
|
||||
<Icon.Headphones style={{filter: 'invert(1)'}} />
|
||||
<p>gives you the option to focus on specific things like review requested, assigned, etc</p>
|
||||
</ItemText>
|
||||
<ItemText>
|
||||
<Icon.NoMusic />
|
||||
<p>No distractions — we only show you updates on things that matter to you.</p>
|
||||
<Icon.Bubbles style={{filter: 'invert(1)'}} />
|
||||
<p>get stats on how many notifications you triage each day</p>
|
||||
</ItemText>
|
||||
</Item>
|
||||
<Item style={{flex: '0 0 2.5%', padding: 0}} />
|
||||
</WidthContainer>
|
||||
</Section>
|
||||
<Section alt={true} style={{
|
||||
marginTop: 0,
|
||||
minHeight: 100,
|
||||
justifyContent: 'center',
|
||||
paddingBottom: 28,
|
||||
paddingTop: 28,
|
||||
background: '#212629',
|
||||
}}>
|
||||
<WidthContainer override={true} style={{alignItems: 'flex-end'}}>
|
||||
<Item style={{flex: '0 0 2.5%', padding: 0}} />
|
||||
<Item style={{
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
marginLeft: 20
|
||||
}}>
|
||||
<Logo size={50} style={{marginBottom: 18}} />
|
||||
<SmallText style={{color: 'rgba(255, 255, 255, .75)'}}>
|
||||
Created by
|
||||
<a target="_blank" href="https://nickzuber.com/">
|
||||
Nick Zuber
|
||||
</a>
|
||||
and
|
||||
<a target="_blank" href="https://github.com/nickzuber/meteorite/graphs/contributors/">
|
||||
contributors
|
||||
</a>
|
||||
<br />
|
||||
Home page inspiration from
|
||||
<a target="_blank" href="https://getkap.io/">
|
||||
Kap
|
||||
</a>
|
||||
<br />
|
||||
<a target="_blank" href="https://github.com/nickzuber/meteorite/" style={{marginLeft: 0}}>
|
||||
Source
|
||||
</a>
|
||||
available under
|
||||
<a target="_blank" href="https://github.com/nickzuber/meteorite/blob/master/LICENSE/">
|
||||
MIT
|
||||
</a>
|
||||
</SmallText>
|
||||
</Item>
|
||||
<Item style={{textAlign: 'right'}} className="footer-links">
|
||||
<SmallLink style={{marginLeft: 28}}>Source code</SmallLink>
|
||||
<SmallLink style={{marginLeft: 28}}>Bug reports</SmallLink>
|
||||
<SmallLink style={{marginLeft: 28}}>Submit feedback</SmallLink>
|
||||
<SmallText style={{marginLeft: 28, opacity: .25}}>v{version}</SmallText>
|
||||
</Item>
|
||||
<Item style={{flex: '0 0 2.5%', padding: 0}} />
|
||||
</WidthContainer>
|
||||
</Section>
|
||||
</div>
|
||||
|
@ -992,7 +992,7 @@ export default function Scene ({
|
||||
<EnhancedNotificationTab tooltip={!loading ? "Mark as resolved" : null}>
|
||||
<Icon.X
|
||||
opacity={0.9}
|
||||
onClick={!loading ? (() => onMarkAsRead(n.id)) : undefined}
|
||||
onClick={!loading ? (() => onMarkAsRead(n.id, n.repository)) : undefined}
|
||||
/>
|
||||
</EnhancedNotificationTab>
|
||||
)}
|
||||
|
@ -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}
|
||||
|
@ -133,4 +133,7 @@
|
||||
.item-text {
|
||||
width: 600px;
|
||||
}
|
||||
.footer-links a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user