change empty tips (#6565)

* [draft] change empty tips

* remove useless codes

frontend/src/components/empty-tip.js

@@ -1,26 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { mediaUrl } from '../utils/constants';
+import '../css/empty-tip.css';
 
-const propTypes = {
-  forDialog: PropTypes.bool,
-  children: PropTypes.any,
-  className: PropTypes.string
-};
-
-class EmptyTip extends React.Component {
-
-  render() {
-    const { className } = this.props;
-    return (
-      <div className={this.props.forDialog ? `${className || 'text-center mt-8'}` : 'empty-tip'}>
-        <img src={`${mediaUrl}img/no-items-tip.png`} alt="" width="100" height="100" className="no-items-img-tip" />
-        {this.props.children}
-      </div>
-    );
-  }
+function EmptyTip({ forDialog, className, title, text, children }) {
+  return (
+    <div className={forDialog ? `${className || 'text-center mt-8'}` : 'empty-tip'}>
+      <img src={`${mediaUrl}img/no-items-tip.png`} alt="" width="100" height="100" className="no-items-img-tip" />
+      {title && <span className="empty-tip-title">{title}</span>}
+      {text && <span className="empty-tip-text">{text}</span>}
+      {children}
+    </div>
+  );
 }
 
-EmptyTip.propTypes = propTypes;
+EmptyTip.propTypes = {
+  forDialog: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  children: PropTypes.any,
+};
 
 export default EmptyTip;