Fix more button. Added NoData component.

components/common/NoData.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import styles from './NoData.module.css';
+
+export default function NoData({ className }) {
+  return (
+    <div className={classNames(styles.container, className)}>
+      <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+    </div>
+  );
+}

components/common/NoData.module.css

@@ -0,0 +1,7 @@
+.container {
+  color: var(--gray500);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

components/common/Table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import NoData from 'components/common/NoData';
 import styles from './Table.module.css';
-import { FormattedMessage } from 'react-intl';
 
 export default function Table({ columns, rows, empty }) {
   if (empty && rows.length === 0) {
@@ -22,11 +22,7 @@ export default function Table({ columns, rows, empty }) {
         ))}
       </div>
       <div className={styles.body}>
-        {rows.length === 0 && (
-          <div className={styles.empty}>
-            <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
-          </div>
-        )}
+        {rows.length === 0 && <NoData />}
         {rows.map((row, rowIndex) => (
           <div className={classNames(styles.row, 'row')} key={rowIndex}>
             {columns.map(({ key, render, className, style, cell }) => (

components/common/Table.module.css

@@ -19,14 +19,6 @@
   flex-direction: column;
 }
 
-.empty {
-  color: var(--gray500);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .row {
   border-bottom: 1px solid var(--gray300);
   padding: 10px 0;