Antd V4 Icon Updates

2020-02-28 09:52:51 -08:00
parent e2dfd6b60d
commit 93be1417be
22 changed files with 167 additions and 123 deletions
--- a/client/src/components/allocations-employee-label/allocations-employee-label.component.jsx
+++ b/client/src/components/allocations-employee-label/allocations-employee-label.component.jsx
@@ -1,4 +1,4 @@
-import { Icon } from "antd";
+import Icon from "@ant-design/icons";
 import React from "react";
 import { MdRemoveCircleOutline } from "react-icons/md";

--- a/client/src/components/chat-conversation/chat-conversation.component.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.component.jsx
@@ -1,4 +1,5 @@
-import { Button, Card, Input, Icon } from "antd";
+import { Button, Card, Input } from "antd";
+import Icon from '@ant-design/icons';
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openConversation } from "../../redux/messaging/messaging.actions";
-import { Icon } from "antd";
+import { MessageFilled } from "@ant-design/icons";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
 });
@@ -14,9 +14,8 @@ export default connect(
  mapDispatchToProps
 )(function ChatOpenButton({ openConversation, phone }) {
  return (
-    <Icon
+    <MessageFilled
      style={{ margin: 4 }}
-      type="message"
      onClick={() => openConversation(phone)}
    />
  );
--- a/client/src/components/chat-overlay/chat-overlay.component.jsx
+++ b/client/src/components/chat-overlay/chat-overlay.component.jsx
@@ -1,4 +1,5 @@
-import { Badge, Card, Icon } from "antd";
+import { Badge, Card } from "antd";
+import { MessageFilled } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 export default function ChatWindowComponent({
@@ -23,7 +24,7 @@ export default function ChatWindowComponent({
            </div>
          ) : (
            <div>
-              <Icon type="message" />
+              <MessageFilled />
              <strong style={{ paddingLeft: "10px" }}>
                {t("messaging.labels.messaging")}
              </strong>
--- a/client/src/components/form-items-formatted/email-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/email-form-item.component.jsx
@@ -1,4 +1,5 @@
-import { Icon, Input } from "antd";
+import { Input } from "antd";
+import { MailFilled } from "@ant-design/icons";
 import React, { forwardRef } from "react";
 function FormItemEmail(props, ref) {
  return (
@@ -7,10 +8,10 @@ function FormItemEmail(props, ref) {
      addonAfter={
        props.email ? (
          <a href={`mailto:${props.email}`}>
-            <Icon type="mail" />
+            <MailFilled />
          </a>
        ) : (
-          <Icon type="mail" />
+          <MailFilled />
        )
      }
    />
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,4 +1,5 @@
-import { Avatar, Col, Icon, Menu, Row } from "antd";
+import { Avatar, Col, Menu, Row } from "antd";
+import {GlobalOutlined, HomeFilled, TeamOutlined, CalendarFilled, CarFilled} from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -60,7 +61,7 @@ export default ({
              <Menu.SubMenu
                title={
                  <span>
-                    <Icon type="global" />
+                    <GlobalOutlined/>
                    <span>{t("menus.currentuser.languageselector")}</span>
                  </span>
                }
@@ -87,14 +88,14 @@ export default ({
          >
            <Menu.Item key="home">
              <Link to="/manage">
-                <Icon type="home" />
+                <HomeFilled />
                {t("menus.header.home")}
              </Link>
            </Menu.Item>
            <Menu.SubMenu title={t("menus.header.jobs")}>
              <Menu.Item key="schedule">
                <Link to="/manage/schedule">
-                  <Icon type="calendar" />
+                  <CalendarFilled />
                  {t("menus.header.schedule")}
                </Link>
              </Menu.Item>
@@ -110,13 +111,13 @@ export default ({
            <Menu.SubMenu title={t("menus.header.customers")}>
              <Menu.Item key="owners">
                <Link to="/manage/owners">
-                  <Icon type="team" />
+                  <TeamOutlined/>
                  {t("menus.header.owners")}
                </Link>
              </Menu.Item>
              <Menu.Item key="vehicles">
                <Link to="/manage/vehicles">
-                  <Icon type="car" />
+                  <CarFilled />
                  {t("menus.header.vehicles")}
                </Link>
              </Menu.Item>
@@ -158,7 +159,7 @@ export default ({
              <Menu.SubMenu
                title={
                  <span>
-                    <Icon type="global" />
+                    <GlobalOutlined />
                    <span>{t("menus.currentuser.languageselector")}</span>
                  </span>
                }
--- a/client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx
+++ b/client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Button, Popover, Icon, Input, InputNumber, Form } from "antd";
+import { Button, Popover, Input, InputNumber, Form } from "antd";
+import { SelectOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";

 export default function InvoiceAddLineButton({
@@ -35,15 +36,16 @@ export default function InvoiceAddLineButton({
          initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
        })(<InputNumber precision={2} name="actual" />)}
      </Form.Item>
-      DISSC: {discount}
-      <Button onClick={() => setVisibility(false)}>??</Button>
+      {}
+      DISC: {discount}
+      <Button onClick={() => setVisibility(false)}>X</Button>
    </div>
  );

  return (
    <Popover content={popContent} visible={visibility}>
      <Button onClick={() => setVisibility(true)} disabled={!disabled}>
-        <Icon type="select" />
+        <SelectOutlined />
      </Button>
    </Popover>
  );
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/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}
--- a/client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx
+++ b/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>
            )}
--- a/client/src/components/jobs-available-new/jobs-available-new.component.jsx
+++ b/client/src/components/jobs-available-new/jobs-available-new.component.jsx
@@ -1,4 +1,9 @@
-import { Button, Icon, Input, notification, Table } from "antd";
+import { Button, Input, notification, Table } from "antd";
+import {
+  PlusCircleFilled,
+  DeleteFilled,
+  SyncOutlined
+} from "@ant-design/icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
@@ -124,7 +129,7 @@ export default function JobsAvailableComponent({
              });
            }}
          >
-            <Icon type="delete" />
+            <DeleteFilled />
          </Button>
          <Button
            onClick={() => {
@@ -132,7 +137,7 @@ export default function JobsAvailableComponent({
              setModalVisible(true);
            }}
          >
-            <Icon type="plus" />
+            <PlusCircleFilled />
          </Button>
        </span>
      )
@@ -181,7 +186,7 @@ export default function JobsAvailableComponent({
                  refetch();
                }}
              >
-                <Icon type="sync" />
+                <SyncOutlined />
              </Button>
              <Button
                onClick={() => {
--- a/client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
+++ b/client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
@@ -1,4 +1,9 @@
-import { Input, Table, Button, Icon, notification } from "antd";
+import { Input, Table, Button, notification } from "antd";
+import {
+  PlusCircleFilled,
+  DeleteFilled,
+  SyncOutlined
+} from "@ant-design/icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -138,7 +143,7 @@ export default function JobsAvailableSupplementComponent({
              });
            }}
          >
-            <Icon type="delete" />
+            <DeleteFilled />
          </Button>
          <Button
            onClick={() => {
@@ -146,7 +151,7 @@ export default function JobsAvailableSupplementComponent({
              setModalVisible(true);
            }}
          >
-            <Icon type="plus" />
+            <PlusCircleFilled />
          </Button>
        </span>
      )
@@ -184,7 +189,7 @@ export default function JobsAvailableSupplementComponent({
                  refetch();
                }}
              >
-                <Icon type="sync" />
+                <SyncOutlined />
              </Button>
              <Button
                onClick={() => {
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -5,12 +5,13 @@ import {
  Checkbox,
  Descriptions,
  Dropdown,
-  Icon,
+  
  Menu,
  notification,
  PageHeader,
  Tag
 } from "antd";
+import {DownCircleFilled} from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
@@ -64,7 +65,7 @@ export default connect(
  const menuExtra = [
    <Dropdown overlay={statusmenu} key='changestatus'>
      <Button>
-        {t("jobs.actions.changestatus")} <Icon type='down' />
+        {t("jobs.actions.changestatus")} <DownCircleFilled />
      </Button>
    </Dropdown>,
    <Badge key='schedule' count={job.appointments_aggregate.aggregate.count}>
--- a/client/src/components/jobs-documents/jobs-documents.component.jsx
+++ b/client/src/components/jobs-documents/jobs-documents.component.jsx
@@ -1,4 +1,5 @@
-import { Icon, Modal, notification, Upload } from "antd";
+import { Modal, notification, Upload } from "antd";
+import { InboxOutlined } from "@ant-design/icons";
 import axios from "axios";
 import React, { useState } from "react";
 import { useMutation } from "react-apollo";
@@ -205,7 +206,7 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
  };

  return (
-    <div className='clearfix'>
+    <div className="clearfix">
      <button
        onClick={() => {
          const imageRequest = JSON.stringify({
@@ -217,31 +218,33 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
          const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
          const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
          console.log("url", url);
-        }}>
+        }}
+      >
        Test PDF
      </button>
      <Upload.Dragger
        customRequest={handleUpload}
-        accept='.pdf,.jpg,.jpeg'
-        listType='picture-card'
+        accept=".pdf,.jpg,.jpeg"
+        listType="picture-card"
        fileList={fileList}
        multiple={true}
        onPreview={handlePreview}
        onRemove={handleRemove}
-        onChange={handleChange}>
-        <p className='ant-upload-drag-icon'>
-          <Icon type='inbox' />
+        onChange={handleChange}
+      >
+        <p className="ant-upload-drag-icon">
+          <InboxOutlined />
        </p>
-        <p className='ant-upload-text'>
+        <p className="ant-upload-text">
          Click or drag file to this area to upload
        </p>
-        <p className='ant-upload-hint'>
+        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibit from uploading
          company data or other band files
        </p>
      </Upload.Dragger>
      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
-        <img alt='example' style={{ width: "100%" }} src={previewImage} />
+        <img alt="example" style={{ width: "100%" }} src={previewImage} />
      </Modal>
    </div>
  );
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -1,4 +1,5 @@
-import { Button, Icon, Input, Table } from "antd";
+import { Button, Input, Table } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, withRouter } from "react-router-dom";
@@ -208,7 +209,7 @@ export default withRouter(function JobsList({
          return (
            <div style={{ display: "flex" }}>
              <Button onClick={() => refetch()}>
-                <Icon type="sync" />
+                <SyncOutlined />
              </Button>
              <Input.Search
                placeholder="Search..."
--- a/client/src/components/jobs-notes/jobs.notes.component.jsx
+++ b/client/src/components/jobs-notes/jobs.notes.component.jsx
@@ -1,5 +1,11 @@
 import React, { useState } from "react";
-import { Table, Button, Icon, notification } from "antd";
+import { Table, Button, notification } from "antd";
+import {
+  WarningFilled,
+  EyeInvisibleFilled,
+  DeleteFilled,
+  EditFilled
+} from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
 import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
@@ -24,11 +30,9 @@ export default function JobNotesComponent({
        <span>
          {" "}
          {record.critical ? (
-            <Icon style={{ margin: 4, color: "red" }} type='warning' />
-          ) : null}
-          {record.private ? (
-            <Icon style={{ margin: 4 }} type='eye-invisible' />
+            <WarningFilled style={{ margin: 4, color: "red" }} />
          ) : null}
+          {record.private ? <EyeInvisibleFilled style={{ margin: 4 }} /> : null}
        </span>
      )
    },
@@ -48,7 +52,7 @@ export default function JobNotesComponent({
      sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
      render: (text, record) => (
        <span>
-          <Moment format='MM/DD/YYYY @ HH:mm'>{record.updated_at}</Moment>
+          <Moment format="MM/DD/YYYY @ HH:mm">{record.updated_at}</Moment>
        </span>
      )
    },
@@ -77,15 +81,17 @@ export default function JobNotesComponent({
                  message: t("notes.successes.deleted")
                });
              });
-            }}>
-            <Icon type='delete' />
+            }}
+          >
+            <DeleteFilled />
          </Button>
          <Button
            onClick={() => {
              setExistingNote(record);
              setNoteModalVisible(true);
-            }}>
-            <Icon type='edit' />
+            }}
+          >
+            <EditFilled />
          </Button>
        </span>
      )
@@ -105,14 +111,15 @@ export default function JobNotesComponent({
        onClick={() => {
          setExistingNote(null);
          setNoteModalVisible(true);
-        }}>
+        }}
+      >
        {t("notes.actions.new")}
      </Button>
      <Table
        loading={loading}
        pagination={{ position: "bottom" }}
        columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
        dataSource={data}
      />
    </div>
--- a/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx
+++ b/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx
@@ -1,4 +1,4 @@
-import { Icon } from "antd";
+import { BuildFilled, LoginOutlined } from "@ant-design/icons";
 import React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -15,12 +15,12 @@ export default connect(
 )(function ManageSignInButton({ currentUser }) {
  return currentUser.authorized ? (
    <Link to="/manage">
-      <Icon type="build" />
+      <BuildFilled />
      Manage
    </Link>
  ) : (
    <Link to="/signin">
-      <Icon type="login" />
+      <LoginOutlined />
      Sign In
    </Link>
  );
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
@@ -1,4 +1,5 @@
-import { AutoComplete, DatePicker, Icon, Input, List, Radio } from "antd";
+import { AutoComplete, DatePicker, Input, List, Radio } from "antd";
+import { HeartFilled } from "@ant-design/icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 export default function PartsOrderModalComponent({
@@ -34,13 +35,14 @@ export default function PartsOrderModalComponent({
        onSelect={handleSelect}
        defaultOpen
        backfill
-        optionLabelProp='value'
+        optionLabelProp="value"
        dataSource={vendorComplete}
-        placeholder={t("vendors.labels.search")}>
+        placeholder={t("vendors.labels.search")}
+      >
        {vendorComplete.map(v => (
          <AutoComplete.Option value={v.name} key={v.id}>
            <div>{v.name}</div>
-            <div> {v.favorite ? <Icon type='heart' /> : null}</div>
+            <div> {v.favorite ? <HeartFilled /> : null}</div>
          </AutoComplete.Option>
        ))}
      </AutoComplete>
@@ -55,14 +57,15 @@ export default function PartsOrderModalComponent({
      {t("parts_orders.labels.inthisorder")}

      <List
-        itemLayout='horizontal'
+        itemLayout="horizontal"
        dataSource={orderLines}
        renderItem={item => (
          <List.Item
            actions={[
              <Input placeholder={t("parts_orders.fields.lineremarks")} />
              //TODO Editable table/adding line remarks to the order.
-            ]}>
+            ]}
+          >
            {
              // <List.Item.Meta
              //   avatar={
@@ -81,7 +84,8 @@ export default function PartsOrderModalComponent({

      <Radio.Group
        defaultValue={sendType}
-        onChange={e => setSendType(e.target.value)}>
+        onChange={e => setSendType(e.target.value)}
+      >
        <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
        <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
      </Radio.Group>
--- a/client/src/components/profile-sidebar/profile-sidebar.component.jsx
+++ b/client/src/components/profile-sidebar/profile-sidebar.component.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Layout, Menu, Icon } from "antd";
+import { Layout, Menu } from "antd";
+import { UserOutlined, BankFilled } from "@ant-design/icons";

 export default function ProfileSideBar({
  sidebarSelection,
@@ -21,11 +22,11 @@ export default function ProfileSideBar({
        mode="inline"
      >
        <Menu.Item key="profile">
-          <Icon type="user" />
+          <UserOutlined />
          <span>{t("menus.profilesidebar.profile")}</span>
        </Menu.Item>
        <Menu.Item key="shops">
-          <Icon type="bank" />
+          <BankFilled />
          <span>{t("menus.profilesidebar.shops")}</span>
        </Menu.Item>
      </Menu>
--- a/client/src/components/schedule-calendar/schedule-calendar.component.jsx
+++ b/client/src/components/schedule-calendar/schedule-calendar.component.jsx
@@ -1,7 +1,8 @@
 import React from "react";
 //import "react-big-calendar/lib/css/react-big-calendar.css";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
-import { Button, Icon } from "antd";
+import { Button } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import ScheduleAppointmentModalContainer from "../schedule-appointment-modal/schedule-appointment-modal.container";

@@ -19,7 +20,7 @@ export default function ScheduleCalendarComponent({
          refetch();
        }}
      >
-        <Icon type="sync" />
+        <SyncOutlined />
      </Button>

      <Button
--- a/client/src/components/sign-in-form/sign-in-form.component.jsx
+++ b/client/src/components/sign-in-form/sign-in-form.component.jsx
@@ -1,4 +1,5 @@
-import { Button, Form, Icon, Input } from "antd";
+import { Button, Form, Input } from "antd";
+import { LockFilled } from "@ant-design/icons";
 import React from "react";
 import { useApolloClient } from "react-apollo";
 import { connect } from "react-redux";
@@ -7,7 +8,10 @@ import { createStructuredSelector } from "reselect";
 import Logo from "../../assets/logo240.png";
 import { UPSERT_USER } from "../../graphql/user.queries";
 import { emailSignInStart } from "../../redux/user/user.actions";
-import { selectCurrentUser, selectSignInError } from "../../redux/user/user.selectors";
+import {
+  selectCurrentUser,
+  selectSignInError
+} from "../../redux/user/user.selectors";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -86,9 +90,7 @@ export default connect(
              ]
            })(
              <Input
-                prefix={
-                  <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
-                }
+                prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />}
                type="password"
                placeholder="Password"
              />
--- a/client/src/components/vendors-form/vendors-form.component.jsx
+++ b/client/src/components/vendors-form/vendors-form.component.jsx
@@ -1,14 +1,6 @@
-import {
-  Button,
-  Checkbox,
-  Col,
-  Form,
-  Icon,
-  Input,
-  InputNumber,
-  Row
-} from "antd";
+import { Button, Checkbox, Col, Form, Input, InputNumber, Row } from "antd";
 import React from "react";
+import { MinusCircleOutlined, PlusCircleFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import ResetForm from "../form-items-formatted/reset-form-item.component";
@@ -75,9 +67,8 @@ export default function VendorsFormComponent({ form, vendor, handleDelete }) {
            />
          )}
          {getFieldValue("keys").length > 1 ? (
-            <Icon
+            <MinusCircleOutlined
              className="dynamic-delete-button"
-              type="minus-circle-o"
              onClick={() => remove(k)}
            />
          ) : null}
@@ -104,7 +95,7 @@ export default function VendorsFormComponent({ form, vendor, handleDelete }) {
      ))}
      <Form.Item label={t("vendors.fields.favorite")}>
        <Button type="dashed" onClick={add} style={{ width: "60%" }}>
-          <Icon type="plus" /> Add field
+          <PlusCircleFilled /> Add field
        </Button>
      </Form.Item>

--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
@@ -1,4 +1,12 @@
-import { Form, Icon, Tabs } from "antd";
+import { Form, Tabs } from "antd";
+import {
+  BarsOutlined,
+  DollarCircleOutlined,
+  ToolFilled,
+  CalendarFilled,
+  FileImageFilled
+} from "@ant-design/icons";
+import Icon from "@ant-design/icons";
 import React, { lazy, Suspense, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -140,7 +148,7 @@ export default function JobsDetailPage({
          <Tabs.TabPane
            tab={
              <span>
-                <Icon type="bars" />
+                <BarsOutlined />
                {t("menus.jobsdetail.repairdata")}
              </span>
            }
@@ -152,7 +160,7 @@ export default function JobsDetailPage({
          <Tabs.TabPane
            tab={
              <span>
-                <Icon type="dollar" />
+                <DollarCircleOutlined />
                {t("menus.jobsdetail.financials")}
              </span>
            }
@@ -164,7 +172,7 @@ export default function JobsDetailPage({
          <Tabs.TabPane
            tab={
              <span>
-                <Icon type="tool" />
+                <ToolFilled />
                {t("menus.jobsdetail.partssublet")}
              </span>
            }
@@ -188,7 +196,7 @@ export default function JobsDetailPage({
          <Tabs.TabPane
            tab={
              <span>
-                <Icon type="calendar" />
+                <CalendarFilled />
                {t("menus.jobsdetail.dates")}
              </span>
            }
@@ -200,7 +208,7 @@ export default function JobsDetailPage({
          <Tabs.TabPane
            tab={
              <span>
-                <Icon type="file-image" />
+                <FileImageFilled />
                {t("jobs.labels.documents")}
              </span>
            }