Styling updates.

src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx

@@ -5,6 +5,7 @@ import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.atom";
 import CloseDateDisplayMolecule from "../close-date-display/close-date-display.molecule";
 import JobGroupMolecule from "../job-group/job-group.molecule";
+import DeleteJobAtom from "../../atoms/delete-job/delete-job.atom";
 
 export default function JobsDetailDescriptionMolecule({ loading, job }) {
   if (loading) return <Skeleton active />;
@@ -13,7 +14,12 @@ export default function JobsDetailDescriptionMolecule({ loading, job }) {
 
   return (
     <div>
-      <PageHeader ghost={false} title={job.clm_no} subTitle={job.ins_co_nm}>
+      <PageHeader
+        ghost={false}
+        title={job.clm_no}
+        subTitle={job.ins_co_nm}
+        extra={[<DeleteJobAtom jobId={job.id} />]}
+      >
         <Descriptions column={{ xxl: 5, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}>
           <Descriptions.Item label="Owner">{`${job.ownr_fn} ${job.ownr_ln}`}</Descriptions.Item>
           <Descriptions.Item label="Vehicle">{`${job.v_model_yr} ${job.v_makedesc} ${job.v_model} (${job.v_type})`}</Descriptions.Item>

src/components/molecules/jobs-lines-table/jobs-lines-table.molecule.jsx

@@ -1,3 +1,4 @@
+import { CalculatorOutlined } from "@ant-design/icons";
 import { Input, Table } from "antd";
 import React, { useState } from "react";
 import ipcTypes from "../../../ipc.types";
@@ -6,7 +7,6 @@ import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-forma
 import IgnoreJobLine from "../../atoms/ignore-job-line/ignore-job-line.atom";
 import partTypeConverterAtom from "../../atoms/part-type-converter/part-type-converter.atom";
 import PriceDiffPcFormatterAtom from "../../atoms/price-diff-pc-formatter/price-diff-pc-formatter.atom";
-import { CalculatorOutlined } from "@ant-design/icons";
 const { ipcRenderer } = window;
 
 export default function JobLinesTableMolecule({ loading, job }) {
@@ -130,21 +130,19 @@ export default function JobLinesTableMolecule({ loading, job }) {
 
   return (
     <div>
+      <Input.Search
+        placeholder="Search"
+        onSearch={(val) => {
+          ipcRenderer.send(ipcTypes.default.app.toMain.track, {
+            event: "JOB_LINES_SEARCH",
+            query: val,
+          });
+          setSearchText(val);
+        }}
+        enterButton
+        allowClear
+      />
       <Table
-        title={() => (
-          <Input.Search
-            placeholder="Search"
-            onSearch={(val) => {
-              ipcRenderer.send(ipcTypes.default.app.toMain.track, {
-                event: "JOB_LINES_SEARCH",
-                query: val,
-              });
-              setSearchText(val);
-            }}
-            enterButton
-            allowClear
-          />
-        )}
         columns={columns}
         rowKey="id"
         loading={loading}

src/components/molecules/jobs-list-item/jobs-list-item.styles.scss

@@ -1,22 +1,21 @@
-
 .jobs-list-item {
-    padding: 0;
-    margin: 0;
-  
-    .jobs-list-item-content {
-      &-selected {
-        border-left: 3px solid #1890ff;
-      }
-  
-      display: inline;
-      margin: 0.5rem;
-      padding: 0.5rem;
-      width: 100%;
-    }
-  
-    cursor: pointer;
-    &:hover {
-      background-color: #e6f7ff;
+  padding: 0.1rem !important;
+  margin: 0;
+  border-bottom: 0.8rem solid #f0f0f0 !important;
+
+  .jobs-list-item-content {
+    &-selected {
+      border-left: 3px solid #1890ff;
     }
+
+    display: inline;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    width: 100%;
   }
-  
+
+  cursor: pointer;
+  &:hover {
+    background-color: #e6f7ff;
+  }
+}