Merged in feature/IO-3499-React-19 (pull request #2883)

Feature/IO-3499 React 19
2026-01-24 01:48:11 +00:00
parent 5ad13e1060 9a93a43642
commit f6637dcae8
86 changed files with 402 additions and 427 deletions
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -3,11 +3,10 @@ import * as Sentry from "@sentry/react";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
-import { connect, useSelector } from "react-redux";
-import { createStructuredSelector } from "reselect";
+import { useDispatch, useSelector } from "react-redux";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import { setDarkMode } from "../redux/application/application.actions";
 import { selectDarkMode } from "../redux/application/application.selectors";
@@ -28,93 +27,99 @@ const config = {
 function SplitClientProvider({ children }) {
  const imexshopid = useSelector((state) => state.user.imexshopid);
  const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
  useEffect(() => {
-    if (splitClient && imexshopid) {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
    }
  }, [splitClient, imexshopid]);
+
  return children;
 }

-const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)),
-  signOutStart: () => dispatch(signOutStart())
-});
-
-function AppContainer({ currentUser, setDarkMode, signOutStart }) {
+function AppContainer() {
  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
  const isDarkMode = useSelector(selectDarkMode);
-  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
+
+  const theme = () => getTheme(isDarkMode);
+
+  const antdInput = () => ({ autoComplete: "new-password" });
+
+  const antdForm = () => ({
+    validateMessages: {
+      required: t("general.validation.required", { label: "${label}" })
+    }
+  });

  // Global seamless logout listener with redirect to /signin
  useEffect(() => {
    const handleSeamlessLogout = (event) => {
      if (event.data?.type !== "seamlessLogoutRequest") return;

-      const requestOrigin = event.origin;
+      // Only accept messages from the parent window
+      if (event.source !== window.parent) return;
+
+      const targetOrigin = event.origin || "*";

      if (currentUser?.authorized !== true) {
-        window.parent.postMessage(
-          { type: "seamlessLogoutResponse", status: "already_logged_out" },
-          requestOrigin || "*"
-        );
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
        return;
      }

-      signOutStart();
-      window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*");
+      dispatch(signOutStart());
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
    };

    window.addEventListener("message", handleSeamlessLogout);
    return () => {
      window.removeEventListener("message", handleSeamlessLogout);
    };
-  }, [signOutStart, currentUser]);
+  }, [dispatch, currentUser?.authorized]);

-  // Update data-theme attribute
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
  useEffect(() => {
-    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
-    return () => document.documentElement.removeAttribute("data-theme");
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
  }, [isDarkMode]);

  // Sync darkMode with localStorage
  useEffect(() => {
-    if (currentUser?.uid) {
-      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
-      if (savedMode !== null) {
-        setDarkMode(JSON.parse(savedMode));
-      } else {
-        setDarkMode(false);
-      }
-    } else {
-      setDarkMode(false);
+    const uid = currentUser?.uid;
+
+    if (!uid) {
+      dispatch(setDarkMode(false));
+      return;
    }
-  }, [currentUser?.uid, setDarkMode]);
+
+    const key = `dark-mode-${uid}`;
+    const raw = localStorage.getItem(key);
+
+    if (raw == null) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    try {
+      dispatch(setDarkMode(Boolean(JSON.parse(raw))));
+    } catch {
+      dispatch(setDarkMode(false));
+    }
+  }, [currentUser?.uid, dispatch]);

  // Persist darkMode
  useEffect(() => {
-    if (currentUser?.uid) {
-      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
-    }
+    const uid = currentUser?.uid;
+    if (!uid) return;
+
+    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
  }, [isDarkMode, currentUser?.uid]);

  return (
    <CookiesProvider>
      <ApolloProvider client={client}>
-        <ConfigProvider
-          input={{ autoComplete: "new-password" }}
-          locale={enLocale}
-          theme={theme}
-          form={{
-            validateMessages: {
-              required: t("general.validation.required", { label: "${label}" })
-            }
-          }}
-        >
+        <ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
          <GlobalLoadingBar />
          <SplitFactoryProvider config={config}>
            <SplitClientProvider>
@@ -127,4 +132,4 @@ function AppContainer({ currentUser, setDarkMode, signOutStart }) {
  );
 }

-export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));
+export default Sentry.withProfiler(AppContainer);
--- a/client/src/components/bill-delete-button/bill-delete-button.component.jsx
+++ b/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
-          disabled={bill.exported}
-          // onClick={handleDelete}
-          loading={loading}
-        >
-          <DeleteFilled />
-        </Button>
+        <Button icon={<DeleteFilled />} disabled={bill.exported} loading={loading} />
      </Popconfirm>
    </RbacWrapper>
  );
--- a/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
+++ b/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>
  );
 }
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/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
--- a/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
+++ b/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>
--- a/client/src/components/bills-list-table/bills-list-table.component.jsx
+++ b/client/src/components/bills-list-table/bills-list-table.component.jsx
@@ -84,15 +84,14 @@ export function BillsListTableComponent({
            }
          });
        }}
-      >
-        <FaTasks />
-      </Button>
+        icon={<FaTasks />}
+      />
+
      <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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          {job && job.converted ? (
            <>
              <Button
--- a/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
+++ b/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)}>
-        <CalculatorFilled />
-      </Button>
+      <Button disabled={disabled} onClick={() => setVisibility(true)} icon={<CalculatorFilled />} />
    </Popover>
  );
 }
--- a/client/src/components/chat-affix/chat-affix.container.jsx
+++ b/client/src/components/chat-affix/chat-affix.container.jsx
@@ -12,11 +12,16 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
  const client = useApolloClient();
  const { socket } = useSocket();

-  // 1) FCM subscription (independent of socket handler registration)
-  useEffect(() => {
-    if (!bodyshop?.messagingservicesid) return;
+  const messagingServicesId = bodyshop?.messagingservicesid;
+  const bodyshopId = bodyshop?.id;
+  const imexshopid = bodyshop?.imexshopid;

-    async function subscribeToTopicForFCMNotification() {
+  const messagingEnabled = Boolean(messagingServicesId);
+
+  useEffect(() => {
+    if (!messagingEnabled) return;
+
+    (async () => {
      try {
        await requestForToken();
        await axios.post("/notifications/subscribe", {
@@ -24,23 +29,19 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
            vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
          }),
          type: "messaging",
-          imexshopid: bodyshop.imexshopid
+          imexshopid
        });
      } catch (error) {
        console.log("Error attempting to subscribe to messaging topic: ", error);
      }
-    }
+    })();
+  }, [messagingEnabled, imexshopid]);

-    subscribeToTopicForFCMNotification();
-  }, [bodyshop?.messagingservicesid, bodyshop?.imexshopid]);
-
-  // 2) Register socket handlers as soon as socket is connected (regardless of chatVisible)
  useEffect(() => {
    if (!socket) return;
-    if (!bodyshop?.messagingservicesid) return;
-    if (!bodyshop?.id) return;
+    if (!messagingEnabled) return;
+    if (!bodyshopId) return;

-    // If socket isn't connected yet, ensure no stale handlers remain.
    if (!socket.connected) {
      unregisterMessagingHandlers({ socket });
      return;
@@ -56,16 +57,14 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
      bodyshop
    });

-    return () => {
-      unregisterMessagingHandlers({ socket });
-    };
-  }, [socket, socket?.connected, bodyshop?.id, bodyshop?.messagingservicesid, client, currentUser?.email]);
+    return () => unregisterMessagingHandlers({ socket });
+  }, [socket, messagingEnabled, bodyshopId, client, currentUser?.email, bodyshop]);

-  if (!bodyshop?.messagingservicesid) return <></>;
+  if (!messagingEnabled) return null;

  return (
    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop?.messagingservicesid ? <ChatPopupComponent /> : null}
+      {messagingEnabled ? <ChatPopupComponent /> : null}
    </div>
  );
 }
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
@@ -128,7 +128,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
        onClick={() => setSelectedConversation(item.id)}
        className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
      >
-        <Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
+        <Card style={getCardStyle()} variant="outlined" size="small" extra={cardExtra} title={cardTitle}>
          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
        </Card>
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -1,22 +1,23 @@
+import { Button } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { openChatByPhone } from "../../redux/messaging/messaging.actions";
-import PhoneNumberFormatter from "../../utils/PhoneFormatter";
-
 import { createStructuredSelector } from "reselect";
+import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
-  searchingForConversation: searchingForConversation
+  searchingForConversation
 });

 const mapDispatchToProps = (dispatch) => ({
-  openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
+  openChatByPhone: (payload) => dispatch(openChatByPhone(payload))
 });

 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type, jobid, openChatByPhone }) {
@@ -24,31 +25,59 @@ export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type
  const { socket } = useSocket();
  const notification = useNotification();

-  if (!phone) return <></>;
+  if (!phone) return null;

-  if (!bodyshop.messagingservicesid) {
-    return <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
-  }
+  const messagingEnabled = Boolean(bodyshop?.messagingservicesid);

+  const parsed = useMemo(() => {
+    if (!messagingEnabled) return null;
+    try {
+      return parsePhoneNumber(phone, "CA") || null;
+    } catch {
+      return null;
+    }
+  }, [messagingEnabled, phone]);
+
+  const isValid = Boolean(parsed?.isValid?.() && parsed.isValid());
+  const clickable = messagingEnabled && !searchingForConversation && isValid;
+
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!messagingEnabled) return;
+      if (searchingForConversation) return;
+
+      if (!isValid) {
+        notification.error({ title: t("messaging.error.invalidphone") });
+        return;
+      }
+
+      openChatByPhone({
+        phone_num: parsed.formatInternational(),
+        jobid,
+        socket
+      });
+    },
+    [messagingEnabled, searchingForConversation, isValid, parsed, jobid, socket, openChatByPhone, notification, t]
+  );
+
+  const content = <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
+
+  // If not clickable, render plain formatted text (no link styling)
+  if (!clickable) return content;
+
+  // Clickable: render as a link-styled button (best for a “command”)
  return (
-    <a
-      href="# "
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (searchingForConversation) return; // Prevent finding the same thing twice.
-
-        const p = parsePhoneNumber(phone, "CA");
-        if (p && p.isValid()) {
-          openChatByPhone({ phone_num: p.formatInternational(), jobid, socket });
-        } else {
-          notification.error({ title: t("messaging.error.invalidphone") });
-        }
-      }}
+    <Button
+      type="link"
+      onClick={onClick}
+      className="chat-open-button-link"
+      aria-label={t("messaging.actions.openchat") || "Open chat"}
    >
-      <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>
-    </a>
+      {content}
+    </Button>
  );
 }

--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
          <Input.Search
            placeholder={search.searh || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
          <Dropdown trigger="click" menu={menu}>
            <Button>{t("general.labels.print")}</Button>
          </Dropdown>
--- a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
+++ b/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
-      extra={
-        <Button onClick={() => refetch()}>
-          <SyncOutlined />
-        </Button>
-      }
-    >
+    <Card extra={<Button onClick={() => refetch()} icon={<SyncOutlined />} />}>
      <Table
        loading={loading}
        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}
--- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx
+++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
@@ -196,9 +196,7 @@ export function DashboardGridComponent({ currentUser }) {
      <PageHeader
        extra={
          <Space>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
            <Dropdown menu={menu} trigger={["click"]}>
              <Button>{t("dashboard.actions.addcomponent")}</Button>
            </Dropdown>
--- a/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
+++ b/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));
          }}
-        >
-          <SyncOutlined />
-        </Button>
+          icon={<SyncOutlined />}
+        />
      }
    >
      <Table
--- a/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
+++ b/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={
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
    >
      {bodyshop.pbs_configuration?.disablebillwip && (
        <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
--- a/client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx
+++ b/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={
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
    >
      {bodyshop.pbs_configuration?.disablebillwip && (
        <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
--- a/client/src/components/inventory-line-delete/inventory-line-delete.component.jsx
+++ b/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}>
-          <DeleteFilled />
-        </Button>
+        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading} icon={<DeleteFilled />} />
      </Popconfirm>
    </RbacWrapper>
  );
--- a/client/src/components/inventory-list/inventory-list.component.jsx
+++ b/client/src/components/inventory-list/inventory-list.component.jsx
@@ -110,9 +110,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                }
              });
            }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
+
          <InventoryLineDelete inventoryline={record} refetch={refetch} />
        </Space>
      )
@@ -155,9 +155,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                context: {}
              });
            }}
-          >
-            <FileAddFilled />
-          </Button>
+            icon={<FileAddFilled />}
+          />
+
          <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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
          <Input.Search
            placeholder={search.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/components/job-at-change/schedule-event.note.component.jsx
+++ b/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}>
-          {editing ? <SaveFilled /> : <EditFilled />}
-        </Button>
+        <Button onClick={toggleEdit} loading={loading} icon={editing ? <SaveFilled /> : <EditFilled />} />
      </Space>
    </DataLabel>
  );
--- a/client/src/components/job-audit-trail/job-audit-trail.component.jsx
+++ b/client/src/components/job-audit-trail/job-audit-trail.component.jsx
@@ -159,9 +159,8 @@ export function JobAuditTrail({ bodyshop, jobId }) {
              onClick={() => {
                refetch();
              }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
          }
        >
          <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />
--- a/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
+++ b/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)}>
-                <PrinterFilled />
-              </Button>
+              <Button
+                key="checkListTemplateButton"
+                loading={loading}
+                onClick={() => renderTemplate(template)}
+                icon={<PrinterFilled />}
+              />
            ]}
          >
            <List.Item.Meta
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -395,9 +395,8 @@ export function JobLinesComponent({
                        context: { ...record, jobid: job.id }
                      });
                    }}
-                  >
-                    <EditFilled />
-                  </Button>
+                    icon={<EditFilled />}
+                  />
                )}
                <Button
                  title={t("tasks.buttons.create")}
@@ -409,9 +408,9 @@ export function JobLinesComponent({
                      }
                    });
                  }}
-                >
-                  <FaTasks />
-                </Button>
+                  icon={<FaTasks />}
+                />
+
                {(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();
                    }}
-                  >
-                    <DeleteFilled />
-                  </Button>
+                    icon={<DeleteFilled />}
+                  />
                )}
              </Space>
            )
@@ -542,9 +540,7 @@ export function JobLinesComponent({
        title={t("jobs.labels.estimatelines")}
        extra={
          <Space wrap>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />

            {/* 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>
            )}

--- a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
+++ b/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}
-            >
-              <ClockCircleOutlined />
-            </Button>
+              icon={<ClockCircleOutlined />}
+            />
          </Tooltip>
        </Popover>
      )}
--- a/client/src/components/job-payments/job-payments.component.jsx
+++ b/client/src/components/job-payments/job-payments.component.jsx
@@ -107,9 +107,8 @@ export function JobPayments({ job, bodyshop, setPaymentContext, setCardPaymentCo
                context: record
              });
            }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
          <PrintWrapperComponent
            templateObject={{
              name: TemplateList("payment").payment_receipt.key,
--- a/client/src/components/job-sync-button/job-sync-button.component.jsx
+++ b/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}>
-        <SyncOutlined />
+      <Button onClick={handleClick} icon={<SyncOutlined />}>
        {t("jobs.actions.sync")}
      </Button>
    );
--- a/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
+++ b/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>
  );
--- a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
+++ b/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) => (
-        <Button onClick={() => handleImport(record.filepath)}>
-          <DownloadOutlined />
-        </Button>
-      )
+      render: (text, record) => <Button icon={<DownloadOutlined />} onClick={() => handleImport(record.filepath)} />
    }
  ];

@@ -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")}
--- a/client/src/components/jobs-available-table/jobs-available-table.component.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.component.jsx
@@ -135,17 +135,16 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
                  refetch();
                });
              }}
-            >
-              <DeleteFilled />
-            </Button>
+              icon={<DeleteFilled />}
+            />
            {!isClosed && (
              <>
-                <Button onClick={() => addJobAsNew(record)} disabled={record.issupplement}>
-                  <PlusCircleFilled />
-                </Button>
-                <Button onClick={() => addJobAsSupp(record)}>
-                  <DownloadOutlined />
-                </Button>
+                <Button
+                  onClick={() => addJobAsNew(record)}
+                  disabled={record.issupplement}
+                  icon={<PlusCircleFilled />}
+                />
+                <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();
            }}
-          >
-            <SyncOutlined />
-          </Button>
+            icon={<SyncOutlined />}
+          />
          <Button
            onClick={() => {
              deleteAllAvailableJobs()
--- a/client/src/components/jobs-change-status/jobs-change-status.component.jsx
+++ b/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>
  );
--- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx
+++ b/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("");
                }}
-              >
-                <PlusOutlined />
-              </Button>
+                icon={<PlusOutlined />}
+              />
            )
          }
        ]}
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/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>

--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/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()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
            <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setgalleryImages} />
            <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
            <JobsDocumentsDeleteButton galleryImages={galleryImages} deletionCallback={billsCallback || refetch} />
--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
+++ b/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();
              }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
            <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
            {!billId && (
              <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
@@ -102,9 +102,8 @@ export function JobsDocumentsLocalGallery({
                  }
                }
              }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
            <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
              <Button>{t("documents.labels.openinexplorer")}</Button>
            </a>
--- a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
@@ -179,9 +179,8 @@ export default function JobsFindModalComponent({
              onClick={() => {
                jobsListRefetch();
              }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
            <Input
              value={modalSearch}
              onChange={(e) => {
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={search.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={t("general.labels.search")}
            onChange={(e) => {
--- a/client/src/components/jobs-notes/jobs.notes.component.jsx
+++ b/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)}>
-            <DeleteFilled />
-          </Button>
+          <Button
+            loading={deleteLoading}
+            disabled={record.audit || jobRO}
+            onClick={() => handleNoteDelete(record.id)}
+            icon={<DeleteFilled />}
+          />
          <Button
            disabled={record.audit || jobRO}
            onClick={() => {
@@ -135,9 +138,8 @@ export function JobNotesComponent({
                }
              });
            }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
          <PrintWrapperComponent
            templateObject={{
              name: Templates.individual_job_note.key,
--- a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={t("general.labels.search")}
            onChange={(e) => {
--- a/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx
@@ -246,9 +246,8 @@ export function PayrollLaborAllocationsTable({
                  setTotals(data);
                  refetch();
                }}
-              >
-                <SyncOutlined />
-              </Button>
+                icon={<SyncOutlined />}
+              />
            </Space>
          }
        >
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -24,6 +24,7 @@ const NotificationCenterComponent = ({
  onNotificationClick,
  unreadCount,
  isEmployee,
+  isDarkMode,
  ref
 }) => {
    const { t } = useTranslation();
@@ -112,14 +113,16 @@ const NotificationCenterComponent = ({
            <Alert title={t("notifications.labels.employee-notification")} type="warning" />
          </div>
        ) : (
-          <Virtuoso
-            ref={virtuosoRef}
-            style={{ height: "400px", width: "100%" }}
-            data={notifications}
-            totalCount={notifications.length}
-            endReached={loadMore}
-            itemContent={renderNotification}
-          />
+          <div className={isDarkMode ? "notification-center--dark" : "notification-center--light"} style={{ height: "400px", width: "100%" }}>
+            <Virtuoso
+              ref={virtuosoRef}
+              style={{ height: "100%", width: "100%" }}
+              data={notifications}
+              totalCount={notifications.length}
+              endReached={loadMore}
+              itemContent={renderNotification}
+            />
+          </div>
        )}
      </div>
    );
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -5,6 +5,7 @@ import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 import day from "../../utils/day.js";
 import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
@@ -22,7 +23,7 @@ const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
 * @returns {JSX.Element}
 * @constructor
 */
-const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser }) => {
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser, isDarkMode }) => {
  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
@@ -213,13 +214,15 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
      loadMore={loadMore}
      onNotificationClick={handleNotificationClick}
      unreadCount={unreadCount}
+      isDarkMode={isDarkMode}
    />
  );
 };

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  isDarkMode: selectDarkMode
 });

 export default connect(mapStateToProps, null)(NotificationCenterContainer);
--- a/client/src/components/notification-center/notification-center.styles.scss
+++ b/client/src/components/notification-center/notification-center.styles.scss
@@ -173,3 +173,11 @@
    }
  }
 }
+
+.notification-center--dark {
+  color-scheme: dark;
+}
+
+.notification-center--light {
+  color-scheme: light;
+}
--- a/client/src/components/owners-list/owners-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={search.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
-
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={t("general.labels.search")}
            value={searchText}
--- a/client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx
+++ b/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}>
-        <DeleteFilled />
-      </Button>
+      <Button disabled={disabled} icon={<DeleteFilled />} />
    </Popconfirm>
  );
 }
--- a/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
@@ -150,9 +150,8 @@ export function PartsOrderListTableDrawerComponent({
              }
            });
          }}
-        >
-          <FaTasks />
-        </Button>
+          icon={<FaTasks />}
+        />
      )}
      <Popconfirm
        title={t("parts_orders.labels.confirmdelete")}
@@ -173,9 +172,7 @@ export function PartsOrderListTableDrawerComponent({
          });
        }}
      >
-        <Button disabled={jobRO}>
-          <DeleteFilled />
-        </Button>
+        <Button disabled={jobRO} icon={<DeleteFilled />} />
      </Popconfirm>
      {!isPartsEntry && (
        <Button
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
@@ -59,7 +59,7 @@ export function PartsOrderModalComponent({
  return (
    <div>
      <Form.Item name="returnfrombill" hidden>
-        <Input />
+        <Input type="hidden" />
      </Form.Item>
      <LayoutFormRow grow noDivider>
        <Form.Item
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={search.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/components/print-wrapper/print-wrapper.component.jsx
+++ b/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>
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/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()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
            <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
            <ProductionBoardKanbanSettings
              parentLoading={setLoading}
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/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();
              }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
            <ProductionListColumnsAdd
              columnState={[columns, setColumns]}
              tableState={state}
--- a/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
+++ b/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"}
-                >
-                  <CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />
-                </Button>,
+                  icon={<CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />}
+                />,
                <Button
                  key="sublet"
                  loading={loading}
@@ -80,9 +79,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                    handleSubletMark(s, "ignore");
                  }}
                  type={s.sublet_ignored ? "primary" : "ghost"}
-                >
-                  <EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />
-                </Button>
+                  icon={<EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />}
+                />
              ]}
            >
              <List.Item.Meta title={s.line_desc} />
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -146,7 +146,9 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
    <div className="report-center-modal">
      <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
        <Input.Search onChange={(e) => setSearch(e.target.value)} value={search} />
-        <Form.Item name="defaultSorters" hidden />
+        <Form.Item name="defaultSorters" hidden>
+          <Input type="hidden" />
+        </Form.Item>
        <Form.Item
          name="key"
          label={t("reportcenter.labels.key")}
--- a/client/src/components/schedule-production-list/schedule-production-list.component.jsx
+++ b/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>
  );
--- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
+++ b/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()}>
-                <SyncOutlined />
-              </Button>
+              <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
              <Typography.Title level={4}>
                {t("general.labels.searchresults", { search: state.search })}
              </Typography.Title>
--- a/client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx
+++ b/client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx
@@ -37,9 +37,5 @@ export default function ScoreboardRemoveButton({ scoreboardId }) {
    }
    setLoading(false);
  };
-  return (
-    <Button onClick={handleDelete} loading={loading}>
-      <DeleteFilled />
-    </Button>
-  );
+  return <Button onClick={handleDelete} loading={loading} icon={<DeleteFilled />} />;
 }
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -159,9 +159,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
              }
            });
          }}
-        >
-          <DeleteFilled />
-        </Button>
+          icon={<DeleteFilled />}
+        />
      )
    }
  ];
--- a/client/src/components/shop-teams/shop-employee-teams.form.component.jsx
+++ b/client/src/components/shop-teams/shop-employee-teams.form.component.jsx
@@ -159,7 +159,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
                {fields.map((field, index) => (
                  <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
                    <Form.Item label={t("employees.fields.id")} key={`${index}`} name={[field.name, "id"]} hidden>
-                      <Input />
+                      <Input type="hidden" />
                    </Form.Item>
                    <LayoutFormRow grow>
                      <Form.Item
--- a/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
+++ b/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
@@ -228,9 +228,8 @@ export function SimplifiedPartsJobsListComponent({
              </Button>
            </>
          )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
          <Input.Search
            placeholder={search.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/components/task-center/task-center.component.jsx
+++ b/client/src/components/task-center/task-center.component.jsx
@@ -22,6 +22,7 @@ const TaskCenterComponent = ({
  hasMore,
  createNewTask,
  incompleteTaskCount,
+  isDarkMode,
  ref
 }) => {
    const { t } = useTranslation();
@@ -140,22 +141,24 @@ const TaskCenterComponent = ({
        {tasks.length === 0 && !loading ? (
          <div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
        ) : (
-          <Virtuoso
-            ref={virtuosoRef}
-            style={{ height: "550px", width: "100%" }}
-            groupCounts={groupCounts}
-            groupContent={groupContent}
-            itemContent={itemContent}
-            endReached={hasMore && !loading ? onLoadMore : undefined}
-            components={{
-              Footer: () =>
-                loading ? (
-                  <div className="loading-footer">
-                    <Spin />
-                  </div>
-                ) : null
-            }}
-          />
+          <div className={isDarkMode ? "task-center--dark" : "task-center--light"} style={{ height: "550px", width: "100%" }}>
+            <Virtuoso
+              ref={virtuosoRef}
+              style={{ height: "100%", width: "100%" }}
+              groupCounts={groupCounts}
+              groupContent={groupContent}
+              itemContent={itemContent}
+              endReached={hasMore && !loading ? onLoadMore : undefined}
+              components={{
+                Footer: () =>
+                  loading ? (
+                    <div className="loading-footer">
+                      <Spin />
+                    </div>
+                  ) : null
+              }}
+            />
+          </div>
        )}
      </div>
    );
--- a/client/src/components/task-center/task-center.container.jsx
+++ b/client/src/components/task-center/task-center.container.jsx
@@ -3,6 +3,7 @@ import { useQuery } from "@apollo/client/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 import { INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket";
 import { useIsEmployee } from "../../utils/useIsEmployee";
 import TaskCenterComponent from "./task-center.component";
@@ -11,7 +12,8 @@ import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from ".

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  isDarkMode: selectDarkMode
 });

 const mapDispatchToProps = (dispatch) => ({
@@ -24,7 +26,8 @@ const TaskCenterContainer = ({
  bodyshop,
  currentUser,
  setTaskUpsertContext,
-  incompleteTaskCount
+  incompleteTaskCount,
+  isDarkMode
 }) => {
  const [tasks, setTasks] = useState([]);
  const { isConnected } = useSocket();
@@ -128,6 +131,7 @@ const TaskCenterContainer = ({
      hasMore={hasMore}
      createNewTask={createNewTask}
      incompleteTaskCount={incompleteTaskCount}
+      isDarkMode={isDarkMode}
    />
  );
 };
--- a/client/src/components/task-center/task-center.styles.scss
+++ b/client/src/components/task-center/task-center.styles.scss
@@ -141,3 +141,11 @@
    text-align: center;
  }
 }
+
+.task-center--dark {
+  color-scheme: dark;
+}
+
+.task-center--light {
+  color-scheme: light;
+}
--- a/client/src/components/task-list/task-list.component.jsx
+++ b/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()}>
-          <SyncOutlined />
-        </Button>
-        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask}>
-          <PlusCircleFilled />
+        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()} icon={<SyncOutlined />} />
+
+        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask} icon={<PlusCircleFilled />}>
          {t("tasks.buttons.create")}
        </Button>
      </Space>
--- a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
+++ b/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>
          }
--- a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={t("general.labels.search")}
            onChange={(e) => {
--- a/client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx
+++ b/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()}>
-        <Space>
-          Draw Calculator
-          <DownOutlined />
-        </Space>
+      <Button onClick={(e) => e.preventDefault()} icon={<DownOutlined />} iconPlacement="end">
+        Draw Calculator
      </Button>
    </Popover>
  );
--- a/client/src/components/time-ticket-list/time-ticket-list.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
@@ -322,9 +322,8 @@ export function TimeTicketList({
            onClick={async () => {
              refetch();
            }}
-          >
-            <SyncOutlined />
-          </Button>
+            icon={<SyncOutlined />}
+          />
        </Space>
      }
    >
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -184,8 +184,8 @@ export function TimeTicketModalComponent({
          }}
        </Form.Item>

-        <Form.Item name="flat_rate" label={t("timetickets.fields.flat_rate")} valuePropName="checked" noStyle hidden>
-          <Switch style={{ display: "none" }} />
+        <Form.Item name="flat_rate" label={t("timetickets.fields.flat_rate")} valuePropName="checked" hidden>
+          <Switch />
        </Form.Item>
      </LayoutFormRow>

--- a/client/src/components/tt-approvals-list/tt-approvals-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
        </Space>
      }
    >
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={search.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/components/vendors-list/vendors-list.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={t("general.labels.search")}
            onChange={(e) => {
--- a/client/src/index.jsx
+++ b/client/src/index.jsx
@@ -1,6 +1,5 @@
-import "./utils/sentry"; //Must be first.
+import "./utils/sentry"; // Must be first.
 import * as Sentry from "@sentry/react";
-import { ConfigProvider } from "antd";
 import Dinero from "dinero.js";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
@@ -14,9 +13,10 @@ import { persistor, store } from "./redux/store";
 import reportWebVitals from "./reportWebVitals";
 import "./translations/i18n";
 import "./utils/CleanAxios";
-//import * as amplitude from "@amplitude/analytics-browser";
+// import * as amplitude from "@amplitude/analytics-browser";
 import { PostHogProvider } from "posthog-js/react";
 import posthog from "posthog-js";
+import { StrictMode } from "react";

 window.global ||= window;

@@ -52,39 +52,44 @@ posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {

 const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);

-const router = sentryCreateBrowserRouter(
-  createRoutesFromElements(<Route path="*" element={<AppContainer />} />),
-  {
-    future: {
-      v7_startTransition: true,
-      v7_relativeSplatPath: true,
-    },
+const router = sentryCreateBrowserRouter(createRoutesFromElements(<Route path="*" element={<AppContainer />} />), {
+  future: {
+    v7_startTransition: true,
+    v7_relativeSplatPath: true
  }
-);
+});
+
 if (import.meta.env.DEV) {
-  let styles =
+  const styles =
    "font-weight: bold; font-size: 50px;color: red;  6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) ";
+
  console.log("%c %s", styles, `VER: ${import.meta.env.VITE_APP_INSTANCE}`);
 }

 function App() {
  return (
-    <PersistGate loading={<LoadingSpinner message="Restoring your settings..." />} persistor={persistor}>
-      <Provider store={store}>
+    <Provider store={store}>
+      <PersistGate loading={<LoadingSpinner message="Restoring your settings..." />} persistor={persistor}>
        <PostHogProvider client={posthog}>
          <RouterProvider router={router} />
        </PostHogProvider>
-      </Provider>
-    </PersistGate>
+      </PersistGate>
+    </Provider>
  );
 }

-// Used for ANTD Component Tokens
-// https://ant.design/docs/react/migrate-less-variables
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <ConfigProvider>
+const rootEl = document.getElementById("root");
+
+if (!rootEl) throw new Error('Missing root element: <div id="root" />');
+
+const appTree = import.meta.env.DEV ? (
+  <StrictMode>
    <App />
-  </ConfigProvider>
+  </StrictMode>
+) : (
+  <App />
 );

+ReactDOM.createRoot(rootEl).render(appTree);
+
 reportWebVitals();
--- a/client/src/pages/bills/bills.page.component.jsx
+++ b/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>
-              <EditFilled />
-            </Button>
+            <Button icon={<EditFilled />} />
          </Link>
          {
            //  <Button
@@ -204,9 +202,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
              </Button>
            </Space>
          )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Button
            onClick={() => {
              setBillEnterContext({
--- a/client/src/pages/export-logs/export-logs.page.component.jsx
+++ b/client/src/pages/export-logs/export-logs.page.component.jsx
@@ -174,9 +174,7 @@ export function ExportLogsPageComponent() {
              </Button>
            </>
          )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={searchParams.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/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} />
--- a/client/src/pages/phonebook/phonebook.page.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={searchParams.search || t("general.labels.search")}
            onSearch={(value) => {
--- a/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx
+++ b/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>

--- a/client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
          <Input.Search
            placeholder={t("general.labels.search")}
            onChange={(e) => {
--- a/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx
+++ b/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()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
        </Space>
      }
    >
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -2431,7 +2431,8 @@
    "messaging": {
      "actions": {
        "link": "Link to Job",
-        "new": "New Conversation"
+        "new": "New Conversation",
+        "openchat": "Open Chat"
      },
      "errors": {
        "invalidphone": "The phone number is invalid.  Unable to open conversation. ",
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -2428,7 +2428,8 @@
    "messaging": {
      "actions": {
        "link": "",
-        "new": ""
+        "new": "",
+        "openchat": ""
      },
      "errors": {
        "invalidphone": "",
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -2428,7 +2428,9 @@
    "messaging": {
      "actions": {
        "link": "",
-        "new": ""
+        "new": "",
+
+        "openchat": ""
      },
      "errors": {
        "invalidphone": "",
--- a/client/src/translations/i18n.js
+++ b/client/src/translations/i18n.js
@@ -38,4 +38,15 @@ i18n
    }
  );

+// Enable HMR for translation files in development
+if (import.meta.hot) {
+  import.meta.hot.accept(() => {
+    // When translation files change, do a full reload
+    // This is the most reliable approach for i18n updates
+    if (!import.meta.env.VITE_STOP_RELOAD_ON_HOT_UPDATE) {
+      window.location.reload();
+    }
+  });
+}
+
 export default i18n;
--- a/client/src/utils/PhoneFormatter.jsx
+++ b/client/src/utils/PhoneFormatter.jsx
@@ -11,13 +11,8 @@ export default function PhoneNumberFormatter({ children, type }) {

  return (
    <span>
-      <Text>{phone}</Text>
-      {type ? (
-        <>
-          {" "}
-          <Text type="secondary">({type})</Text>
-        </>
-      ) : null}
+      <span>{phone}</span>
+      {type ? <Text type="secondary"> ({type})</Text> : null}
    </span>
  );
 }