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;