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

package/src/styles/iframe-page/PageBody.scss

@@ -95,6 +95,7 @@
     }
 
     .children-wrapper {
+      overflow: auto;
       padding: 1rem;
       flex: 1;
 

package/src/table/MenuButton.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import Icon from "../static/Icon";
+import { ReactElement } from "react";
 
 export type MenuButtonProps = {
   onClick?: () => void;
@@ -7,8 +7,7 @@ export type MenuButtonProps = {
   rightIcon?: boolean;
   name: string;
   className?: string;
-  icon?: string;
-  iconWidth?: string;
+  icon?: ReactElement;
 };
 
 export const MenuButton = ({
@@ -18,10 +17,7 @@ export const MenuButton = ({
   icon,
   leftIcon,
   rightIcon,
-  iconWidth = "12",
 }: MenuButtonProps) => {
-  const iconComponent = icon ? <Icon type={icon} width={iconWidth} /> : null;
-
   return (
     <>
       <button
@@ -32,7 +28,7 @@ export const MenuButton = ({
         }}
         className={clsx(className)}
       >
-        {leftIcon && iconComponent}
+        {leftIcon && icon}
         <span
           className={clsx(
             icon && leftIcon && "ml-3",
@@ -41,7 +37,7 @@ export const MenuButton = ({
         >
           {name}
         </span>
-        {rightIcon && iconComponent}
+        {rightIcon && icon}
       </button>
     </>
   );

package/src/table/PaginationHelperComponent.tsx

@@ -5,8 +5,7 @@ import { useTranslation } from "react-i18next";
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import PaginationService from "@licklist/plugins/dist/services/Table/PaginationService";
 import clsx from "clsx";
-
-import { Icon } from "../static";
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 
 export interface PaginationHelperComponentProps {
   displayShowingSection?: boolean;
@@ -59,7 +58,7 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getPrevPage())}
         >
-          <Icon type="arrow-left" width="0.9rem" color="black" />
+          <FaArrowLeft size={14} color="black" />
         </button>
 
         {paginationService.getElements().map((element) => {
@@ -84,7 +83,7 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getNextPage())}
         >
-          <Icon type="arrow-right" width="0.9rem" color="black" />
+          <FaArrowRight size={14} color="black" />
         </button>
       </Pagination>
     ),

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

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

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

@@ -1,22 +1,19 @@
 import { Tooltip, OverlayTrigger } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
 import clsx from "clsx";
-
-import { Icon } from "../../../static";
+import { ReactElement } from "react";
 
 interface TipTapMenuItemProps {
   onClick: () => void;
   type: string;
-  iconName?: string;
-  customIcon?: React.ReactElement;
+  icon?: ReactElement;
   isActive?: boolean;
 }
 
 export const TipTapMenuItem = ({
   onClick,
   type,
-  iconName,
-  customIcon,
+  icon,
   isActive,
 }: TipTapMenuItemProps) => {
   const toltipId = useId();
@@ -34,7 +31,7 @@ export const TipTapMenuItem = ({
         onClick={onClick}
         onKeyPress={() => {}}
       >
-        {customIcon || <Icon type={iconName} height="1rem" color="black" />}
+        {icon}
       </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">
-            <Icon type="eye" color="#0E8CE2" width="20" />
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -70,7 +70,7 @@ export function VenueMapSetCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon="trash-alt"
+                                icon={<FaTrashAlt size={12} />}
                                 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);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </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 Icon from "../../../static/Icon";
+import { FaEllipsisH, FaPlus } from "react-icons/fa";
 
 type MainControlProps = {
   title: string;
@@ -47,12 +47,7 @@ export const VenueMapControl = ({
       >
         <div className="overflow-hidden name-wrapper w-100">
           {!showMenu && (
-            <Icon
-              type="plus"
-              height="1.25rem"
-              width="1.25rem"
-              className="rounded venue-map-zone-item-icon"
-            />
+            <FaPlus size={20} className="rounded venue-map-zone-item-icon" />
           )}
           <span className="name">{title || "Name"}</span>
         </div>
@@ -67,7 +62,7 @@ export const VenueMapControl = ({
             }}
             onKeyDown={(e) => e.stopPropagation()}
           >
-            <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
+            <FaEllipsisH color="#0E8CE2" size={16} />
           </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"
                 >
-                  <Icon type="trash" height="1rem" />
+                  <FaTrashAlt size={16} />
                   &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">
-            <Icon type="eye" color="#0E8CE2" width="20" />
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -71,7 +71,7 @@ export function ZoneCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon="trash-alt"
+                                icon={<FaTrashAlt size={12} />}
                                 className="zone-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -93,7 +93,7 @@ export function ZoneCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </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 { Icon } from "../../../static";
+import { FaCalendar, FaEllipsisH } from "react-icons/fa";
 
 export interface ZoneRecurrenceControlProps {
   zoneRecurrence?: { _id: string } & Partial<ZoneRecurrence>;
@@ -45,11 +45,7 @@ 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">
-          <Icon
-            type="calendar"
-            height="1rem"
-            className="zone-recurrence-icon-calendar"
-          />
+          <FaCalendar size={16} className="zone-recurrence-icon-calendar" />
           <span className="zone-recurrence-title d-flex flex-grow-1">
             {t("from")}{" "}
             {formatDate(zoneRecurrence.startDate, {
@@ -68,11 +64,7 @@ export const ZoneRecurrenceControl = ({
             onClick={() => onEdit(zoneRecurrence)}
             onKeyDown={() => onEdit(zoneRecurrence)}
           >
-            <Icon
-              type="ellipsis-h"
-              height="1rem"
-              className="zone-recurrence-icon-more"
-            />
+            <FaEllipsisH size={16} 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,11 +202,7 @@ export const ZoneRecurrencesControl = ({
             onClick={handleOnAdd}
             onKeyDown={handleOnAdd}
           >
-            <Icon
-              type="plus-circle"
-              height="1rem"
-              className="zone-recurrence-icon-add mr-2"
-            />
+            <FaPlusCircle size={16} className="zone-recurrence-icon-add mr-2" />
             {t("addDates")}
           </div>