maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace react icons with lucidedev (#8146) 

* migrate from react-icons to lucide-react

* replace react-icon with lucide-dev: Webhook Icon

* add lucide transformer

* Fix LinkIcon import

* Update yarn.lock to include monorepo deps

* Migrated icons in ChargeCardDialog

* Port Storybook to new icons as well

* Adjust Info & Globe icons size to match react-icons size

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>
This commit is contained in:
Abdallah Alsamman 2023-04-12 18:26:31 +03:00 committed by GitHub
parent fb9c1b18e0
commit 91f381bce9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
176 changed files with 830 additions and 867 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/components/AddToHomescreen.tsx
View File

@ -1,7 +1,7 @@
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { FiX } from "@calcom/ui/components/icon";
import { X } from "@calcom/ui/components/icon";
export default function AddToHomescreen() {
const { t } = useLocale();
@ -40,7 +40,7 @@ export default function AddToHomescreen() {
type="button"
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
<span className="sr-only">{t("dismiss")}</span>
<FiX className="text-inverted h-6 w-6" aria-hidden="true" />
<X className="text-inverted h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>

4
apps/web/components/AppListCard.tsx
View File

@ -6,7 +6,7 @@ import { z } from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
import { Badge, ListItemText } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon";
import { AlertCircle } from "@calcom/ui/components/icon";
type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
@ -77,7 +77,7 @@ export default function AppListCard(props: AppListCardProps) {
<ListItemText component="p">{description}</ListItemText>
{invalidCredential && (
<div className="flex gap-x-2 pt-2">
<FiAlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
<AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
<ListItemText component="p" className="whitespace-pre-wrap text-red-500">
{t("invalid_credential")}
</ListItemText>

12
apps/web/components/Embed.tsx
View File

@ -22,7 +22,7 @@ import {
TextField,
ColorPicker,
} from "@calcom/ui";
import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
import { Code, Trello, Sun, ArrowLeft } from "@calcom/ui/components/icon";
import Select from "@components/ui/form/Select";
@ -493,7 +493,7 @@ const tabs = [
{
name: "HTML",
href: "embedTabName=embed-code",
icon: FiCode,
icon: Code,
type: "code",
Component: forwardRef<
HTMLTextAreaElement | HTMLIFrameElement | null,
@ -546,7 +546,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
{
name: "React",
href: "embedTabName=embed-react",
icon: FiCode,
icon: Code,
type: "code",
Component: forwardRef<
HTMLTextAreaElement | HTMLIFrameElement | null,
@ -586,7 +586,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
{
name: "Preview",
href: "embedTabName=embed-preview",
icon: FiTrello,
icon: Trello,
type: "iframe",
Component: forwardRef<
HTMLIFrameElement | HTMLTextAreaElement | null,
@ -622,7 +622,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
return (
<components.Control {...props}>
<FiSun className="text-subtle ml-2 h-4 w-4" />
<Sun className="text-subtle ml-2 h-4 w-4" />
{children}
</components.Control>
);
@ -830,7 +830,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
onClick={() => {
removeQueryParams(router, ["embedType", "embedTabName"]);
}}>
<FiArrowLeft className="mr-4 w-4" />
<ArrowLeft className="mr-4 w-4" />
</button>
{embed.title}
</h3>

14
apps/web/components/SettingsShell.tsx
View File

@ -3,7 +3,7 @@ import React from "react";
import Shell from "@calcom/features/shell/Shell";
import { ErrorBoundary } from "@calcom/ui";
import { FiCreditCard, FiKey, FiLock, FiTerminal, FiUser, FiUsers } from "@calcom/ui/components/icon";
import { CreditCard, Key, Lock, Terminal, User, Users } from "@calcom/ui/components/icon";
import NavTabs from "./NavTabs";
@ -11,32 +11,32 @@ const tabs = [
{
name: "profile",
href: "/settings/my-account/profile",
icon: FiUser,
icon: User,
},
{
name: "teams",
href: "/settings/teams",
icon: FiUsers,
icon: Users,
},
{
name: "security",
href: "/settings/security",
icon: FiKey,
icon: Key,
},
{
name: "developer",
href: "/settings/developer",
icon: FiTerminal,
icon: Terminal,
},
{
name: "billing",
href: "/settings/billing",
icon: FiCreditCard,
icon: CreditCard,
},
{
name: "admin",
href: "/settings/admin",
icon: FiLock,
icon: Lock,
adminRequired: true,
},
];

6
apps/web/components/apps/AdditionalCalendarSelector.tsx
View File

@ -9,7 +9,7 @@ import {
DropdownMenuItem,
DropdownItem,
} from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { Plus } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@ -40,7 +40,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
return (
<Dropdown modal={false}>
<DropdownMenuTrigger asChild>
<Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}>
<Button StartIcon={Plus} color="secondary" {...(isLoading && { loading: isLoading })}>
{t("add")}
</Button>
</DropdownMenuTrigger>
@ -48,7 +48,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
{options.map((data) => (
<DropdownMenuItem key={data.slug} className="focus:outline-none">
{data.slug === "add-new" ? (
<DropdownItem StartIcon={FiPlus} color="minimal" href="/apps/categories/calendar">
<DropdownItem StartIcon={Plus} color="minimal" href="/apps/categories/calendar">
{t("install_new_calendar_app")}
</DropdownItem>
) : (

27
apps/web/components/apps/App.tsx
View File

@ -14,16 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import type { App as AppType } from "@calcom/types/App";
import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
import {
FiBookOpen,
FiCheck,
FiExternalLink,
FiFile,
FiFlag,
FiMail,
FiPlus,
FiShield,
} from "@calcom/ui/components/icon";
import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
/* These app slugs all require Google Cal to be installed */
@ -153,7 +144,7 @@ const Component = ({
isGlobal ||
(existingCredentials.length > 0 && allowedMultipleInstalls ? (
<div className="flex space-x-3">
<Button StartIcon={FiCheck} color="secondary" disabled>
<Button StartIcon={Check} color="secondary" disabled>
{existingCredentials.length > 0
? t("active_install", { count: existingCredentials.length })
: t("default")}
@ -175,7 +166,7 @@ const Component = ({
}
return (
<Button
StartIcon={FiPlus}
StartIcon={Plus}
{...props}
// @TODO: Overriding color and size prevent us from
// having to duplicate InstallAppButton for now.
@ -275,7 +266,7 @@ const Component = ({
rel="noreferrer"
className="text-emphasis text-sm font-normal no-underline hover:underline"
href={docs}>
<FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
<BookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
{t("documentation")}
</a>
</li>
@ -287,7 +278,7 @@ const Component = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={website}>
<FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
<ExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
{website.replace("https://", "")}
</a>
</li>
@ -299,7 +290,7 @@ const Component = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={"mailto:" + email}>
<FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
<Mail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
{email}
</a>
@ -312,7 +303,7 @@ const Component = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={tos}>
<FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
<File className="text-subtle mr-1 -mt-px inline h-4 w-4" />
{t("terms_of_service")}
</a>
</li>
@ -324,7 +315,7 @@ const Component = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={privacy}>
<FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
<Shield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
{t("privacy_policy")}
</a>
</li>
@ -335,7 +326,7 @@ const Component = ({
{t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
</span>
<a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
<FiFlag className="inline h-3 w-3" /> {t("report_app")}
<Flag className="inline h-3 w-3" /> {t("report_app")}
</a>
</div>
</div>

10
apps/web/components/apps/CalendarListContainer.tsx
View File

@ -17,7 +17,7 @@ import {
Switch,
ShellSubHeading,
} from "@calcom/ui";
import { FiArrowLeft, FiCalendar, FiPlus } from "@calcom/ui/components/icon";
import { ArrowLeft, Calendar, Plus } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@ -100,7 +100,7 @@ function CalendarSwitch(props: {
/>
{!!props.destination && (
<span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
<FiArrowLeft className="h-4 w-4" />
<ArrowLeft className="h-4 w-4" />
{t("adding_events_to")}
</span>
)}
@ -282,8 +282,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
<div className="bg-muted border-subtle flex justify-between rounded-md border p-4">
<div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
<div className="bg-default border-subtle relative rounded-md border p-1.5">
<FiCalendar className="text-default h-8 w-8" strokeWidth="1" />
<FiPlus
<Calendar className="text-default h-8 w-8" strokeWidth="1" />
<Plus
className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
strokeWidth="4"
/>
@ -322,7 +322,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
</>
) : (
<EmptyScreen
Icon={FiCalendar}
Icon={Calendar}
headline={t("no_category_apps", {
category: t("calendar").toLowerCase(),
})}

4
apps/web/components/apps/layouts/AppsLayout.tsx
View File

@ -6,7 +6,7 @@ import React from "react";
import Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon";
import { AlertCircle } from "@calcom/ui/components/icon";
type AppsLayoutProps = {
children: React.ReactNode;
@ -27,7 +27,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
<main className="w-full">
{emptyStore ? (
<EmptyScreen
Icon={FiAlertCircle}
Icon={AlertCircle}
headline={t("no_apps")}
description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""}
buttonText={session.data?.user.role === "ADMIN" ? t("apps_settings") : ""}

14
apps/web/components/apps/layouts/InstalledAppsLayout.tsx
View File

@ -6,38 +6,38 @@ import type { InstalledAppVariants } from "@calcom/app-store/utils";
import Shell from "@calcom/features/shell/Shell";
import { trpc } from "@calcom/trpc/react";
import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
import { FiBarChart, FiCalendar, FiCreditCard, FiGrid, FiShare2, FiVideo } from "@calcom/ui/components/icon";
import { BarChart, Calendar, CreditCard, Grid, Share2, Video } from "@calcom/ui/components/icon";
const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
{
name: "calendar",
href: "/apps/installed/calendar",
icon: FiCalendar,
icon: Calendar,
},
{
name: "conferencing",
href: "/apps/installed/conferencing",
icon: FiVideo,
icon: Video,
},
{
name: "payment",
href: "/apps/installed/payment",
icon: FiCreditCard,
icon: CreditCard,
},
{
name: "automation",
href: "/apps/installed/automation",
icon: FiShare2,
icon: Share2,
},
{
name: "analytics",
href: "/apps/installed/analytics",
icon: FiBarChart,
icon: BarChart,
},
{
name: "other",
href: "/apps/installed/other",
icon: FiGrid,
icon: Grid,
},
];

4
apps/web/components/availability/SkeletonLoader.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { Button, SkeletonText } from "@calcom/ui";
import { FiMoreHorizontal } from "@calcom/ui/components/icon";
import { MoreHorizontal } from "@calcom/ui/components/icon";
import classNames from "@lib/classNames";
@ -31,7 +31,7 @@ function SkeletonItem() {
type="button"
variant="icon"
color="secondary"
StartIcon={FiMoreHorizontal}
StartIcon={MoreHorizontal}
disabled
/>
</div>

4
apps/web/components/booking/AvailableEventLocations.tsx
View File

@ -4,7 +4,7 @@ import { getEventLocationType, locationKeyToString } from "@calcom/app-store/loc
import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Tooltip } from "@calcom/ui";
import { FiLink } from "@calcom/ui/components/icon";
import { Link } from "@calcom/ui/components/icon";
import type { Props } from "./pages/AvailabilityPage";
@ -41,7 +41,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
return (
<div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
{eventLocationType.iconUrl === "/link.svg" ? (
<FiLink className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
<Link className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
) : (
<img
src={eventLocationType.iconUrl}

6
apps/web/components/booking/BookingDescription.tsx
View File

@ -6,7 +6,7 @@ import dayjs from "@calcom/dayjs";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge } from "@calcom/ui";
import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
import { CheckSquare, Clock } from "@calcom/ui/components/icon";
import useRouterQuery from "@lib/hooks/useRouterQuery";
@ -103,7 +103,7 @@ const BookingDescription: FC<Props> = (props) => {
{requiresConfirmation && (
<div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
<div>
<FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
<CheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
</div>
{requiresConfirmationText}
</div>
@ -117,7 +117,7 @@ const BookingDescription: FC<Props> = (props) => {
isBookingPage && "text-default",
!eventType.metadata?.multipleDuration && "items-center"
)}>
<FiClock
<Clock
className={classNames(
"min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
isBookingPage && "mt-[2px]"

4
apps/web/components/booking/BookingDescriptionPayment.tsx
View File

@ -2,7 +2,7 @@ import type { TFunction } from "next-i18next";
import { FormattedNumber, IntlProvider } from "react-intl";
import getPaymentAppData from "@calcom/lib/getPaymentAppData";
import { FiCreditCard } from "@calcom/ui/components/icon";
import { CreditCard } from "@calcom/ui/components/icon";
const BookingDescriptionPayment = (props: {
eventType: Parameters<typeof getPaymentAppData>[0];
@ -13,7 +13,7 @@ const BookingDescriptionPayment = (props: {
return (
<p className="text-bookinglight -ml-2 px-2 text-sm ">
<FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
{paymentAppData.paymentOption === "HOLD" ? (
<>
{props.t("no_show_fee_amount", {

29
apps/web/components/booking/BookingListItem.tsx
View File

@ -28,16 +28,7 @@ import {
TableActions,
TextAreaField,
} from "@calcom/ui";
import {
FiCheck,
FiClock,
FiMapPin,
FiRefreshCcw,
FiSend,
FiSlash,
FiX,
FiCreditCard,
} from "@calcom/ui/components/icon";
import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";
import useMeQuery from "@lib/hooks/useMeQuery";
@ -125,7 +116,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setRejectionDialogIsOpen(true);
},
icon: FiSlash,
icon: Slash,
disabled: mutation.isLoading,
},
// For bookings with payment, only confirm if the booking is paid for
@ -137,7 +128,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
bookingConfirm(true);
},
icon: FiCheck,
icon: Check,
disabled: mutation.isLoading,
},
]
@ -165,7 +156,7 @@ function BookingListItem(booking: BookingItemProps) {
isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
}${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
`,
icon: FiX,
icon: X,
},
{
id: "edit_booking",
@ -173,7 +164,7 @@ function BookingListItem(booking: BookingItemProps) {
actions: [
{
id: "reschedule",
icon: FiClock,
icon: Clock,
label: t("reschedule_booking"),
href: `/reschedule/${booking.uid}${
booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@ -181,7 +172,7 @@ function BookingListItem(booking: BookingItemProps) {
},
{
id: "reschedule_request",
icon: FiSend,
icon: Send,
iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
label: t("send_reschedule_request"),
onClick: () => {
@ -194,7 +185,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setIsOpenLocationDialog(true);
},
icon: FiMapPin,
icon: MapPin,
},
],
},
@ -208,7 +199,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setChargeCardDialogIsOpen(true);
},
icon: FiCreditCard,
icon: CreditCard,
},
];
@ -222,7 +213,7 @@ function BookingListItem(booking: BookingItemProps) {
const RequestSentMessage = () => {
return (
<Badge startIcon={FiSend} size="md" variant="gray" data-testid="request_reschedule_sent">
<Badge startIcon={Send} size="md" variant="gray" data-testid="request_reschedule_sent">
{t("reschedule_request_sent")}
</Badge>
);
@ -518,7 +509,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
);
})}>
<div className="text-default">
<FiRefreshCcw
<RefreshCcw
strokeWidth="3"
className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
/>

4
apps/web/components/booking/CancelBooking.tsx
View File

@ -6,7 +6,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import type { RecurringEvent } from "@calcom/types/Calendar";
import { Button, TextArea } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon";
import { X } from "@calcom/ui/components/icon";
type Props = {
booking: {
@ -48,7 +48,7 @@ export default function CancelBooking(props: Props) {
{error && (
<div className="mt-8">
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<FiX className="h-6 w-6 text-red-600" />
<X className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">

4
apps/web/components/booking/TimezoneDropdown.tsx
View File

@ -1,4 +1,4 @@
import { FiGlobe } from "@calcom/ui/components/icon";
import { Globe } from "@calcom/ui/components/icon";
import { timeZone as localStorageTimeZone } from "@lib/clock";
@ -18,7 +18,7 @@ export function TimezoneDropdown({
return (
<>
<div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
<FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
<Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
<TimeOptions onSelectTimeZone={handleSelectTimeZone} />
</div>
</>

8
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -25,7 +25,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
import { trpc } from "@calcom/trpc";
import { HeadSeo, useCalcomTheme } from "@calcom/ui";
import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
import { CreditCard, User, RefreshCcw } from "@calcom/ui/components/icon";
import { timeZone as localStorageTimeZone } from "@lib/clock";
@ -210,7 +210,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
" text-default",
"ltr:mr-[10px] rtl:ml-[10px]"
)}>
<FiUser
<User
className={classNames(
"min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
"mt-[2px]"
@ -221,7 +221,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
)}
{!rescheduleUid && eventType.recurringEvent && (
<div className="flex items-start text-sm font-medium">
<FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
<RefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
<div>
<p className="mb-1 -ml-2 inline px-2 py-1">
{getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@ -246,7 +246,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
)}
{paymentAppData.price > 0 && (
<p className="-ml-2 px-2 text-sm font-medium">
<FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
{paymentAppData.paymentOption === "HOLD" ? (
<>
{t("no_show_fee_amount", {

14
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -42,7 +42,7 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { TimeFormat } from "@calcom/lib/timeFormat";
import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
import { AlertTriangle, Calendar, RefreshCw, User } from "@calcom/ui/components/icon";
import { timeZone } from "@lib/clock";
import useRouterQuery from "@lib/hooks/useRouterQuery";
@ -537,8 +537,8 @@ const BookingPage = ({
<BookingDescription isBookingPage profile={profile} eventType={eventType}>
<BookingDescriptionPayment eventType={eventType} t={t} />
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
<div className="text-default items-start text-sm font-medium">
<FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<div className="dark:text-inverted text-default items-start text-sm font-medium">
<RefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<p className="-ml-2 inline-block items-center px-2">
{getEveryFreqFor({
t,
@ -549,7 +549,7 @@ const BookingPage = ({
</div>
)}
<div className="text-bookinghighlight flex items-start text-sm">
<FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<Calendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<div className="text-sm font-medium">
{isClientTimezoneAvailable &&
(rescheduleUid || !eventType.recurringEvent?.freq) &&
@ -580,7 +580,7 @@ const BookingPage = ({
{t("former_time")}
</p>
<p className="line-through ">
<FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<Calendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
{isClientTimezoneAvailable &&
typeof booking.startTime === "string" &&
parseDate(dayjs(booking.startTime), i18n, timeFormat)}
@ -589,7 +589,7 @@ const BookingPage = ({
)}
{!!eventType.seatsPerTimeSlot && (
<div className="text-bookinghighlight flex items-start text-sm">
<FiUser
<User
className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
currentSlotBooking &&
currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
@ -672,7 +672,7 @@ function ErrorMessage({ error }: { error: unknown }) {
<div data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
<div className="flex">
<div className="flex-shrink-0">
<FiAlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
<AlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
</div>
<div className="ms-3">
<p className="text-sm text-blue-700">

6
apps/web/components/dialog/ChargeCardDialog.tsx
View File

@ -14,7 +14,7 @@ import {
DialogHeader,
showToast,
} from "@calcom/ui";
import { FiCreditCard, FiAlertTriangle } from "@calcom/ui/components/icon";
import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
interface IRescheduleDialog {
isOpenDialog: boolean;
@ -45,7 +45,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<FiCreditCard className="m-auto h-6 w-6" />
<CreditCard className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("charge_card")} />
@ -65,7 +65,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
{chargeError && (
<div className="mt-4 flex text-red-500">
<FiAlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
<AlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
<p className="text-sm">{t("error_charging_card")}</p>
</div>
)}

4
apps/web/components/dialog/EditLocationDialog.tsx
View File

@ -19,7 +19,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Input } from "@calcom/ui";
import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
import { FiMapPin } from "@calcom/ui/components/icon";
import { MapPin } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@ -218,7 +218,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<FiMapPin className="text-emphasis h-6 w-6" />
<MapPin className="text-emphasis h-6 w-6" />
</div>
<div className="w-full">
<div className="mt-3 text-center sm:mt-0 sm:text-left">

4
apps/web/components/dialog/RescheduleDialog.tsx
View File

@ -13,7 +13,7 @@ import {
showToast,
TextArea,
} from "@calcom/ui";
import { FiClock } from "@calcom/ui/components/icon";
import { Clock } from "@calcom/ui/components/icon";
interface IRescheduleDialog {
isOpenDialog: boolean;
@ -44,7 +44,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<FiClock className="m-auto h-6 w-6" />
<Clock className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("send_reschedule_request")} />

8
apps/web/components/eventtype/AvailabilityTab.tsx
View File

@ -12,7 +12,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui";
import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon";
import { ExternalLink, Globe, Clock } from "@calcom/ui/components/icon";
import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
@ -157,7 +157,7 @@ const EventTypeScheduleDetails = () => {
<hr className="border-subtle" />
<div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
<span className="text-default flex items-center justify-center text-sm sm:justify-start">
<FiGlobe className="ltr:mr-2 rtl:ml-2" />
<Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
{schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
</span>
{!!schedule?.id && (
@ -165,7 +165,7 @@ const EventTypeScheduleDetails = () => {
href={`/availability/${schedule.id}`}
disabled={isLoading}
color="minimal"
EndIcon={FiExternalLink}
EndIcon={ExternalLink}
target="_blank"
rel="noopener noreferrer">
{t("edit_availability")}
@ -183,7 +183,7 @@ const EventTypeSchedule = () => {
if (!schedules?.schedules.length && !isLoading)
return (
<EmptyScreen
Icon={FiClock}
Icon={Clock}
headline={t("new_schedule_heading")}
description={t("new_schedule_description")}
buttonRaw={<NewScheduleButton fromEventType />}

6
apps/web/components/eventtype/EventAdvancedTab.tsx
View File

@ -17,7 +17,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { Prisma } from "@calcom/prisma/client";
import { trpc } from "@calcom/trpc/react";
import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
import { Edit, Copy } from "@calcom/ui/components/icon";
import RequiresConfirmationController from "./RequiresConfirmationController";
@ -134,7 +134,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
addOnSuffix={
<Button
type="button"
StartIcon={FiEdit}
StartIcon={Edit}
variant="icon"
color="minimal"
className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
@ -250,7 +250,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
}}
className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
type="button">
<FiCopy />
<Copy />
</Button>
</Tooltip>
}

4
apps/web/components/eventtype/EventAppsTab.tsx
View File

@ -8,7 +8,7 @@ import type { EventTypeAppsList } from "@calcom/app-store/utils";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, EmptyScreen } from "@calcom/ui";
import { FiGrid } from "@calcom/ui/components/icon";
import { Grid } from "@calcom/ui/components/icon";
export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
EventTypeAppCardComponentProps["eventType"];
@ -61,7 +61,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
<div className="before:border-0">
{!isLoading && !installedApps?.length ? (
<EmptyScreen
Icon={FiGrid}
Icon={Grid}
headline={t("empty_installed_apps_headline")}
description={t("empty_installed_apps_description")}
buttonRaw={

6
apps/web/components/eventtype/EventLimitsTab.tsx
View File

@ -24,7 +24,7 @@ import {
SettingsToggle,
TextField,
} from "@calcom/ui";
import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
import { Plus, Trash } from "@calcom/ui/components/icon";
const MinimumBookingNoticeInput = React.forwardRef<
HTMLInputElement,
@ -439,7 +439,7 @@ const IntervalLimitItem = ({
onChange={onIntervalSelect}
/>
{hasDeleteButton && (
<Button variant="icon" StartIcon={FiTrash} color="destructive" onClick={() => onDelete(limitKey)} />
<Button variant="icon" StartIcon={Trash} color="destructive" onClick={() => onDelete(limitKey)} />
)}
</div>
);
@ -537,7 +537,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
);
})}
{currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && (
<Button color="minimal" StartIcon={FiPlus} onClick={addLimit}>
<Button color="minimal" StartIcon={Plus} onClick={addLimit}>
{t("add_limit")}
</Button>
)}

10
apps/web/components/eventtype/EventSetupTab.tsx
View File

@ -27,7 +27,7 @@ import {
SkeletonContainer,
SkeletonText,
} from "@calcom/ui";
import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
import { Edit2, Check, X, Plus } from "@calcom/ui/components/icon";
import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
@ -253,10 +253,10 @@ export const EventSetupTab = (
}}
aria-label={t("edit")}
className="hover:text-emphasis text-subtle mr-1 p-1">
<FiEdit2 className="h-4 w-4" />
<Edit2 className="h-4 w-4" />
</button>
<button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
<FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
<X className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
</button>
</div>
</div>
@ -268,7 +268,7 @@ export const EventSetupTab = (
location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
) && (
<div className="text-default flex text-sm">
<FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
<Check className="mt-0.5 mr-1.5 h-2 w-2.5" />
<Trans i18nKey="event_type_requres_google_cal">
<p>
The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
@ -286,7 +286,7 @@ export const EventSetupTab = (
<li>
<Button
data-testid="add-location"
StartIcon={FiPlus}
StartIcon={Plus}
color="minimal"
onClick={() => setShowLocationModal(true)}>
{t("add_location")}

6
apps/web/components/eventtype/EventTeamWebhooksTab.tsx
View File

@ -1,6 +1,6 @@
import { Webhook as TbWebhook } from "lucide-react";
import type { EventTypeSetupProps } from "pages/event-types/[type]";
import { useState } from "react";
import { TbWebhook } from "react-icons/tb";
import { WebhookForm } from "@calcom/features/webhooks/components";
import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { Webhook } from "@calcom/prisma/client";
import { trpc } from "@calcom/trpc/react";
import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { Plus } from "@calcom/ui/components/icon";
export const EventTeamWebhooksTab = ({
eventType,
@ -85,7 +85,7 @@ export const EventTeamWebhooksTab = ({
<Button
color="secondary"
data-testid="new_webhook"
StartIcon={FiPlus}
StartIcon={Plus}
onClick={() => setCreateModalOpen(true)}>
{t("new_webhook")}
</Button>

62
apps/web/components/eventtype/EventTypeSingleLayout.tsx
View File

@ -1,9 +1,9 @@
import { Webhook as TbWebhook } from "lucide-react";
import type { TFunction } from "next-i18next";
import { useRouter } from "next/router";
import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
import { useMemo, useState, Suspense } from "react";
import type { UseFormReturn } from "react-hook-form";
import { TbWebhook } from "react-icons/tb";
import Shell from "@calcom/features/shell/Shell";
import { classNames } from "@calcom/lib";
@ -32,19 +32,19 @@ import {
VerticalTabs,
} from "@calcom/ui";
import {
FiLink,
FiCalendar,
FiClock,
FiSliders,
FiRepeat,
FiGrid,
FiZap,
FiUsers,
FiExternalLink,
FiCode,
FiTrash,
FiMoreHorizontal,
FiLoader,
Link as LinkIcon,
Calendar,
Clock,
Sliders,
Repeat,
Grid,
Zap,
Users,
ExternalLink,
Code,
Trash,
MoreHorizontal,
Loader,
} from "@calcom/ui/components/icon";
import { EmbedButton, EmbedDialog } from "@components/Embed";
@ -77,44 +77,44 @@ function getNavigation(props: {
{
name: "event_setup_tab_title",
href: `/event-types/${eventType.id}?tabName=setup`,
icon: FiLink,
icon: LinkIcon,
info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
},
{
name: "availability",
href: `/event-types/${eventType.id}?tabName=availability`,
icon: FiCalendar,
icon: Calendar,
info: `default_schedule_name`, // TODO: Get this from props
},
{
name: "event_limit_tab_title",
href: `/event-types/${eventType.id}?tabName=limits`,
icon: FiClock,
icon: Clock,
info: `event_limit_tab_description`,
},
{
name: "event_advanced_tab_title",
href: `/event-types/${eventType.id}?tabName=advanced`,
icon: FiSliders,
icon: Sliders,
info: `event_advanced_tab_description`,
},
{
name: "recurring",
href: `/event-types/${eventType.id}?tabName=recurring`,
icon: FiRepeat,
icon: Repeat,
info: `recurring_event_tab_description`,
},
{
name: "apps",
href: `/event-types/${eventType.id}?tabName=apps`,
icon: FiGrid,
icon: Grid,
//TODO: Handle proper translation with count handling
info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
},
{
name: "workflows",
href: `/event-types/${eventType.id}?tabName=workflows`,
icon: FiZap,
icon: Zap,
info: `${enabledWorkflowsNumber} ${t("active")}`,
},
];
@ -171,7 +171,7 @@ function EventTypeSingleLayout({
navigation.splice(2, 0, {
name: "assignment",
href: `/event-types/${eventType.id}?tabName=team`,
icon: FiUsers,
icon: Users,
info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
});
navigation.push({
@ -225,14 +225,14 @@ function EventTypeSingleLayout({
variant="icon"
href={permalink}
rel="noreferrer"
StartIcon={FiExternalLink}
StartIcon={ExternalLink}
/>
</Tooltip>
<Button
color="secondary"
variant="icon"
StartIcon={FiLink}
StartIcon={LinkIcon}
tooltip={t("copy_link")}
onClick={() => {
navigator.clipboard.writeText(permalink);
@ -241,7 +241,7 @@ function EventTypeSingleLayout({
/>
<EmbedButton
embedUrl={encodeURIComponent(embedLink)}
StartIcon={FiCode}
StartIcon={Code}
color="secondary"
variant="icon"
tooltip={t("embed")}
@ -249,7 +249,7 @@ function EventTypeSingleLayout({
<Button
color="destructive"
variant="icon"
StartIcon={FiTrash}
StartIcon={Trash}
tooltip={t("delete")}
disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}
@ -260,14 +260,14 @@ function EventTypeSingleLayout({
<Dropdown>
<DropdownMenuTrigger asChild>
<Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
<Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent style={{ minWidth: "200px" }}>
<DropdownMenuItem className="focus:ring-muted">
<DropdownItem
target="_blank"
type="button"
StartIcon={FiExternalLink}
StartIcon={ExternalLink}
href={permalink}
rel="noreferrer">
{t("preview")}
@ -276,7 +276,7 @@ function EventTypeSingleLayout({
<DropdownMenuItem className="focus:ring-muted">
<DropdownItem
type="button"
StartIcon={FiLink}
StartIcon={LinkIcon}
onClick={() => {
navigator.clipboard.writeText(permalink);
showToast("Link copied!", "success");
@ -288,7 +288,7 @@ function EventTypeSingleLayout({
<DropdownItem
type="button"
color="destructive"
StartIcon={FiTrash}
StartIcon={Trash}
disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}>
{t("delete")}
@ -323,7 +323,7 @@ function EventTypeSingleLayout({
</Button>
</div>
}>
<Suspense fallback={<FiLoader />}>
<Suspense fallback={<Loader />}>
<div className="flex flex-col xl:flex-row xl:space-x-6">
<div className="hidden xl:block">
<VerticalTabs

6
apps/web/components/eventtype/SkeletonLoader.tsx
View File

@ -1,5 +1,5 @@
import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { FiClock, FiUser } from "@calcom/ui/components/icon";
import { Clock, User } from "@calcom/ui/components/icon";
function SkeletonLoader() {
return (
@ -32,11 +32,11 @@ function SkeletonItem() {
<div className="">
<ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
<li className="flex items-center whitespace-nowrap">
<FiClock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
<Clock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
<SkeletonText className="h-4 w-12" />
</li>
<li className="flex items-center whitespace-nowrap">
<FiUser className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
<User className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
<SkeletonText className="h-4 w-12" />
</li>
</ul>

4
apps/web/components/security/TwoFactorModalHeader.tsx
View File

@ -1,10 +1,10 @@
import { FiShield } from "@calcom/ui/components/icon";
import { Shield } from "@calcom/ui/components/icon";
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return (
<div className="mb-4 sm:flex sm:items-start">
<div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<FiShield className="text-inverted h-6 w-6" />
<Shield className="text-inverted h-6 w-6" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">

4
apps/web/components/settings/CalendarSwitch.tsx
View File

@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Badge, showToast, Switch } from "@calcom/ui";
import { FiArrowLeft } from "@calcom/ui/components/icon";
import { ArrowLeft } from "@calcom/ui/components/icon";
export function CalendarSwitch(props: {
type: string;
@ -76,7 +76,7 @@ export function CalendarSwitch(props: {
{props.defaultSelected && (
<Badge variant="gray">
<div className="flex">
<FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
<ArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
</div>
</Badge>
)}

4
apps/web/components/setup/AdminUser.tsx
View File

@ -9,7 +9,7 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
import { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";
import { FiUserCheck } from "@calcom/ui/components/icon";
import { UserCheck } from "@calcom/ui/components/icon";
export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
const { t } = useLocale();
@ -24,7 +24,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
props.onSuccess();
}}>
<EmptyScreen
Icon={FiUserCheck}
Icon={UserCheck}
headline={t("admin_user_created")}
description={t("admin_user_created_description")}
/>

8
apps/web/components/setup/EnterpriseLicense.tsx
View File

@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Button, TextField } from "@calcom/ui";
import { FiCheck, FiExternalLink, FiLoader } from "@calcom/ui/components/icon";
import { Check, ExternalLink, Loader } from "@calcom/ui/components/icon";
type EnterpriseLicenseFormValues = {
licenseKey: string;
@ -91,7 +91,7 @@ const EnterpriseLicense = (
<div>
<Button
className="w-full justify-center text-lg"
EndIcon={FiExternalLink}
EndIcon={ExternalLink}
href="https://console.cal.com"
target="_blank">
{t("purchase_license")}
@ -121,9 +121,9 @@ const EnterpriseLicense = (
)}
addOnSuffix={
checkLicenseLoading ? (
<FiLoader className="h-5 w-5 animate-spin" />
<Loader className="h-5 w-5 animate-spin" />
) : errors.licenseKey === undefined && isDirty ? (
<FiCheck className="h-5 w-5 text-green-700" />
<Check className="h-5 w-5 text-green-700" />
) : undefined
}
color={errors.licenseKey ? "warn" : ""}

4
apps/web/components/setup/StepDone.tsx
View File

@ -2,7 +2,7 @@ import { useRouter } from "next/router";
import type { Dispatch, SetStateAction } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { FiCheck } from "@calcom/ui/components/icon";
import { Check } from "@calcom/ui/components/icon";
const StepDone = (props: {
currentStep: number;
@ -24,7 +24,7 @@ const StepDone = (props: {
}}>
<div className="min-h-36 my-6 flex flex-col items-center justify-center">
<div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
<FiCheck className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
<Check className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
</div>
<div className="max-w-[420px] text-center">
<h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>

4
apps/web/components/ui/EditableHeading.tsx
View File

@ -2,7 +2,7 @@ import classNames from "classnames";
import { useState } from "react";
import type { ControllerRenderProps } from "react-hook-form";
import { FiEdit2 } from "@calcom/ui/components/icon";
import { Edit2 } from "@calcom/ui/components/icon";
const EditableHeading = function EditableHeading({
value,
@ -21,7 +21,7 @@ const EditableHeading = function EditableHeading({
<label className="min-w-8 relative inline-block">
<span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
{!isEditing && isReady && (
<FiEdit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline h-3 w-3" />
<Edit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline h-3 w-3" />
)}
<input
{...passThroughProps}

4
apps/web/components/ui/InfoBadge.tsx
View File

@ -1,12 +1,12 @@
import { Tooltip } from "@calcom/ui";
import { FiInfo } from "@calcom/ui/components/icon";
import { Info } from "@calcom/ui/components/icon";
export default function InfoBadge({ content }: { content: string }) {
return (
<>
<Tooltip side="top" content={content}>
<span title={content}>
<FiInfo className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
<Info className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
</span>
</Tooltip>
</>

8
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
View File

@ -15,7 +15,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui";
import { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
import { Check, Edit2, ExternalLink } from "@calcom/ui/components/icon";
export enum UsernameChangeStatusEnum {
UPGRADE = "UPGRADE",
@ -235,7 +235,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
usernameIsAvailable ? "" : ""
)}>
{isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
{!isInputUsernamePremium && usernameIsAvailable ? <FiCheck className="mt-2 w-6" /> : <></>}
{!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 w-6" /> : <></>}
</span>
</div>
</div>
@ -251,7 +251,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<Dialog open={openDialogSaveUsername}>
<DialogContent
Icon={FiEdit2}
Icon={Edit2}
title={t("confirm_username_change_dialog_title")}
description={
<>
@ -288,7 +288,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
data-testid="go-to-billing"
href={paymentLink}>
<>
{t("go_to_stripe_billing")} <FiExternalLink className="ml-1 h-4 w-4" />
{t("go_to_stripe_billing")} <ExternalLink className="ml-1 h-4 w-4" />
</>
</Button>
)}

6
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
View File

@ -9,7 +9,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
import { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, TextField } from "@calcom/ui";
import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
import { Check, Edit2 } from "@calcom/ui/components/icon";
interface ICustomUsernameProps {
currentUsername: string | undefined;
@ -137,7 +137,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
{currentUsername !== inputUsernameValue && (
<div className="absolute right-[2px] top-6 flex flex-row">
<span className={classNames("mx-2 py-2")}>
{usernameIsAvailable ? <FiCheck className="w-6" /> : <></>}
{usernameIsAvailable ? <Check className="w-6" /> : <></>}
</span>
</div>
)}
@ -154,7 +154,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
</div>
)}
<Dialog open={openDialogSaveUsername}>
<DialogContent type="confirmation" Icon={FiEdit2} title={t("confirm_username_change_dialog_title")}>
<DialogContent type="confirmation" Icon={Edit2} title={t("confirm_username_change_dialog_title")}>
<div className="flex flex-row">
<div className="mb-4 w-full pt-1">
<div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">

4
apps/web/components/ui/form/CheckedSelect.tsx
View File

@ -3,7 +3,7 @@ import type { Props } from "react-select";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Avatar } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon";
import { X } from "@calcom/ui/components/icon";
import Select from "@components/ui/form/Select";
@ -49,7 +49,7 @@ export const CheckedSelect = ({
alt={option.label}
/>
{option.label}
<FiX
<X
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
/>

4
apps/web/components/ui/form/DatePicker.tsx
View File

@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
import "react-date-picker/dist/DatePicker.css";
import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
import { FiCalendar } from "@calcom/ui/components/icon";
import { Calendar } from "@calcom/ui/components/icon";
import classNames from "@lib/classNames";
@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
className
)}
clearIcon={null}
calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />}
calendarIcon={<Calendar className="text-subtle h-5 w-5" />}
value={date}
minDate={minDate}
disabled={disabled}

4
apps/web/next.config.js
View File

@ -92,11 +92,11 @@ const nextConfig = {
"@calcom/prisma",
"@calcom/trpc",
"@calcom/ui",
"lucide-react",
],
modularizeImports: {
"@calcom/ui/components/icon": {
transform: "@react-icons/all-files/fi/{{member}}",
skipDefaultConversion: true,
transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
preventFullImport: true,
},
"@calcom/features/insights/components": {

24
apps/web/pages/404.tsx
View File

@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { HeadSeo } from "@calcom/ui";
import { FiBookOpen, FiCheck, FiChevronRight, FiFileText } from "@calcom/ui/components/icon";
import { BookOpen, Check, ChevronRight, FileText } from "@calcom/ui/components/icon";
import { ssgInit } from "@server/lib/ssg";
@ -20,13 +20,13 @@ export default function Custom404() {
{
title: t("documentation"),
description: t("documentation_description"),
icon: FiFileText,
icon: FileText,
href: DOCS_URL,
},
{
title: t("blog"),
description: t("blog_description"),
icon: FiBookOpen,
icon: BookOpen,
href: `${WEBSITE_URL}/blog`,
},
];
@ -112,7 +112,7 @@ export default function Custom404() {
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
<FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
<Check className="h-6 w-6 text-green-500" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@ -127,7 +127,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
</div>
<div className="flex-shrink-0 self-center">
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</a>
</li>
@ -140,7 +140,7 @@ export default function Custom404() {
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
<FiFileText className="text-default h-6 w-6" aria-hidden="true" />
<FileText className="text-default h-6 w-6" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@ -153,7 +153,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
</div>
<div className="flex-shrink-0 self-center">
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</Link>
</li>
@ -198,7 +198,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("join_our_community")}</p>
</div>
<div className="flex-shrink-0 self-center">
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</a>
</li>
@ -257,7 +257,7 @@ export default function Custom404() {
rel="noreferrer">
<div className="flex-shrink-0">
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
<FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
<Check className="h-6 w-6 text-green-500" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@ -272,7 +272,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
</div>
<div className="flex-shrink-0 self-center">
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</a>
</li>
@ -300,7 +300,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{link.description}</p>
</div>
<div className="flex-shrink-0 self-center">
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</Link>
</li>
@ -346,7 +346,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("join_our_community")}</p>
</div>
<div className="flex-shrink-0 self-center">
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</a>
</li>

4
apps/web/pages/500.tsx
View File

@ -4,7 +4,7 @@ import { useRouter } from "next/router";
import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, showToast } from "@calcom/ui";
import { FiCopy } from "@calcom/ui/components/icon";
import { Copy } from "@calcom/ui/components/icon";
export default function Error500() {
const { t } = useLocale();
@ -34,7 +34,7 @@ export default function Error500() {
<Button
color="secondary"
className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
StartIcon={FiCopy}
StartIcon={Copy}
onClick={() => {
navigator.clipboard.writeText(router.query.error as string);
showToast("Link copied!", "success");

6
apps/web/pages/[user].tsx
View File

@ -29,7 +29,7 @@ import prisma from "@calcom/prisma";
import { baseEventTypeSelect } from "@calcom/prisma/selects";
import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui";
import { FiArrowRight } from "@calcom/ui/components/icon";
import { ArrowRight } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
import type { EmbedProps } from "@lib/withEmbedSsr";
@ -60,7 +60,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<li
key={index}
className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
<FiArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
<ArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
<Link
href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
className="flex justify-between px-6 py-4"
@ -161,7 +161,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
key={type.id}
style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
<FiArrowRight className="text-emphasis absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
<ArrowRight className="text-emphasis absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
<div className="block w-full p-5">
<Link

6
apps/web/pages/apps/categories/index.tsx
View File

@ -5,7 +5,7 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
import Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SkeletonText } from "@calcom/ui";
import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon";
import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
const { t, isLocaleReady } = useLocale();
@ -16,7 +16,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
<Link
href="/apps"
className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
<FiArrowLeft className="h-4 w-4" />
<ArrowLeft className="h-4 w-4" />
{isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
</Link>
</div>
@ -32,7 +32,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
<h3 className="font-medium capitalize">{category.name}</h3>
<p className="text-subtle text-sm">
{t("number_apps", { count: category.count })}{" "}
<FiArrowRight className="inline-block h-4 w-4" />
<ArrowRight className="inline-block h-4 w-4" />
</p>
</div>
</Link>

4
apps/web/pages/apps/index.tsx
View File

@ -10,7 +10,7 @@ import type { AppCategories } from "@calcom/prisma/client";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import type { HorizontalTabItemProps } from "@calcom/ui";
import { AllApps, AppStoreCategories, HorizontalTabs, TextField, PopularAppsSlider } from "@calcom/ui";
import { FiSearch } from "@calcom/ui/components/icon";
import { Search } from "@calcom/ui/components/icon";
import AppsLayout from "@components/apps/layouts/AppsLayout";
@ -37,7 +37,7 @@ function AppsSearch({
return (
<TextField
className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
addOnLeading={<FiSearch className="text-subtle h-4 w-4" />}
addOnLeading={<Search className="text-subtle h-4 w-4" />}
addOnClassname="!border-muted"
containerClassName={classNames("focus:!ring-offset-0", className)}
type="search"

40
apps/web/pages/apps/installed/[category].tsx
View File

@ -30,15 +30,15 @@ import {
showToast,
} from "@calcom/ui";
import {
FiBarChart,
FiCalendar,
FiCreditCard,
FiGrid,
FiMoreHorizontal,
FiPlus,
FiShare2,
FiTrash,
FiVideo,
BarChart,
Calendar,
CreditCard,
Grid,
MoreHorizontal,
Plus,
Share2,
Trash,
Video,
} from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@ -71,7 +71,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
color="destructive"
onClick={() => handleDisconnect(credentialId)}
disabled={isGlobal}
StartIcon={FiTrash}>
StartIcon={Trash}>
{t("remove_app")}
</DropdownItem>
</DropdownMenuItem>
@ -159,7 +159,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
<div className="flex justify-end">
<Dropdown modal={false}>
<DropdownMenuTrigger asChild>
<Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
<Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent>
{!appIsDefault && variant === "conferencing" && (
@ -167,7 +167,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
<DropdownItem
type="button"
color="secondary"
StartIcon={FiVideo}
StartIcon={Video}
onClick={() => {
const locationType = getEventLocationTypeFromApp(
item?.locationOption?.value ?? ""
@ -225,13 +225,13 @@ const IntegrationsContainer = ({
const { t } = useLocale();
const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
const emptyIcon = {
calendar: FiCalendar,
conferencing: FiVideo,
automation: FiShare2,
analytics: FiBarChart,
payment: FiCreditCard,
web3: FiBarChart,
other: FiGrid,
calendar: Calendar,
conferencing: Video,
automation: Share2,
analytics: BarChart,
payment: CreditCard,
web3: BarChart,
other: Grid,
};
return (
@ -270,7 +270,7 @@ const IntegrationsContainer = ({
variant ? `/apps/categories/${variant === "conferencing" ? "video" : variant}` : "/apps"
}
color="secondary"
StartIcon={FiPlus}>
StartIcon={Plus}>
{t("add")}
</Button>
}

4
apps/web/pages/auth/error.tsx
View File

@ -5,7 +5,7 @@ import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, SkeletonText } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon";
import { X } from "@calcom/ui/components/icon";
import AuthContainer from "@components/ui/AuthContainer";
@ -29,7 +29,7 @@ export default function Error() {
<AuthContainer title="" description="">
<div>
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<FiX className="h-6 w-6 text-red-600" />
<X className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">

4
apps/web/pages/auth/login.tsx
View File

@ -19,7 +19,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import prisma from "@calcom/prisma";
import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
import { FiArrowLeft } from "@calcom/ui/components/icon";
import { ArrowLeft } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
import type { WithNonceProps } from "@lib/withNonce";
@ -91,7 +91,7 @@ export default function Login({
setTwoFactorRequired(false);
methods.setValue("totpCode", "");
}}
StartIcon={FiArrowLeft}
StartIcon={ArrowLeft}
color="minimal">
{t("go_back")}
</Button>

4
apps/web/pages/auth/logout.tsx
View File

@ -6,7 +6,7 @@ import { useEffect } from "react";
import { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { FiCheck } from "@calcom/ui/components/icon";
import { Check } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -32,7 +32,7 @@ export function Logout(props: Props) {
<AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
<div className="mb-4">
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<FiCheck className="h-6 w-6 text-green-600" />
<Check className="h-6 w-6 text-green-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">

8
apps/web/pages/availability/[schedule].tsx
View File

@ -27,7 +27,7 @@ import {
ConfirmationDialogContent,
VerticalDivider,
} from "@calcom/ui";
import { FiInfo, FiPlus, FiTrash } from "@calcom/ui/components/icon";
import { Info, Plus, Trash } from "@calcom/ui/components/icon";
import { HttpError } from "@lib/core/http/error";
@ -57,7 +57,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
{t("date_overrides")}{" "}
<Tooltip content={t("date_overrides_info")}>
<span className="inline-block">
<FiInfo />
<Info className="h-4 w-4" />
</span>
</Tooltip>
</h3>
@ -75,7 +75,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
onChange={(ranges) => append({ ranges })}
Trigger={
<Button color="secondary" StartIcon={FiPlus} data-testid="add-override">
<Button color="secondary" StartIcon={Plus} data-testid="add-override">
Add an override
</Button>
}
@ -202,7 +202,7 @@ export default function Availability() {
<Dialog>
<DialogTrigger asChild>
<Button
StartIcon={FiTrash}
StartIcon={Trash}
variant="icon"
color="destructive"
aria-label={t("delete")}

4
apps/web/pages/availability/index.tsx
View File

@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { EmptyScreen, showToast } from "@calcom/ui";
import { FiClock } from "@calcom/ui/components/icon";
import { Clock } from "@calcom/ui/components/icon";
import { withQuery } from "@lib/QueryCell";
import { HttpError } from "@lib/core/http/error";
@ -75,7 +75,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
{schedules.length === 0 ? (
<div className="flex justify-center">
<EmptyScreen
Icon={FiClock}
Icon={Clock}
headline={t("new_schedule_heading")}
description={t("new_schedule_description")}
buttonRaw={<NewScheduleButton />}

12
apps/web/pages/booking/[uid].tsx
View File

@ -49,7 +49,7 @@ import type { Prisma } from "@calcom/prisma/client";
import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { Button, EmailInput, HeadSeo, Badge, useCalcomTheme } from "@calcom/ui";
import { FiX, FiExternalLink, FiChevronLeft, FiCheck, FiCalendar } from "@calcom/ui/components/icon";
import { X, ExternalLink, ChevronLeft, Check, Calendar } from "@calcom/ui/components/icon";
import { timeZone } from "@lib/clock";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -306,7 +306,7 @@ export default function Success(props: SuccessProps) {
<Link
href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
className="hover:bg-subtle text-subtle dark:hover:text-inverted hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
<FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
<ChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
</Link>
</div>
)}
@ -347,10 +347,10 @@ export default function Success(props: SuccessProps) {
<img src={giphyImage} alt="Gif from Giphy" />
)}
{!giphyImage && !needsConfirmation && !isCancelled && (
<FiCheck className="h-5 w-5 text-green-600" />
<Check className="h-5 w-5 text-green-600" />
)}
{needsConfirmation && !isCancelled && <FiCalendar className="text-emphasis h-5 w-5" />}
{isCancelled && <FiX className="h-5 w-5 text-red-600" />}
{needsConfirmation && !isCancelled && <Calendar className="text-emphasis h-5 w-5" />}
{isCancelled && <X className="h-5 w-5 text-red-600" />}
</div>
<div className="mt-6 mb-8 text-center last:mb-0">
<h3
@ -458,7 +458,7 @@ export default function Success(props: SuccessProps) {
className="text-default flex items-center gap-2 underline"
rel="noreferrer">
{providerName || "Link"}
<FiExternalLink className="text-default inline h-4 w-4" />
<ExternalLink className="text-default inline h-4 w-4" />
</a>
) : (
locationToDisplay

4
apps/web/pages/bookings/[status].tsx
View File

@ -12,7 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Alert, Button, EmptyScreen } from "@calcom/ui";
import { FiCalendar } from "@calcom/ui/components/icon";
import { Calendar } from "@calcom/ui/components/icon";
import { useInViewObserver } from "@lib/hooks/useInViewObserver";
@ -180,7 +180,7 @@ export default function Bookings() {
{query.status === "success" && isEmpty && (
<div className="flex items-center justify-center pt-2 xl:pt-0">
<EmptyScreen
Icon={FiCalendar}
Icon={Calendar}
headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
description={t("no_status_bookings_yet_description", {
status: t(status).toLowerCase(),

62
apps/web/pages/event-types/index.tsx
View File

@ -39,19 +39,19 @@ import {
HeadSeo,
} from "@calcom/ui";
import {
FiArrowDown,
FiArrowUp,
FiClipboard,
FiCode,
FiCopy,
FiEdit,
FiEdit2,
FiExternalLink,
FiLink,
FiMoreHorizontal,
FiTrash,
FiUpload,
FiUsers,
ArrowDown,
ArrowUp,
Clipboard,
Code,
Copy,
Edit,
Edit2,
ExternalLink,
Link as LinkIcon,
MoreHorizontal,
Trash,
Upload,
Users,
} from "@calcom/ui/components/icon";
import { withQuery } from "@lib/QueryCell";
@ -325,7 +325,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<button
className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
onClick={() => moveEventType(index, -1)}>
<FiArrowUp className="h-5 w-5" />
<ArrowUp className="h-5 w-5" />
</button>
)}
@ -333,7 +333,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<button
className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
onClick={() => moveEventType(index, 1)}>
<FiArrowDown className="h-5 w-5" />
<ArrowDown className="h-5 w-5" />
</button>
)}
<MemoizedItem type={type} group={group} readOnly={readOnly} />
@ -373,7 +373,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
target="_blank"
variant="icon"
href={calLink}
StartIcon={FiExternalLink}
StartIcon={ExternalLink}
/>
</Tooltip>
@ -381,7 +381,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<Button
color="secondary"
variant="icon"
StartIcon={FiLink}
StartIcon={LinkIcon}
onClick={() => {
showToast(t("link_copied"), "success");
navigator.clipboard.writeText(calLink);
@ -394,7 +394,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
type="button"
variant="icon"
color="secondary"
StartIcon={FiMoreHorizontal}
StartIcon={MoreHorizontal}
className="ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md"
/>
</DropdownMenuTrigger>
@ -403,7 +403,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem
type="button"
data-testid={"event-type-edit-" + type.id}
StartIcon={FiEdit2}
StartIcon={Edit2}
onClick={() => router.push("/event-types/" + type.id)}>
{t("edit")}
</DropdownItem>
@ -412,7 +412,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem
type="button"
data-testid={"event-type-duplicate-" + type.id}
StartIcon={FiCopy}
StartIcon={Copy}
onClick={() => openDuplicateModal(type, group)}>
{t("duplicate")}
</DropdownItem>
@ -421,7 +421,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<EmbedButton
as={DropdownItem}
type="button"
StartIcon={FiCode}
StartIcon={Code}
className="w-full rounded-none"
embedUrl={encodeURIComponent(embedLink)}>
{t("embed")}
@ -437,7 +437,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
setDeleteDialogOpen(true);
setDeleteDialogTypeId(type.id);
}}
StartIcon={FiTrash}
StartIcon={Trash}
className="w-full rounded-none">
{t("delete")}
</DropdownItem>
@ -453,7 +453,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<div className="min-w-9 mx-5 flex sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
<Button type="button" variant="icon" color="secondary" StartIcon={FiMoreHorizontal} />
<Button type="button" variant="icon" color="secondary" StartIcon={MoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
@ -461,7 +461,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem
href={calLink}
target="_blank"
StartIcon={FiExternalLink}
StartIcon={ExternalLink}
className="w-full rounded-none">
{t("preview")}
</DropdownItem>
@ -473,7 +473,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
navigator.clipboard.writeText(calLink);
showToast(t("link_copied"), "success");
}}
StartIcon={FiClipboard}
StartIcon={Clipboard}
className="w-full rounded-none text-left">
{t("copy_link")}
</DropdownItem>
@ -492,7 +492,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
.then(() => showToast(t("link_shared"), "success"))
.catch(() => showToast(t("failed"), "error"));
}}
StartIcon={FiUpload}
StartIcon={Upload}
className="w-full rounded-none">
{t("share")}
</DropdownItem>
@ -501,7 +501,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownMenuItem className="outline-none">
<DropdownItem
onClick={() => router.push("/event-types/" + type.id)}
StartIcon={FiEdit}
StartIcon={Edit}
className="w-full rounded-none">
{t("edit")}
</DropdownItem>
@ -509,7 +509,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownMenuItem className="outline-none">
<DropdownItem
onClick={() => openDuplicateModal(type, group)}
StartIcon={FiCopy}
StartIcon={Copy}
data-testid={"event-type-duplicate-" + type.id}>
{t("duplicate")}
</DropdownItem>
@ -522,7 +522,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
setDeleteDialogOpen(true);
setDeleteDialogTypeId(type.id);
}}
StartIcon={FiTrash}
StartIcon={Trash}
className="w-full rounded-none">
{t("delete")}
</DropdownItem>
@ -589,7 +589,7 @@ const EventTypeListHeading = ({
<span className="text-subtle ms-2 me-2 relative -top-px text-xs">
<Link href={`/settings/teams/${teamId}/members`}>
<Badge variant="gray">
<FiUsers className="mr-1 -mt-px inline h-3 w-3" />
<Users className="mr-1 -mt-px inline h-3 w-3" />
{membershipCount}
</Badge>
</Link>
@ -617,7 +617,7 @@ const CreateFirstEventTypeView = () => {
return (
<EmptyScreen
Icon={FiLink}
Icon={LinkIcon}
headline={t("new_event_type_heading")}
description={t("new_event_type_description")}
/>

8
apps/web/pages/insights/index.tsx
View File

@ -15,7 +15,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Button, ButtonGroup } from "@calcom/ui";
import { FiRefreshCcw, FiUserPlus, FiUsers } from "@calcom/ui/components/icon";
import { RefreshCcw, UserPlus, Users } from "@calcom/ui/components/icon";
const Heading = () => {
const { t } = useLocale();
@ -35,17 +35,17 @@ export default function InsightsPage() {
const { data: user } = trpc.viewer.me.useQuery();
const features = [
{
icon: <FiUsers className="h-5 w-5" />,
icon: <Users className="h-5 w-5" />,
title: t("view_bookings_across"),
description: t("view_bookings_across_description"),
},
{
icon: <FiRefreshCcw className="h-5 w-5" />,
icon: <RefreshCcw className="h-5 w-5" />,
title: t("identify_booking_trends"),
description: t("identify_booking_trends_description"),
},
{
icon: <FiUserPlus className="h-5 w-5" />,
icon: <UserPlus className="h-5 w-5" />,
title: t("spot_popular_event_types"),
description: t("spot_popular_event_types_description"),
},

4
apps/web/pages/settings/billing/index.tsx
View File

@ -6,7 +6,7 @@ import { classNames } from "@calcom/lib";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Meta } from "@calcom/ui";
import { FiExternalLink } from "@calcom/ui/components/icon";
import { ExternalLink } from "@calcom/ui/components/icon";
interface CtaRowProps {
title: string;
@ -48,7 +48,7 @@ const BillingView = () => {
<CtaRow
title={t("billing_manage_details_title")}
description={t("billing_manage_details_description")}>
<Button color="primary" href={billingHref} target="_blank" EndIcon={FiExternalLink}>
<Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
{t("billing_portal")}
</Button>
</CtaRow>

6
apps/web/pages/settings/developer/api-keys.tsx
View File

@ -16,7 +16,7 @@ import {
Meta,
AppSkeletonLoader as SkeletonLoader,
} from "@calcom/ui";
import { FiLink, FiPlus } from "@calcom/ui/components/icon";
import { Link as LinkIcon, Plus } from "@calcom/ui/components/icon";
const ApiKeysView = () => {
const { t } = useLocale();
@ -32,7 +32,7 @@ const ApiKeysView = () => {
return (
<Button
color="secondary"
StartIcon={FiPlus}
StartIcon={Plus}
onClick={() => {
setApiKeyToEdit(undefined);
setApiKeyModal(true);
@ -72,7 +72,7 @@ const ApiKeysView = () => {
</>
) : (
<EmptyScreen
Icon={FiLink}
Icon={LinkIcon}
headline={t("create_first_api_key")}
description={t("create_first_api_key_description", { appName: APP_NAME })}
buttonRaw={<NewApiKeyButton />}

2
apps/web/pages/settings/my-account/appearance.tsx
View File

@ -181,7 +181,7 @@ const AppearanceView = () => {
{/* TODO future PR to preview brandColors */}
{/* <Button
color="secondary"
EndIcon={FiExternalLink}
EndIcon={ExternalLink}
className="mt-6"
onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
Preview

8
apps/web/pages/settings/my-account/calendars.tsx
View File

@ -24,7 +24,7 @@ import {
SkeletonText,
showToast,
} from "@calcom/ui";
import { FiPlus, FiCalendar } from "@calcom/ui/components/icon";
import { Plus, Calendar } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@ -50,7 +50,7 @@ const AddCalendarButton = () => {
return (
<>
<Button color="secondary" StartIcon={FiPlus} href="/apps/categories/calendar">
<Button color="secondary" StartIcon={Plus} href="/apps/categories/calendar">
{t("add_calendar")}
</Button>
</>
@ -87,7 +87,7 @@ const CalendarsView = () => {
<div>
<div className="bg-muted border-subtle mt-4 flex space-x-4 rounded-md p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
<div className=" bg-default border-subtle flex h-9 w-9 items-center justify-center rounded-md border-2 p-[6px]">
<FiCalendar className="text-default h-6 w-6" />
<Calendar className="text-default h-6 w-6" />
</div>
<div className="flex w-full flex-col space-y-3">
@ -198,7 +198,7 @@ const CalendarsView = () => {
</div>
) : (
<EmptyScreen
Icon={FiCalendar}
Icon={Calendar}
headline={t("no_calendar_installed")}
description={t("no_calendar_installed_description")}
buttonText={t("add_a_calendar")}

10
apps/web/pages/settings/my-account/conferencing.tsx
View File

@ -24,7 +24,7 @@ import {
SkeletonContainer,
SkeletonText,
} from "@calcom/ui";
import { FiAlertCircle, FiMoreHorizontal, FiTrash, FiVideo } from "@calcom/ui/components/icon";
import { AlertCircle, MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
import AppListCard from "@components/AppListCard";
@ -111,7 +111,7 @@ const ConferencingLayout = () => {
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
<Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent>
{!appIsDefault && (
@ -119,7 +119,7 @@ const ConferencingLayout = () => {
<DropdownItem
type="button"
color="secondary"
StartIcon={FiVideo}
StartIcon={Video}
onClick={() => {
const locationType = getEventLocationTypeFromApp(
app?.locationOption?.value ?? ""
@ -141,7 +141,7 @@ const ConferencingLayout = () => {
type="button"
color="destructive"
disabled={app.isGlobal}
StartIcon={FiTrash}
StartIcon={Trash}
onClick={() => {
setDeleteCredentialId(app.credentialIds[0]);
setDeleteAppModal(true);
@ -163,7 +163,7 @@ const ConferencingLayout = () => {
title={t("Remove app")}
description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation"
Icon={FiAlertCircle}>
Icon={AlertCircle}>
<DialogFooter>
<Button color="primary" onClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}>
{t("yes_remove_app")}

8
apps/web/pages/settings/my-account/profile.tsx
View File

@ -38,7 +38,7 @@ import {
TextField,
Editor,
} from "@calcom/ui";
import { FiAlertTriangle, FiTrash2 } from "@calcom/ui/components/icon";
import { AlertTriangle, Trash2 } from "@calcom/ui/components/icon";
import TwoFactor from "@components/auth/TwoFactor";
import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@ -232,7 +232,7 @@ const ProfileView = () => {
{/* Delete account Dialog */}
<Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
<DialogTrigger asChild>
<Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={FiTrash2}>
<Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Trash2}>
{t("delete_account")}
</Button>
</DialogTrigger>
@ -240,7 +240,7 @@ const ProfileView = () => {
title={t("delete_account_modal_title")}
description={t("confirm_delete_account_modal", { appName: APP_NAME })}
type="creation"
Icon={FiAlertTriangle}>
Icon={AlertTriangle}>
<>
<p className="text-default mb-7">
{t("delete_account_confirmation_message", { appName: APP_NAME })}
@ -283,7 +283,7 @@ const ProfileView = () => {
title={t("confirm_password")}
description={t("confirm_password_change_email")}
type="creation"
Icon={FiAlertTriangle}>
Icon={AlertTriangle}>
<>
<PasswordField
data-testid="password"

4
apps/web/pages/team/[slug].tsx
View File

@ -15,7 +15,7 @@ import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import prisma from "@calcom/prisma";
import { Avatar, AvatarGroup, Button, EmptyScreen, HeadSeo } from "@calcom/ui";
import { FiArrowRight } from "@calcom/ui/components/icon";
import { ArrowRight } from "@calcom/ui/components/icon";
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -137,7 +137,7 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
<aside className="dark:text-inverted mt-8 flex justify-center text-center">
<Button
color="minimal"
EndIcon={FiArrowRight}
EndIcon={ArrowRight}
className="dark:hover:bg-darkgray-200"
href={`/team/${team.slug}?members=1`}
shallow={true}>

4
apps/web/pages/teams/index.tsx
View File

@ -5,7 +5,7 @@ import Shell from "@calcom/features/shell/Shell";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { Plus } from "@calcom/ui/components/icon";
function Teams() {
const { t } = useLocale();
@ -16,7 +16,7 @@ function Teams() {
CTA={
<Button
variant="fab"
StartIcon={FiPlus}
StartIcon={Plus}
type="button"
href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
{t("new")}

4
apps/web/pages/video/[uid].tsx
View File

@ -12,7 +12,7 @@ import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-f
import { useLocale } from "@calcom/lib/hooks/useLocale";
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { FiChevronRight } from "@calcom/ui/components/icon";
import { ChevronRight } from "@calcom/ui/components/icon";
import { ssrInit } from "@server/lib/ssr";
@ -222,7 +222,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
aria-label={`${open ? "close" : "open"} booking description sidebar`}
className="h-20 w-6 rounded-r-md border border-l-0 border-gray-300/20 bg-black/60 text-white shadow-sm backdrop-blur-lg"
onClick={() => setOpen(!open)}>
<FiChevronRight
<ChevronRight
aria-hidden
className={classNames(open && "rotate-180", "w-5 transition-all duration-300 ease-in-out")}
/>

8
apps/web/pages/video/meeting-ended/[uid].tsx
View File

@ -5,7 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import { Button, HeadSeo } from "@calcom/ui";
import { FiArrowRight, FiCalendar, FiX } from "@calcom/ui/components/icon";
import { ArrowRight, Calendar, X } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -29,7 +29,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
aria-labelledby="modal-headline">
<div>
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<FiX className="h-6 w-6 text-red-600" />
<X className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
@ -41,14 +41,14 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
{props.booking.title}
</h2>
<p className="text-subtle text-center">
<FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
<Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
</p>
</div>
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
{t("go_back")}
</Button>
</div>

8
apps/web/pages/video/meeting-not-started/[uid].tsx
View File

@ -6,7 +6,7 @@ import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { Button, HeadSeo, EmptyScreen } from "@calcom/ui";
import { FiArrowRight, FiCalendar, FiClock } from "@calcom/ui/components/icon";
import { ArrowRight, Calendar, Clock } from "@calcom/ui/components/icon";
export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
const { t } = useLocale();
@ -15,19 +15,19 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
<HeadSeo title={t("this_meeting_has_not_started_yet")} description={props.booking.title} />
<main className="mx-auto my-24 max-w-3xl">
<EmptyScreen
Icon={FiClock}
Icon={Clock}
headline={t("this_meeting_has_not_started_yet")}
description={
<>
<h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
<p className="text-subtle text-center">
<FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
<Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
</p>
</>
}
buttonRaw={
<Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
{t("go_back")}
</Button>
}

6
apps/web/pages/video/no-meeting-found.tsx
View File

@ -1,6 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, EmptyScreen, HeadSeo } from "@calcom/ui";
import { FiX, FiArrowRight } from "@calcom/ui/components/icon";
import { X, ArrowRight } from "@calcom/ui/components/icon";
export default function NoMeetingFound() {
const { t } = useLocale();
@ -10,11 +10,11 @@ export default function NoMeetingFound() {
<HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
<main className="mx-auto my-24 max-w-3xl">
<EmptyScreen
Icon={FiX}
Icon={X}
headline={t("no_meeting_found")}
description={t("no_meeting_found_description")}
buttonRaw={
<Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
{t("go_back_home")}
</Button>
}

1
package.json
View File

@ -95,6 +95,7 @@
"dependencies": {
"city-timezones": "^1.2.1",
"eslint": "^8.34.0",
"lucide-react": "^0.130.0",
"turbo": "^1.8.3"
},
"resolutions": {

4
packages/app-store/_components/OmniInstallAppButton.tsx
View File

@ -3,7 +3,7 @@ import useApp from "@calcom/lib/hooks/useApp";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, showToast } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { Plus } from "@calcom/ui/components/icon";
import useAddAppMutation from "../_utils/useAddAppMutation";
import { InstallAppButton } from "../components";
@ -63,7 +63,7 @@ export default function OmniInstallAppButton({
loading={mutation.isLoading}
color="secondary"
className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
StartIcon={FiPlus}
StartIcon={Plus}
{...props}>
{t("install")}
</Button>

16
packages/app-store/_utils/getAppCategories.ts
View File

@ -1,5 +1,5 @@
import { WEBAPP_URL } from "@calcom/lib/constants";
import { FiCalendar, FiVideo, FiCreditCard, FiShare2, FiBarChart, FiGrid } from "@calcom/ui/components/icon";
import { Calendar, Video, CreditCard, Share2, BarChart, Grid } from "@calcom/ui/components/icon";
function getHref(baseURL: string, category: string, useQueryParam: boolean) {
const baseUrlParsed = new URL(baseURL, WEBAPP_URL);
@ -12,37 +12,37 @@ const getAppCategories = (baseURL: string, useQueryParam: boolean) => {
{
name: "calendar",
href: getHref(baseURL, "calendar", useQueryParam),
icon: FiCalendar,
icon: Calendar,
},
{
name: "conferencing",
href: getHref(baseURL, "conferencing", useQueryParam),
icon: FiVideo,
icon: Video,
},
{
name: "payment",
href: getHref(baseURL, "payment", useQueryParam),
icon: FiCreditCard,
icon: CreditCard,
},
{
name: "automation",
href: getHref(baseURL, "automation", useQueryParam),
icon: FiShare2,
icon: Share2,
},
{
name: "analytics",
href: getHref(baseURL, "analytics", useQueryParam),
icon: FiBarChart,
icon: BarChart,
},
{
name: "web3",
href: getHref(baseURL, "web3", useQueryParam),
icon: FiBarChart,
icon: BarChart,
},
{
name: "other",
href: getHref(baseURL, "other", useQueryParam),
icon: FiGrid,
icon: Grid,
},
];
};

4
packages/app-store/closecom/pages/setup/index.tsx
View File

@ -7,7 +7,7 @@ import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, showToast, TextField } from "@calcom/ui";
import { FiCheck, FiX } from "@calcom/ui/components/icon";
import { Check, X } from "@calcom/ui/components/icon";
const formSchema = z.object({
api_key: z.string(),
@ -107,7 +107,7 @@ export default function CloseComSetup() {
type="submit"
loading={testLoading}
disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined}
StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
className={
testPassed !== undefined
? testPassed

8
packages/app-store/components.tsx
View File

@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import type { RouterOutputs } from "@calcom/trpc/react";
import type { App } from "@calcom/types/App";
import { FiAlertCircle, FiArrowRight, FiCheck } from "@calcom/ui/components/icon";
import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
import { InstallAppButtonMap } from "./apps.browser.generated";
import type { InstallAppButtonProps } from "./types";
@ -99,7 +99,7 @@ export const AppDependencyComponent = ({
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<FiCheck className="mt-1 mr-2 font-semibold" />
<Check className="mt-1 mr-2 font-semibold" />
</div>
<div>
<span className="font-semibold">
@ -122,7 +122,7 @@ export const AppDependencyComponent = ({
<div className="items-start space-x-2.5">
<div className="text-info flex items-start">
<div>
<FiAlertCircle className="mt-1 mr-2 font-semibold" />
<AlertCircle className="mt-1 mr-2 font-semibold" />
</div>
<div>
<span className="font-semibold">
@ -138,7 +138,7 @@ export const AppDependencyComponent = ({
<span className="mr-1">
{t("connect_app", { dependencyName: dependency.name })}
</span>
<FiArrowRight />
<ArrowRight />
</Link>
</>
</div>

8
packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
View File

@ -2,7 +2,7 @@ import Link from "next/link";
import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { FiAlertCircle, FiArrowRight, FiCheck } from "@calcom/ui/components/icon";
import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean; appName: string }) => {
const { t } = useLocale();
@ -12,7 +12,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<FiCheck className="mt-1 mr-2 font-semibold" />
<Check className="mt-1 mr-2 font-semibold" />
</div>
<div>
<span className="font-semibold">{t("google_calendar_is_connected")}</span>
@ -30,7 +30,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<FiAlertCircle className="mt-1 mr-2 font-semibold" />
<AlertCircle className="mt-1 mr-2 font-semibold" />
</div>
<div>
<span className="font-semibold">{t("this_app_requires_google_calendar", { appName })}</span>
@ -41,7 +41,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
href={`${CAL_URL}/apps/google-calendar`}
className="text-info flex items-center underline">
<span className="mr-1">{t("connect_google_calendar")}</span>
<FiArrowRight />
<ArrowRight />
</Link>
</>
</div>

8
packages/app-store/rainbow/components/RainbowKit.tsx
View File

@ -15,7 +15,7 @@ import { configureChains, createClient, useAccount, useSignMessage, WagmiConfig
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { showToast, SkeletonText } from "@calcom/ui";
import { FiAlertTriangle, FiLoader } from "@calcom/ui/components/icon";
import { AlertTriangle, Loader } from "@calcom/ui/components/icon";
import { ETH_MESSAGE, getProviders, SUPPORTED_CHAINS } from "../utils/ethereum";
@ -132,7 +132,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
<>
{!balanceData.data.hasBalance && (
<div className="mt-2 flex flex-row items-center">
<FiAlertTriangle className="h-5 w-5 text-red-600" />
<AlertTriangle className="h-5 w-5 text-red-600" />
<p className="ml-2 text-red-600">
<Trans i18nKey="rainbow_insufficient_balance" t={t}>
Your connected wallet doesn&apos;t contain enough {contractData.data.symbol}.
@ -143,7 +143,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
{balanceData.data.hasBalance && isSignatureLoading && (
<div className="mt-2 flex flex-row items-center">
<FiLoader className="h-5 w-5 text-green-600" />
<Loader className="h-5 w-5 text-green-600" />
<p className="ml-2 text-green-600">{t("rainbow_sign_message_request")}</p>
</div>
)}
@ -152,7 +152,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
{isSignatureError && (
<div className="mt-2 flex flex-row items-center">
<FiAlertTriangle className="h-5 w-5 text-red-600" />
<AlertTriangle className="h-5 w-5 text-red-600" />
<p className="ml-2 text-red-600">
<Trans i18nKey="rainbow_signature_error" t={t}>
{t("rainbow_signature_error")}

4
packages/app-store/routing-forms/components/FormActions.tsx
View File

@ -29,7 +29,7 @@ import {
TextField,
SettingsToggle,
} from "@calcom/ui";
import { FiMoreHorizontal } from "@calcom/ui/components/icon";
import { MoreHorizontal } from "@calcom/ui/components/icon";
import { EmbedButton, EmbedDialog } from "@components/Embed";
@ -162,7 +162,7 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
variant="icon"
color="secondary"
className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
StartIcon={FiMoreHorizontal}
StartIcon={MoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>{children}</DropdownMenuContent>

26
packages/app-store/routing-forms/components/SingleForm.tsx
View File

@ -34,7 +34,7 @@ import {
Tooltip,
VerticalDivider,
} from "@calcom/ui";
import { FiExternalLink, FiLink, FiDownload, FiCode, FiTrash } from "@calcom/ui/components/icon";
import { ExternalLink, Link as LinkIcon, Download, Code, Trash } from "@calcom/ui/components/icon";
import { RoutingPages } from "../lib/RoutingPages";
import { getSerializableForm } from "../lib/getSerializableForm";
@ -78,7 +78,7 @@ const Actions = ({
type="button"
rel="noreferrer"
action="preview"
StartIcon={FiExternalLink}
StartIcon={ExternalLink}
/>
</Tooltip>
<FormAction
@ -87,7 +87,7 @@ const Actions = ({
color="secondary"
variant="icon"
type="button"
StartIcon={FiLink}
StartIcon={LinkIcon}
tooltip={t("copy_link_to_form")}
/>
@ -99,7 +99,7 @@ const Actions = ({
color="secondary"
variant="icon"
type="button"
StartIcon={FiDownload}
StartIcon={Download}
/>
</Tooltip>
<FormAction
@ -107,7 +107,7 @@ const Actions = ({
action="embed"
color="secondary"
variant="icon"
StartIcon={FiCode}
StartIcon={Code}
tooltip={t("embed")}
/>
<DropdownMenuSeparator />
@ -116,7 +116,7 @@ const Actions = ({
action="_delete"
// className="mr-3"
variant="icon"
StartIcon={FiTrash}
StartIcon={Trash}
color="secondary"
type="button"
tooltip={t("delete")}
@ -129,7 +129,7 @@ const Actions = ({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={FiLink}>
StartIcon={LinkIcon}>
{t("Copy Typeform Redirect Url")}
</FormAction>
</FormActionsDropdown>
@ -145,7 +145,7 @@ const Actions = ({
type="button"
rel="noreferrer"
action="preview"
StartIcon={FiExternalLink}>
StartIcon={ExternalLink}>
{t("preview")}
</FormAction>
<FormAction
@ -154,7 +154,7 @@ const Actions = ({
routingForm={form}
color="minimal"
type="button"
StartIcon={FiLink}>
StartIcon={LinkIcon}>
{t("copy_link_to_form")}
</FormAction>
<FormAction
@ -163,7 +163,7 @@ const Actions = ({
className="w-full"
color="minimal"
type="button"
StartIcon={FiDownload}>
StartIcon={Download}>
{t("download_responses")}
</FormAction>
<FormAction
@ -172,7 +172,7 @@ const Actions = ({
color="minimal"
type="button"
className="w-full"
StartIcon={FiCode}>
StartIcon={Code}>
{t("embed")}
</FormAction>
{typeformApp ? (
@ -182,7 +182,7 @@ const Actions = ({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={FiLink}>
StartIcon={LinkIcon}>
{t("Copy Typeform Redirect Url")}
</FormAction>
) : null}
@ -193,7 +193,7 @@ const Actions = ({
className="w-full"
type="button"
color="destructive"
StartIcon={FiTrash}>
StartIcon={Trash}>
{t("delete")}
</FormAction>
</FormActionsDropdown>

6
packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
View File

@ -8,7 +8,7 @@ import type {
} from "react-awesome-query-builder";
import { Button as CalButton, SelectWithValidation as Select, TextField, TextArea } from "@calcom/ui";
import { FiTrash, FiPlus } from "@calcom/ui/components/icon";
import { Trash, Plus } from "@calcom/ui/components/icon";
export type CommonProps<
TVal extends
@ -206,7 +206,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
if (type === "delRule" || type == "delGroup") {
return (
<button className="ml-5">
<FiTrash className="text-subtle m-0 h-4 w-4" onClick={onClick} />
<Trash className="text-subtle m-0 h-4 w-4" onClick={onClick} />
</button>
);
}
@ -220,7 +220,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
}
return (
<CalButton
StartIcon={FiPlus}
StartIcon={Plus}
data-testid={dataTestId}
type="button"
color="secondary"

6
packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
View File

@ -16,7 +16,7 @@ import {
TextAreaField,
TextField,
} from "@calcom/ui";
import { FiPlus, FiFileText } from "@calcom/ui/components/icon";
import { Plus, FileText } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -295,7 +295,7 @@ const FormEdit = ({
<Button
data-testid="add-field"
type="button"
StartIcon={FiPlus}
StartIcon={Plus}
color="secondary"
onClick={addField}>
Add Field
@ -307,7 +307,7 @@ const FormEdit = ({
) : (
<div className="w-full">
<EmptyScreen
Icon={FiFileText}
Icon={FileText}
headline="Create your first field"
description="Fields are the form fields that the booker would see."
buttonRaw={

70
packages/app-store/routing-forms/pages/forms/[...appPages].tsx
View File

@ -12,22 +12,22 @@ import { trpc } from "@calcom/trpc/react";
import type { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
import { Badge, ButtonGroup, EmptyScreen, List, ListLinkItem, Tooltip, Button } from "@calcom/ui";
import {
FiPlus,
FiGitMerge,
FiExternalLink,
FiLink,
FiEdit,
FiDownload,
FiCode,
FiCopy,
FiTrash,
FiMenu,
FiMessageCircle,
FiFileText,
FiShuffle,
FiBarChart,
FiCheckCircle,
FiMail,
Plus,
GitMerge,
ExternalLink,
Link as LinkIcon,
Edit,
Download,
Code,
Copy,
Trash,
Menu,
MessageCircle,
FileText,
Shuffle,
BarChart,
CheckCircle,
Mail,
} from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -50,32 +50,32 @@ export default function RoutingForms({
const features = [
{
icon: <FiFileText className="h-5 w-5 text-orange-500" />,
icon: <FileText className="h-5 w-5 text-orange-500" />,
title: t("create_your_first_form"),
description: t("create_your_first_form_description"),
},
{
icon: <FiShuffle className="h-5 w-5 text-lime-500" />,
icon: <Shuffle className="h-5 w-5 text-lime-500" />,
title: t("create_your_first_route"),
description: t("route_to_the_right_person"),
},
{
icon: <FiBarChart className="h-5 w-5 text-blue-500" />,
icon: <BarChart className="h-5 w-5 text-blue-500" />,
title: t("reporting"),
description: t("reporting_feature"),
},
{
icon: <FiCheckCircle className="h-5 w-5 text-teal-500" />,
icon: <CheckCircle className="h-5 w-5 text-teal-500" />,
title: t("test_routing_form"),
description: t("test_preview_description"),
},
{
icon: <FiMail className="h-5 w-5 text-yellow-500" />,
icon: <Mail className="h-5 w-5 text-yellow-500" />,
title: t("routing_forms_send_email_owner"),
description: t("routing_forms_send_email_owner_description"),
},
{
icon: <FiDownload className="h-5 w-5 text-violet-500" />,
icon: <Download className="h-5 w-5 text-violet-500" />,
title: t("download_responses"),
description: t("download_responses_description"),
},
@ -87,7 +87,7 @@ export default function RoutingForms({
variant="fab"
routingForm={null}
data-testid="new-routing-form"
StartIcon={FiPlus}
StartIcon={Plus}
action="create">
{t("new")}
</FormAction>
@ -121,7 +121,7 @@ export default function RoutingForms({
<div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
{!forms?.length ? (
<EmptyScreen
Icon={FiGitMerge}
Icon={GitMerge}
headline={t("create_your_first_form")}
description={t("create_your_first_form_description")}
buttonRaw={<NewFormButton />}
@ -156,7 +156,7 @@ export default function RoutingForms({
action="preview"
routingForm={form}
target="_blank"
StartIcon={FiExternalLink}
StartIcon={ExternalLink}
color="secondary"
variant="icon"
disabled={disabled}
@ -167,7 +167,7 @@ export default function RoutingForms({
action="copyLink"
color="secondary"
variant="icon"
StartIcon={FiLink}
StartIcon={LinkIcon}
disabled={disabled}
tooltip={t("copy_link_to_form")}
/>
@ -176,7 +176,7 @@ export default function RoutingForms({
action="embed"
color="secondary"
variant="icon"
StartIcon={FiCode}
StartIcon={Code}
disabled={disabled}
tooltip={t("embed")}
/>
@ -186,14 +186,14 @@ export default function RoutingForms({
routingForm={form}
color="minimal"
className="!flex"
StartIcon={FiEdit}>
StartIcon={Edit}>
{t("edit")}
</FormAction>
<FormAction
action="download"
routingForm={form}
color="minimal"
StartIcon={FiDownload}>
StartIcon={Download}>
{t("download_responses")}
</FormAction>
<FormAction
@ -201,7 +201,7 @@ export default function RoutingForms({
routingForm={form}
color="minimal"
className="w-full"
StartIcon={FiCopy}>
StartIcon={Copy}>
{t("duplicate")}
</FormAction>
{typeformApp?.isInstalled ? (
@ -211,7 +211,7 @@ export default function RoutingForms({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={FiLink}>
StartIcon={LinkIcon}>
{t("Copy Typeform Redirect Url")}
</FormAction>
) : null}
@ -220,7 +220,7 @@ export default function RoutingForms({
routingForm={form}
color="destructive"
className="w-full"
StartIcon={FiTrash}>
StartIcon={Trash}>
{t("delete")}
</FormAction>
</FormActionsDropdown>
@ -228,13 +228,13 @@ export default function RoutingForms({
</>
}>
<div className="flex flex-wrap gap-1">
<Badge variant="gray" startIcon={FiMenu}>
<Badge variant="gray" startIcon={Menu}>
{fields.length} {fields.length === 1 ? "field" : "fields"}
</Badge>
<Badge variant="gray" startIcon={FiGitMerge}>
<Badge variant="gray" startIcon={GitMerge}>
{form.routes.length} {form.routes.length === 1 ? "route" : "routes"}
</Badge>
<Badge variant="gray" startIcon={FiMessageCircle}>
<Badge variant="gray" startIcon={MessageCircle}>
{form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
</Badge>
</div>

4
packages/app-store/sendgrid/pages/setup/index.tsx
View File

@ -7,7 +7,7 @@ import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, showToast, TextField } from "@calcom/ui";
import { FiCheck, FiX } from "@calcom/ui/components/icon";
import { Check, X } from "@calcom/ui/components/icon";
const formSchema = z.object({
api_key: z.string(),
@ -102,7 +102,7 @@ export default function SendgridSetup() {
type="submit"
loading={testLoading}
disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined}
StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
className={
testPassed !== undefined
? testPassed

6
packages/app-store/templates/event-type-app-card/components/EventTypeAppCardInterface.tsx
View File

@ -3,7 +3,7 @@ import { useState } from "react";
import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
import AppCard from "@calcom/app-store/_components/AppCard";
import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
import { FiSunrise, FiSunset } from "@calcom/ui/components/icon";
import { Sunrise, Sunset } from "@calcom/ui/components/icon";
import type { appDataSchema } from "../zod";
@ -28,8 +28,8 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
switchChecked={enabled}>
<div className="mt-2 text-sm">
<div className="flex">
<span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <FiSunrise /> : <FiSunset />}</span>I am an AppCard
for Event with Title: {eventType.title}
<span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <Sunrise /> : <Sunset />}</span>I am an AppCard for
Event with Title: {eventType.title}
</div>{" "}
<div className="mt-2">
Edit <span className="italic">packages/app-store/{app.slug}/EventTypeAppCardInterface.tsx</span> to

8
packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
View File

@ -2,7 +2,7 @@ import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { FiExternalLink } from "@calcom/ui/components/icon";
import { ExternalLink } from "@calcom/ui/components/icon";
export default function HowToUse() {
const { t } = useLocale();
@ -31,7 +31,7 @@ export default function HowToUse() {
href="/api/app-store/typeform/copy-typeform-redirect-url.png"
target="_blank"
className="text-subtle inline-flex items-baseline text-base">
<FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
<ExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
Click &quot;Copy Typeform Redirect URL&quot;
</Link>
</li>
@ -42,7 +42,7 @@ export default function HowToUse() {
href="https://www.typeform.com/help/a/end-screens-and-redirects-360051791392/#h_01G0CFXF21W2EQ8PXKSB4KSC8P"
target="_blank"
className="text-subtle inline-flex items-baseline text-base">
<FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
<ExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
Redirect to your typeform
</Link>
</li>
@ -52,7 +52,7 @@ export default function HowToUse() {
href="https://www.typeform.com/help/a/use-recall-information-to-reference-typeform-answers-variables-and-more-360052320011/"
target="_blank"
className="text-subtle inline-flex items-baseline text-base">
<FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
<ExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
Recall Information in Typeform
</Link>{" "}
to add values to query params.

4
packages/app-store/zapier/pages/setup/index.tsx
View File

@ -6,7 +6,7 @@ import { Toaster } from "react-hot-toast";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, showToast, Tooltip } from "@calcom/ui";
import { FiClipboard } from "@calcom/ui/components/icon";
import { Clipboard } from "@calcom/ui/components/icon";
export interface IZapierSetupProps {
inviteLink: string;
@ -76,7 +76,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
}}
type="button"
className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
<FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
<Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>

6
packages/features/apps/AdminAppsList.tsx
View File

@ -30,7 +30,7 @@ import {
TextField,
Switch,
} from "@calcom/ui";
import { FiAlertCircle, FiEdit } from "@calcom/ui/components/icon";
import { AlertCircle, Edit } from "@calcom/ui/components/icon";
import AppListCard from "../../../apps/web/components/AppListCard";
@ -92,7 +92,7 @@ const IntegrationContainer = ({
<div className="flex items-center justify-self-end">
{app.keys && (
<Button color="secondary" className="mr-2" onClick={() => showKeyModal()}>
<FiEdit />
<Edit />
</Button>
)}
@ -295,7 +295,7 @@ const AdminAppsListContainer = () => {
if (!apps) {
return (
<EmptyScreen
Icon={FiAlertCircle}
Icon={AlertCircle}
headline={t("no_available_apps")}
description={t("no_available_apps_description")}
/>

4
packages/features/apps/components/AppSetDefaultLinkDialog.tsx
View File

@ -17,7 +17,7 @@ import {
Button,
DialogClose,
} from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon";
import { AlertCircle } from "@calcom/ui/components/icon";
type LocationTypeSetLinkDialogFormProps = {
link?: string;
@ -57,7 +57,7 @@ export function AppSetDefaultLinkDialog({
title={t("default_app_link_title")}
description={t("default_app_link_description")}
type="creation"
Icon={FiAlertCircle}>
Icon={AlertCircle}>
<Form
form={form}
handleSubmit={(values) => {

8
packages/features/apps/components/DisconnectIntegration.tsx
View File

@ -2,9 +2,9 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import type { ButtonProps } from "@calcom/ui";
import {
Button,
ButtonProps,
Dialog,
DialogContent,
DialogTrigger,
@ -12,7 +12,7 @@ import {
DialogFooter,
DialogClose,
} from "@calcom/ui";
import { FiTrash, FiAlertCircle } from "@calcom/ui/components/icon";
import { Trash, AlertCircle } from "@calcom/ui/components/icon";
export default function DisconnectIntegration({
credentialId,
@ -54,7 +54,7 @@ export default function DisconnectIntegration({
<DialogTrigger asChild>
<Button
color={buttonProps?.color || "destructive"}
StartIcon={trashIcon ? FiTrash : undefined}
StartIcon={trashIcon ? Trash : undefined}
size="base"
variant={trashIcon && !label ? "icon" : "button"}
disabled={isGlobal}
@ -66,7 +66,7 @@ export default function DisconnectIntegration({
title={t("remove_app")}
description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation"
Icon={FiAlertCircle}>
Icon={AlertCircle}>
<DialogFooter>
<DialogClose onClick={() => setModalOpen(false)} />
<DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>

4
packages/features/apps/components/DisconnectIntegrationModal.tsx
View File

@ -1,7 +1,7 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Dialog, DialogContent, showToast, DialogFooter, DialogClose } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon";
import { AlertCircle } from "@calcom/ui/components/icon";
interface DisconnectIntegrationModalProps {
credentialId: number | null;
@ -36,7 +36,7 @@ export default function DisconnectIntegrationModal({
title={t("remove_app")}
description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation"
Icon={FiAlertCircle}>
Icon={AlertCircle}>
<DialogFooter>
<DialogClose onClick={handleModelClose} />
<DialogClose

4
packages/features/auth/SAMLLogin.tsx
View File

@ -7,7 +7,7 @@ import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui";
import { FiLock } from "@calcom/ui/components/icon";
import { Lock } from "@calcom/ui/components/icon";
interface Props {
samlTenantID: string;
@ -34,7 +34,7 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
return (
<Button
StartIcon={FiLock}
StartIcon={Lock}
color="secondary"
data-testid="saml"
className="flex w-full justify-center"

4
packages/features/bookings/components/PeopleFilter.tsx
View File

@ -3,7 +3,7 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { AnimatedPopover, Avatar } from "@calcom/ui";
import { FiUser } from "@calcom/ui/components/icon";
import { User } from "@calcom/ui/components/icon";
import { useFilterQuery } from "../lib/useFilterQuery";
@ -22,7 +22,7 @@ export const PeopleFilter = () => {
<AnimatedPopover text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : dropdownTitle}>
<div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
<div className="text-default flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
<FiUser className="h-5 w-5" />
<User className="h-5 w-5" />
</div>
<label htmlFor="allUsers" className="text-default mr-auto self-center truncate text-sm font-medium">
{t("all_users_filter_label")}

6
packages/features/bookings/components/TeamFilter.tsx
View File

@ -4,7 +4,7 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { AnimatedPopover, Avatar } from "@calcom/ui";
import { FiLayers, FiUser } from "@calcom/ui/components/icon";
import { Layers, User } from "@calcom/ui/components/icon";
import { useFilterQuery } from "../lib/useFilterQuery";
@ -24,7 +24,7 @@ export const TeamsMemberFilter = () => {
<AnimatedPopover text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : dropdownTitle}>
<div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
<div className="text-default flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
<FiLayers className="h-5 w-5" />
<Layers className="h-5 w-5" />
</div>
<label
htmlFor="allBookings"
@ -45,7 +45,7 @@ export const TeamsMemberFilter = () => {
</div>
<div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
<div className="text-default flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
<FiUser className="h-5 w-5" />
<User className="h-5 w-5" />
</div>
<label
htmlFor="yourBookings"

4
packages/features/calendars/DatePicker.tsx
View File

@ -8,7 +8,7 @@ import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday";
import { Button, SkeletonText } from "@calcom/ui";
import { FiArrowRight } from "@calcom/ui/components/icon";
import { ArrowRight } from "@calcom/ui/components/icon";
export type DatePickerProps = {
/** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */
@ -82,7 +82,7 @@ const NoAvailabilityOverlay = ({
return (
<div className=" bg-muted border-subtle absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border p-8 shadow-sm">
<h4 className="text-emphasis mb-4 font-medium">{t("no_availability_in_month", { month: month })}</h4>
<Button onClick={nextMonthButton} color="primary" EndIcon={FiArrowRight}>
<Button onClick={nextMonthButton} color="primary" EndIcon={ArrowRight}>
{t("view_next_month")}
</Button>
</div>

6
packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
View File

@ -1,6 +1,6 @@
import dayjs from "@calcom/dayjs";
import { Button, ButtonGroup } from "@calcom/ui";
import { FiChevronLeft, FiChevronRight } from "@calcom/ui/components/icon";
import { ChevronLeft, ChevronRight } from "@calcom/ui/components/icon";
import { useCalendarStore } from "../../state/store";
@ -30,7 +30,7 @@ export function SchedulerHeading() {
<ButtonGroup combined>
{/* TODO: i18n label with correct view */}
<Button
StartIcon={FiChevronLeft}
StartIcon={ChevronLeft}
variant="icon"
color="secondary"
aria-label="Previous Week"
@ -39,7 +39,7 @@ export function SchedulerHeading() {
}}
/>
<Button
StartIcon={FiChevronRight}
StartIcon={ChevronRight}
variant="icon"
color="secondary"
aria-label="Next Week"

4
packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
View File

@ -7,7 +7,7 @@ import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, DatePicker, DialogFooter, Form, showToast, Switch, TextField, Tooltip } from "@calcom/ui";
import { FiClipboard } from "@calcom/ui/components/icon";
import { Clipboard } from "@calcom/ui/components/icon";
export default function ApiKeyDialogForm({
defaultValues,
@ -74,7 +74,7 @@ export default function ApiKeyDialogForm({
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
<Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>

8
packages/features/ee/api-keys/components/ApiKeyListItem.tsx
View File

@ -12,7 +12,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui";
import { FiMoreHorizontal, FiEdit2, FiTrash } from "@calcom/ui/components/icon";
import { MoreHorizontal, Edit2, Trash } from "@calcom/ui/components/icon";
export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number];
@ -59,12 +59,12 @@ const ApiKeyListItem = ({
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" variant="icon" color="secondary" StartIcon={FiMoreHorizontal} />
<Button type="button" variant="icon" color="secondary" StartIcon={MoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<DropdownItem type="button" onClick={onEditClick} StartIcon={FiEdit2}>
<DropdownItem type="button" onClick={onEditClick} StartIcon={Edit2}>
{t("edit") as string}
</DropdownItem>
</DropdownMenuItem>
@ -76,7 +76,7 @@ const ApiKeyListItem = ({
id: apiKey.id,
})
}
StartIcon={FiTrash}>
StartIcon={Trash}>
{t("delete") as string}
</DropdownItem>
</DropdownMenuItem>

7
packages/features/ee/common/components/LicenseRequired.tsx
View File

@ -5,12 +5,13 @@
*/
import DOMPurify from "dompurify";
import { useSession } from "next-auth/react";
import React, { AriaRole, ComponentType, Fragment } from "react";
import type { AriaRole, ComponentType } from "react";
import React, { Fragment } from "react";
import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui";
import { FiAlertTriangle } from "@calcom/ui/components/icon";
import { AlertTriangle } from "@calcom/ui/components/icon";
type LicenseRequiredProps = {
as?: keyof JSX.IntrinsicElements | "";
@ -36,7 +37,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
children
) : (
<EmptyScreen
Icon={FiAlertTriangle}
Icon={AlertTriangle}
headline={t("enterprise_license")}
description={
<div

4
packages/features/ee/common/components/v2/LicenseRequired.tsx
View File

@ -6,7 +6,7 @@ import React, { Fragment } from "react";
import { APP_NAME, CONSOLE_URL, SUPPORT_MAIL_ADDRESS, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui";
import { FiAlertTriangle } from "@calcom/ui/components/icon";
import { AlertTriangle } from "@calcom/ui/components/icon";
type LicenseRequiredProps = {
as?: keyof JSX.IntrinsicElements | "";
@ -27,7 +27,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
children
) : (
<EmptyScreen
Icon={FiAlertTriangle}
Icon={AlertTriangle}
headline={t("enterprise_license")}
description={
<div

4
packages/features/ee/payments/components/PaymentPage.tsx
View File

@ -16,7 +16,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
import { localStorage } from "@calcom/lib/webstorage";
import { FiCreditCard } from "@calcom/ui/components/icon";
import { CreditCard } from "@calcom/ui/components/icon";
import type { PaymentPageProps } from "../pages/payment";
import PaymentComponent from "./Payment";
@ -81,7 +81,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
aria-labelledby="modal-headline">
<div>
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<FiCreditCard className="h-8 w-8 text-green-600" />
<CreditCard className="h-8 w-8 text-green-600" />
</div>
<div className="mt-3 text-center sm:mt-5">

8
packages/features/ee/sso/components/ConnectionInfo.tsx
View File

@ -11,7 +11,7 @@ import {
DialogTrigger,
Label,
} from "@calcom/ui";
import { FiClipboard } from "@calcom/ui/components/icon";
import { Clipboard } from "@calcom/ui/components/icon";
export default function ConnectionInfo({
teamId,
@ -99,7 +99,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
<Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
@ -121,7 +121,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
<Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
@ -157,7 +157,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => {
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
<Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>

6
packages/features/ee/support/components/HelpMenuItem.tsx
View File

@ -5,7 +5,7 @@ import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, showToast, TextArea } from "@calcom/ui";
import { FiExternalLink, FiAlertTriangle } from "@calcom/ui/components/icon";
import { ExternalLink, AlertTriangle } from "@calcom/ui/components/icon";
import { useFreshChat } from "../lib/freshchat/FreshChatProvider";
import { isFreshChatEnabled } from "../lib/freshchat/FreshChatScript";
@ -55,7 +55,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium"
rel="noreferrer">
{t("documentation")}
<FiExternalLink
<ExternalLink
className={classNames(
"group-hover:text-subtle text-muted",
"ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
@ -174,7 +174,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
{mutation.isError && (
<div className="bg-error mb-4 flex p-4 text-sm text-red-700">
<div className="flex-shrink-0">
<FiAlertTriangle className="h-5 w-5" />
<AlertTriangle className="h-5 w-5" />
</div>
<div className="ml-3 flex-grow">
<p className="font-medium">{t("feedback_error")}</p>

Some files were not shown because too many files have changed in this diff Show More