Home page redesign progress

package.json

@@ -72,7 +72,7 @@
     "build": "node scripts/build.js && cp build/index.html build/200.html",
     "now-build": "npm run build",
     "test": "node scripts/test.js",
-    "deploy": "npm run build && surge ./build"
+    "deploy": "now --target production"
   },
   "eslintConfig": {
     "extends": "react-app"

public/manifest.json

@@ -1,11 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Meteorite",
+  "name": "Meteorite – Smarter GitHub Notifications",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "iconCircle.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     }
   ],
   "start_url": ".",

src/components/Logo/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import meteoriteLogo from './icon-gray.png';
 import meteoriteLogoWhite from './logo-white.png';
 
-export default function LoadingIcon ({ style, size, white = false, ...props }) {
+export default function Logo ({ style, size, white = false, ...props }) {
   return (
     <div style={{
       background: `url(${white ? meteoriteLogoWhite : meteoriteLogo}) center center no-repeat`,

src/pages/NotificationsRedesign/index.js

@@ -147,7 +147,7 @@ class NotificationsPage extends React.Component {
   }
 
   state = {
-    currentTime: moment(),
+    currentTime: moment().subtract(3, 'd'),
     error: null,
     notificationSent: false,
     isFirstTimeUser: false,
@@ -502,7 +502,6 @@ class NotificationsPage extends React.Component {
       lastNumbered = 0;
     }
 
-
     const reposReadCounts = this.props.storageApi.getAllRepoStagedCounts();
     const todayLastWeek = this.state.currentTime.clone().subtract(1, 'week');
 

src/pages/NotificationsRedesign/redesign/Scene.js

@@ -3,8 +3,8 @@
 import React from 'react';
 import moment from 'moment';
 import styled from '@emotion/styled';
-import {navigate} from "@reach/router"
 import {css, jsx, keyframes} from '@emotion/core';
+import {navigate} from "@reach/router"
 import {useSpring, useTransition, animated} from 'react-spring'
 import {LineChart, Line, XAxis, Tooltip} from 'recharts';
 import Logo from '../../../components/Logo';
@@ -22,23 +22,12 @@ const BLUE = '#457cff';
 const WHITE = 'rgb(255, 254, 252)';
 const FOOTER_HEIGHT = '96px';
 const COLLAPSED_WIDTH = '72px';
-const EXPANDED_WIDTH = '326px';
+const EXPANDED_WIDTH = '286px';
 
 // ========================================================================
 // START OF 'MOVE TO A UTILS FILE'
 // ========================================================================
 
-function stringOfType (type) {
-  switch (type) {
-    case 'PullRequest':
-      return 'pull request';
-    case 'Issue':
-      return 'issue';
-    default:
-      return 'task';
-  }
-}
-
 function getPRIssueIcon (type, _reasons) {
   switch (type) {
     case 'PullRequest':
@@ -210,6 +199,7 @@ const Item = styled('div')`
 const MenuHeaderItem = styled(Item)`
   height: ${COLLAPSED_WIDTH};
   width: ${({expand}) => expand ? EXPANDED_WIDTH : COLLAPSED_WIDTH};
+  flex: ${({expand}) => expand ? `${EXPANDED_WIDTH} 0 0` : 1};
   transition: all 150ms ease;
   border-bottom: 1px solid #292d35;
   border-right: 1px solid #292d35;
@@ -226,6 +216,7 @@ const ContentHeaderItem = styled(Item)`
 
 const MenuContainerItem = styled(Item)`
   width: ${({expand}) => expand ? EXPANDED_WIDTH : COLLAPSED_WIDTH};
+  flex: ${({expand}) => expand ? `${EXPANDED_WIDTH} 0 0` : 1};
   height: 100%;
   transition: all 150ms ease;
 `;

src/styles/index.css

@@ -1,23 +1,7 @@
 @import url('https://rsms.me/inter/inter-ui.css');
 
-@font-face {
-  font-family: 'Camphor';
-  font-weight: 500;
-  src: url('./fonts/Camphor-Regular.ttf');
-}
-@font-face {
-  font-family: 'Camphor';
-  font-weight: 300;
-  src: url('./fonts/Camphor-Light.ttf');
-}
-@font-face {
-  font-family: 'Camphor';
-  font-weight: 700;
-  src: url('./fonts/Camphor-Heavy.ttf');
-}
-
 ::selection {
-  color: #fff;
+  color: rgb(255, 254, 252);
   background: #4880ff;
 }
 
@@ -29,8 +13,7 @@ html, body {
 
 html, body, * {
   font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   /* color: #202124; */
   /* color: #19233C; */
   color: rgb(55, 53, 47);
@@ -39,7 +22,7 @@ html, body, * {
 }
 
 body {
-  background: #ffffff;
+  background: rgb(255, 254, 252);
   margin: 0;
   padding: 0;
 }
@@ -94,6 +77,10 @@ line[stroke="#666"] {
   stroke: #e5e7ea;
 }
 
+a {
+  text-underline-position: under;
+}
+
 .react-tooltip {
   z-index: 999999;
   pointer-events: none;