Mobile view and wording (#151)

* feat(ui): simplified titles and adjusted some wording

* style(ui): simplified some views for mobile

* style(ui): make job table responsive for mobile

* style(ui): login button gap

* style(ui): dont hide mobile columns

* fix: method return type

ui/src/components/menu/Menu.jsx

@@ -4,6 +4,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
 import { useLocation } from 'react-router';
 import { IconUser, IconTerminal, IconSetting } from '@douyinfe/semi-icons';
+import './Menu.less';
 
 function parsePathName(name) {
   const split = name.split('/').filter((s) => s.length !== 0);
@@ -14,7 +15,12 @@ const TopMenu = function TopMenu({ isAdmin }) {
   const history = useHistory();
   const location = useLocation();
   return (
-    <Tabs type="line" activeKey={parsePathName(location.pathname)} onTabClick={(key) => history.push(key)}>
+    <Tabs
+      className="menu"
+      type="line"
+      activeKey={parsePathName(location.pathname)}
+      onTabClick={(key) => history.push(key)}
+    >
       <TabPane
         itemKey="/jobs"
         tab={

ui/src/components/menu/Menu.less

@@ -0,0 +1,3 @@
+.menu {
+  margin-top: 3rem;
+}

ui/src/components/table/JobTable.jsx

@@ -3,11 +3,14 @@ import React from 'react';
 import { Button, Empty, Table, Switch } from '@douyinfe/semi-ui';
 import { IconDelete, IconEdit, IconHistogram } from '@douyinfe/semi-icons';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
+
+import './JobTable.less';
+
 const empty = (
   <Empty
     image={<IllustrationNoResult />}
     darkModeImage={<IllustrationNoResultDark />}
-    description={'No jobs available'}
+    description={'No jobs available.'}
   />
 );
 
@@ -25,25 +28,25 @@ export default function JobTable({ jobs = {}, onJobRemoval, onJobStatusChanged,
           },
         },
         {
-          title: 'Job Name',
+          title: 'Name',
           dataIndex: 'name',
         },
         {
-          title: 'Number of findings',
+          title: 'Findings',
           dataIndex: 'numberOfFoundListings',
           render: (value) => {
             return value || 0;
           },
         },
         {
-          title: 'Active provider',
+          title: 'Providers',
           dataIndex: 'provider',
           render: (value) => {
             return value.length || 0;
           },
         },
         {
-          title: 'Active notification adapter',
+          title: 'Notification adapters',
           dataIndex: 'notificationAdapter',
           render: (value) => {
             return value.length || 0;
@@ -54,19 +57,9 @@ export default function JobTable({ jobs = {}, onJobRemoval, onJobStatusChanged,
           dataIndex: 'tools',
           render: (_, job) => {
             return (
-              <div style={{ float: 'right' }}>
-                <Button
-                  type="primary"
-                  icon={<IconHistogram />}
-                  onClick={() => onJobInsight(job.id)}
-                  style={{ marginRight: '1rem' }}
-                />
-                <Button
-                  type="secondary"
-                  icon={<IconEdit />}
-                  onClick={() => onJobEdit(job.id)}
-                  style={{ marginRight: '1rem' }}
-                />
+              <div className="interactions">
+                <Button type="primary" icon={<IconHistogram />} onClick={() => onJobInsight(job.id)} />
+                <Button type="secondary" icon={<IconEdit />} onClick={() => onJobEdit(job.id)} />
                 <Button type="danger" icon={<IconDelete />} onClick={() => onJobRemoval(job.id)} />
               </div>
             );

ui/src/components/table/JobTable.less

@@ -0,0 +1,12 @@
+.interactions {
+  float: right;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .interactions {
+    flex-direction: initial;
+  }
+}

ui/src/components/table/NotificationAdapterTable.jsx

@@ -7,10 +7,10 @@ export default function NotificationAdapterTable({ notificationAdapter = [], onR
   return (
     <Table
       pagination={false}
-      empty={<Empty description="No Data" />}
+      empty={<Empty description="No notification adapters found." />}
       columns={[
         {
-          title: 'Notification Adapter Name',
+          title: 'Name',
           dataIndex: 'name',
         },
 

ui/src/components/table/ProviderTable.jsx

@@ -7,14 +7,14 @@ export default function ProviderTable({ providerData = [], onRemove } = {}) {
   return (
     <Table
       pagination={false}
-      empty={<Empty description="No Provider available" />}
+      empty={<Empty description="No providers found." />}
       columns={[
         {
-          title: 'Provider Name',
+          title: 'Name',
           dataIndex: 'name',
         },
         {
-          title: 'Provider Url',
+          title: 'URL',
           dataIndex: 'url',
           render: (_, data) => {
             return (

ui/src/components/table/UserTable.jsx

@@ -9,7 +9,7 @@ const empty = (
   <Empty
     image={<IllustrationNoResult />}
     darkModeImage={<IllustrationNoResultDark />}
-    description={'No user available'}
+    description={'No users found.'}
   />
 );