From bc50f5e98336f3a7e1ec058dd485677db5a1fc74 Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Fri, 5 Jan 2024 13:37:54 -0500
Subject: [PATCH] Fix Tab Icon Spacing.

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 .../jobs-detail.page.component.jsx            | 49 ++++++++-----------
 .../scoreboard/scoreboard.page.container.jsx  | 12 ++---
 2 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
index 87e86ae2f..42acb504a 100644
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
@@ -261,17 +261,15 @@ export function JobsDetailPage({
               items={[
                   {
                       key: "general",
-                      label: (
-                          <span><Icon component={FaShieldAlt} />{t("menus.jobsdetail.general")}</span>
-                      ),
+                      icon: <Icon component={FaShieldAlt} />,
+                      label: t("menus.jobsdetail.general"),
                       forceRender: true,
                       children: <JobsDetailGeneral job={job} form={form} />,
                   },
                   {
                       key: "repairdata",
-                      label: (
-                          <span><BarsOutlined />{t("menus.jobsdetail.repairdata")}</span>
-                      ),
+                      icon: <BarsOutlined />,
+                      label: t("menus.jobsdetail.repairdata"),
                       forceRender: true,
                       children: (
                           <JobsLinesContainer
@@ -284,46 +282,40 @@ export function JobsDetailPage({
                   },
                   {
                       key: "rates",
-                      label: (
-                          <span><DollarCircleOutlined />{t("menus.jobsdetail.rates")}</span>
-                      ),
+                      icon: <DollarCircleOutlined />,
+                      label: t("menus.jobsdetail.rates"),
                       forceRender: true,
                       children: <JobsDetailRates job={job} form={form} />,
                   },
                   {
                       key: "totals",
-                      label: (
-                          <span><DollarCircleOutlined />{t("menus.jobsdetail.totals")}</span>
-                      ),
+                      icon: <DollarCircleOutlined />,
+                      label: t("menus.jobsdetail.totals"),
                       children: <JobsDetailTotals job={job} refetch={refetch} />,
                   },
                   {
                       key: "partssublet",
-                      label: (
-                          <span><ToolFilled />{t("menus.jobsdetail.partssublet")}</span>
-                      ),
+                      icon: <ToolFilled />,
+                      label: t("menus.jobsdetail.partssublet"),
                       children: <JobsDetailPliContainer job={job} />,
                   },
                   {
                       key: "labor",
-                      label: (
-                          <span><Icon component={FaHardHat} />{t("menus.jobsdetail.labor")}</span>
-                      ),
+                      icon: <Icon component={FaHardHat} />,
+                      label: t("menus.jobsdetail.labor"),
                       children: <JobsDetailLaborContainer job={job} jobId={job.id} />,
                   },
                   {
                       key: "dates",
-                      label: (
-                          <span><CalendarFilled />{t("menus.jobsdetail.dates")}</span>
-                      ),
+                      icon: <CalendarFilled />,
+                      label: t("menus.jobsdetail.dates"),
                       forceRender: true,
                       children: <JobsDetailDatesComponent job={job} />,
                   },
                   {
                       key: "documents",
-                      label: (
-                          <span><FileImageFilled />{t("jobs.labels.documents")}</span>
-                      ),
+                      icon: <FileImageFilled />,
+                      label: t("jobs.labels.documents"),
                       children: bodyshop.uselocalmediaserver ? (
                           <JobsDocumentsLocalGallery job={job} />
                       ) : (
@@ -332,15 +324,14 @@ export function JobsDetailPage({
                   },
                   {
                       key: "notes",
-                      label: (
-                          <span><Icon component={FaRegStickyNote} />{t("jobs.labels.notes")}</span>
-                      ),
+                      icon: <Icon component={FaRegStickyNote} />,
+                      label: t("jobs.labels.notes"),
                       children: <JobNotesContainer jobId={job.id} />,
                   },
                   {
                       key: "audit",
-                      label: (<span><HistoryOutlined />{t("jobs.labels.audit")}</span>
-                      ),
+                      icon: <HistoryOutlined />,
+                      label: t("jobs.labels.audit"),
                       children: <JobAuditTrail jobId={job.id} />,
                   },
               ]}
diff --git a/client/src/pages/scoreboard/scoreboard.page.container.jsx b/client/src/pages/scoreboard/scoreboard.page.container.jsx
index e7098d015..c5cae70d5 100644
--- a/client/src/pages/scoreboard/scoreboard.page.container.jsx
+++ b/client/src/pages/scoreboard/scoreboard.page.container.jsx
@@ -77,22 +77,22 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
             items={[
               {
                 key: "sb",
-                label: (<span><Icon component={FaShieldAlt} />{t("scoreboard.labels.jobs")}</span>
-                ),
+                icon: <Icon component={FaShieldAlt} />,
+                label: t("scoreboard.labels.jobs"),
                 forceRender: true,
                 children: <ScoreboardDisplay />,
               },
               {
                 key: "tickets",
-                label: (<span><FieldTimeOutlined />{t("scoreboard.labels.timeticketsemployee")}</span>
-                ),
+                icon: <FieldTimeOutlined />,
+                label: t("scoreboard.labels.timeticketsemployee"),
                 forceRender: true,
                 children: <ScoreboardTimeTickets />,
               },
               {
                 key: "ticketsstats",
-                label: (<span><FieldTimeOutlined />{t("scoreboard.labels.allemployeetimetickets")}</span>
-                ),
+                icon: <FieldTimeOutlined />,
+                label: t("scoreboard.labels.allemployeetimetickets"),
                 forceRender: true,
                 children: <ScoreboardTimeTicketsStats />,
               },