From 12b566ee51e62f4caf1d0b29bf2864d2124b8599 Mon Sep 17 00:00:00 2001 From: Nicholas Zuber Date: Sun, 28 Oct 2018 20:28:39 -0400 Subject: [PATCH] More polish --- src/components/ErrorMessage.js | 13 ++++ src/components/LoadingIcon/loader.svg | 2 +- .../buttons/AuthenticationButton.js | 7 ++- src/pages/Home/Scene.js | 49 +++++++++++---- src/pages/Login/Scene.js | 28 +++++---- src/providers/Notifications.js | 61 ++++++++++++++----- src/styles/gradient.css | 27 ++++---- src/styles/index.css | 10 +-- 8 files changed, 141 insertions(+), 56 deletions(-) create mode 100644 src/components/ErrorMessage.js diff --git a/src/components/ErrorMessage.js b/src/components/ErrorMessage.js new file mode 100644 index 0000000..7c461a7 --- /dev/null +++ b/src/components/ErrorMessage.js @@ -0,0 +1,13 @@ +import React from 'react'; +import styled from 'react-emotion'; + +const Message = styled('p')({ + color: '#eb3349', + fontWeight: 500 +}); + +export default function ErrorMessage ({children, props}) { + return ( + {children} + ); +} diff --git a/src/components/LoadingIcon/loader.svg b/src/components/LoadingIcon/loader.svg index 97989fb..60e1b5a 100644 --- a/src/components/LoadingIcon/loader.svg +++ b/src/components/LoadingIcon/loader.svg @@ -3,7 +3,7 @@ - + ( - +const AuthenticationButton = props => ( + Login with GitHub ); diff --git a/src/pages/Home/Scene.js b/src/pages/Home/Scene.js index fa1a737..c740cf9 100644 --- a/src/pages/Home/Scene.js +++ b/src/pages/Home/Scene.js @@ -8,13 +8,17 @@ import '../../styles/gradient.css'; const Header = styled('h1')({ color: '#fff', padding: '0 20px', - margin: '0 auto 16px' + margin: '0 auto 20px', + letterSpacing: '-1.5px' }); const SubHeader = styled(Header)({ fontWeight: 500, + maxWidth: 550, color: '#fff', - fontSize: 24 + fontSize: 24, + marginBottom: 30, + letterSpacing: '-1.0px' }); const LandingHeader = styled('div')({ @@ -34,8 +38,20 @@ const LandingMessage = styled(LandingHeader)({ } }); -const LinksContainer = styled('div')({ +const SmallLink = styled('a')({ + fontSize: '12px', + fontWeight: 'bold', + color: '#ffffff', + textDecoration: 'none', + ':hover': { + textDecoration: 'underline' + } +}); +const BottomLinkContainer = styled(LandingHeader)({ + maxWidth: '390px', + width: '100%', + margin: '32px auto 0', }); const Logo = styled('div')({ @@ -55,22 +71,33 @@ export default function Scene ({loggedIn, onLogout, ...props}) { position: 'relative', display: 'flex', flexDirection: 'column', - alignItems: 'center' + alignItems: 'center', + overflowX: 'hidden', + // background: 'radial-gradient(farthest-corner at -0% 100%, #9065ff 30%, #00ffbe 95%)' }}> {loggedIn ? ( - - inbox - logout - +
+ notifications + logout +
) : ( - login +
+ login +
)} -
Conquer your notifications
- Take back control over your GitHub notifications +
Manage your notifications
+ Stop manually sorting through GitHub notifications and start being productive. +
+ let's get started +
+ + View and contribute on GitHub + View and contribute on GitHub + diff --git a/src/pages/Login/Scene.js b/src/pages/Login/Scene.js index e159e38..22f39d9 100644 --- a/src/pages/Login/Scene.js +++ b/src/pages/Login/Scene.js @@ -4,6 +4,7 @@ import styled from 'react-emotion'; import { routes } from '../../constants'; import { AuthenticationButton } from '../../components/buttons'; import LoadingIcon from '../../components/LoadingIcon'; +import ErrorMessage from '../../components/ErrorMessage'; import '../../styles/gradient.css'; const Container = styled('div')({ @@ -11,9 +12,8 @@ const Container = styled('div')({ background: '#fff', borderRadius: 4, margin: '0 auto', - padding: '24px 48px', - width: 300, - height: 300 + padding: '24px 48px 76px', + width: 300 }); const ButtonsContainer = styled('div')({ @@ -32,11 +32,8 @@ export default function Scene ({ loading, error, loggedOut, ...props }) { return (

Authenticate with GitHub

- {error ? ( + {!error ? (

Log in with GitHub and we'll start organizing and sorting all of your notifications.

+ Oops, looks like something went wrong. Try again? - go back - +
+ go back +
+
+ +
) : loading ? ( @@ -58,8 +60,12 @@ export default function Scene ({ loading, error, loggedOut, ...props }) {

Log in with GitHub and we'll start organizing and sorting all of your notifications.

- go back - +
+ go back +
+
+ +
) : ( diff --git a/src/providers/Notifications.js b/src/providers/Notifications.js index b5b9871..c18e759 100644 --- a/src/providers/Notifications.js +++ b/src/providers/Notifications.js @@ -9,30 +9,59 @@ class NotificationsProvider extends React.Component { error: null } - getNotifications = () => { - if (!this.props.token) { - console.error('unauthenitcated!') - return false; - } - - console.warn(this.props.token) - - this.setState({ loading: true }); - fetch(`${BASE_GITHUB_API_URL}/notifications`, { + requestPage = (page = 1) => { + return fetch(`${BASE_GITHUB_API_URL}/notifications?page=${page}`, { method: 'GET', headers: { 'Authorization': `token ${this.props.token}`, - 'Content-Type': 'application/json', - 'Accept': 'application/json' + 'Content-Type': 'application/json' } - }).then(response => response.json()) - .then(data => { - console.warn(data); - }) + }) + .then(response => { + const entries = response.headers.entries(); + const headers = {}; + for (let [name, value] of entries) { + headers[name] = value; + } + + const rawLinks = headers['link']; + const links = {}; + + if (rawLinks) { + rawLinks.split(',').forEach((p) => { + const section = p.split(';'); + if (section.length !== 2) { + throw new Error("section could not be split on ';'"); + } + const url = section[0].replace(/<(.*)>/, '$1').trim(); + const page = section[0].match(/page=(\d)/)[1]; + const name = section[1].replace(/rel="(.*)"/, '$1').trim(); + links[name] = {url, page}; + }) + } + // links.next.page + + return response.json(); + }); + } + + getNotifications = () => { + if (!this.props.token) { + console.error('Unauthenitcated, aborting request.') + return false; + } + + this.setState({ loading: true }); + return this.requestPage(1) + .then(notifications => this.processNotificationsChunk(notifications)) .catch(error => this.setState({ error })) .finally(() => this.setState({ loading: false })); } + processNotificationsChunk = notifications => { + console.log(notifications); + } + render () { return this.props.children({ ...this.state, diff --git a/src/styles/gradient.css b/src/styles/gradient.css index a94665a..ae0c589 100644 --- a/src/styles/gradient.css +++ b/src/styles/gradient.css @@ -1,16 +1,20 @@ .container-gradient { - background: radial-gradient(farthest-corner at -0% 100%, #7247ff 30%, #00ffbe 95%); + /* background: radial-gradient(farthest-corner at -0% 100%, #7247ff 30%, #00ffbe 95%); */ + background: radial-gradient(farthest-corner at -0% 100%, #9065ff 30%, #58fff7 95%); background-size: 400% 400%; - -webkit-animation: gradientTransition 30s ease infinite; - -moz-animation: gradientTransition 30s ease infinite; - animation: gradientTransition 30s ease infinite; + -webkit-animation: gradientTransition 20s ease infinite; + -moz-animation: gradientTransition 20s ease infinite; + animation: gradientTransition 20s ease infinite; } -.container-gradient a { +.button-container a { + text-align: center; + box-shadow: 0 1px 3px #4a4a4a5c; + margin: 0 auto; cursor: pointer; - color: #7247ff; + color: #9065ff; background: #fff; border-radius: 4px; -webkit-align-items: center; @@ -18,7 +22,6 @@ -ms-flex-align: center; align-items: center; padding: 0 16px; - margin-right: 15px; height: 48px; font-size: 12px; font-weight: 700; @@ -32,11 +35,13 @@ display: -ms-inline-flexbox; display: inline-flex; } -.container-gradient a:hover { - background: #f9f9f9 +.button-container a:hover { + background: #f9f9f9; + box-shadow: 0 2px 6px #4a4a4a5c; } -.container-gradient a:active { - background: #e4e4e4 +.button-container a:active { + background: #e4e4e4; + box-shadow: 0 0 0 #4a4a4a5c; } @-webkit-keyframes gradientTransition { diff --git a/src/styles/index.css b/src/styles/index.css index d2e490b..ade8555 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -2,7 +2,7 @@ ::selection { color: #fff; - background: #7247ff; + background: #9065ff; } body { @@ -19,19 +19,21 @@ body { h1 { font-weight: 500; font-size: 48px; - letter-spacing: -0.5px; + letter-spacing: -0.05px; + font-size: 52px; + letter-spacing: -0.75px; } h2 { font-weight: 500; font-size: 38px; - letter-spacing: -0.5px; + letter-spacing: -0.05px; } h3 { font-weight: 500; font-size: 28px; - letter-spacing: -0.5px; + letter-spacing: -0.05px; margin: 10px 0 20px; }