improving processing times label and hide when screen width is too low

ui/src/views/jobs/ProcessingTimes.jsx

@@ -1,16 +1,32 @@
 import React from 'react';
 import { format } from '../../services/time/timeService';
 import { Button, Card, Col, Row, Toast } from '@douyinfe/semi-ui';
-import { IconPlayCircle } from '@douyinfe/semi-icons';
+import {
+  IconClock,
+  IconDoubleChevronLeft,
+  IconDoubleChevronRight,
+  IconPlayCircle,
+  IconSearch,
+} from '@douyinfe/semi-icons';
 import { xhrPost } from '../../services/xhr.js';
 
 import './ProsessingTimes.less';
+import { useScreenWidth } from '../../hooks/screenWidth.js';
 
-function InfoCard({ title, value }) {
+function InfoCard({ title, value, icon }) {
+  const { Meta } = Card;
   return (
-    <Card style={{ maxWidth: '13rem', margin: '1rem', background: 'rgb(53, 54, 60)' }} title={title}>
+    <div
-      {value}
+      style={{
-    </Card>
+        margin: '1rem',
+        background: 'rgb(53, 54, 60)',
+        borderRadius: '.3rem',
+        padding: '1rem',
+        minHeight: '3rem',
+      }}
+    >
+      <Meta title={title} description={value} avatar={icon} />
+    </div>
   );
 }
 
@@ -18,24 +34,44 @@ export default function ProcessingTimes({ processingTimes = {} }) {
   if (Object.keys(processingTimes).length === 0) {
     return null;
   }
+  const width = useScreenWidth();
+  const invisible = width <= 1180;
+
+  if (invisible) {
+    return null;
+  }
+
   return (
     <Row>
       <Col span={6}>
-        <InfoCard title="Processing Interval" value={`${processingTimes.interval} min`} />
+        <InfoCard
+          title="Search Interval"
+          value={`${processingTimes.interval} min`}
+          icon={<IconClock style={{ color: 'rgba(var(--semi-grey-4), 1)' }} />}
+        />
       </Col>
       {processingTimes.lastRun && (
         <>
           <Col span={6}>
-            <InfoCard title="Last run" value={format(processingTimes.lastRun)} />
+            <InfoCard
+              title="Last search"
+              icon={<IconDoubleChevronLeft style={{ color: 'rgba(var(--semi-grey-4), 1)' }} />}
+              value={format(processingTimes.lastRun)}
+            />
           </Col>
           <Col span={6}>
-            <InfoCard title="Next run" value={format(processingTimes.lastRun + processingTimes.interval * 60000)} />
+            <InfoCard
+              title="Next search"
+              icon={<IconDoubleChevronRight style={{ color: 'rgba(var(--semi-grey-4), 1)' }} />}
+              value={format(processingTimes.lastRun + processingTimes.interval * 60000)}
+            />
           </Col>
         </>
       )}
       <Col span={6}>
         <InfoCard
-          title="Find Listings Now"
+          title="Search Now"
+          icon={<IconSearch style={{ color: 'rgba(var(--semi-grey-4), 1)' }} />}
           value={
             <Button
               size="small"