mirror of
https://github.com/nickzuber/meteorite.git
synced 2024-07-14 23:00:32 +03:00
New empty statue
This commit is contained in:
Nicholas Zuber
parent
6d517c141f
commit
32ba51036f
11
src/images/svg/blob-shape-2.svg
Normal file
11
src/images/svg/blob-shape-2.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
width="600"
|
||||
height="600"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,300) scale(1)" style="opacity: 0.25">
|
||||
<path d="M182.9,-135.1C228.3,-89,250.1,-13.5,224.9,33C199.7,79.5,127.4,97,67,117.9C6.7,138.7,-41.8,163.1,-86.6,152.1C-131.3,141.2,-172.4,95,-182.1,44C-191.9,-7,-170.2,-62.7,-134.6,-106.5C-99,-150.3,-49.5,-182.2,9.6,-189.8C68.8,-197.5,137.6,-181.1,182.9,-135.1Z" fill="#bfc5d1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 501 B |
11
src/images/svg/blob-shape-3.svg
Normal file
11
src/images/svg/blob-shape-3.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
width="600"
|
||||
height="600"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,320) scale(0.9)" style="opacity: 0.15">
|
||||
<path d="M88.1,-133.4C109.2,-105.9,117.8,-73.5,141.7,-37.3C165.5,-1,204.5,39,203.5,73.5C202.5,108,161.5,136.9,120.9,137.3C80.3,137.6,40.2,109.3,-9.1,121.8C-58.4,134.4,-116.8,187.7,-156.7,187.2C-196.7,186.7,-218.2,132.3,-208.2,85.9C-198.1,39.5,-156.6,1,-145.6,-51.7C-134.5,-104.5,-154,-171.6,-134.8,-199.7C-115.6,-227.8,-57.8,-216.9,-12.1,-200.2C33.5,-183.4,67,-160.9,88.1,-133.4Z" fill="#bfc5d1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 622 B |
11
src/images/svg/blob-shape-4.svg
Normal file
11
src/images/svg/blob-shape-4.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
width="600"
|
||||
height="600"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,300) scale(0.9)" style="opacity: 0.25">
|
||||
<path d="M107.6,-152.6C144.7,-121.2,183.6,-96.7,199.1,-61.7C214.6,-26.7,206.7,19,183.6,50.3C160.5,81.6,122.3,98.7,89.2,108.4C56,118.1,28,120.6,6.3,111.9C-15.5,103.3,-31,83.6,-72.2,76.5C-113.4,69.4,-180.3,74.9,-214.1,50.7C-247.9,26.6,-248.5,-27.2,-233.8,-77C-219,-126.8,-188.9,-172.6,-147.3,-202.6C-105.8,-232.6,-52.9,-246.8,-8.8,-234.7C35.3,-222.5,70.5,-184.1,107.6,-152.6Z" fill="#bfc5d1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 616 B |
11
src/images/svg/blob-shape-5.svg
Normal file
11
src/images/svg/blob-shape-5.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
width="600"
|
||||
height="600"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,320) scale(0.9)" style="opacity: 0.25">
|
||||
<path d="M120.8,-136.5C156.7,-113.8,186.2,-75.9,205.8,-27C225.5,21.8,235.3,81.7,208.7,113.8C182.2,146,119.3,150.5,66.9,158.7C14.5,167,-27.5,178.9,-60.4,166.6C-93.3,154.3,-117.3,117.9,-153.4,77.7C-189.6,37.5,-238.1,-6.5,-240.6,-51.1C-243.1,-95.7,-199.7,-140.9,-151.9,-161.5C-104.1,-182.1,-52.1,-178,-4.8,-172.3C42.4,-166.6,84.8,-159.1,120.8,-136.5Z" fill="#bfc5d1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 590 B |
11
src/images/svg/blob-shape-6.svg
Normal file
11
src/images/svg/blob-shape-6.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
width="600"
|
||||
height="600"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,320) scale(0.9)" style="opacity: 0.25">
|
||||
<path d="M113.8,-130.5C148,-107,176.4,-71.6,192.3,-27.2C208.2,17.3,211.5,70.6,187.4,104.4C163.4,138.1,111.9,152.2,63.5,166.3C15,180.4,-30.4,194.5,-71.4,184.6C-112.4,174.7,-148.9,140.9,-181.8,98.1C-214.8,55.2,-244.3,3.5,-239.8,-45.8C-235.2,-95,-196.7,-141.7,-151,-163.2C-105.4,-184.6,-52.7,-180.8,-6.4,-173.2C39.9,-165.5,79.7,-154,113.8,-130.5Z" fill="#bfc5d1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 586 B |
11
src/images/svg/blob-shape.svg
Normal file
11
src/images/svg/blob-shape.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
width="600"
|
||||
height="600"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,320) scale(1.1)" style="opacity: 0.15">
|
||||
<path d="M111,-109.9C153.8,-96.3,205.4,-70.8,210.3,-37.8C215.2,-4.9,173.4,35.6,141.8,73.8C110.1,112.1,88.6,148.1,58.9,156.8C29.2,165.4,-8.7,146.6,-33.7,123.9C-58.7,101.2,-70.9,74.6,-101.3,46.6C-131.6,18.6,-180,-10.9,-190.7,-48.1C-201.4,-85.3,-174.3,-130.4,-136.2,-144.8C-98.1,-159.3,-49.1,-143.1,-7.5,-134.2C34.1,-125.3,68.1,-123.5,111,-109.9Z" fill="#bfc5d1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 586 B |
@ -13,6 +13,7 @@ import LoadingIcon from '../../../components/LoadingIcon'
|
||||
import {getFact} from '../../../utils/facts';
|
||||
import {Mode, Sort, View} from '../index';
|
||||
import {withTooltip} from '../../../enhance';
|
||||
import EmptyState from './ui/EmptyState';
|
||||
import {
|
||||
stringOfError,
|
||||
getPRIssueIcon,
|
||||
@ -1293,27 +1294,7 @@ function NotificationCollection ({
|
||||
|
||||
if (notifications.length === 0) {
|
||||
return (
|
||||
<div css={css`
|
||||
text-align: center;
|
||||
margin: 128px auto 0;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: ${dark ? '#fff' : '#bfc5d1'};
|
||||
user-select: none;
|
||||
width: 60%;
|
||||
span {
|
||||
text-align: center;
|
||||
margin: 8px auto 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
color: ${dark ? '#fff' : '#bfc5d1'};
|
||||
user-select: none;
|
||||
}
|
||||
`}>
|
||||
{'No new updates to show'}
|
||||
<span>{`Fun fact: ${fact}`}</span>
|
||||
</div>
|
||||
<EmptyState dark={dark} />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
117
src/pages/NotificationsRedesign/redesign/ui/EmptyState.js
Normal file
117
src/pages/NotificationsRedesign/redesign/ui/EmptyState.js
Normal file
@ -0,0 +1,117 @@
|
||||
/** @jsx jsx */
|
||||
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import {css, jsx, keyframes} from '@emotion/core';
|
||||
import Blob1Svg from '../../../../images/svg/blob-shape.svg';
|
||||
import Blob2Svg from '../../../../images/svg/blob-shape-2.svg';
|
||||
import Blob3Svg from '../../../../images/svg/blob-shape-3.svg';
|
||||
import Blob4Svg from '../../../../images/svg/blob-shape-4.svg';
|
||||
import Blob5Svg from '../../../../images/svg/blob-shape-5.svg';
|
||||
import Blob6Svg from '../../../../images/svg/blob-shape-6.svg';
|
||||
|
||||
const B1 = Blob1Svg;
|
||||
const B2 = Blob3Svg;
|
||||
|
||||
const blobFrames1 = keyframes`
|
||||
0% {
|
||||
transform: rotate(14deg) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg) scale(0.98);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(14deg) scale(1);
|
||||
}
|
||||
`;
|
||||
|
||||
const blobFrames2 = keyframes`
|
||||
0% {
|
||||
transform: rotate(-2deg) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg) scale(1.04);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-2deg) scale(1);
|
||||
}
|
||||
`;
|
||||
|
||||
const BaseBlob = styled('div')`
|
||||
pointer-events: none;
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 550px;
|
||||
`;
|
||||
|
||||
const Blob1 = styled(BaseBlob)`
|
||||
background: url(${(B1)}) center center no-repeat;
|
||||
animation: ${blobFrames1} 25s infinite;
|
||||
`;
|
||||
|
||||
const Blob2 = styled(BaseBlob)`
|
||||
background: url(${(B2)}) center center no-repeat;
|
||||
animation: ${blobFrames2} 15s infinite;
|
||||
`;
|
||||
|
||||
const Header = styled('h1')(({dark}) => `
|
||||
text-align: center;
|
||||
letter-spacing: -0.25px;
|
||||
font-family: medium-marketing-display-font,Georgia,Cambria,Times New Roman,Times,serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: ${dark ? '#ffffff' : '#131212'};
|
||||
`);
|
||||
|
||||
const Byline = styled('p')(({dark}) => `
|
||||
text-align: center;
|
||||
font-family: medium-content-sans-serif-font,Inter UI,system-ui,sans-serif;
|
||||
font-weight: 500;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
margin: 5px auto;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: ${dark ? '#667386' : '#9d9b97'};
|
||||
`);
|
||||
|
||||
const Container = styled('div')(({opacity}) => `
|
||||
position: relative;
|
||||
background: none;
|
||||
height: 550px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
opacity: ${opacity};
|
||||
transition: all 150ms ease-in;
|
||||
`);
|
||||
|
||||
function EmptyState ({dark}) {
|
||||
const [opacity, setOpacity] = React.useState(0);
|
||||
const timer = React.useRef();
|
||||
React.useEffect(() => {
|
||||
timer.current = setTimeout(() => setOpacity(1), 10);
|
||||
return () => clearInterval(timer.current);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Container opacity={opacity}>
|
||||
<Blob1 />
|
||||
<Blob2 />
|
||||
<Header dark={dark}>
|
||||
{"🌱 You're all caught up"}
|
||||
<Byline dark={dark}>
|
||||
{"We're listening for changes — any updates will appear here."}
|
||||
</Byline>
|
||||
</Header>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default EmptyState;
|
||||
Loading…
Reference in New Issue
Block a user