♻️ Rename emptyStateV2 to emptyState

LiskHQ · Jul 23, 2019 · cdc84a4 · cdc84a4
1 parent 19357ae
commit cdc84a4
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 93 deletions.
diff --git a/src/components/bookmarks/bookmarksList/bookmarksList.js b/src/components/bookmarks/bookmarksList/bookmarksList.js
@@ -6,7 +6,7 @@ import { PrimaryButtonV2, SecondaryButtonV2 } from '../../toolbox/buttons/button
 import { tokenMap } from '../../../constants/tokens';
 import AccountVisual from '../../accountVisual';
 import Box from '../../box';
-import EmptyState from '../../emptyStateV2';
+import EmptyState from '../../emptyState';
 import regex from '../../../utils/regex';
 import routes from '../../../constants/routes';
 import styles from './bookmarksList.css';

diff --git a/src/components/dashboard/recentTransactions/recentTransactions.js b/src/components/dashboard/recentTransactions/recentTransactions.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { SecondaryButtonV2 } from '../../toolbox/buttons/button';
 import { tokenMap } from '../../../constants/tokens';
 import Box from '../../box';
-import EmptyState from '../../emptyStateV2';
+import EmptyState from '../../emptyState';
 import Icon from '../../toolbox/icon';
 import TransactionList from './transactionList';
 import links from '../../../constants/externalLinks';

diff --git a/src/components/emptyState/emptyState.css b/src/components/emptyState/emptyState.css
@@ -1,46 +1,29 @@
-@import '../app/variables.css';
-
-:root {
-  --float-animation-distance: 10px;
-}
-
-@keyframes float {
-  0% {
-    margin-top: 0px;
-    margin-bottom: var(--float-animation-distance);
-  }
-
-  100% {
-    margin-top: var(--float-animation-distance);
-    margin-bottom: 0px;
-  }
-}
-
-.emptyState {
-  max-width: 255px;
-  margin: auto;
-  text-align: center;
-
-  & img {
-    animation: float 1500ms 0ms infinite alternate ease-in-out;
-  }
-
-  & h2 {
-    margin: 10px;
+@import '../app/variablesV2.css';
+@import '../app/mixins.css';
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 20px;
+
+  & > h1 {
+    @mixin headingNormal;
+
+    color: var(--color-maastricht-blue);
+    margin: 20px 0 0;
   }
 
-  & p {
-    line-height: 26px;
-    color: var(--color-grayscale-dark);
-  }
-}
-
-@media (--small-viewport) {
-  .emptyState {
-    margin: 50px auto;
+  & > p {
+    @mixin contentLarge;
 
-    & p {
-      font-size: 14px;
-    }
+    max-width: 267px;
+    color: var(--color-slate-gray);
+    text-align: center;
+    margin: 20px 0;
   }
 }
diff --git a/src/components/emptyState/index.js b/src/components/emptyState/index.js
@@ -1,15 +1,10 @@
+// istanbul ignore file
 import React from 'react';
 import styles from './emptyState.css';
-import cubeImage from '../../assets/images/dark-blue-cube.svg';
 
-const EmptyState = ({
-  title, message, className, children,
-}) => (
-  <div className={`${styles.emptyState} ${className}`}>
-    <img src={cubeImage} />
-    <h2 className="empty-message">{title}</h2>
-    <p>{message}</p>
-    { children }
+const EmptyState = ({ className = '', children }) => (
+  <div className={`${styles.wrapper} ${className} empty-state`}>
+    {children}
   </div>
 );
 

diff --git a/src/components/emptyStateV2/emptyState.css b/src/components/emptyStateV2/emptyState.css
diff --git a/src/components/emptyStateV2/index.js b/src/components/emptyStateV2/index.js
diff --git a/src/components/newsFeed/newsFeed.js b/src/components/newsFeed/newsFeed.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './newsFeed.css';
 import News from './news';
 import Box from '../box';
-import EmptyState from '../emptyStateV2';
+import EmptyState from '../emptyState';
 import Icon from '../toolbox/icon';
 
 class NewsFeed extends React.Component {