Icons and footer

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);

src/components/Icon/svg/blur.svg

@@ -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>

src/components/Icon/svg/headphones.svg

@@ -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>

src/components/Icon/svg/rank.svg

@@ -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>

src/components/Icon/svg/shield.svg

@@ -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>

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 (
     <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>

src/pages/Notifications/Scene.js

@@ -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>
                         )}

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}

src/styles/gradient.css

@@ -133,4 +133,7 @@
   .item-text {
     width: 600px;
   }
+  .footer-links a {
+    display: block;
+  }
 }