nickzuber/meteorite
1
1
Fork 0
mirror of https://github.com/nickzuber/meteorite.git synced 2024-08-17 07:20:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

New icon and beta tag

Browse Source
This commit is contained in:
Nicholas Zuber 2018-11-07 23:51:47 -05:00
parent 36fc0e7a5a
commit 40c9966733
8 changed files with 58 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icon-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
public/icon-black.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

BIN
public/icon-purple.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 162 KiB

2
public/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/icon-black.png">
<link rel="shortcut icon" href="%PUBLIC_URL%/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#24292e">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

6
src/components/Logo/index.js
View File

@ -1,13 +1,11 @@
import React from 'react';
import meteoriteSvg from './meteorite.svg';
// import meteoritePng from './meteorite-v2-2.png';
import meteoriteLogo from './logo-white.png';
export default function LoadingIcon ({ style, size, ...props }) {
return (
<div style={{
background: `url(${meteoriteSvg}) center center no-repeat`,
background: `url(${meteoriteLogo}) center center no-repeat`,
backgroundSize: 'contain',
// transform: 'rotate(180deg)',
position: 'relative',
height: size,
width: size,

BIN
src/components/Logo/logo-white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 15 KiB

29
src/pages/Home/Scene.js
View File

@ -3,6 +3,7 @@ import { Link as RouterLink } from "@reach/router";
import styled from 'react-emotion';
import { routes } from '../../constants';
import Curve from '../../components/Curve';
import Icon from '../../components/Icon';
import Logo from '../../components/Logo';
import '../../styles/gradient.css';
@ -23,6 +24,7 @@ const SubHeader = styled(Header)({
});
const LandingHeader = styled('div')({
position: 'relative',
width: '100%',
margin: '54px 20px',
maxWidth: 1000,
@ -56,13 +58,26 @@ const SmallText = styled('span')({
});
const BottomLinkContainer = styled(LandingHeader)({
maxWidth: 390,
maxWidth: 350,
width: '100%',
margin: '32px auto 0',
});
const LinkButton = styled('a')({});
const UnofficialReleaseTag = styled('span')({
color: 'white',
position: 'absolute',
left: '44px',
bottom: '7px',
fontSize: '11px',
background: '#f42839',
fontWeight: '800',
padding: '2px 4px',
borderRadius: '4px',
textTransform: 'uppercase',
});
export default function Scene ({loggedIn, onLogout, ...props}) {
return (
<div className="container-gradient" style={{
@ -76,6 +91,7 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
}}>
<LandingHeader>
<Logo size={75} />
<UnofficialReleaseTag>beta</UnofficialReleaseTag>
{loggedIn ? (
<div className="button-container">
<RouterLink style={{marginRight: 15}} to={routes.NOTIFICATIONS}>notifications</RouterLink>
@ -95,7 +111,16 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
</div>
<BottomLinkContainer>
<SmallLink target="_blank" href="https://github.com/nickzuber/meteorite">View and contribute on GitHub</SmallLink>
<SmallText>Totally free and open sourced</SmallText>
<SmallText>
<Icon.PeopleWhite
shrink={0.55}
style={{
display: 'inline-block',
top: -3
}}
/>
Free and open sourced
</SmallText>
</BottomLinkContainer>
</LandingMessage>
<Curve />

32
src/pages/Notifications/SceneAlt.js
View File

@ -37,6 +37,19 @@ function getRelativeTime (time) {
return 'Long time ago';
}
const UnofficialReleaseTag = styled('span')({
color: 'white',
position: 'absolute',
left: '21px',
bottom: '0px',
fontSize: '9px',
background: '#f42839',
fontWeight: '800',
padding: '2px 4px',
borderRadius: '4px',
textTransform: 'uppercase',
});
const FixedContainer = styled('div')({
height: '80%',
maxWidth: 270,
@ -469,6 +482,7 @@ export default function Scene ({
<div style={{marginTop: 60}}>
<NavigationContainer className="container-gradient">
<div style={{
position: 'relative',
textAlign: 'right',
margin: '0 auto',
width: '92%'
@ -485,6 +499,7 @@ export default function Scene ({
onSetActiveFilter(Filters.PARTICIPATING);
}}
/>
<UnofficialReleaseTag>beta</UnofficialReleaseTag>
<SearchField>
<Icon.Search size={48} opacity={.45} />
<EnhancedSearchInput
@ -602,7 +617,7 @@ export default function Scene ({
height: 100,
fontSize: 12
}}>
bar chart, statistics, etc
bar chart, statistics, etc. will be here eventually
</div>
<div style={{
padding: 14,
@ -825,18 +840,27 @@ export default function Scene ({
{n.repository}</Repository>
</TableItem>
<TableItem width={150} style={{textAlign: 'right'}}>
<EnhancedNotificationTab>
<EnhancedNotificationTab
tooltip={!loading ? "Score representing this notification's importance" : null}
tooltipOffsetX={-20}
>
{n.score}
</EnhancedNotificationTab>
{activeStatus === Status.QUEUED ? (
<EnhancedNotificationTab tooltip={!loading ? "Mark as read" : null}>
<EnhancedNotificationTab
tooltip={!loading ? "Mark as read" : null}
tooltipOffsetX={-10}
>
<Icon.Check
opacity={0.9}
onClick={!loading ? (() => onStageThread(n.id, n.repository)) : undefined}
/>
</EnhancedNotificationTab>
) : (
<EnhancedNotificationTab tooltip={!loading ? "Revert back to unread" : null}>
<EnhancedNotificationTab
tooltip={!loading ? "Revert back to unread" : null}
tooltipOffsetX={-10}
>
<Icon.Undo
opacity={0.9}
onClick={!loading ? (() => onRestoreThread(n.id)) : undefined}