From 1d35dd8a80f0ea72306e96c2229a27798ec75ce9 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 04:59:45 +0300
Subject: feat: use EmptyState variants

---
 src/assets/construction.svg                    |  1 +
 src/components/EmptyState/EmptyState.tsx       | 22 +++++++++++++++++++---
 src/containers/Notifications/Notifications.tsx | 11 +++++------
 3 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/construction.svg

diff --git a/src/assets/construction.svg b/src/assets/construction.svg
new file mode 100644
index 0000000..bdb9eaa
--- /dev/null
+++ b/src/assets/construction.svg
@@ -0,0 +1 @@
+<svg id="bf6b072d-b0c7-410f-9e86-e550d19ff3f5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1002.5009" height="516.22024" viewBox="0 0 1002.5009 516.22024"><title>towing</title><path d="M149.07843,674.20215l43.07664-68.361-43.09661,75.80813-.02309,7.7894q-4.60974-.0539-9.12643-.35342l3.51352-100.06285-.0462-.77342.07916-.14767.33455-9.45528L98.74955,503.72254l45.08688,67.8427.1349,2.00269,2.65414-75.6014-38.7204-77.518,39.023,64.23377,1.8152-156.70073.00832-.52151.00624.51318.88382,123.54783,36.99947-49.43346L149.60894,462.1622l-.17171,67.668,34.33009-65.354-34.349,75.30247-.095,37.62683,49.86758-90.99615L149.284,590.5318Z" transform="translate(-98.74955 -191.88988)" fill="#d0cde1"/><rect x="642.85096" y="193.7674" width="12.11046" height="85.98428" fill="#3f3d56"/><rect x="521.32907" y="57.40029" width="12.11046" height="483.65711" transform="translate(-46.96838 483.46895) rotate(-67.90849)" fill="#3f3d56"/><path d="M1101.24876,685.58308C1082.49147,716.92037,97.76,714.2897,99.25214,685.58122,118.00918,654.24579,1102.7407,656.87647,1101.24876,685.58308Z" transform="translate(-98.74955 -191.88988)" fill="#d0cde1"/><rect x="773.64395" y="366.94701" width="105.36102" height="41.17557" fill="#3f3d56"/><rect x="349.77776" y="403.2784" width="519.53884" height="46.01976" fill="#3f3d56"/><polygon points="783.938 426.288 659.2 426.288 659.2 269.458 752.451 269.458 783.938 348.555 783.938 426.288" fill="#d0cde1"/><rect x="678.57682" y="279.14616" width="53.28603" height="53.28603" fill="#fff"/><polygon points="771.827 333.038 737.918 333.038 737.918 279.752 752.451 279.752 771.827 333.038" fill="#fff"/><rect x="680.99891" y="362.70835" width="12.11046" height="23.00988" fill="#3f3d56"/><path d="M748.212,313.661h.60553a11.50493,11.50493,0,0,1,11.50493,11.50493v0a11.50493,11.50493,0,0,1-11.50493,11.50493H748.212a0,0,0,0,1,0,0V313.661a0,0,0,0,1,0,0Z" fill="#3f3d56"/><path d="M297.70277,403.2784h.60553a11.50493,11.50493,0,0,1,11.50493,11.50493v0a11.50493,11.50493,0,0,1-11.50493,11.50493h-.60553a0,0,0,0,1,0,0V403.2784A0,0,0,0,1,297.70277,403.2784Z" fill="#3f3d56"/><path d="M931.12924,594.99452c18.45486,0,35.05463,8.94049,46.5728,23.18364h23.66789l-23.00988-64.09594-107.1776-21.138,3.02762,85.234h10.34637C896.07461,603.935,912.67439,594.99452,931.12924,594.99452Z" transform="translate(-98.74955 -191.88988)" fill="#d0cde1"/><circle cx="833.59074" cy="441.42636" r="52.68051" fill="#3f3d56"/><circle cx="833.59074" cy="441.42636" r="27.72659" fill="#d0cde1"/><circle cx="357.64956" cy="447.48159" r="46.01976" fill="#3f3d56"/><circle cx="357.64956" cy="447.48159" r="24.22092" fill="#d0cde1"/><rect x="637.40125" y="247.65896" width="25.43197" height="183.47351" fill="#3f3d56"/><rect x="297.09725" y="397.82869" width="365.73597" height="10.89942" fill="#3f3d56"/><rect x="194.30308" y="575.27158" width="413.35786" height="10.89942" transform="translate(-237.13545 -66.25763) rotate(-15.21949)" fill="#3f3d56"/><rect x="585.08165" y="530.05667" width="8.47732" height="70.85626" transform="translate(-319.17476 266.90058) rotate(-36.31135)" fill="#3f3d56"/><rect x="743.36779" y="335.45981" width="12.11046" height="4.84418" fill="#3f3d56"/><path d="M747.65574,563.68108H589.00868a1.21092,1.21092,0,0,1-.34416-2.37183l155.01392-46.01976a1.21074,1.21074,0,0,1,1.55166,1.06558l3.63314,46.01976a1.21143,1.21143,0,0,1-1.2075,1.30625ZM597.3429,561.259H746.34535l-3.412-43.22217Z" transform="translate(-98.74955 -191.88988)" fill="#3f3d56"/><path d="M318.04891,510.395h-.01124l-34.76613-.3276a1.2112,1.2112,0,0,1-1.19213-1.34882l18.064-157.61519a1.21146,1.21146,0,0,1,1.20336-1.07326h.00532a1.21158,1.21158,0,0,1,1.19922,1.08391l16.70215,157.94278a1.21129,1.21129,0,0,1-1.20454,1.33818Zm-33.40962-2.73668,32.06257.30158L301.29827,362.2997Z" transform="translate(-98.74955 -191.88988)" fill="#3f3d56"/><path d="M970.48825,556.4148h.60553a11.50493,11.50493,0,0,1,11.50493,11.50493v0a11.50493,11.50493,0,0,1-11.50493,11.50493h-.60553a0,0,0,0,1,0,0V556.4148A0,0,0,0,1,970.48825,556.4148Z" transform="translate(1992.09742 561.76549) rotate(159.28262)" fill="#3f3d56"/><rect x="215.94814" y="588.22581" width="35.08027" height="5.5683" transform="translate(-249.4105 -107.08039) rotate(-15.63709)" fill="#3f3d56"/><path d="M494.25243,516.57572l-6.5206,3.55983L222.83891,594.27986l-3.93276-4.88514a58.17112,58.17112,0,0,1-12.58107-29.144c-1.00026-7.98461-.26866-16.40044,5.30138-21.52286l-10.11625-81.59017,146.50027-41.20421,69.48493,29.899s26.616-7.953,46.20245,6.08c6.19992,4.44595,11.698,11.09472,15.416,20.90745l3.20251,9.25159Z" transform="translate(-98.74955 -191.88988)" fill="#00796b"/><circle cx="336.94773" cy="339.63002" r="33.96661" fill="#3f3d56"/><circle cx="336.94773" cy="339.63002" r="17.87716" fill="#d0cde1"/><circle cx="175.54536" cy="384.80702" r="33.96661" fill="#3f3d56"/><circle cx="175.54536" cy="384.80702" r="17.87716" fill="#d0cde1"/><polygon points="294.724 254.884 189.624 284.302 180.769 252.665 247.797 233.903 294.724 254.884" fill="#fff"/><rect x="228.44813" y="453.4022" width="43.43272" height="32.85295" transform="translate(-216.12969 -107.07056) rotate(-15.63709)" fill="#fff"/><rect x="296.30078" y="498.83899" width="5.5683" height="10.57976" transform="translate(-223.56445 -92.61487) rotate(-15.63709)" fill="#3f3d56"/><rect x="377.63635" y="457.85865" width="5.5683" height="10.57976" transform="translate(625.13777 -219.92039) rotate(74.36291)" fill="#3f3d56"/><path d="M375.62632,438.70629h.61252A11.63773,11.63773,0,0,1,387.87657,450.344v0a11.63773,11.63773,0,0,1-11.63773,11.63773h-.61252a0,0,0,0,1,0,0V438.70629A0,0,0,0,1,375.62632,438.70629Z" transform="translate(-206.00747 -72.32334) rotate(-15.63709)" fill="#3f3d56"/><path d="M482.31639,482.07146a17.98812,17.98812,0,0,1-18.61853-30.159c6.19992,4.44595,11.698,11.09472,15.416,20.90745Z" transform="translate(-98.74955 -191.88988)" fill="#3f3d56"/><rect x="195.97489" y="10.89942" width="12.11046" height="176.81275" fill="#3f3d56"/><circle cx="202.03012" cy="16.95465" r="16.95465" fill="#3f3d56"/><circle cx="648.90619" cy="196.18949" r="16.95465" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index f6a6363..214bb56 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -2,8 +2,11 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import noContentIcon from '../../assets/noContent.svg';
+import constructionIcon from '../../assets/construction.svg';
+
 
 interface PropTypes {
+  variant?: 'default' | 'construction';
   message?: string;
 }
 
@@ -21,14 +24,27 @@ const useStyles = makeStyles(theme => ({
 
 }));
 
-const EmptyState: React.FC<PropTypes> = ({ message }) => {
+const CONTEXT = {
+  default: {
+    icon: noContentIcon,
+    tagline: 'No content'
+  },
+  construction: {
+    icon: constructionIcon,
+    tagline: 'Coming soon'
+  }
+};
+
+const EmptyState: React.FC<PropTypes> = ({ variant = 'default', message }) => {
   const classes = useStyles();
 
+  const { icon, tagline } = CONTEXT[variant];
+
   return (
     <div className={classes.root}>
-      <img src={noContentIcon} className={classes.img} alt="No content" />
+      <img src={icon} className={classes.img} alt="No content" />
       <Typography variant="h5">
-        No content
+        {tagline}
       </Typography>
       <Typography color="textSecondary">
         <p>
diff --git a/src/containers/Notifications/Notifications.tsx b/src/containers/Notifications/Notifications.tsx
index 0648eb5..2a9ea13 100644
--- a/src/containers/Notifications/Notifications.tsx
+++ b/src/containers/Notifications/Notifications.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Typography } from '@material-ui/core';
+import EmptyState from '../../components/EmptyState/EmptyState';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    marginTop: theme.spacing(25),
-    textAlign: 'center'
+    marginTop: theme.spacing(25)
   }
 }));
 
@@ -13,9 +12,9 @@ const Notifications: React.FC = () => {
   const classes = useStyles();
 
   return (
-    <Typography variant="h4" className={classes.root}>
-      Sorry, this page is being constructed yet.
-    </Typography>
+    <div className={classes.root}>
+      <EmptyState variant="construction" message="We are building this page. Stay tuned." />
+    </div>
   );
 };
 
-- 
cgit v1.2.3