@licklist/design 0.66.8-dev.2 → 0.66.9-dev.1

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -16,8 +16,8 @@ import {
 } from "@dnd-kit/sortable";
 
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { FaPlusCircle } from "react-icons/fa";
 import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
+import { Icon } from "../../static";
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputValues,
@@ -287,8 +287,9 @@ export const DateAndRecurrenceInput = ({
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
-              <FaPlusCircle
-                size={16}
+              <Icon
+                type="plus-circle"
+                height="1rem"
                 className="product-set-recurrence-icon-add mr-2"
               />
               {t("addDates")}

package/src/product-set/control/DateInput.tsx

@@ -11,9 +11,9 @@ import { DateTime } from "luxon";
 import RRule, { Frequency } from "rrule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 
-import { FaPlusCircle } from "react-icons/fa";
 import { DatePickerInput } from "../../recurring-date-picker-input/DatePickerInput";
 import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
+import { Icon } from "../../static";
 
 import {
   AvailableTimesControl,
@@ -260,11 +260,11 @@ export const DateInput = ({
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
-              <FaPlusCircle
-                size={16}
+              <Icon
+                type="plus-circle"
+                height="1rem"
                 className="product-set-recurrence-icon-add mr-2"
               />
-
               {t("addDates")}
             </div>
           )}

package/src/product-set/control/ProductSetRecurrenceControl.tsx

@@ -5,7 +5,7 @@ import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/Pro
 
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { FaCalendar, FaEllipsisH } from "react-icons/fa";
+import { Icon } from "../../static";
 
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
@@ -47,11 +47,11 @@ export const ProductSetRecurrenceControl = ({
         className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
       >
         <span className="d-flex flex-row align-items-center">
-          <FaCalendar
-            size={16}
+          <Icon
+            type="calendar"
+            height="1rem"
             className="product-set-recurrence-icon-calendar"
           />
-
           <span className="product-set-recurrence-title d-flex flex-grow-1">
             {t("from")}{" "}
             {formatDate(menuRecurrence.startDate, {
@@ -74,8 +74,9 @@ export const ProductSetRecurrenceControl = ({
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
-            <FaEllipsisH
-              size={16}
+            <Icon
+              type="ellipsis-h"
+              height="1rem"
               className="product-set-recurrence-icon-more"
             />
           </div>

package/src/product-set/control/ProductSetRecurrenceOverridesControl.tsx

@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
-import { FaCalendar, FaEllipsisH } from "react-icons/fa";
+
+import { Icon } from "../../static";
 
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
@@ -22,8 +23,9 @@ export const ProductSetRecurrenceOverridesControl = ({
         className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
       >
         <span className="d-flex flex-row align-items-center">
-          <FaCalendar
-            size={16}
+          <Icon
+            type="calendar"
+            height="1rem"
             className="product-set-recurrence-icon-calendar"
           />
           <span className="product-set-recurrence-title d-flex flex-grow-1">
@@ -39,8 +41,9 @@ export const ProductSetRecurrenceOverridesControl = ({
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
-            <FaEllipsisH
-              size={16}
+            <Icon
+              type="ellipsis-h"
+              height="1rem"
               className="product-set-recurrence-icon-more"
             />
           </div>

package/src/product-set/control/TutorialGifCard.tsx

@@ -4,8 +4,8 @@ import Card from "react-bootstrap/Card";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Button } from "react-bootstrap";
-import { FaCheck, FaTimes } from "react-icons/fa";
-import { Image } from "../../static";
+
+import { Icon, Image } from "../../static";
 
 export interface TutorialGifCardProps {
   tutorialAsset?: string;
@@ -26,10 +26,12 @@ const TutorialGifCard = ({
       <Card className={`tutorial-card ${!isVisible && "hidden"}`}>
         <Card.Header className="tutorial-card-header">
           <div>
-            <FaCheck
+            <Icon
+              type="check"
               color="white"
+              height="0.9rem"
+              width="0.9rem"
               className="rounded product-set-item-icon"
-              size={14}
             />
             <span>{t("bookedTopTip")}</span>
           </div>
@@ -39,7 +41,12 @@ const TutorialGifCard = ({
             type="button"
           >
             <span>{t("gotIt")}</span>
-            <FaTimes size={18} className="rounded tutorial-close-icon p-1" />
+            <Icon
+              type="times"
+              height="1.125rem"
+              width="1.125rem"
+              className="rounded tutorial-close-icon p-1"
+            />
           </button>
         </Card.Header>
         <Card.Body className="tutorial-card-body">

package/src/product-set/elements/DeleteFieldButton.tsx

@@ -1,7 +1,7 @@
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { FaTrashAlt } from "react-icons/fa";
 import { IsDeletableEvent } from "../types";
+import Icon from "../../static/Icon";
 
 export type DeleteFieldButtonProps = IsDeletableEvent;
 
@@ -14,7 +14,7 @@ export function DeleteFieldButton({ onDelete }: DeleteFieldButtonProps) {
       variant="outline-danger"
       className="d-flex align-items-center"
     >
-      <FaTrashAlt size={16} />{" "}
+      <Icon type="trash" height="1rem" />{" "}
       <span className="d-none d-sm-inline ml-2">{t("delete")}</span>
     </Button>
   );

package/src/product-set/form/MobileFooter.tsx

@@ -1,17 +1,47 @@
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
+// @TODO Modal hided for first release.
+
 export function MobileFooter() {
   const { t } = useTranslation("Design");
+  // const [isModalVisible, setIsModalVisible] = useState(false);
 
   return (
-    <div className="container product-set-mobile-footer">
-      <div
-        className={`d-block d-sm-none bg-white border-top fixed-bottom
+    <>
+      <div className="container product-set-mobile-footer">
+        <div
+          className={`d-block d-sm-none bg-white border-top fixed-bottom
          py-4 px-5 d-flex justify-content-between flex-row-reverse`}
-      >
-        <Button type="submit">{t("save")}</Button>
+        >
+          {/* <Button
+            variant="outline-primary"
+            size="sm"
+            className="btn-icon-popover rounded-circle"
+            onClick={() => setIsModalVisible(true)}
+          >
+            <Icon type="plus" width=".9rem" />
+          </Button> */}
+          <Button type="submit">{t("save")}</Button>
+        </div>
       </div>
-    </div>
+      {/* <Modal
+        show={isModalVisible}
+        onHide={() => setIsModalVisible(false)}
+        dialogClassName="product-set-mobile-modal fixed-bottom"
+        animation={false}
+      >
+        <Modal.Body>
+          <Tabs>
+            <Tabs.Tab eventKey="reusableSubsets" title="Reusable subsets"> */}
+      {/* @TODO: Implement logic here */}
+      {/* <p>Substet 1</p>
+              <p>Subset 2</p>
+              <p className="mb-0">Subset 3</p>
+            </Tabs.Tab>
+          </Tabs>
+        </Modal.Body>
+      </Modal> */}
+    </>
   );
 }

package/src/product-set/form/ProductSetForm.tsx

@@ -22,7 +22,7 @@ import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
-import { ErrorModal } from "../../iframe/order-process/components/ErrorModal";
+import { ErrorModal } from "../../../src/iframe/order-process/components/ErrorModal";
 
 export interface WithIsLoading {
   isLoading: boolean;

package/src/product-set/form/SelectCategoryModal.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { ReactElement, useContext, useState } from "react";
+import { useContext, useState } from "react";
 import { Button, Carousel, Modal, ModalBody } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import {
@@ -14,15 +14,7 @@ import {
 import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import Col from "react-bootstrap/Col";
-import {
-  FaArrowLeft,
-  FaArrowRight,
-  FaBars,
-  FaBowlingBall,
-  FaCalendar,
-  FaTicketAlt,
-  FaTimes,
-} from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { ProductSetLoadingContext } from "./context";
 
 const CATEGORY_TYPES_NAMES = {
@@ -33,31 +25,31 @@ const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const;
 
-type CategoryConfig = { label: string; icon: ReactElement };
+type CategoryConfig = { label: string; icon: string };
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {
     label: "tickets",
-    icon: <FaTicketAlt color="#0e8ce2" size={32} />,
+    icon: "ticket-alt",
   },
   [CATEGORY_TYPES_NAMES.bookings]: {
     label: "bookings",
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: "calendar",
   },
   [CATEGORY_TYPES_NAMES.menuItems]: {
     label: "menuItems",
-    icon: <FaBars color="#0e8ce2" size={32} />,
+    icon: "bars",
   },
 };
 
 const BOOKING_SUBCATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.game]: {
     label: "game",
-    icon: <FaBowlingBall color="#0e8ce2" size={32} />,
+    icon: "bowling-ball",
   },
   [CATEGORY_TYPES_NAMES.fixedDuration]: {
     label: "fixedDuration",
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: "calendar",
   },
 };
 
@@ -114,7 +106,7 @@ export function SelectCategoryModal({
         <ModalTitle as="h5">{t("Design:selectCategory")}</ModalTitle>
 
         <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-          <FaTimes size={20} />
+          <Icon type="times" height="1.2rem" />
         </Button>
       </ModalHeader>
 
@@ -141,7 +133,11 @@ export function SelectCategoryModal({
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
-                      {icon}
+                      {typeof icon === "string" ? (
+                        <Icon type={icon} color="#0e8ce2" height="2rem" />
+                      ) : (
+                        icon
+                      )}
                       <h6 className="text-dark mt-3">{t(label)}</h6>
                     </Button>
                   </Col>
@@ -164,7 +160,7 @@ export function SelectCategoryModal({
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
-                      {icon}
+                      <Icon type={icon} color="#0e8ce2" height="2rem" />
                       <h6 className="text-dark mt-3">{t(label)}</h6>
                     </Button>
                   </Col>
@@ -182,11 +178,10 @@ export function SelectCategoryModal({
             }`}
             onClick={() => setActiveCarouselIndex((prev) => (prev ? 0 : 1))}
           >
-            {activeCarouselIndex ? (
-              <FaArrowLeft size={16} />
-            ) : (
-              <FaArrowRight size={16} />
-            )}
+            <Icon
+              type={activeCarouselIndex ? "arrow-left" : "arrow-right"}
+              height="1rem"
+            />
           </Button>
         )}
       </ModalBody>

package/src/product-set/item/CreateProductSetItem.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { FaPlus } from "react-icons/fa";
+import { Icon } from "../../static";
 
 interface CreateProductSetItemProps {
   onClick: () => void;
@@ -25,7 +25,12 @@ export function CreateProductSetItem({
       onClick={onClick}
       type="button"
     >
-      <FaPlus size={20} className="rounded product-set-item-icon" />
+      <Icon
+        type="plus"
+        height="1.25rem"
+        width="1.25rem"
+        className="rounded product-set-item-icon"
+      />
       <span>{title}</span>
     </button>
   );

package/src/product-set/popover/ProductSetPopover.tsx

@@ -7,7 +7,7 @@ import OverlayTrigger, {
   OverlayTriggerType,
 } from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
-import { FaPlus } from "react-icons/fa";
+import { Icon } from "../../static";
 
 export type ProductSetPopoverProps = {
   title?: string;
@@ -63,7 +63,7 @@ export const ProductSetPopover = forwardRef<
               }
             }}
           >
-            <FaPlus size={12} />
+            <Icon type="plus" width=".7rem" />
           </Button>
         </OverlayTrigger>
       </div>

package/src/product-set/product/ProductControl.tsx

@@ -39,13 +39,15 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-import { FaClipboard } from "react-icons/fa";
+
 import { FileUpload } from "../../file-upload";
 import { BooleanSwitch, FormNumberInput } from "../../static";
+import Icon from "../../static/Icon";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { ProductSetLoadingContext } from "../form/context";
 import {
@@ -726,7 +728,8 @@ export function ProductControl<T extends FormValues>({
                 variant="link"
                 className="d-flex align-items-center"
               >
-                <FaClipboard size={16} className="mr-2" /> {t("copy")}
+                <Icon type="clipboard" height="1rem" className="mr-2" />{" "}
+                {t("copy")}
               </Button>
             )}
           </div>

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -8,7 +8,7 @@ import { Form } from "react-bootstrap";
 import InputGroup from "react-bootstrap/InputGroup";
 import { Controller, Path, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaSortNumericUpAlt } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import { SelectItem } from "../../../types/generic/SelectItem";
 
 export interface ProductBookingManagementControlValues extends FormValues {
@@ -77,7 +77,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaSortNumericUpAlt size={16} />
+              <Icon type="sort-numeric-up-alt" width="1rem" />
             </InputGroup.Text>
           </InputGroup.Prepend>
 

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -9,7 +9,7 @@ import Col from "react-bootstrap/Col";
 import InputGroup from "react-bootstrap/InputGroup";
 import { Controller, Path, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaPoundSign } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 
 export interface ProductDepositControlValues extends FormValues {
   deposit: number;
@@ -41,7 +41,7 @@ export function ProductDepositControl<T extends FormValues>(
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaPoundSign size={10} className="p-0" />
+              <Icon type="pound-sign" width=".6rem" className="p-0" />
             </InputGroup.Text>
           </InputGroup.Prepend>
 

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -6,7 +6,7 @@ import Col from "react-bootstrap/Col";
 import InputGroup from "react-bootstrap/InputGroup";
 import { Controller, Path, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaPoundSign } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 
 export interface ProductPriceControlValues extends FormValues {
   price: number;
@@ -49,7 +49,7 @@ export function ProductPriceControl<T extends FormValues>({
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaPoundSign size={10} className="p-0" />
+              <Icon type="pound-sign" width=".6rem" className="p-0" />
             </InputGroup.Text>
           </InputGroup.Prepend>
 

package/src/report/card/ReportCard.tsx

@@ -1,10 +1,13 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 
+import { Icon } from "../../static";
+
 export interface ReportCardProps extends HasPermissionProp {
   name: string;
   onPress: () => void;
   className?: string;
+  iconType: string;
 }
 
 export function ReportCard({
@@ -12,6 +15,7 @@ export function ReportCard({
   onPress,
   className = "",
   hasPermission = true,
+  iconType,
 }: ReportCardProps) {
   const reportCardClasses = `report-card ${className}`;
 
@@ -24,6 +28,12 @@ export function ReportCard({
     >
       <div className="report-card-link text-center">
         <div className="d-flex justift-content-center flex-column">
+          <Icon
+            color="#0e8ce2"
+            className="mb-1"
+            type={iconType}
+            height="1.5rem"
+          />
           <h6>{name}</h6>
         </div>
       </div>

package/src/sales/booking/results/components/ResultCard.tsx

@@ -11,7 +11,7 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
-import { FaUser } from "react-icons/fa";
+import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
   className: string;
@@ -63,7 +63,7 @@ export const ResultCard = ({
       <div className="card-content">
         <div className="order-id">{id}</div>
         <div className="order-people">
-          <FaUser size={10} className="p-0" />
+          <Icon type="user" width="10" height="11" />
           {people}
         </div>
         <div className="order-description">

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { SyntheticEvent, forwardRef } from "react";
 import { FormControl } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { FaMinus, FaPlus } from "react-icons/fa";
+import { Icon } from "../../../static";
 
 type Sizes = "big" | "small";
 
@@ -92,7 +92,10 @@ export const NumberInputHorizontal = forwardRef<
           ].join(" ")}
           disabled={disabled || shouldHideButtons}
         >
-          <FaMinus className={hasBigSize ? "big_icon" : "small_icon"} />
+          <Icon
+            type="minus"
+            className={hasBigSize ? "big_icon" : "small_icon"}
+          />
         </button>
         <div
           className={[
@@ -127,7 +130,10 @@ export const NumberInputHorizontal = forwardRef<
           ].join(" ")}
           disabled={disabled || shouldHideButtons}
         >
-          <FaPlus className={hasBigSize ? "big_icon" : "small_icon"} />
+          <Icon
+            type="plus"
+            className={hasBigSize ? "big_icon" : "small_icon"}
+          />
         </button>
       </div>
     );

package/src/sales/modals/payment-modal/PaymentModal.tsx

@@ -5,7 +5,7 @@ import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import {
   SalePaymentForm,
   SalePaymentFormRef,
@@ -73,7 +73,7 @@ export const PaymentModal = ({
         </ModalTitle>
 
         <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-          <FaTimes size={20} />
+          <Icon type="times" height="1.2rem" />
         </Button>
       </ModalHeader>
 

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import { OrderPaymentType } from "@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import { EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS } from "../../constants";
 import { CurrencyNumberInput } from "../../../static/CurrencyNumberInput";
 
@@ -69,7 +69,7 @@ export const RefundModal = ({
           </ModalTitle>
 
           <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-            <FaTimes size={20} />
+            <Icon type="times" height="1.2rem" />
           </Button>
         </ModalHeader>
 

package/src/sales/notes/NotesTable.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState } from "react";
 import { Button, Table } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
-import { FaPlusCircle } from "react-icons/fa";
 import { TableRow, TableRowProps } from "./NotesTableRow";
 import { NoteForm } from "./note-form";
+import { Icon } from "../../static";
 
 export type NotesTableProps = Pick<TableRowProps, "onDeleteNote"> & {
   heading: string;
@@ -102,7 +102,7 @@ const AddNoteButton = ({ onClick }: { onClick: () => void }) => {
 
   return (
     <Button onClick={onClick} className="show-form-button">
-      {t("addNew")} <FaPlusCircle size={16} className="ml-2" />
+      {t("addNew")} <Icon className="ml-2" type="plus-circle" width="1rem" />
     </Button>
   );
 };

package/src/sales/notes/NotesTableRow.tsx

@@ -11,9 +11,9 @@ import {
   DATE_TIME_FULL_FORMAT,
 } from "@licklist/core/dist/Config";
 import { getClientTimeZone } from "@licklist/core/dist/Services";
-import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
 import { MenuButton } from "../../table";
+import { Icon } from "../../static";
 
 export type TableRowProps = {
   note: Note;
@@ -42,7 +42,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
       <td>
         <div className="controls">
           <span className="btn btn-sm eye">
-            <FaEye size={20} />
+            <Icon type="eye" width="20" />
           </span>
           <OverlayTrigger
             trigger="click"
@@ -70,7 +70,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                             confirm(() => onDeleteNote(note.id));
                           }}
                           name={t("remove")}
-                          icon={<FaTrashAlt size={12} />}
+                          icon="trash-alt"
                           className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                           rightIcon
                         />
@@ -89,7 +89,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                 setIsOverlayVisible(true);
               }}
             >
-              <FaEllipsisH />
+              <Icon type="ellipsis-h" />
             </button>
           </OverlayTrigger>
         </div>