Further UI Improvements

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -6,7 +6,15 @@ import Icon, {
   PrinterFilled,
   ToolFilled,
 } from "@ant-design/icons";
-import { Button, Form, notification, PageHeader, Space, Tabs } from "antd";
+import {
+  Button,
+  Divider,
+  Form,
+  notification,
+  PageHeader,
+  Space,
+  Tabs,
+} from "antd";
 import Axios from "axios";
 import moment from "moment";
 import queryString from "query-string";
@@ -148,13 +156,15 @@ export function JobsDetailPage({
           extra={menuExtra}
         />
         <JobsDetailHeader job={job} />
-
+        <Divider type="horizontal" />
         <FormFieldsChanged form={form} />
         <Tabs
           defaultActiveKey={search.tab}
           onChange={(key) => history.push({ search: `?tab=${key}` })}
+          tabBarStyle={{ fontWeight: "bold", borderBottom: "10px" }}
         >
           <Tabs.TabPane
+            forceRender
             tab={
               <span>
                 <Icon component={FaShieldAlt} />
@@ -166,6 +176,7 @@ export function JobsDetailPage({
             <JobsDetailGeneral job={job} form={form} />
           </Tabs.TabPane>
           <Tabs.TabPane
+            forceRender
             tab={
               <span>
                 <BarsOutlined />
@@ -182,6 +193,7 @@ export function JobsDetailPage({
             />
           </Tabs.TabPane>
           <Tabs.TabPane
+            forceRender
             tab={
               <span>
                 <DollarCircleOutlined />
@@ -226,6 +238,7 @@ export function JobsDetailPage({
             <JobsDetailLaborContainer jobId={job.id} />
           </Tabs.TabPane>
           <Tabs.TabPane
+            forceRender
             tab={
               <span>
                 <CalendarFilled />