@licklist/design 0.66.9-dev.1 → 0.66.10-dev.0

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -6,7 +6,7 @@ import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export interface FullscreenModalProps {
   children?: (confirm: () => void) => ReactNode;
@@ -63,7 +63,7 @@ export const FullscreenModal = ({
               className="btn-sm rounded"
               onClick={handleClose}
             >
-              <Icon type="times" height="1rem" />
+              <FaTimes size={16} />
             </Button>
           </ModalHeader>
         )}

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -2,8 +2,8 @@ import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+import { FaTrashAlt, FaCopy } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
-import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface EmailTemplateCardProps extends HasPermissionProp {
@@ -53,7 +53,7 @@ export function EmailTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <Icon type="trash-alt" />
+                <FaTrashAlt />
               </button>
             )}
           </ConfirmModal>
@@ -63,7 +63,7 @@ export function EmailTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <Icon type="copy" />
+          <FaCopy />
         </button>
       </div>
       <div className={`mt-${isDefault ? "3" : "4"}`}>

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -2,8 +2,8 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+import { FaCopy, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
-import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface SmsTemplateCardProps extends HasPermissionProp {
@@ -51,7 +51,7 @@ export function SmsTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <Icon type="trash-alt" />
+                <FaTrashAlt />
               </button>
             )}
           </ConfirmModal>
@@ -61,7 +61,7 @@ export function SmsTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <Icon type="copy" />
+          <FaCopy />
         </button>
       </div>
       <div className="mt-2">

package/src/product-set/card/ProductSetCard.tsx

@@ -6,9 +6,8 @@ import clsx from "clsx";
 import { useId } from "@react-aria/utils";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-
+import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
-import { Icon } from "../../static";
 import { MenuButton } from "../../table/MenuButton";
 
 export interface ProductSetCardProps extends HasPermissionProp {
@@ -59,7 +58,7 @@ export function ProductSetCard({
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">
-            <Icon type="eye" color="#0E8CE2" width="20" />
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -106,7 +105,7 @@ export function ProductSetCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon="trash-alt"
+                                icon={<FaTrashAlt size={12} />}
                                 className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -128,7 +127,7 @@ export function ProductSetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </button>
           </OverlayTrigger>
         </div>

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,9 +287,8 @@ export const DateAndRecurrenceInput = ({
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
-              <Icon
-                type="plus-circle"
-                height="1rem"
+              <FaPlusCircle
+                size={16}
                 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}
             >
-              <Icon
-                type="plus-circle"
-                height="1rem"
+              <FaPlusCircle
+                size={16}
                 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 { Icon } from "../../static";
+import { FaCalendar, FaEllipsisH } from "react-icons/fa";
 
 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">
-          <Icon
-            type="calendar"
-            height="1rem"
+          <FaCalendar
+            size={16}
             className="product-set-recurrence-icon-calendar"
           />
+
           <span className="product-set-recurrence-title d-flex flex-grow-1">
             {t("from")}{" "}
             {formatDate(menuRecurrence.startDate, {
@@ -74,9 +74,8 @@ export const ProductSetRecurrenceControl = ({
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
-            <Icon
-              type="ellipsis-h"
-              height="1rem"
+            <FaEllipsisH
+              size={16}
               className="product-set-recurrence-icon-more"
             />
           </div>

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

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
-
-import { Icon } from "../../static";
+import { FaCalendar, FaEllipsisH } from "react-icons/fa";
 
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
@@ -23,9 +22,8 @@ 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">
-          <Icon
-            type="calendar"
-            height="1rem"
+          <FaCalendar
+            size={16}
             className="product-set-recurrence-icon-calendar"
           />
           <span className="product-set-recurrence-title d-flex flex-grow-1">
@@ -41,9 +39,8 @@ export const ProductSetRecurrenceOverridesControl = ({
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
-            <Icon
-              type="ellipsis-h"
-              height="1rem"
+            <FaEllipsisH
+              size={16}
               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 { Icon, Image } from "../../static";
+import { FaCheck, FaTimes } from "react-icons/fa";
+import { Image } from "../../static";
 
 export interface TutorialGifCardProps {
   tutorialAsset?: string;
@@ -26,12 +26,10 @@ const TutorialGifCard = ({
       <Card className={`tutorial-card ${!isVisible && "hidden"}`}>
         <Card.Header className="tutorial-card-header">
           <div>
-            <Icon
-              type="check"
+            <FaCheck
               color="white"
-              height="0.9rem"
-              width="0.9rem"
               className="rounded product-set-item-icon"
+              size={14}
             />
             <span>{t("bookedTopTip")}</span>
           </div>
@@ -41,12 +39,7 @@ const TutorialGifCard = ({
             type="button"
           >
             <span>{t("gotIt")}</span>
-            <Icon
-              type="times"
-              height="1.125rem"
-              width="1.125rem"
-              className="rounded tutorial-close-icon p-1"
-            />
+            <FaTimes size={18} 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"
     >
-      <Icon type="trash" height="1rem" />{" "}
+      <FaTrashAlt size={16} />{" "}
       <span className="d-none d-sm-inline ml-2">{t("delete")}</span>
     </Button>
   );

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

@@ -1,47 +1,17 @@
 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
-            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>
-      {/* <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> */}
-    </>
+        <Button type="submit">{t("save")}</Button>
+      </div>
+    </div>
   );
 }

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

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

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { Icon } from "../../static";
+import { FaPlus } from "react-icons/fa";
 
 interface CreateProductSetItemProps {
   onClick: () => void;
@@ -25,12 +25,7 @@ export function CreateProductSetItem({
       onClick={onClick}
       type="button"
     >
-      <Icon
-        type="plus"
-        height="1.25rem"
-        width="1.25rem"
-        className="rounded product-set-item-icon"
-      />
+      <FaPlus size={20} 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 { Icon } from "../../static";
+import { FaPlus } from "react-icons/fa";
 
 export type ProductSetPopoverProps = {
   title?: string;
@@ -63,7 +63,7 @@ export const ProductSetPopover = forwardRef<
               }
             }}
           >
-            <Icon type="plus" width=".7rem" />
+            <FaPlus size={12} />
           </Button>
         </OverlayTrigger>
       </div>

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

@@ -39,15 +39,13 @@ 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 {
@@ -728,8 +726,7 @@ export function ProductControl<T extends FormValues>({
                 variant="link"
                 className="d-flex align-items-center"
               >
-                <Icon type="clipboard" height="1rem" className="mr-2" />{" "}
-                {t("copy")}
+                <FaClipboard size={16} 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 Icon from "../../../static/Icon";
+import { FaSortNumericUpAlt } from "react-icons/fa";
 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>
-              <Icon type="sort-numeric-up-alt" width="1rem" />
+              <FaSortNumericUpAlt size={16} />
             </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 Icon from "../../../static/Icon";
+import { FaPoundSign } from "react-icons/fa";
 
 export interface ProductDepositControlValues extends FormValues {
   deposit: number;
@@ -41,7 +41,7 @@ export function ProductDepositControl<T extends FormValues>(
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <Icon type="pound-sign" width=".6rem" className="p-0" />
+              <FaPoundSign size={10} 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 Icon from "../../../static/Icon";
+import { FaPoundSign } from "react-icons/fa";
 
 export interface ProductPriceControlValues extends FormValues {
   price: number;
@@ -49,7 +49,7 @@ export function ProductPriceControl<T extends FormValues>({
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <Icon type="pound-sign" width=".6rem" className="p-0" />
+              <FaPoundSign size={10} className="p-0" />
             </InputGroup.Text>
           </InputGroup.Prepend>
 

package/src/report/card/ReportCard.tsx

@@ -1,13 +1,10 @@
 /* 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({
@@ -15,7 +12,6 @@ export function ReportCard({
   onPress,
   className = "",
   hasPermission = true,
-  iconType,
 }: ReportCardProps) {
   const reportCardClasses = `report-card ${className}`;
 
@@ -28,12 +24,6 @@ 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 Icon from "../../../../static/Icon";
+import { FaUser } from "react-icons/fa";
 
 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">
-          <Icon type="user" width="10" height="11" />
+          <FaUser size={10} className="p-0" />
           {people}
         </div>
         <div className="order-description">