From 32ba51036fdfe0321ae3c6b95550bc63fa78a845 Mon Sep 17 00:00:00 2001 From: Nicholas Zuber Date: Mon, 17 Feb 2020 22:21:54 -0500 Subject: [PATCH] New empty statue --- src/images/svg/blob-shape-2.svg | 11 ++ src/images/svg/blob-shape-3.svg | 11 ++ src/images/svg/blob-shape-4.svg | 11 ++ src/images/svg/blob-shape-5.svg | 11 ++ src/images/svg/blob-shape-6.svg | 11 ++ src/images/svg/blob-shape.svg | 11 ++ .../NotificationsRedesign/redesign/Scene.js | 23 +--- .../redesign/ui/EmptyState.js | 117 ++++++++++++++++++ 8 files changed, 185 insertions(+), 21 deletions(-) create mode 100644 src/images/svg/blob-shape-2.svg create mode 100644 src/images/svg/blob-shape-3.svg create mode 100644 src/images/svg/blob-shape-4.svg create mode 100644 src/images/svg/blob-shape-5.svg create mode 100644 src/images/svg/blob-shape-6.svg create mode 100644 src/images/svg/blob-shape.svg create mode 100644 src/pages/NotificationsRedesign/redesign/ui/EmptyState.js diff --git a/src/images/svg/blob-shape-2.svg b/src/images/svg/blob-shape-2.svg new file mode 100644 index 0000000..e70c8f2 --- /dev/null +++ b/src/images/svg/blob-shape-2.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/images/svg/blob-shape-3.svg b/src/images/svg/blob-shape-3.svg new file mode 100644 index 0000000..103554b --- /dev/null +++ b/src/images/svg/blob-shape-3.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/images/svg/blob-shape-4.svg b/src/images/svg/blob-shape-4.svg new file mode 100644 index 0000000..95987a8 --- /dev/null +++ b/src/images/svg/blob-shape-4.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/images/svg/blob-shape-5.svg b/src/images/svg/blob-shape-5.svg new file mode 100644 index 0000000..3775bae --- /dev/null +++ b/src/images/svg/blob-shape-5.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/images/svg/blob-shape-6.svg b/src/images/svg/blob-shape-6.svg new file mode 100644 index 0000000..9cf8907 --- /dev/null +++ b/src/images/svg/blob-shape-6.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/images/svg/blob-shape.svg b/src/images/svg/blob-shape.svg new file mode 100644 index 0000000..9a29417 --- /dev/null +++ b/src/images/svg/blob-shape.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/pages/NotificationsRedesign/redesign/Scene.js b/src/pages/NotificationsRedesign/redesign/Scene.js index 96d1abf..8824365 100644 --- a/src/pages/NotificationsRedesign/redesign/Scene.js +++ b/src/pages/NotificationsRedesign/redesign/Scene.js @@ -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 ( -
- {'No new updates to show'} - {`Fun fact: ${fact}`} -
+ ); } diff --git a/src/pages/NotificationsRedesign/redesign/ui/EmptyState.js b/src/pages/NotificationsRedesign/redesign/ui/EmptyState.js new file mode 100644 index 0000000..88b351a --- /dev/null +++ b/src/pages/NotificationsRedesign/redesign/ui/EmptyState.js @@ -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 ( + + + +
+ {"🌱 You're all caught up"} + + {"We're listening for changes — any updates will appear here."} + +
+ + ); +} + +export default EmptyState;