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

package/src/tiptap-editor/TipTapMenu/TipTapMenu.tsx

@@ -3,14 +3,6 @@ import { Editor } from "@tiptap/react";
 import { Row } from "react-bootstrap";
 import clsx from "clsx";
 
-import {
-  FaList,
-  FaListOl,
-  FaRedoAlt,
-  FaSmile,
-  FaTasks,
-  FaUndoAlt,
-} from "react-icons/fa";
 import { ReactComponent as BoldSvg } from "../../assets/editor/bold.svg";
 import { ReactComponent as ItalicSvg } from "../../assets/editor/italic.svg";
 import { ReactComponent as StrikethroughSvg } from "../../assets/editor/strikethrough.svg";
@@ -39,19 +31,19 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBold().run()}
         type="Bold"
-        icon={<BoldSvg />}
+        customIcon={<BoldSvg />}
         isActive={editor.isActive("bold")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleItalic().run()}
         type="Italic"
-        icon={<ItalicSvg />}
+        customIcon={<ItalicSvg />}
         isActive={editor.isActive("italic")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleStrike().run()}
         type="Strike"
-        icon={<StrikethroughSvg />}
+        customIcon={<StrikethroughSvg />}
         isActive={editor.isActive("strike")}
       />
       {withEmoji && (
@@ -68,7 +60,7 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
                 .run()
             }
             type="Emoji"
-            icon={<FaSmile />}
+            iconName="smile"
           />
         </>
       )}
@@ -76,75 +68,75 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         type="Heading 1"
-        icon={<H1Svg />}
+        customIcon={<H1Svg />}
         isActive={editor.isActive("heading", { level: 1 })}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         type="Heading 2"
-        icon={<H2Svg />}
+        customIcon={<H2Svg />}
         isActive={editor.isActive("heading", { level: 2 })}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setParagraph().run()}
         type="Paragraph"
-        icon={<ParagraphSvg />}
+        customIcon={<ParagraphSvg />}
         isActive={editor.isActive("paragraph")}
       />
 
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         type="Bullet list"
-        icon={<FaList />}
+        iconName="list"
         isActive={editor.isActive("bulletList")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBulletList().run()}
         type="Ordered list"
-        icon={<FaListOl />}
+        iconName="list-ol"
         isActive={editor.isActive("orderedList")}
       />
       <TipTapMenuItem
         onClick={() => editor.commands.toggleTaskList()}
         type="Task list"
-        icon={<FaTasks />}
+        iconName="tasks"
         isActive={editor.isActive("taskList")}
       />
       <div className="divider" />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBlockquote().run()}
         type="Blockquote"
-        icon={<DoubleQuotesLSvg />}
+        customIcon={<DoubleQuotesLSvg />}
         isActive={editor.isActive("blockquote")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setHorizontalRule().run()}
         type="Horizontal Rule"
-        icon={<SepatatorSvg />}
+        customIcon={<SepatatorSvg />}
       />
       <div className="divider" />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setHardBreak().run()}
         type="Hard Break"
-        icon={<TextWrapSvg />}
+        customIcon={<TextWrapSvg />}
       />
       <TipTapMenuItem
         onClick={() =>
           editor.chain().focus().unsetAllMarks().clearNodes().run()
         }
         type="Clear Format"
-        icon={<FormatClearSvg />}
+        customIcon={<FormatClearSvg />}
       />
       <div className="divider" />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().undo().run()}
         type="Undo"
-        icon={<FaUndoAlt />}
+        iconName="undo-alt"
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().redo().run()}
         type="Redo"
-        icon={<FaRedoAlt />}
+        iconName="redo-alt"
       />
     </Row>
   );

package/src/tiptap-editor/TipTapMenu/components/TipTapMenuItem.tsx

@@ -1,19 +1,22 @@
 import { Tooltip, OverlayTrigger } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
 import clsx from "clsx";
-import { ReactElement } from "react";
+
+import { Icon } from "../../../static";
 
 interface TipTapMenuItemProps {
   onClick: () => void;
   type: string;
-  icon?: ReactElement;
+  iconName?: string;
+  customIcon?: React.ReactElement;
   isActive?: boolean;
 }
 
 export const TipTapMenuItem = ({
   onClick,
   type,
-  icon,
+  iconName,
+  customIcon,
   isActive,
 }: TipTapMenuItemProps) => {
   const toltipId = useId();
@@ -31,7 +34,7 @@ export const TipTapMenuItem = ({
         onClick={onClick}
         onKeyPress={() => {}}
       >
-        {icon}
+        {customIcon || <Icon type={iconName} height="1rem" color="black" />}
       </div>
     </OverlayTrigger>
   );

package/src/venue-map-sets/card/VenueMapSetCard.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { FaEye, FaEllipsisH, FaTrashAlt } from "react-icons/fa";
 import { MenuButton } from "../../table/MenuButton";
 import { ConfirmModal } from "../../modals";
+import { Icon } from "../../static";
 
 export interface VenueMapSetCardProps extends HasPermissionProp {
   name: string;
@@ -39,7 +39,7 @@ export function VenueMapSetCard({
         <div className="venue-map-set-card-link">{name}</div>
         <div className="d-flex">
           <div className="venue-map-set-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+            <Icon type="eye" color="#0E8CE2" width="20" />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -70,7 +70,7 @@ export function VenueMapSetCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon={<FaTrashAlt size={12} />}
+                                icon="trash-alt"
                                 className="venue-map-set-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -92,7 +92,7 @@ export function VenueMapSetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <FaEllipsisH />
+              <Icon type="ellipsis-h" />
             </button>
           </OverlayTrigger>
         </div>

package/src/venue-map-sets/form/components/VenueMapControl.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import clsx from "clsx";
-import { FaEllipsisH, FaPlus } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 
 type MainControlProps = {
   title: string;
@@ -47,7 +47,12 @@ export const VenueMapControl = ({
       >
         <div className="overflow-hidden name-wrapper w-100">
           {!showMenu && (
-            <FaPlus size={20} className="rounded venue-map-zone-item-icon" />
+            <Icon
+              type="plus"
+              height="1.25rem"
+              width="1.25rem"
+              className="rounded venue-map-zone-item-icon"
+            />
           )}
           <span className="name">{title || "Name"}</span>
         </div>
@@ -62,7 +67,7 @@ export const VenueMapControl = ({
             }}
             onKeyDown={(e) => e.stopPropagation()}
           >
-            <FaEllipsisH color="#0E8CE2" size={16} />
+            <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
           </div>
         )}
       </button>

package/src/venue-map-sets/form/components/VenueMapModal.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { useFormContext } from "react-hook-form";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../../modals/confirmation";
+import Icon from "../../../static/Icon";
 import { VenueMapWithLocalBlob } from "../types";
 import { VenueMapImageControl } from "./VenueMapImageControl";
 import { getVenueMapsRequiredKeys } from "../utils";
@@ -152,7 +152,7 @@ export const VenueMapModal = ({
                   variant="outline-danger"
                   className="d-flex align-items-center"
                 >
-                  <FaTrashAlt size={16} />
+                  <Icon type="trash" height="1rem" />
                   &nbsp;
                   <span className="d-none d-sm-inline ml-2">{t("delete")}</span>
                 </Button>

package/src/zone/card/ZoneCard.tsx

@@ -5,8 +5,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 ZoneCardProps extends HasPermissionProp {
@@ -40,7 +40,7 @@ export function ZoneCard({
         <div className="zone-card-link">{name}</div>
         <div className="d-flex">
           <div className="zone-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+            <Icon type="eye" color="#0E8CE2" width="20" />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -71,7 +71,7 @@ export function ZoneCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon={<FaTrashAlt size={12} />}
+                                icon="trash-alt"
                                 className="zone-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -93,7 +93,7 @@ export function ZoneCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <FaEllipsisH />
+              <Icon type="ellipsis-h" />
             </button>
           </OverlayTrigger>
         </div>

package/src/zone/form/components/ZoneRecurrenceControl.tsx

@@ -5,7 +5,7 @@ import { ZoneRecurrence } from "@licklist/core/dist/DataMapper/Provider/ZoneRecu
 
 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 ZoneRecurrenceControlProps {
   zoneRecurrence?: { _id: string } & Partial<ZoneRecurrence>;
@@ -45,7 +45,11 @@ export const ZoneRecurrenceControl = ({
         className="zone-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} className="zone-recurrence-icon-calendar" />
+          <Icon
+            type="calendar"
+            height="1rem"
+            className="zone-recurrence-icon-calendar"
+          />
           <span className="zone-recurrence-title d-flex flex-grow-1">
             {t("from")}{" "}
             {formatDate(zoneRecurrence.startDate, {
@@ -64,7 +68,11 @@ export const ZoneRecurrenceControl = ({
             onClick={() => onEdit(zoneRecurrence)}
             onKeyDown={() => onEdit(zoneRecurrence)}
           >
-            <FaEllipsisH size={16} className="zone-recurrence-icon-more" />
+            <Icon
+              type="ellipsis-h"
+              height="1rem"
+              className="zone-recurrence-icon-more"
+            />
           </div>
         </span>
         <span className="zone-recurrence-description">

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -12,8 +12,8 @@ import {
 import { DndContext } from "@dnd-kit/core";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 
-import { FaPlusCircle } from "react-icons/fa";
 import { CONFIRM_MODAL_ACTIONS } from "../../../modals/confirmation/ConfirmModal";
+import { Icon } from "../../../static";
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputValues,
@@ -202,7 +202,11 @@ export const ZoneRecurrencesControl = ({
             onClick={handleOnAdd}
             onKeyDown={handleOnAdd}
           >
-            <FaPlusCircle size={16} className="zone-recurrence-icon-add mr-2" />
+            <Icon
+              type="plus-circle"
+              height="1rem"
+              className="zone-recurrence-icon-add mr-2"
+            />
             {t("addDates")}
           </div>