feature/IO-3499-React-19 - The great button refactor of 2026

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -77,13 +77,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
   return (
     <RbacWrapper action="bills:delete" noauth={<></>}>
       <Popconfirm disabled={bill.exported} onConfirm={handleDelete} title={t("bills.labels.deleteconfirm")}>
-        <Button
+        <Button icon={<DeleteFilled />} disabled={bill.exported} loading={loading} />
-          disabled={bill.exported}
-          // onClick={handleDelete}
-          loading={loading}
-        >
-          <DeleteFilled />
-        </Button>
       </Popconfirm>
     </RbacWrapper>
   );

client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx

@@ -32,6 +32,7 @@ export function BillFormItemsExtendedFormItem({
   if (!value)
     return (
       <Button
+        icon={<PlusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -53,9 +54,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
+      />
-        <PlusCircleFilled />
-      </Button>
     );
 
   return (
@@ -196,6 +195,7 @@ export function BillFormItemsExtendedFormItem({
       </Form.Item>
 
       <Button
+        icon={<MinusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -207,9 +207,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
+      />
-        <MinusCircleFilled />
-      </Button>
     </Space>
   );
 }

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -564,11 +564,10 @@ export function BillEnterModalLinesComponent({
             {() => (
               <Space wrap>
                 <Button
+                  icon={<DeleteFilled />}
                   disabled={disabled || getFieldValue("billlines")[record.fieldKey]?.inventories?.length > 0}
                   onClick={() => remove(record.name)}
-                >
+                />
-                  <DeleteFilled />
-                </Button>
 
                 {Simple_Inventory.treatment === "on" && (
                   <BilllineAddInventory

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -124,11 +124,11 @@ export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled
   return (
     <Tooltip title={t("inventory.actions.addtoinventory")}>
       <Button
+        icon={<FileAddFilled />}
         loading={loading}
         disabled={disabled || billline?.inventories?.length >= billline.quantity}
         onClick={addToInventory}
       >
-        <FileAddFilled />
         {billline?.inventories?.length > 0 && <div>({billline?.inventories?.length} in inv)</div>}
       </Button>
     </Tooltip>

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -84,15 +84,14 @@ export function BillsListTableComponent({
             }
           });
         }}
-      >
+        icon={<FaTasks />}
-        <FaTasks />
+      />
-      </Button>
+
       <BillDeleteButton bill={record} jobid={job.id} />
       <BillDetailEditReturnComponent
         data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
         disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
       />
-
       {record.isinhouse && (
         <PrintWrapperComponent
           templateObject={{
@@ -190,9 +189,7 @@ export function BillsListTableComponent({
       title={t("bills.labels.bills")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           {job && job.converted ? (
             <>
               <Button

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -41,9 +41,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
 
   return (
     <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
-      <Button disabled={disabled} onClick={() => setVisibility(true)}>
+      <Button disabled={disabled} onClick={() => setVisibility(true)} icon={<CalculatorFilled />} />
-        <CalculatorFilled />
-      </Button>
     </Popover>
   );
 }

client/src/components/contracts-list/contracts-list.component.jsx

@@ -156,9 +156,8 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
             </>
           )}
           <Button onClick={() => setContractFinderContext()}>{t("contracts.actions.find")}</Button>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Input.Search
             placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -255,9 +255,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       title={t("menus.header.courtesycars")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Dropdown trigger="click" menu={menu}>
             <Button>{t("general.labels.print")}</Button>
           </Dropdown>

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -85,13 +85,7 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
   };
 
   return (
-    <Card
+    <Card extra={<Button onClick={() => refetch()} icon={<SyncOutlined />} />}>
-      extra={
-        <Button onClick={() => refetch()}>
-          <SyncOutlined />
-        </Button>
-      }
-    >
       <Table
         loading={loading}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -196,9 +196,7 @@ export function DashboardGridComponent({ currentUser }) {
       <PageHeader
         extra={
           <Space>
-            <Button onClick={() => refetch()}>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
             <Dropdown menu={menu} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Form, Input, Table } from "antd";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -111,9 +111,8 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
           onClick={() => {
             socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
           }}
-        >
+          icon={<SyncOutlined />}
-          <SyncOutlined />
+        />
-        </Button>
       }
     >
       <Table

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -110,11 +110,7 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
   return (
     <Card
       title={title}
-      extra={
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />

client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -329,11 +329,7 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
   return (
     <Card
       title={title}
-      extra={
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />

client/src/components/inventory-line-delete/inventory-line-delete.component.jsx

@@ -53,9 +53,7 @@ export default function InventoryLineDelete({ inventoryline, disabled, refetch }
         onConfirm={handleDelete}
         title={t("inventory.labels.deleteconfirm")}
       >
-        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading}>
+        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading} icon={<DeleteFilled />} />
-          <DeleteFilled />
-        </Button>
       </Popconfirm>
     </RbacWrapper>
   );

client/src/components/inventory-list/inventory-list.component.jsx

@@ -110,9 +110,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 }
               });
             }}
-          >
+            icon={<EditFilled />}
-            <EditFilled />
+          />
-          </Button>
+
           <InventoryLineDelete inventoryline={record} refetch={refetch} />
         </Space>
       )
@@ -155,9 +155,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 context: {}
               });
             }}
-          >
+            icon={<FileAddFilled />}
-            <FileAddFilled />
+          />
-          </Button>
+
           <Button
             onClick={() => {
               const updatedSearch = { ...search };
@@ -172,9 +172,8 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
             {search.showall ? t("inventory.labels.showavailable") : t("inventory.labels.showall")}
           </Button>
 
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/job-at-change/schedule-event.note.component.jsx

@@ -61,9 +61,7 @@ export function ScheduleEventNote({ event }) {
         ) : (
           <Input.TextArea rows={3} value={note} onChange={(e) => setNote(e.target.value)} style={{ maxWidth: "8vw" }} />
         )}
-        <Button onClick={toggleEdit} loading={loading}>
+        <Button onClick={toggleEdit} loading={loading} icon={editing ? <SaveFilled /> : <EditFilled />} />
-          {editing ? <SaveFilled /> : <EditFilled />}
-        </Button>
       </Space>
     </DataLabel>
   );

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -159,9 +159,8 @@ export function JobAuditTrail({ bodyshop, jobId }) {
               onClick={() => {
                 refetch();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
           }
         >
           <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />

client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx

@@ -61,9 +61,12 @@ export default function JobIntakeTemplateList({ templates }) {
         renderItem={(template) => (
           <List.Item
             actions={[
-              <Button key="checkListTemplateButton" loading={loading} onClick={() => renderTemplate(template)}>
+              <Button
-                <PrinterFilled />
+                key="checkListTemplateButton"
-              </Button>
+                loading={loading}
+                onClick={() => renderTemplate(template)}
+                icon={<PrinterFilled />}
+              />
             ]}
           >
             <List.Item.Meta

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -395,9 +395,8 @@ export function JobLinesComponent({
                         context: { ...record, jobid: job.id }
                       });
                     }}
-                  >
+                    icon={<EditFilled />}
-                    <EditFilled />
+                  />
-                  </Button>
                 )}
                 <Button
                   title={t("tasks.buttons.create")}
@@ -409,9 +408,9 @@ export function JobLinesComponent({
                       }
                     });
                   }}
-                >
+                  icon={<FaTasks />}
-                  <FaTasks />
+                />
-                </Button>
+
                 {(record.manual_line || jobIsPrivate) && !technician && (
                   <Button
                     disabled={jobRO}
@@ -431,9 +430,8 @@ export function JobLinesComponent({
                       await axios.post("/job/totalsssu", { id: job.id });
                       if (refetch) refetch();
                     }}
-                  >
+                    icon={<DeleteFilled />}
-                    <DeleteFilled />
+                  />
-                  </Button>
                 )}
               </Space>
             )
@@ -542,9 +540,7 @@ export function JobLinesComponent({
         title={t("jobs.labels.estimatelines")}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch()}>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
 
             {/* Bulk Update Location */}
             <Button
@@ -609,8 +605,8 @@ export function JobLinesComponent({
 
                   setSelectedLines([]);
                 }}
+                icon={<HomeOutlined />}
               >
-                <HomeOutlined />
                 {t("parts.actions.orderinhouse")}
                 {selectedLines.length > 0 && ` (${selectedLines.length})`}
               </Button>
@@ -641,6 +637,7 @@ export function JobLinesComponent({
 
             {!isPartsEntry && (
               <Button
+                icon={<FilterFilled />}
                 id="job-lines-filter-parts-only-button"
                 onClick={() => {
                   setState((state) => ({
@@ -652,7 +649,7 @@ export function JobLinesComponent({
                   }));
                 }}
               >
-                <FilterFilled /> {t("jobs.actions.filterpartsonly")}
+                {t("jobs.actions.filterpartsonly")}
               </Button>
             )}
 

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -187,9 +187,8 @@ export function JobLineConvertToLabor({
               loading={loading}
               onClick={handleClick}
               {...otherBtnProps}
-            >
+              icon={<ClockCircleOutlined />}
-              <ClockCircleOutlined />
+            />
-            </Button>
           </Tooltip>
         </Popover>
       )}

client/src/components/job-payments/job-payments.component.jsx

@@ -107,9 +107,8 @@ export function JobPayments({ job, bodyshop, setPaymentContext, setCardPaymentCo
                 context: record
               });
             }}
-          >
+            icon={<EditFilled />}
-            <EditFilled />
+          />
-          </Button>
           <PrintWrapperComponent
             templateObject={{
               name: TemplateList("payment").payment_receipt.key,

client/src/components/job-sync-button/job-sync-button.component.jsx

@@ -11,8 +11,7 @@ export default function JobSyncButton({ job }) {
   };
   if (job?.available_jobs && job?.available_jobs?.length > 0)
     return (
-      <Button onClick={handleClick}>
+      <Button onClick={handleClick} icon={<SyncOutlined />}>
-        <SyncOutlined />
         {t("jobs.actions.sync")}
       </Button>
     );

client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx

@@ -53,10 +53,8 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus">
-      <Button shape="round">
+      <Button icon={<DownCircleFilled />} iconPlacement="end" shape="round">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );

client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

@@ -94,11 +94,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
     {
       title: t("general.labels.actions"),
       key: "actions",
-      render: (text, record) => (
+      render: (text, record) => <Button icon={<DownloadOutlined />} onClick={() => handleImport(record.filepath)} />
-        <Button onClick={() => handleImport(record.filepath)}>
-          <DownloadOutlined />
-        </Button>
-      )
     }
   ];
 
@@ -126,15 +122,14 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
       extra={
         <Space wrap>
           <Button
+            icon={<SyncOutlined />}
             loading={loading}
             disabled={!partnerVersion}
             onClick={() => {
               scanEstimates();
             }}
             id="scan-estimates-button"
-          >
+          />
-            <SyncOutlined />
-          </Button>
 
           <Input.Search
             placeholder={t("general.labels.search")}

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -135,17 +135,16 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
                   refetch();
                 });
               }}
-            >
+              icon={<DeleteFilled />}
-              <DeleteFilled />
+            />
-            </Button>
             {!isClosed && (
               <>
-                <Button onClick={() => addJobAsNew(record)} disabled={record.issupplement}>
+                <Button
-                  <PlusCircleFilled />
+                  onClick={() => addJobAsNew(record)}
-                </Button>
+                  disabled={record.issupplement}
-                <Button onClick={() => addJobAsSupp(record)}>
+                  icon={<PlusCircleFilled />}
-                  <DownloadOutlined />
+                />
-                </Button>
+                <Button onClick={() => addJobAsSupp(record)} icon={<DownloadOutlined />} />
               </>
             )}
             {isClosed && <Alert type="error" title={t("jobs.labels.alreadyclosed")}></Alert>}
@@ -175,9 +174,8 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
             onClick={() => {
               refetch();
             }}
-          >
+            icon={<SyncOutlined />}
-            <SyncOutlined />
+          />
-          </Button>
           <Button
             onClick={() => {
               deleteAllAvailableJobs()

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -96,10 +96,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail, isPar
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus" disabled={jobRO || !job.converted}>
-      <Button shape="round">
+      <Button shape="round" icon={<DownCircleFilled />} iconPlacement="end">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx

@@ -56,9 +56,8 @@ export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
                   setOpen(false);
                   setSearch("");
                 }}
-              >
+                icon={<PlusOutlined />}
-                <PlusOutlined />
+              />
-              </Button>
             )
           }
         ]}

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1286,9 +1286,8 @@ export function JobsDetailHeaderActions({
         open={dropdownOpen}
         onOpenChange={handleDropdownOpenChange}
       >
-        <Button>
+        <Button icon={<DownCircleFilled />} iconPlacement="end">
           <span>{t("general.labels.actions")}</span>
-          <DownCircleFilled />
         </Button>
       </Dropdown>
 

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -128,9 +128,7 @@ function JobsDocumentsComponent({
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setgalleryImages} />
             <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
             <JobsDocumentsDeleteButton galleryImages={galleryImages} deletionCallback={billsCallback || refetch} />

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx

@@ -65,9 +65,8 @@ function JobsDocumentsImgproxyComponent({
                 //Do the imgproxy refresh too
                 fetchThumbnails();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
             {!billId && (
               <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -102,9 +102,8 @@ export function JobsDocumentsLocalGallery({
                   }
                 }
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
               <Button>{t("documents.labels.openinexplorer")}</Button>
             </a>

client/src/components/jobs-find-modal/jobs-find-modal.component.jsx

@@ -179,9 +179,8 @@ export default function JobsFindModalComponent({
               onClick={() => {
                 jobsListRefetch();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <Input
               value={modalSearch}
               onChange={(e) => {

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -224,9 +224,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/jobs-list/jobs-list.component.jsx

@@ -313,9 +313,7 @@ export function JobsList({ bodyshop }) {
       title={t("titles.bc.jobs-active")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -121,9 +121,12 @@ export function JobNotesComponent({
       width: 200,
       render: (text, record) => (
         <Space wrap>
-          <Button loading={deleteLoading} disabled={record.audit || jobRO} onClick={() => handleNoteDelete(record.id)}>
+          <Button
-            <DeleteFilled />
+            loading={deleteLoading}
-          </Button>
+            disabled={record.audit || jobRO}
+            onClick={() => handleNoteDelete(record.id)}
+            icon={<DeleteFilled />}
+          />
           <Button
             disabled={record.audit || jobRO}
             onClick={() => {
@@ -135,9 +138,8 @@ export function JobNotesComponent({
                 }
               });
             }}
-          >
+            icon={<EditFilled />}
-            <EditFilled />
+          />
-          </Button>
           <PrintWrapperComponent
             templateObject={{
               name: Templates.individual_job_note.key,

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -297,9 +297,7 @@ export function JobsReadyList({ bodyshop }) {
       extra={
         <Space wrap>
           <span>({readyStatuses && readyStatuses.join(", ")})</span>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -246,9 +246,8 @@ export function PayrollLaborAllocationsTable({
                   setTotals(data);
                   refetch();
                 }}
-              >
+                icon={<SyncOutlined />}
-                <SyncOutlined />
+              />
-              </Button>
             </Space>
           }
         >

client/src/components/owners-list/owners-list.component.jsx

@@ -99,9 +99,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx

@@ -93,10 +93,7 @@ export function PartDispatchTableComponent({ bodyshop, job, billsQuery }) {
       title={t("parts_dispatch.labels.parts_dispatch")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
-
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}

client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx

@@ -34,9 +34,7 @@ export default function PartsOrderDeleteLine({ disabled, partsLineId, partsOrder
         });
       }}
     >
-      <Button disabled={disabled}>
+      <Button disabled={disabled} icon={<DeleteFilled />} />
-        <DeleteFilled />
-      </Button>
     </Popconfirm>
   );
 }

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -150,9 +150,8 @@ export function PartsOrderListTableDrawerComponent({
               }
             });
           }}
-        >
+          icon={<FaTasks />}
-          <FaTasks />
+        />
-        </Button>
       )}
       <Popconfirm
         title={t("parts_orders.labels.confirmdelete")}
@@ -173,9 +172,7 @@ export function PartsOrderListTableDrawerComponent({
           });
         }}
       >
-        <Button disabled={jobRO}>
+        <Button disabled={jobRO} icon={<DeleteFilled />} />
-          <DeleteFilled />
-        </Button>
       </Popconfirm>
       {!isPartsEntry && (
         <Button

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -144,6 +144,7 @@ export function PaymentsListPaginated({
       render: (text, record) => (
         <Space>
           <Button
+            icon={<EditFilled />}
             // disabled={record.exportedat}
             onClick={async () => {
               let apolloResults;
@@ -174,9 +175,7 @@ export function PaymentsListPaginated({
                 context: { ...(apolloResults ? apolloResults : record), refetchRequiresContext: true }
               });
             }}
-          >
+          />
-            <EditFilled />
-          </Button>
           <PrintWrapperComponent
             templateObject={{
               name: Templates.payment_receipt.key,
@@ -245,9 +244,7 @@ export function PaymentsListPaginated({
               <Button onClick={() => setCaBcEtfTableContext()}>{t("payments.labels.ca_bc_etf_table")}</Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/print-wrapper/print-wrapper.component.jsx

@@ -1,5 +1,5 @@
 import { MailFilled, PrinterFilled } from "@ant-design/icons";
-import { Space, Spin } from "antd";
+import { Button, Space, Spin } from "antd";
 import { useState } from "react";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
@@ -26,16 +26,18 @@ export default function PrintWrapperComponent({
     <Space>
       {children || null}
       {!emailOnly && (
-        <PrinterFilled
+        <Button
+          style={{ cursor: disabled ? "not-allowed" : null }}
+          icon={<PrinterFilled />}
           disabled={disabled}
           onClick={() => handlePrint("p")}
-          style={{ cursor: disabled ? "not-allowed" : null }}
         />
       )}
-      <MailFilled
+      <Button
+        style={{ cursor: disabled ? "not-allowed" : null }}
+        icon={<MailFilled />}
         disabled={disabled}
         onClick={() => handlePrint("e")}
-        style={{ cursor: disabled ? "not-allowed" : null }}
       />
       {loading && <Spin />}
     </Space>

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -191,9 +191,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         style={{ paddingInline: 0, paddingBlock: 0 }}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
             <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
             <ProductionBoardKanbanSettings
               parentLoading={setLoading}

client/src/components/production-list-table/production-list-table.component.jsx

@@ -251,9 +251,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
               onClick={() => {
                 refetch && refetch();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <ProductionListColumnsAdd
               columnState={[columns, setColumns]}
               tableState={state}

client/src/components/production-sublets-manage/production-sublets-manage.component.jsx

@@ -69,9 +69,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "complete");
                   }}
                   type={s.sublet_completed ? "primary" : "ghost"}
-                >
+                  icon={<CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />}
-                  <CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />
+                />,
-                </Button>,
                 <Button
                   key="sublet"
                   loading={loading}
@@ -80,9 +79,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "ignore");
                   }}
                   type={s.sublet_ignored ? "primary" : "ghost"}
-                >
+                  icon={<EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />}
-                  <EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />
+                />
-                </Button>
               ]}
             >
               <List.Item.Meta title={s.line_desc} />

client/src/components/schedule-production-list/schedule-production-list.component.jsx

@@ -61,9 +61,8 @@ export default function ScheduleProductionList() {
 
   return (
     <Popover content={content} trigger="click" placement="bottomRight">
-      <Button onClick={() => callQuery({ variables: {} })}>
+      <Button onClick={() => callQuery({ variables: {} })} icon={<DownOutlined />} iconPlacement="end">
         {t("appointments.labels.inproduction")}
-        <DownOutlined />
       </Button>
     </Popover>
   );

client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx

@@ -123,9 +123,8 @@ export default function ScoreboardJobsList() {
         <Card
           extra={
             <Space align="middle" wrap>
-              <Button onClick={() => refetch()}>
+              <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-                <SyncOutlined />
+
-              </Button>
               <Typography.Title level={4}>
                 {t("general.labels.searchresults", { search: state.search })}
               </Typography.Title>

client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx

@@ -37,9 +37,5 @@ export default function ScoreboardRemoveButton({ scoreboardId }) {
     }
     setLoading(false);
   };
-  return (
+  return <Button onClick={handleDelete} loading={loading} icon={<DeleteFilled />} />;
-    <Button onClick={handleDelete} loading={loading}>
-      <DeleteFilled />
-    </Button>
-  );
 }

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -159,9 +159,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
               }
             });
           }}
-        >
+          icon={<DeleteFilled />}
-          <DeleteFilled />
+        />
-        </Button>
       )
     }
   ];

client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx

@@ -228,9 +228,8 @@ export function SimplifiedPartsJobsListComponent({
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/task-list/task-list.component.jsx

@@ -334,11 +334,9 @@ function TaskListComponent({
           checked={deleted === "true"}
           onChange={(value) => handleSwitchChange("deleted", value)}
         />
-        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()}>
+        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()} icon={<SyncOutlined />} />
-          <SyncOutlined />
+
-        </Button>
+        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask} icon={<PlusCircleFilled />}>
-        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask}>
-          <PlusCircleFilled />
           {t("tasks.buttons.create")}
         </Button>
       </Space>

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -76,6 +76,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
           title={data.jobs_by_pk.ro_number || t("general.labels.na")}
           extra={
             <Button
+              icon={<PrinterFilled />}
               onClick={() => {
                 setPrintCenterContext({
                   actions: { refetch: refetch },
@@ -87,7 +88,6 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
                 });
               }}
             >
-              <PrinterFilled />
               {t("jobs.actions.printCenter")}
             </Button>
           }

client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx

@@ -158,9 +158,7 @@ export function TechLookupJobsList({ bodyshop }) {
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx

@@ -95,7 +95,18 @@ export default function TimeTicketCalculatorComponent({
         <Form.Item name="percent">
           <Space.Compact>
             <InputNumber min={0} max={100} precision={1} />
-            <span style={{ padding: "0 11px", backgroundColor: "#fafafa", border: "1px solid #d9d9d9", borderLeft: 0, display: "flex", alignItems: "center" }}>%</span>
+            <span
+              style={{
+                padding: "0 11px",
+                backgroundColor: "#fafafa",
+                border: "1px solid #d9d9d9",
+                borderLeft: 0,
+                display: "flex",
+                alignItems: "center"
+              }}
+            >
+              %
+            </span>
           </Space.Compact>
         </Form.Item>
         <Button htmlType="submit">Calculate</Button>
@@ -112,11 +123,8 @@ export default function TimeTicketCalculatorComponent({
       placement="right"
       destroyOnHidden
     >
-      <Button onClick={(e) => e.preventDefault()}>
+      <Button onClick={(e) => e.preventDefault()} icon={<DownOutlined />} iconPlacement="end">
-        <Space>
+        Draw Calculator
-          Draw Calculator
-          <DownOutlined />
-        </Space>
       </Button>
     </Popover>
   );

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -322,9 +322,8 @@ export function TimeTicketList({
             onClick={async () => {
               refetch();
             }}
-          >
+            icon={<SyncOutlined />}
-            <SyncOutlined />
+          />
-          </Button>
         </Space>
       }
     >

client/src/components/tt-approvals-list/tt-approvals-list.component.jsx

@@ -176,9 +176,7 @@ export function TtApprovalsListComponent({
             completedCallback={setSelectedTickets}
             refetch={refetch}
           />
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
         </Space>
       }
     >

client/src/components/vehicles-list/vehicles-list.component.jsx

@@ -91,9 +91,7 @@ export default function VehiclesListComponent({ loading, vehicles, total, refetc
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/vendors-list/vendors-list.component.jsx

@@ -73,9 +73,7 @@ export default function VendorsListComponent({ handleNewVendor, loading, handleO
       extra={
         <Space wrap>
           <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/pages/bills/bills.page.component.jsx

@@ -105,9 +105,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
       render: (text, record) => (
         <Space wrap>
           <Link to={`/manage/bills?billid=${record.id}`}>
-            <Button>
+            <Button icon={<EditFilled />} />
-              <EditFilled />
-            </Button>
           </Link>
           {
             //  <Button
@@ -204,9 +202,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
               </Button>
             </Space>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Button
             onClick={() => {
               setBillEnterContext({

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -174,9 +174,7 @@ export function ExportLogsPageComponent() {
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={searchParams.search || t("general.labels.search")}
             onSearch={(value) => {

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

@@ -271,17 +271,18 @@ export function JobsDetailPage({
   const menuExtra = (
     <Space wrap>
       <Button
+        icon={<SyncOutlined />}
         onClick={() => {
           refetch();
         }}
         key="refresh"
       >
-        <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
       <JobsChangeStatus job={job} />
       <JobSyncButton job={job} />
       <Button
+        icon={<PrinterFilled />}
         onClick={() => {
           setPrintCenterContext({
             actions: { refetch: refetch },
@@ -294,7 +295,6 @@ export function JobsDetailPage({
         }}
         key="printing"
       >
-        <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
       <JobsConvertButton job={job} refetch={refetch} parentFormIsFieldsTouched={form.isFieldsTouched} />

client/src/pages/phonebook/phonebook.page.component.jsx

@@ -159,9 +159,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
           <Button disabled={hasNoAccess} onClick={handleNewPhonebook}>
             {t("phonebook.actions.new")}
           </Button>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={searchParams.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx

@@ -94,18 +94,19 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
   const menuExtra = (
     <Space wrap>
       <Button
+        icon={<SyncOutlined />}
         onClick={() => {
           refetch();
         }}
         key="refresh"
       >
-        <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
 
       <JobsChangeStatus job={job} />
 
       <Button
+        icon={<PrinterFilled />}
         onClick={() => {
           setPrintCenterContext({
             actions: { refetch: refetch },
@@ -118,7 +119,6 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
         }}
         key="printing"
       >
-        <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
 

client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx

@@ -176,9 +176,7 @@ export function TechAssignedProdJobs({ setTimeTicketTaskContext, technician, bod
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx

@@ -104,9 +104,7 @@ export function TechDispatchedParts({ technician, bodyshop }) {
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
         </Space>
       }
     >