fix: fix style of empty list (#417)

Magickbase · Aug 19, 2022 · d407f15 · d407f15
1 parent 83466c9
commit d407f15
Show file tree

Hide file tree

Showing 34 changed files with 417 additions and 171 deletions.
diff --git a/assets/icons/empty-filtered-list.svg b/assets/icons/empty-filtered-list.svg
diff --git a/assets/icons/no-data.svg b/assets/icons/no-data.svg
diff --git a/components/AssetList/index.tsx b/components/AssetList/index.tsx
@@ -1,11 +1,12 @@
 import { useTranslation } from 'next-i18next'
 import NextLink from 'next/link'
 import { gql } from 'graphql-request'
+import BigNumber from 'bignumber.js'
 import Table from 'components/Table'
 import TokenLogo from 'components/TokenLogo'
-import { parseTokenName, client, formatAmount, GraphQLSchema } from 'utils'
+import { parseTokenName, client, GraphQLSchema } from 'utils'
+import NoDataIcon from 'assets/icons/no-data.svg'
 import styles from './styles.module.scss'
-import BigNumber from 'bignumber.js'
 
 export type UdtList = Array<{
   value: string
@@ -89,8 +90,11 @@ const AssetList = ({ list = [] }: { list: UdtList }) => {
           })
         ) : (
           <tr>
-            <td colSpan={3} align="center" className={styles.noRecords}>
-              {t(`emptyAssetList`)}
+            <td colSpan={3} align="center">
+              <div className={styles.noRecords}>
+                <NoDataIcon />
+                <span>{t(`emptyAssetList`)}</span>
+              </div>
             </td>
           </tr>
         )}

diff --git a/components/AssetList/styles.module.scss b/components/AssetList/styles.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/mixin.scss';
+
 .name {
   display: flex;
   align-items: center;
@@ -34,5 +36,5 @@
 }
 
 .noRecords {
-  text-align: center;
+  @include empty-list;
 }
diff --git a/components/BridgedRecordList/index.tsx b/components/BridgedRecordList/index.tsx
@@ -5,6 +5,7 @@ import Table from 'components/Table'
 import HashLink from 'components/HashLink'
 import Address from 'components/TruncatedAddress'
 import Pagination from 'components/Pagination'
+import NoDataIcon from 'assets/icons/no-data.svg'
 import Amount from 'components/Amount'
 import { timeDistance, getBridgedRecordListRes, CKB_EXPLORER_URL, PCKB_UAN, PCKB_UDT_INFO } from 'utils'
 import styles from './styles.module.scss'
@@ -84,16 +85,21 @@ const BridgedRecordList: React.FC<{ list: ParsedList; showUser?: boolean }> = ({
             ))
           ) : (
             <tr>
-              <td colSpan={showUser ? 7 : 6} align="center" style={{ textAlign: 'center' }}>
-                {t(`no_records`)}
+              <td colSpan={showUser ? 7 : 6}>
+                <div className={styles.noRecords}>
+                  <NoDataIcon />
+                  <span>{t(`no_records`)}</span>
+                </div>
               </td>
             </tr>
           )}
         </tbody>
       </Table>
-      <div className={styles.pagination}>
-        <Pagination total={+list.meta.total} page={+list.meta.page} />
-      </div>
+      {+list.meta.total ? (
+        <div className={styles.pagination}>
+          <Pagination total={+list.meta.total} page={+list.meta.page} />
+        </div>
+      ) : null}
     </>
   )
 }

diff --git a/components/BridgedRecordList/styles.module.scss b/components/BridgedRecordList/styles.module.scss
@@ -1,5 +1,10 @@
+@import '../../styles/mixin.scss';
+
 .pagination {
   display: flex;
   justify-content: flex-end;
   padding: 1.125rem 1.5rem;
 }
+.noRecords {
+  @include empty-list;
+}
diff --git a/components/ChartComponents/styles.module.scss b/components/ChartComponents/styles.module.scss
@@ -20,7 +20,7 @@
     }
     li span {
       font-size: 14px;
-      color: #333;
+      color: var(--primary-text-color);
     }
     li::before {
       position: absolute;

diff --git a/components/ContractEventsList.tsx b/components/ContractEventsList.tsx
@@ -17,8 +17,9 @@ import {
   InputAdornment,
   TextField,
 } from '@mui/material'
-import { ParsedEventLog, IMG_URL, useDebounce } from 'utils'
 import ContractEventListItem from './ContractEventListItem'
+import NoDataIcon from 'assets/icons/no-data.svg'
+import { ParsedEventLog, IMG_URL, useDebounce } from 'utils'
 
 export const EventFilterIcon = ({ setSearchText, tooltip, value }) => (
   <Tooltip title={tooltip} placement="top">
@@ -63,7 +64,7 @@ const ContractEventsList = ({ list }: { list: ParsedEventLog[] }) => {
     )
   }, [debouncedSetListItems, list, searchText])
 
-  return (
+  return listItems?.length ? (
     <Box sx={{ px: 1, py: 2 }}>
       <Stack direction="row" justifyContent="space-between" alignItems="center">
         <Typography fontSize={14} color="#333333" sx={{ m: 1.5 }}>
@@ -113,59 +114,68 @@ const ContractEventsList = ({ list }: { list: ParsedEventLog[] }) => {
             </TableRow>
           </TableHead>
           <TableBody>
-            {listItems?.length ? (
-              listItems?.map((item, idx) => (
-                <TableRow key={item.id + '-' + idx}>
-                  <TableCell>
-                    <Stack>
-                      <NextLink href={`/tx/${item.txHash}`} passHref>
+            {listItems?.map((item, idx) => (
+              <TableRow key={item.id + '-' + idx}>
+                <TableCell>
+                  <Stack>
+                    <NextLink href={`/tx/${item.txHash}`} passHref>
+                      <Link
+                        href={`/tx/${item.txHash}`}
+                        underline="none"
+                        color="secondary"
+                        className="mono-font"
+                        sx={{ fontSize: 14 }}
+                      >
+                        {item.txHash.slice(0, 17)}...
+                      </Link>
+                    </NextLink>
+                    <Box sx={{ display: 'flex' }}>
+                      <NextLink href={`/block/${item.blockNumber}`} passHref>
                         <Link
-                          href={`/tx/${item.txHash}`}
+                          href={`/block/${item.blockNumber}`}
                           underline="none"
                           color="primary"
                           className="mono-font"
                           sx={{ fontSize: 14 }}
                         >
-                          {item.txHash.slice(0, 17)}...
+                          # {item.blockNumber}
                         </Link>
                       </NextLink>
-                      <Box sx={{ display: 'flex' }}>
-                        <NextLink href={`/block/${item.blockNumber}`} passHref>
-                          <Link
-                            href={`/block/${item.blockNumber}`}
-                            underline="none"
-                            color="primary"
-                            sx={{ fontSize: 14 }}
-                          >
-                            # {item.blockNumber}
-                          </Link>
-                        </NextLink>
-                        <Box sx={{ pl: 0.5 }} />
-                        <EventFilterIcon
-                          setSearchText={setSearchText}
-                          tooltip={t('filterEventBy', { filter: `BlockNo=${item.blockNumber}` })}
-                          value={`${item.blockNumber}`}
-                        />
-                      </Box>
-                    </Stack>
-                  </TableCell>
-                  {/* <TableCell>{item.method}</TableCell> */}
-                  <TableCell sx={{ pr: 1 }}>
-                    <ContractEventListItem item={item} setSearchText={setSearchText} />
-                  </TableCell>
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={7} align="center">
-                  {t('no_records')}
+                      <Box sx={{ pl: 0.5 }} />
+                      <EventFilterIcon
+                        setSearchText={setSearchText}
+                        tooltip={t('filterEventBy', { filter: `BlockNo=${item.blockNumber}` })}
+                        value={`${item.blockNumber}`}
+                      />
+                    </Box>
+                  </Stack>
+                </TableCell>
+                {/* <TableCell>{item.method}</TableCell> */}
+                <TableCell sx={{ pr: 1 }}>
+                  <ContractEventListItem item={item} setSearchText={setSearchText} />
                 </TableCell>
               </TableRow>
-            )}
+            ))}
           </TableBody>
         </Table>
       </TableContainer>
     </Box>
+  ) : (
+    <Box>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '8.75rem 0',
+          color: 'var(--primary-color)',
+        }}
+      >
+        <NoDataIcon />
+        <span style={{ marginTop: '2rem', color: 'var(--primary-text-color)' }}>{t(`no_records`)}</span>
+      </div>
+    </Box>
   )
 }
 

diff --git a/components/ContractInfo/styles.module.scss b/components/ContractInfo/styles.module.scss
@@ -12,7 +12,7 @@
     font-family: Roboto;
     font-weight: 400;
     font-size: 0.875rem;
-    color: #333;
+    color: var(--primary-text-color);
     border-radius: 4px;
     border-color: #ddd;
   }
@@ -65,7 +65,7 @@
 
   .params,
   .response {
-    color: #333;
+    color: var(--primary-text-color);
     font-size: 0.875rem;
     font-weight: 500;
     margin-top: 0.5rem;
@@ -93,7 +93,7 @@
     border: 1px solid var(--border-color);
     margin: 1rem auto;
     font-size: 0.875rem;
-    color: #333;
+    color: var(--primary-text-color);
 
     summary {
       display: flex;
@@ -252,7 +252,7 @@
   padding: 1rem 0;
   font-size: 0.875rem;
   font-weight: 400;
-  color: #333;
+  color: var(--primary-text-color);
   & > div {
     flex: 1;
     display: flex;
@@ -284,7 +284,7 @@
   h6 {
     font-size: 1rem;
     font-weight: 500;
-    color: #333;
+    color: var(--primary-text-color);
     margin: 0;
   }
   .title {

diff --git a/components/ERC20TransferList/index.tsx b/components/ERC20TransferList/index.tsx
@@ -11,6 +11,7 @@ import TransferDirection from 'components/TransferDirection'
 import RoundedAmount from 'components/RoundedAmount'
 import TokenLogo from 'components/TokenLogo'
 import ChangeIcon from 'assets/icons/change.svg'
+import NoDataIcon from 'assets/icons/no-data.svg'
 import { client, timeDistance, getBlockStatus, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
@@ -234,14 +235,17 @@ const TransferList: React.FC<
             })
           ) : (
             <tr>
-              <td colSpan={showToken ? 8 : 7} className={styles.noRecords}>
-                {t(`no_records`)}
+              <td colSpan={showToken ? 8 : 7}>
+                <div className={styles.noRecords}>
+                  <NoDataIcon />
+                  <span>{t(`no_records`)}</span>
+                </div>
               </td>
             </tr>
           )}
         </tbody>
       </Table>
-      <Pagination {...token_transfers.metadata} />
+      {token_transfers.metadata.total_count ? <Pagination {...token_transfers.metadata} /> : null}
     </div>
   )
 }

diff --git a/components/ERC20TransferList/styles.module.scss b/components/ERC20TransferList/styles.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/mixin.scss';
+
 .container {
   th,
   td {
@@ -15,7 +17,7 @@
     }
   }
   .noRecords {
-    text-align: center !important;
+    @include empty-list;
   }
 }
 

diff --git a/components/FilterMenu/styles.module.scss b/components/FilterMenu/styles.module.scss
@@ -53,7 +53,7 @@
 
     input {
       width: 100%;
-      color: #333;
+      color: var(--primary-text-color);
       font-size: 0.875rem;
       font-weight: 500;
       padding: 0.75rem 0.5rem;

diff --git a/components/InfoList/styles.module.scss b/components/InfoList/styles.module.scss
@@ -40,7 +40,7 @@
     margin: 0;
     font-weight: 500;
     font-size: 1rem;
-    color: #333;
+    color: var(--primary-text-color);
     border-bottom: 1px solid var(--border-color);
   }