feat(search): add not pools found comp.

Emurgo · Sep 8, 2023 · 5f6a3ca · 5f6a3ca
1 parent cab8160
commit 5f6a3ca
Show file tree

Hide file tree

Showing 5 changed files with 263 additions and 4 deletions.
diff --git a/src/assets/staking-illustration.svg b/src/assets/staking-illustration.svg
diff --git a/src/components/DesktopTableRevamp.js b/src/components/DesktopTableRevamp.js
@@ -14,6 +14,7 @@ import { TooltipRevamp } from './common/Tooltip';
 import StakingPoolCardRevamp from './StakingPoolCardRevamp';
 import { PoolSizeTagRevamp } from './PoolSizeTag';
 import Label from './common/Label';
+import NoStakePoolsFound from './NoStakePoolsFound';
 
 const TableContent = styled.div`
   display: inline-flex;
@@ -124,7 +125,7 @@ function DesktopTableRevamp({
   const isResolved = status === 'resolved';
 
   if (isResolved && data != null && data.length <= 0) {
-    return <Message>No results found.</Message>;
+    return <NoStakePoolsFound />;
   }
 
   if (isLoading) {

diff --git a/src/components/MobileTableRevamp.js b/src/components/MobileTableRevamp.js
@@ -13,6 +13,7 @@ import type { DelegationProps } from '../containers/Home';
 import StakingPoolCardRevamp from './StakingPoolCardRevamp';
 import { PoolSizeTagRevamp } from './PoolSizeTag';
 import { ValueRevamp } from './DesktopTableRevamp';
+import NoStakePoolsFound from './NoStakePoolsFound';
 
 const CardMobile = styled.div`
   display: flex;
@@ -75,7 +76,7 @@ function MobileTableRevamp({
   const isResolved = status === 'resolved';
 
   if (isResolved && data != null && data.length <= 0) {
-    return <Message>No results found.</Message>;
+    return <NoStakePoolsFound />;
   }
 
   if (isLoading) {

diff --git a/src/components/NoStakePoolsFound.js b/src/components/NoStakePoolsFound.js
@@ -0,0 +1,31 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import stakingIllustration from '../assets/staking-illustration.svg';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-height: 60vh;
+
+  & .title {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 26px;
+    text-align: center;
+  }
+`;
+
+function NoStakePoolsFound() {
+  return (
+    <Container>
+      <img className="staking-img" src={stakingIllustration} alt="Staking Pools" />
+      <h1 className="title">No stake pools found</h1>
+    </Container>
+  );
+}
+
+export default NoStakePoolsFound;
diff --git a/src/components/common/Label.js b/src/components/common/Label.js
@@ -1,8 +1,6 @@
 // @flow
 import React from 'react';
 import type { Node } from 'react';
-import sortingArrowDown from '../../assets/arrow-sorting-up.svg';
-import sortingArrowDownDark from '../../assets/arrow-sorting-up-dark.svg';
 import ArrowsIdle from '../../assets/arrows-idle.svg';
 import ArrowsAscending from '../../assets/arrows-ascending.svg';
 import ArrowsDescending from '../../assets/arrows-descending.svg';