feat: Fredy UI redesign

* New design :)

ui/src/views/jobs/Jobs.jsx

@@ -3,12 +3,25 @@
  * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
  */
 
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@douyinfe/semi-ui-19';
+import { IconPlusCircle } from '@douyinfe/semi-icons';
 import JobGrid from '../../components/grid/jobs/JobGrid.jsx';
+import Headline from '../../components/headline/Headline.jsx';
 import './Jobs.less';
 
 export default function Jobs() {
+  const navigate = useNavigate();
   return (
     <div className="jobs">
+      <Headline
+        text="Jobs"
+        actions={
+          <Button type="primary" theme="solid" icon={<IconPlusCircle />} onClick={() => navigate('/jobs/new')}>
+            New Job
+          </Button>
+        }
+      />
       <JobGrid />
     </div>
   );

ui/src/views/jobs/Jobs.less

@@ -1,8 +1,7 @@
+@import '../../tokens.less';
+
 .jobs {
-  &__newButton {
-    margin-top: 1rem !important;
-    float: left;
-    margin-bottom: 1rem !important;
-    margin-left: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }

ui/src/views/jobs/mutation/JobMutation.jsx

@@ -18,6 +18,7 @@ import { Divider, Input, Switch, Button, TagInput, Toast, Select } from '@douyin
 import './JobMutation.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
 import {
+  IconArrowLeft,
   IconBell,
   IconBriefcase,
   IconPaperclip,
@@ -144,7 +145,19 @@ export default function JobMutator() {
         />
       )}
 
-      <Headline text={jobToBeEdit ? 'Edit Job' : 'Create new Job'} />
+      <Headline
+        text={jobToBeEdit ? 'Edit Job' : 'Create new Job'}
+        actions={
+          <Button
+            icon={<IconArrowLeft />}
+            onClick={() => navigate('/jobs')}
+            theme="borderless"
+            style={{ color: '#909090' }}
+          >
+            Back
+          </Button>
+        }
+      />
       <form>
         <SegmentPart name="Name" Icon={IconPaperclip}>
           <Input

ui/src/views/jobs/mutation/JobMutation.less

@@ -1,25 +1,36 @@
+@import '../../../tokens.less';
+
 .jobMutation {
   &__newButton {
     float: right;
-    margin-bottom: 1rem;
+    margin-bottom: @space-4;
   }
 
   &__specFilter {
     display: flex;
-    gap: 1.5rem;
+    gap: @space-4;
     flex-wrap: wrap;
   }
 
   &__specFilterItem {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: @space-2;
     flex: 1;
     min-width: 150px;
   }
 
   &__specFilterLabel {
     font-weight: 500;
+    font-size: @text-sm;
+    color: @color-muted;
+  }
+
+  &__actions {
+    display: flex;
+    gap: @space-3;
+    margin-top: @space-4;
+    justify-content: flex-end;
   }
 }