Antd V4 Icon Updates

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

@@ -1,5 +1,11 @@
 import { useQuery } from "@apollo/react-hooks";
-import { Button, Icon, PageHeader, Tag } from "antd";
+import {
+  PrinterFilled,
+  FileImageFilled,
+  EditFilled,
+  ShoppingFilled
+} from "@ant-design/icons";
+import { Button, PageHeader, Tag } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -33,10 +39,10 @@ export default function JobDetailCards({ selectedJob }) {
     return <div>{t("jobs.errors.nojobselected")}</div>;
   }
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <div className='job-cards-container'>
+    <div className="job-cards-container">
       <NoteUpsertModal
         jobId={data.jobs_by_pk.id}
         visible={noteModalVisible}
@@ -52,9 +58,9 @@ export default function JobDetailCards({ selectedJob }) {
         ghost={false}
         onBack={() => window.history.back()}
         tags={
-          <span key='job-status'>
+          <span key="job-status">
             {data.jobs_by_pk.status ? (
-              <Tag color='blue'>{data.jobs_by_pk.status}</Tag>
+              <Tag color="blue">{data.jobs_by_pk.status}</Tag>
             ) : null}
           </span>
         }
@@ -73,39 +79,43 @@ export default function JobDetailCards({ selectedJob }) {
         }
         extra={[
           <Button
-            key='schedule'
+            key="schedule"
             //TODO Enabled logic based on status.
             onClick={() => {
               scheduleModalState[1](true);
-            }}>
+            }}
+          >
             {t("jobs.actions.schedule")}
           </Button>,
           <Link
-            key='documents'
-            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
+            key="documents"
+            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
+          >
             <Button>
-              <Icon type='file-image' />
+              <FileImageFilled />
               {t("jobs.actions.addDocuments")}
             </Button>
           </Link>,
-          <Button key='printing'>
-            <Icon type='printer' />
+          <Button key="printing">
+            <PrinterFilled />
             {t("jobs.actions.printCenter")}
           </Button>,
           <Button
-            key='notes'
-            actiontype='addNote'
+            key="notes"
+            actiontype="addNote"
             onClick={() => {
               setNoteModalVisible(!noteModalVisible);
-            }}>
-            <Icon type='edit' />
+            }}
+          >
+            <EditFilled />
             {t("jobs.actions.addNote")}
           </Button>,
-          <Button key='postinvoices'>
-            <Icon type='shopping-cart' />
+          <Button key="postinvoices">
+            <ShoppingFilled />
             {t("jobs.actions.postInvoices")}
           </Button>
-        ]}>
+        ]}
+      >
         {
           //   loading ? (
           //   <LoadingSkeleton />
@@ -126,7 +136,7 @@ export default function JobDetailCards({ selectedJob }) {
           // )
         }
 
-        <section className='job-cards'>
+        <section className="job-cards">
           <JobDetailCardsCustomerComponent
             loading={loading}
             data={data ? data.jobs_by_pk : null}

client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx

@@ -1,4 +1,5 @@
-import { List, Icon } from "antd";
+import { List } from "antd";
+import { WarningFilled, EyeInvisibleFilled } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
@@ -13,24 +14,23 @@ export default function JobDetailCardsNotesComponent({ loading, data }) {
   const { t } = useTranslation();
 
   return (
-    <CardTemplate 
+    <CardTemplate
       loading={loading}
       title={t("jobs.labels.cards.notes")}
-      extraLink={`/manage/jobs/${data.id}#notes`}>
+      extraLink={`/manage/jobs/${data.id}#notes`}
+    >
       {data ? (
         <Container>
           <List
-            size='small'
+            size="small"
             bordered
             dataSource={data.notes}
             renderItem={item => (
               <List.Item>
                 {item.critical ? (
-                  <Icon style={{ margin: 4, color: "red" }} type='warning' />
-                ) : null}
-                {item.private ? (
-                  <Icon style={{ margin: 4 }} type='eye-invisible' />
+                  <EyeInvisibleFilled style={{ margin: 4, color: "red" }} />
                 ) : null}
+                {item.private ? <WarningFilled style={{ margin: 4 }} /> : null}
                 {item.text}
               </List.Item>
             )}