update: not found and 404 logo (#793)

CHANGELOG.md

@@ -1,3 +1,8 @@
+# Unreleased
+
+## Changes
+- Updated not found and 404 logo ([\#792](https://github.com/forbole/big-dipper-2.0-cosmos/issues/792))
+
 # base-v2.0.0 - 2021-03-10
 
 ## Changes

src/components/no_data/index.tsx

@@ -2,18 +2,27 @@ import React from 'react';
 import classnames from 'classnames';
 import useTranslation from 'next-translate/useTranslation';
 import { Typography } from '@material-ui/core';
-import { Face } from '@material-ui/icons';
+import { useRecoilValue } from 'recoil';
+import { readTheme } from '@recoil/settings/selectors';
+import NotFoundLight from '@assets/not-found-light.svg';
+import NotFoundDark from '@assets/not-found-dark.svg';
 import { useStyles } from './styles';
 
 const NoData: React.FC<{
   className?: string;
 }> = ({ className }) => {
   const classes = useStyles();
   const { t } = useTranslation('common');
+  const theme = useRecoilValue(readTheme);
+
   return (
     <div className={classnames(className, classes.root)}>
       <div className={classes.content}>
-        <Face />
+        {theme === 'light' ? (
+          <NotFoundLight />
+        ) : (
+          <NotFoundDark />
+        )}
         <Typography variant="body1">
           {t('nothingToShow')}
         </Typography>

src/components/no_data/styles.tsx

@@ -9,12 +9,10 @@ export const useStyles = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          minHeight: '150px',
+          minHeight: '400px',
           '& .MuiTypography-body1': {
-            color: theme.palette.divider,
-          },
-          '& .MuiSvgIcon-root': {
-            color: theme.palette.divider,
+            marginTop: theme.spacing(2),
+            color: theme.palette.custom.fonts.fontFour,
           },
         },
         content: {