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/views/login/Login.jsx

@@ -5,7 +5,7 @@ import Logo from '../../components/logo/Logo';
 import { xhrPost } from '../../services/xhr';
 import { useHistory } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
-import { Input, Button, Banner } from '@douyinfe/semi-ui';
+import { Input, Button, Banner, Toast } from '@douyinfe/semi-ui';
 
 import './login.less';
 import { IconUser, IconLock } from '@douyinfe/semi-icons';
@@ -27,20 +27,24 @@ export default function Login() {
   }, []);
 
   const tryLogin = async () => {
-    if (username.length === 0 || password.length === 0) {
+    if (!username?.trim() || !password) {
       setError('Username and password are mandatory.');
       return;
     }
+    setError(null);
+
     try {
       await xhrPost('/api/login', {
-        username,
+        username: username.trim(),
         password,
       });
-      setError(null);
     } catch (Exception) {
-      setError('Login not successful...');
+      Toast.error('Login unsuccessful…');
       return;
     }
+
+    Toast.success('Login successful!');
+
     await dispatch.user.getCurrentUser();
     history.push('/jobs');
   };
@@ -58,7 +62,6 @@ export default function Login() {
             placeholder="Username"
             value={username}
             showClear
-            style={{ marginTop: error ? '1rem' : '4rem' }}
             autoFocus
             onChange={(value) => setUserName(value)}
             onKeyPress={async (e) => {
@@ -74,7 +77,6 @@ export default function Login() {
             prefix={<IconLock />}
             value={password}
             placeholder="Password"
-            style={{ marginTop: '2rem' }}
             onChange={(value) => setPassword(value)}
             onKeyPress={async (e) => {
               if (e.key === 'Enter') {
@@ -83,10 +85,10 @@ export default function Login() {
             }}
           />
 
-          <Button type="primary" onClick={tryLogin} theme="solid" style={{ marginTop: '3rem' }}>
+          <Button type="primary" onClick={tryLogin} theme="solid" style={{ marginTop: '1rem' }}>
             Login
           </Button>
-          <br />
+
           {demoMode && (
             <Banner
               fullMode={true}