mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-09-11 11:36:03 +03:00
Home page redesign progress
This commit is contained in:
parent
7452f834fc
commit
fd4964b36b
@ -72,7 +72,7 @@
|
|||||||
"build": "node scripts/build.js && cp build/index.html build/200.html",
|
"build": "node scripts/build.js && cp build/index.html build/200.html",
|
||||||
"now-build": "npm run build",
|
"now-build": "npm run build",
|
||||||
"test": "node scripts/test.js",
|
"test": "node scripts/test.js",
|
||||||
"deploy": "npm run build && surge ./build"
|
"deploy": "now --target production"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "react-app"
|
"extends": "react-app"
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"short_name": "React App",
|
"short_name": "Meteorite",
|
||||||
"name": "Create React App Sample",
|
"name": "Meteorite – Smarter GitHub Notifications",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "favicon.ico",
|
"src": "iconCircle.png",
|
||||||
"sizes": "64x64 32x32 24x24 16x16",
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
"type": "image/x-icon"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
import meteoriteLogo from './icon-gray.png';
|
import meteoriteLogo from './icon-gray.png';
|
||||||
import meteoriteLogoWhite from './logo-white.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 (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
background: `url(${white ? meteoriteLogoWhite : meteoriteLogo}) center center no-repeat`,
|
background: `url(${white ? meteoriteLogoWhite : meteoriteLogo}) center center no-repeat`,
|
||||||
|
BIN
src/images/demo.png
Normal file
BIN
src/images/demo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 745 KiB |
Binary file not shown.
Before Width: | Height: | Size: 375 KiB |
File diff suppressed because it is too large
Load Diff
@ -147,7 +147,7 @@ class NotificationsPage extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
currentTime: moment(),
|
currentTime: moment().subtract(3, 'd'),
|
||||||
error: null,
|
error: null,
|
||||||
notificationSent: false,
|
notificationSent: false,
|
||||||
isFirstTimeUser: false,
|
isFirstTimeUser: false,
|
||||||
@ -502,7 +502,6 @@ class NotificationsPage extends React.Component {
|
|||||||
lastNumbered = 0;
|
lastNumbered = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const reposReadCounts = this.props.storageApi.getAllRepoStagedCounts();
|
const reposReadCounts = this.props.storageApi.getAllRepoStagedCounts();
|
||||||
const todayLastWeek = this.state.currentTime.clone().subtract(1, 'week');
|
const todayLastWeek = this.state.currentTime.clone().subtract(1, 'week');
|
||||||
|
|
||||||
|
@ -3,8 +3,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import {navigate} from "@reach/router"
|
|
||||||
import {css, jsx, keyframes} from '@emotion/core';
|
import {css, jsx, keyframes} from '@emotion/core';
|
||||||
|
import {navigate} from "@reach/router"
|
||||||
import {useSpring, useTransition, animated} from 'react-spring'
|
import {useSpring, useTransition, animated} from 'react-spring'
|
||||||
import {LineChart, Line, XAxis, Tooltip} from 'recharts';
|
import {LineChart, Line, XAxis, Tooltip} from 'recharts';
|
||||||
import Logo from '../../../components/Logo';
|
import Logo from '../../../components/Logo';
|
||||||
@ -22,23 +22,12 @@ const BLUE = '#457cff';
|
|||||||
const WHITE = 'rgb(255, 254, 252)';
|
const WHITE = 'rgb(255, 254, 252)';
|
||||||
const FOOTER_HEIGHT = '96px';
|
const FOOTER_HEIGHT = '96px';
|
||||||
const COLLAPSED_WIDTH = '72px';
|
const COLLAPSED_WIDTH = '72px';
|
||||||
const EXPANDED_WIDTH = '326px';
|
const EXPANDED_WIDTH = '286px';
|
||||||
|
|
||||||
// ========================================================================
|
// ========================================================================
|
||||||
// START OF 'MOVE TO A UTILS FILE'
|
// 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) {
|
function getPRIssueIcon (type, _reasons) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'PullRequest':
|
case 'PullRequest':
|
||||||
@ -210,6 +199,7 @@ const Item = styled('div')`
|
|||||||
const MenuHeaderItem = styled(Item)`
|
const MenuHeaderItem = styled(Item)`
|
||||||
height: ${COLLAPSED_WIDTH};
|
height: ${COLLAPSED_WIDTH};
|
||||||
width: ${({expand}) => expand ? EXPANDED_WIDTH : COLLAPSED_WIDTH};
|
width: ${({expand}) => expand ? EXPANDED_WIDTH : COLLAPSED_WIDTH};
|
||||||
|
flex: ${({expand}) => expand ? `${EXPANDED_WIDTH} 0 0` : 1};
|
||||||
transition: all 150ms ease;
|
transition: all 150ms ease;
|
||||||
border-bottom: 1px solid #292d35;
|
border-bottom: 1px solid #292d35;
|
||||||
border-right: 1px solid #292d35;
|
border-right: 1px solid #292d35;
|
||||||
@ -226,6 +216,7 @@ const ContentHeaderItem = styled(Item)`
|
|||||||
|
|
||||||
const MenuContainerItem = styled(Item)`
|
const MenuContainerItem = styled(Item)`
|
||||||
width: ${({expand}) => expand ? EXPANDED_WIDTH : COLLAPSED_WIDTH};
|
width: ${({expand}) => expand ? EXPANDED_WIDTH : COLLAPSED_WIDTH};
|
||||||
|
flex: ${({expand}) => expand ? `${EXPANDED_WIDTH} 0 0` : 1};
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: all 150ms ease;
|
transition: all 150ms ease;
|
||||||
`;
|
`;
|
||||||
|
@ -1,23 +1,7 @@
|
|||||||
@import url('https://rsms.me/inter/inter-ui.css');
|
@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 {
|
::selection {
|
||||||
color: #fff;
|
color: rgb(255, 254, 252);
|
||||||
background: #4880ff;
|
background: #4880ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,8 +13,7 @@ html, body {
|
|||||||
|
|
||||||
html, body, * {
|
html, body, * {
|
||||||
font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
sans-serif;
|
|
||||||
/* color: #202124; */
|
/* color: #202124; */
|
||||||
/* color: #19233C; */
|
/* color: #19233C; */
|
||||||
color: rgb(55, 53, 47);
|
color: rgb(55, 53, 47);
|
||||||
@ -39,7 +22,7 @@ html, body, * {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #ffffff;
|
background: rgb(255, 254, 252);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -94,6 +77,10 @@ line[stroke="#666"] {
|
|||||||
stroke: #e5e7ea;
|
stroke: #e5e7ea;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-underline-position: under;
|
||||||
|
}
|
||||||
|
|
||||||
.react-tooltip {
|
.react-tooltip {
|
||||||
z-index: 999999;
|
z-index: 999999;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
Loading…
Reference in New Issue
Block a user