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 { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale"; 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() { export default function AddToHomescreen() {
const { t } = useLocale(); const { t } = useLocale();
@ -40,7 +40,7 @@ export default function AddToHomescreen() {
type="button" type="button"
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white"> 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> <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> </button>
</div> </div>
</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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery"; import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
import { Badge, ListItemText } from "@calcom/ui"; 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 }; 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> <ListItemText component="p">{description}</ListItemText>
{invalidCredential && ( {invalidCredential && (
<div className="flex gap-x-2 pt-2"> <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"> <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
{t("invalid_credential")} {t("invalid_credential")}
</ListItemText> </ListItemText>

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

@ -22,7 +22,7 @@ import {
TextField, TextField,
ColorPicker, ColorPicker,
} from "@calcom/ui"; } 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"; import Select from "@components/ui/form/Select";
@ -493,7 +493,7 @@ const tabs = [
{ {
name: "HTML", name: "HTML",
href: "embedTabName=embed-code", href: "embedTabName=embed-code",
icon: FiCode, icon: Code,
type: "code", type: "code",
Component: forwardRef< Component: forwardRef<
HTMLTextAreaElement | HTMLIFrameElement | null, HTMLTextAreaElement | HTMLIFrameElement | null,
@ -546,7 +546,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
{ {
name: "React", name: "React",
href: "embedTabName=embed-react", href: "embedTabName=embed-react",
icon: FiCode, icon: Code,
type: "code", type: "code",
Component: forwardRef< Component: forwardRef<
HTMLTextAreaElement | HTMLIFrameElement | null, HTMLTextAreaElement | HTMLIFrameElement | null,
@ -586,7 +586,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
{ {
name: "Preview", name: "Preview",
href: "embedTabName=embed-preview", href: "embedTabName=embed-preview",
icon: FiTrello, icon: Trello,
type: "iframe", type: "iframe",
Component: forwardRef< Component: forwardRef<
HTMLIFrameElement | HTMLTextAreaElement | null, HTMLIFrameElement | HTMLTextAreaElement | null,
@ -622,7 +622,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => { const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
return ( return (
<components.Control {...props}> <components.Control {...props}>
<FiSun className="text-subtle ml-2 h-4 w-4" /> <Sun className="text-subtle ml-2 h-4 w-4" />
{children} {children}
</components.Control> </components.Control>
); );
@ -830,7 +830,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
onClick={() => { onClick={() => {
removeQueryParams(router, ["embedType", "embedTabName"]); removeQueryParams(router, ["embedType", "embedTabName"]);
}}> }}>
<FiArrowLeft className="mr-4 w-4" /> <ArrowLeft className="mr-4 w-4" />
</button> </button>
{embed.title} {embed.title}
</h3> </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 Shell from "@calcom/features/shell/Shell";
import { ErrorBoundary } from "@calcom/ui"; 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"; import NavTabs from "./NavTabs";
@ -11,32 +11,32 @@ const tabs = [
{ {
name: "profile", name: "profile",
href: "/settings/my-account/profile", href: "/settings/my-account/profile",
icon: FiUser, icon: User,
}, },
{ {
name: "teams", name: "teams",
href: "/settings/teams", href: "/settings/teams",
icon: FiUsers, icon: Users,
}, },
{ {
name: "security", name: "security",
href: "/settings/security", href: "/settings/security",
icon: FiKey, icon: Key,
}, },
{ {
name: "developer", name: "developer",
href: "/settings/developer", href: "/settings/developer",
icon: FiTerminal, icon: Terminal,
}, },
{ {
name: "billing", name: "billing",
href: "/settings/billing", href: "/settings/billing",
icon: FiCreditCard, icon: CreditCard,
}, },
{ {
name: "admin", name: "admin",
href: "/settings/admin", href: "/settings/admin",
icon: FiLock, icon: Lock,
adminRequired: true, adminRequired: true,
}, },
]; ];

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

@ -9,7 +9,7 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownItem, DropdownItem,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon"; import { Plus } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell"; import { QueryCell } from "@lib/QueryCell";
@ -40,7 +40,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
return ( return (
<Dropdown modal={false}> <Dropdown modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}> <Button StartIcon={Plus} color="secondary" {...(isLoading && { loading: isLoading })}>
{t("add")} {t("add")}
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -48,7 +48,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
{options.map((data) => ( {options.map((data) => (
<DropdownMenuItem key={data.slug} className="focus:outline-none"> <DropdownMenuItem key={data.slug} className="focus:outline-none">
{data.slug === "add-new" ? ( {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")} {t("install_new_calendar_app")}
</DropdownItem> </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 { trpc } from "@calcom/trpc/react";
import type { App as AppType } from "@calcom/types/App"; import type { App as AppType } from "@calcom/types/App";
import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui"; import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
import { import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
FiBookOpen,
FiCheck,
FiExternalLink,
FiFile,
FiFlag,
FiMail,
FiPlus,
FiShield,
} from "@calcom/ui/components/icon";
/* These app slugs all require Google Cal to be installed */ /* These app slugs all require Google Cal to be installed */
@ -153,7 +144,7 @@ const Component = ({
isGlobal || isGlobal ||
(existingCredentials.length > 0 && allowedMultipleInstalls ? ( (existingCredentials.length > 0 && allowedMultipleInstalls ? (
<div className="flex space-x-3"> <div className="flex space-x-3">
<Button StartIcon={FiCheck} color="secondary" disabled> <Button StartIcon={Check} color="secondary" disabled>
{existingCredentials.length > 0 {existingCredentials.length > 0
? t("active_install", { count: existingCredentials.length }) ? t("active_install", { count: existingCredentials.length })
: t("default")} : t("default")}
@ -175,7 +166,7 @@ const Component = ({
} }
return ( return (
<Button <Button
StartIcon={FiPlus} StartIcon={Plus}
{...props} {...props}
// @TODO: Overriding color and size prevent us from // @TODO: Overriding color and size prevent us from
// having to duplicate InstallAppButton for now. // having to duplicate InstallAppButton for now.
@ -275,7 +266,7 @@ const Component = ({
rel="noreferrer" rel="noreferrer"
className="text-emphasis text-sm font-normal no-underline hover:underline" className="text-emphasis text-sm font-normal no-underline hover:underline"
href={docs}> 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")} {t("documentation")}
</a> </a>
</li> </li>
@ -287,7 +278,7 @@ const Component = ({
rel="noreferrer" rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline" className="text-emphasis font-normal no-underline hover:underline"
href={website}> 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://", "")} {website.replace("https://", "")}
</a> </a>
</li> </li>
@ -299,7 +290,7 @@ const Component = ({
rel="noreferrer" rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline" className="text-emphasis font-normal no-underline hover:underline"
href={"mailto:" + email}> 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} {email}
</a> </a>
@ -312,7 +303,7 @@ const Component = ({
rel="noreferrer" rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline" className="text-emphasis font-normal no-underline hover:underline"
href={tos}> 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")} {t("terms_of_service")}
</a> </a>
</li> </li>
@ -324,7 +315,7 @@ const Component = ({
rel="noreferrer" rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline" className="text-emphasis font-normal no-underline hover:underline"
href={privacy}> 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")} {t("privacy_policy")}
</a> </a>
</li> </li>
@ -335,7 +326,7 @@ const Component = ({
{t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })} {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
</span> </span>
<a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}> <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> </a>
</div> </div>
</div> </div>

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

@ -17,7 +17,7 @@ import {
Switch, Switch,
ShellSubHeading, ShellSubHeading,
} from "@calcom/ui"; } 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"; import { QueryCell } from "@lib/QueryCell";
@ -100,7 +100,7 @@ function CalendarSwitch(props: {
/> />
{!!props.destination && ( {!!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"> <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")} {t("adding_events_to")}
</span> </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="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="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"> <div className="bg-default border-subtle relative rounded-md border p-1.5">
<FiCalendar className="text-default h-8 w-8" strokeWidth="1" /> <Calendar className="text-default h-8 w-8" strokeWidth="1" />
<FiPlus <Plus
className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2" className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
strokeWidth="4" strokeWidth="4"
/> />
@ -322,7 +322,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
</> </>
) : ( ) : (
<EmptyScreen <EmptyScreen
Icon={FiCalendar} Icon={Calendar}
headline={t("no_category_apps", { headline={t("no_category_apps", {
category: t("calendar").toLowerCase(), 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 Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui"; import { EmptyScreen } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon"; import { AlertCircle } from "@calcom/ui/components/icon";
type AppsLayoutProps = { type AppsLayoutProps = {
children: React.ReactNode; children: React.ReactNode;
@ -27,7 +27,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
<main className="w-full"> <main className="w-full">
{emptyStore ? ( {emptyStore ? (
<EmptyScreen <EmptyScreen
Icon={FiAlertCircle} Icon={AlertCircle}
headline={t("no_apps")} headline={t("no_apps")}
description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""} description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""}
buttonText={session.data?.user.role === "ADMIN" ? t("apps_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 Shell from "@calcom/features/shell/Shell";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui"; 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)[] = [ const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
{ {
name: "calendar", name: "calendar",
href: "/apps/installed/calendar", href: "/apps/installed/calendar",
icon: FiCalendar, icon: Calendar,
}, },
{ {
name: "conferencing", name: "conferencing",
href: "/apps/installed/conferencing", href: "/apps/installed/conferencing",
icon: FiVideo, icon: Video,
}, },
{ {
name: "payment", name: "payment",
href: "/apps/installed/payment", href: "/apps/installed/payment",
icon: FiCreditCard, icon: CreditCard,
}, },
{ {
name: "automation", name: "automation",
href: "/apps/installed/automation", href: "/apps/installed/automation",
icon: FiShare2, icon: Share2,
}, },
{ {
name: "analytics", name: "analytics",
href: "/apps/installed/analytics", href: "/apps/installed/analytics",
icon: FiBarChart, icon: BarChart,
}, },
{ {
name: "other", name: "other",
href: "/apps/installed/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 React from "react";
import { Button, SkeletonText } from "@calcom/ui"; 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"; import classNames from "@lib/classNames";
@ -31,7 +31,7 @@ function SkeletonItem() {
type="button" type="button"
variant="icon" variant="icon"
color="secondary" color="secondary"
StartIcon={FiMoreHorizontal} StartIcon={MoreHorizontal}
disabled disabled
/> />
</div> </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 { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Tooltip } from "@calcom/ui"; 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"; import type { Props } from "./pages/AvailabilityPage";
@ -41,7 +41,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
return ( return (
<div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium"> <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
{eventLocationType.iconUrl === "/link.svg" ? ( {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 <img
src={eventLocationType.iconUrl} 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 classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge } from "@calcom/ui"; 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"; import useRouterQuery from "@lib/hooks/useRouterQuery";
@ -103,7 +103,7 @@ const BookingDescription: FC<Props> = (props) => {
{requiresConfirmation && ( {requiresConfirmation && (
<div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}> <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
<div> <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> </div>
{requiresConfirmationText} {requiresConfirmationText}
</div> </div>
@ -117,7 +117,7 @@ const BookingDescription: FC<Props> = (props) => {
isBookingPage && "text-default", isBookingPage && "text-default",
!eventType.metadata?.multipleDuration && "items-center" !eventType.metadata?.multipleDuration && "items-center"
)}> )}>
<FiClock <Clock
className={classNames( className={classNames(
"min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]", "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
isBookingPage && "mt-[2px]" 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 { FormattedNumber, IntlProvider } from "react-intl";
import getPaymentAppData from "@calcom/lib/getPaymentAppData"; import getPaymentAppData from "@calcom/lib/getPaymentAppData";
import { FiCreditCard } from "@calcom/ui/components/icon"; import { CreditCard } from "@calcom/ui/components/icon";
const BookingDescriptionPayment = (props: { const BookingDescriptionPayment = (props: {
eventType: Parameters<typeof getPaymentAppData>[0]; eventType: Parameters<typeof getPaymentAppData>[0];
@ -13,7 +13,7 @@ const BookingDescriptionPayment = (props: {
return ( return (
<p className="text-bookinglight -ml-2 px-2 text-sm "> <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" ? ( {paymentAppData.paymentOption === "HOLD" ? (
<> <>
{props.t("no_show_fee_amount", { {props.t("no_show_fee_amount", {

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

@ -28,16 +28,7 @@ import {
TableActions, TableActions,
TextAreaField, TextAreaField,
} from "@calcom/ui"; } from "@calcom/ui";
import { import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";
FiCheck,
FiClock,
FiMapPin,
FiRefreshCcw,
FiSend,
FiSlash,
FiX,
FiCreditCard,
} from "@calcom/ui/components/icon";
import useMeQuery from "@lib/hooks/useMeQuery"; import useMeQuery from "@lib/hooks/useMeQuery";
@ -125,7 +116,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => { onClick: () => {
setRejectionDialogIsOpen(true); setRejectionDialogIsOpen(true);
}, },
icon: FiSlash, icon: Slash,
disabled: mutation.isLoading, disabled: mutation.isLoading,
}, },
// For bookings with payment, only confirm if the booking is paid for // For bookings with payment, only confirm if the booking is paid for
@ -137,7 +128,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => { onClick: () => {
bookingConfirm(true); bookingConfirm(true);
}, },
icon: FiCheck, icon: Check,
disabled: mutation.isLoading, disabled: mutation.isLoading,
}, },
] ]
@ -165,7 +156,7 @@ function BookingListItem(booking: BookingItemProps) {
isTabRecurring && isRecurring ? "&allRemainingBookings=true" : "" isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
}${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""} }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
`, `,
icon: FiX, icon: X,
}, },
{ {
id: "edit_booking", id: "edit_booking",
@ -173,7 +164,7 @@ function BookingListItem(booking: BookingItemProps) {
actions: [ actions: [
{ {
id: "reschedule", id: "reschedule",
icon: FiClock, icon: Clock,
label: t("reschedule_booking"), label: t("reschedule_booking"),
href: `/reschedule/${booking.uid}${ href: `/reschedule/${booking.uid}${
booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : "" booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@ -181,7 +172,7 @@ function BookingListItem(booking: BookingItemProps) {
}, },
{ {
id: "reschedule_request", id: "reschedule_request",
icon: FiSend, icon: Send,
iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ", iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
label: t("send_reschedule_request"), label: t("send_reschedule_request"),
onClick: () => { onClick: () => {
@ -194,7 +185,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => { onClick: () => {
setIsOpenLocationDialog(true); setIsOpenLocationDialog(true);
}, },
icon: FiMapPin, icon: MapPin,
}, },
], ],
}, },
@ -208,7 +199,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => { onClick: () => {
setChargeCardDialogIsOpen(true); setChargeCardDialogIsOpen(true);
}, },
icon: FiCreditCard, icon: CreditCard,
}, },
]; ];
@ -222,7 +213,7 @@ function BookingListItem(booking: BookingItemProps) {
const RequestSentMessage = () => { const RequestSentMessage = () => {
return ( 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")} {t("reschedule_request_sent")}
</Badge> </Badge>
); );
@ -518,7 +509,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
); );
})}> })}>
<div className="text-default"> <div className="text-default">
<FiRefreshCcw <RefreshCcw
strokeWidth="3" strokeWidth="3"
className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-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 { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import type { RecurringEvent } from "@calcom/types/Calendar"; import type { RecurringEvent } from "@calcom/types/Calendar";
import { Button, TextArea } from "@calcom/ui"; import { Button, TextArea } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon"; import { X } from "@calcom/ui/components/icon";
type Props = { type Props = {
booking: { booking: {
@ -48,7 +48,7 @@ export default function CancelBooking(props: Props) {
{error && ( {error && (
<div className="mt-8"> <div className="mt-8">
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full"> <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>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title"> <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"; import { timeZone as localStorageTimeZone } from "@lib/clock";
@ -18,7 +18,7 @@ export function TimezoneDropdown({
return ( 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"> <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} /> <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
</div> </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 { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
import { trpc } from "@calcom/trpc"; import { trpc } from "@calcom/trpc";
import { HeadSeo, useCalcomTheme } from "@calcom/ui"; 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"; import { timeZone as localStorageTimeZone } from "@lib/clock";
@ -210,7 +210,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
" text-default", " text-default",
"ltr:mr-[10px] rtl:ml-[10px]" "ltr:mr-[10px] rtl:ml-[10px]"
)}> )}>
<FiUser <User
className={classNames( className={classNames(
"min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]", "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
"mt-[2px]" "mt-[2px]"
@ -221,7 +221,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
)} )}
{!rescheduleUid && eventType.recurringEvent && ( {!rescheduleUid && eventType.recurringEvent && (
<div className="flex items-start text-sm font-medium"> <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> <div>
<p className="mb-1 -ml-2 inline px-2 py-1"> <p className="mb-1 -ml-2 inline px-2 py-1">
{getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })} {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@ -246,7 +246,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
)} )}
{paymentAppData.price > 0 && ( {paymentAppData.price > 0 && (
<p className="-ml-2 px-2 text-sm font-medium"> <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" ? ( {paymentAppData.paymentOption === "HOLD" ? (
<> <>
{t("no_show_fee_amount", { {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 { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { TimeFormat } from "@calcom/lib/timeFormat"; import { TimeFormat } from "@calcom/lib/timeFormat";
import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui"; 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 { timeZone } from "@lib/clock";
import useRouterQuery from "@lib/hooks/useRouterQuery"; import useRouterQuery from "@lib/hooks/useRouterQuery";
@ -537,8 +537,8 @@ const BookingPage = ({
<BookingDescription isBookingPage profile={profile} eventType={eventType}> <BookingDescription isBookingPage profile={profile} eventType={eventType}>
<BookingDescriptionPayment eventType={eventType} t={t} /> <BookingDescriptionPayment eventType={eventType} t={t} />
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && ( {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
<div className="text-default items-start text-sm font-medium"> <div className="dark:text-inverted text-default items-start text-sm font-medium">
<FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" /> <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"> <p className="-ml-2 inline-block items-center px-2">
{getEveryFreqFor({ {getEveryFreqFor({
t, t,
@ -549,7 +549,7 @@ const BookingPage = ({
</div> </div>
)} )}
<div className="text-bookinghighlight flex items-start text-sm"> <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"> <div className="text-sm font-medium">
{isClientTimezoneAvailable && {isClientTimezoneAvailable &&
(rescheduleUid || !eventType.recurringEvent?.freq) && (rescheduleUid || !eventType.recurringEvent?.freq) &&
@ -580,7 +580,7 @@ const BookingPage = ({
{t("former_time")} {t("former_time")}
</p> </p>
<p className="line-through "> <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 && {isClientTimezoneAvailable &&
typeof booking.startTime === "string" && typeof booking.startTime === "string" &&
parseDate(dayjs(booking.startTime), i18n, timeFormat)} parseDate(dayjs(booking.startTime), i18n, timeFormat)}
@ -589,7 +589,7 @@ const BookingPage = ({
)} )}
{!!eventType.seatsPerTimeSlot && ( {!!eventType.seatsPerTimeSlot && (
<div className="text-bookinghighlight flex items-start text-sm"> <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] ${ className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
currentSlotBooking && currentSlotBooking &&
currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5 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 data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <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>
<div className="ms-3"> <div className="ms-3">
<p className="text-sm text-blue-700"> <p className="text-sm text-blue-700">

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

@ -14,7 +14,7 @@ import {
DialogHeader, DialogHeader,
showToast, showToast,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiCreditCard, FiAlertTriangle } from "@calcom/ui/components/icon"; import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
interface IRescheduleDialog { interface IRescheduleDialog {
isOpenDialog: boolean; isOpenDialog: boolean;
@ -45,7 +45,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
<DialogContent> <DialogContent>
<div className="flex flex-row space-x-3"> <div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]"> <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>
<div className="pt-1"> <div className="pt-1">
<DialogHeader title={t("charge_card")} /> <DialogHeader title={t("charge_card")} />
@ -65,7 +65,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
{chargeError && ( {chargeError && (
<div className="mt-4 flex text-red-500"> <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> <p className="text-sm">{t("error_charging_card")}</p>
</div> </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 { trpc } from "@calcom/trpc/react";
import { Input } from "@calcom/ui"; import { Input } from "@calcom/ui";
import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } 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"; import { QueryCell } from "@lib/QueryCell";
@ -218,7 +218,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
<DialogContent> <DialogContent>
<div className="flex flex-row space-x-3"> <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"> <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>
<div className="w-full"> <div className="w-full">
<div className="mt-3 text-center sm:mt-0 sm:text-left"> <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, showToast,
TextArea, TextArea,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiClock } from "@calcom/ui/components/icon"; import { Clock } from "@calcom/ui/components/icon";
interface IRescheduleDialog { interface IRescheduleDialog {
isOpenDialog: boolean; isOpenDialog: boolean;
@ -44,7 +44,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
<DialogContent> <DialogContent>
<div className="flex flex-row space-x-3"> <div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]"> <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>
<div className="pt-1"> <div className="pt-1">
<DialogHeader title={t("send_reschedule_request")} /> <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 { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui"; 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"; import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
@ -157,7 +157,7 @@ const EventTypeScheduleDetails = () => {
<hr className="border-subtle" /> <hr className="border-subtle" />
<div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between"> <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"> <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" />} {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
</span> </span>
{!!schedule?.id && ( {!!schedule?.id && (
@ -165,7 +165,7 @@ const EventTypeScheduleDetails = () => {
href={`/availability/${schedule.id}`} href={`/availability/${schedule.id}`}
disabled={isLoading} disabled={isLoading}
color="minimal" color="minimal"
EndIcon={FiExternalLink} EndIcon={ExternalLink}
target="_blank" target="_blank"
rel="noopener noreferrer"> rel="noopener noreferrer">
{t("edit_availability")} {t("edit_availability")}
@ -183,7 +183,7 @@ const EventTypeSchedule = () => {
if (!schedules?.schedules.length && !isLoading) if (!schedules?.schedules.length && !isLoading)
return ( return (
<EmptyScreen <EmptyScreen
Icon={FiClock} Icon={Clock}
headline={t("new_schedule_heading")} headline={t("new_schedule_heading")}
description={t("new_schedule_description")} description={t("new_schedule_description")}
buttonRaw={<NewScheduleButton fromEventType />} 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 type { Prisma } from "@calcom/prisma/client";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui"; 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"; import RequiresConfirmationController from "./RequiresConfirmationController";
@ -134,7 +134,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
addOnSuffix={ addOnSuffix={
<Button <Button
type="button" type="button"
StartIcon={FiEdit} StartIcon={Edit}
variant="icon" variant="icon"
color="minimal" color="minimal"
className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent" 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" className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
type="button"> type="button">
<FiCopy /> <Copy />
</Button> </Button>
</Tooltip> </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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, EmptyScreen } from "@calcom/ui"; 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"] & export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
EventTypeAppCardComponentProps["eventType"]; EventTypeAppCardComponentProps["eventType"];
@ -61,7 +61,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
<div className="before:border-0"> <div className="before:border-0">
{!isLoading && !installedApps?.length ? ( {!isLoading && !installedApps?.length ? (
<EmptyScreen <EmptyScreen
Icon={FiGrid} Icon={Grid}
headline={t("empty_installed_apps_headline")} headline={t("empty_installed_apps_headline")}
description={t("empty_installed_apps_description")} description={t("empty_installed_apps_description")}
buttonRaw={ buttonRaw={

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

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

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

@ -27,7 +27,7 @@ import {
SkeletonContainer, SkeletonContainer,
SkeletonText, SkeletonText,
} from "@calcom/ui"; } 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 { EditLocationDialog } from "@components/dialog/EditLocationDialog";
import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect"; import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
@ -253,10 +253,10 @@ export const EventSetupTab = (
}} }}
aria-label={t("edit")} aria-label={t("edit")}
className="hover:text-emphasis text-subtle mr-1 p-1"> className="hover:text-emphasis text-subtle mr-1 p-1">
<FiEdit2 className="h-4 w-4" /> <Edit2 className="h-4 w-4" />
</button> </button>
<button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}> <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> </button>
</div> </div>
</div> </div>
@ -268,7 +268,7 @@ export const EventSetupTab = (
location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar" location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
) && ( ) && (
<div className="text-default flex text-sm"> <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"> <Trans i18nKey="event_type_requres_google_cal">
<p> <p>
The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work. 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> <li>
<Button <Button
data-testid="add-location" data-testid="add-location"
StartIcon={FiPlus} StartIcon={Plus}
color="minimal" color="minimal"
onClick={() => setShowLocationModal(true)}> onClick={() => setShowLocationModal(true)}>
{t("add_location")} {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 type { EventTypeSetupProps } from "pages/event-types/[type]";
import { useState } from "react"; import { useState } from "react";
import { TbWebhook } from "react-icons/tb";
import { WebhookForm } from "@calcom/features/webhooks/components"; import { WebhookForm } from "@calcom/features/webhooks/components";
import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm"; 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 type { Webhook } from "@calcom/prisma/client";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui"; 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 = ({ export const EventTeamWebhooksTab = ({
eventType, eventType,
@ -85,7 +85,7 @@ export const EventTeamWebhooksTab = ({
<Button <Button
color="secondary" color="secondary"
data-testid="new_webhook" data-testid="new_webhook"
StartIcon={FiPlus} StartIcon={Plus}
onClick={() => setCreateModalOpen(true)}> onClick={() => setCreateModalOpen(true)}>
{t("new_webhook")} {t("new_webhook")}
</Button> </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 type { TFunction } from "next-i18next";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]"; import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
import { useMemo, useState, Suspense } from "react"; import { useMemo, useState, Suspense } from "react";
import type { UseFormReturn } from "react-hook-form"; import type { UseFormReturn } from "react-hook-form";
import { TbWebhook } from "react-icons/tb";
import Shell from "@calcom/features/shell/Shell"; import Shell from "@calcom/features/shell/Shell";
import { classNames } from "@calcom/lib"; import { classNames } from "@calcom/lib";
@ -32,19 +32,19 @@ import {
VerticalTabs, VerticalTabs,
} from "@calcom/ui"; } from "@calcom/ui";
import { import {
FiLink, Link as LinkIcon,
FiCalendar, Calendar,
FiClock, Clock,
FiSliders, Sliders,
FiRepeat, Repeat,
FiGrid, Grid,
FiZap, Zap,
FiUsers, Users,
FiExternalLink, ExternalLink,
FiCode, Code,
FiTrash, Trash,
FiMoreHorizontal, MoreHorizontal,
FiLoader, Loader,
} from "@calcom/ui/components/icon"; } from "@calcom/ui/components/icon";
import { EmbedButton, EmbedDialog } from "@components/Embed"; import { EmbedButton, EmbedDialog } from "@components/Embed";
@ -77,44 +77,44 @@ function getNavigation(props: {
{ {
name: "event_setup_tab_title", name: "event_setup_tab_title",
href: `/event-types/${eventType.id}?tabName=setup`, href: `/event-types/${eventType.id}?tabName=setup`,
icon: FiLink, icon: LinkIcon,
info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
}, },
{ {
name: "availability", name: "availability",
href: `/event-types/${eventType.id}?tabName=availability`, href: `/event-types/${eventType.id}?tabName=availability`,
icon: FiCalendar, icon: Calendar,
info: `default_schedule_name`, // TODO: Get this from props info: `default_schedule_name`, // TODO: Get this from props
}, },
{ {
name: "event_limit_tab_title", name: "event_limit_tab_title",
href: `/event-types/${eventType.id}?tabName=limits`, href: `/event-types/${eventType.id}?tabName=limits`,
icon: FiClock, icon: Clock,
info: `event_limit_tab_description`, info: `event_limit_tab_description`,
}, },
{ {
name: "event_advanced_tab_title", name: "event_advanced_tab_title",
href: `/event-types/${eventType.id}?tabName=advanced`, href: `/event-types/${eventType.id}?tabName=advanced`,
icon: FiSliders, icon: Sliders,
info: `event_advanced_tab_description`, info: `event_advanced_tab_description`,
}, },
{ {
name: "recurring", name: "recurring",
href: `/event-types/${eventType.id}?tabName=recurring`, href: `/event-types/${eventType.id}?tabName=recurring`,
icon: FiRepeat, icon: Repeat,
info: `recurring_event_tab_description`, info: `recurring_event_tab_description`,
}, },
{ {
name: "apps", name: "apps",
href: `/event-types/${eventType.id}?tabName=apps`, href: `/event-types/${eventType.id}?tabName=apps`,
icon: FiGrid, icon: Grid,
//TODO: Handle proper translation with count handling //TODO: Handle proper translation with count handling
info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`, info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
}, },
{ {
name: "workflows", name: "workflows",
href: `/event-types/${eventType.id}?tabName=workflows`, href: `/event-types/${eventType.id}?tabName=workflows`,
icon: FiZap, icon: Zap,
info: `${enabledWorkflowsNumber} ${t("active")}`, info: `${enabledWorkflowsNumber} ${t("active")}`,
}, },
]; ];
@ -171,7 +171,7 @@ function EventTypeSingleLayout({
navigation.splice(2, 0, { navigation.splice(2, 0, {
name: "assignment", name: "assignment",
href: `/event-types/${eventType.id}?tabName=team`, href: `/event-types/${eventType.id}?tabName=team`,
icon: FiUsers, icon: Users,
info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin", info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
}); });
navigation.push({ navigation.push({
@ -225,14 +225,14 @@ function EventTypeSingleLayout({
variant="icon" variant="icon"
href={permalink} href={permalink}
rel="noreferrer" rel="noreferrer"
StartIcon={FiExternalLink} StartIcon={ExternalLink}
/> />
</Tooltip> </Tooltip>
<Button <Button
color="secondary" color="secondary"
variant="icon" variant="icon"
StartIcon={FiLink} StartIcon={LinkIcon}
tooltip={t("copy_link")} tooltip={t("copy_link")}
onClick={() => { onClick={() => {
navigator.clipboard.writeText(permalink); navigator.clipboard.writeText(permalink);
@ -241,7 +241,7 @@ function EventTypeSingleLayout({
/> />
<EmbedButton <EmbedButton
embedUrl={encodeURIComponent(embedLink)} embedUrl={encodeURIComponent(embedLink)}
StartIcon={FiCode} StartIcon={Code}
color="secondary" color="secondary"
variant="icon" variant="icon"
tooltip={t("embed")} tooltip={t("embed")}
@ -249,7 +249,7 @@ function EventTypeSingleLayout({
<Button <Button
color="destructive" color="destructive"
variant="icon" variant="icon"
StartIcon={FiTrash} StartIcon={Trash}
tooltip={t("delete")} tooltip={t("delete")}
disabled={!hasPermsToDelete} disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)} onClick={() => setDeleteDialogOpen(true)}
@ -260,14 +260,14 @@ function EventTypeSingleLayout({
<Dropdown> <Dropdown>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" /> <Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent style={{ minWidth: "200px" }}> <DropdownMenuContent style={{ minWidth: "200px" }}>
<DropdownMenuItem className="focus:ring-muted"> <DropdownMenuItem className="focus:ring-muted">
<DropdownItem <DropdownItem
target="_blank" target="_blank"
type="button" type="button"
StartIcon={FiExternalLink} StartIcon={ExternalLink}
href={permalink} href={permalink}
rel="noreferrer"> rel="noreferrer">
{t("preview")} {t("preview")}
@ -276,7 +276,7 @@ function EventTypeSingleLayout({
<DropdownMenuItem className="focus:ring-muted"> <DropdownMenuItem className="focus:ring-muted">
<DropdownItem <DropdownItem
type="button" type="button"
StartIcon={FiLink} StartIcon={LinkIcon}
onClick={() => { onClick={() => {
navigator.clipboard.writeText(permalink); navigator.clipboard.writeText(permalink);
showToast("Link copied!", "success"); showToast("Link copied!", "success");
@ -288,7 +288,7 @@ function EventTypeSingleLayout({
<DropdownItem <DropdownItem
type="button" type="button"
color="destructive" color="destructive"
StartIcon={FiTrash} StartIcon={Trash}
disabled={!hasPermsToDelete} disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}> onClick={() => setDeleteDialogOpen(true)}>
{t("delete")} {t("delete")}
@ -323,7 +323,7 @@ function EventTypeSingleLayout({
</Button> </Button>
</div> </div>
}> }>
<Suspense fallback={<FiLoader />}> <Suspense fallback={<Loader />}>
<div className="flex flex-col xl:flex-row xl:space-x-6"> <div className="flex flex-col xl:flex-row xl:space-x-6">
<div className="hidden xl:block"> <div className="hidden xl:block">
<VerticalTabs <VerticalTabs

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

@ -1,5 +1,5 @@
import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui"; 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() { function SkeletonLoader() {
return ( return (
@ -32,11 +32,11 @@ function SkeletonItem() {
<div className=""> <div className="">
<ul className="mt-2 flex space-x-4 rtl:space-x-reverse "> <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
<li className="flex items-center whitespace-nowrap"> <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" /> <SkeletonText className="h-4 w-12" />
</li> </li>
<li className="flex items-center whitespace-nowrap"> <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" /> <SkeletonText className="h-4 w-12" />
</li> </li>
</ul> </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 }) => { const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return ( return (
<div className="mb-4 sm:flex sm:items-start"> <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"> <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>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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"> <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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Badge, showToast, Switch } from "@calcom/ui"; 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: { export function CalendarSwitch(props: {
type: string; type: string;
@ -76,7 +76,7 @@ export function CalendarSwitch(props: {
{props.defaultSelected && ( {props.defaultSelected && (
<Badge variant="gray"> <Badge variant="gray">
<div className="flex"> <div className="flex">
<FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")} <ArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
</div> </div>
</Badge> </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 { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui"; 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 }) => { export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
const { t } = useLocale(); const { t } = useLocale();
@ -24,7 +24,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
props.onSuccess(); props.onSuccess();
}}> }}>
<EmptyScreen <EmptyScreen
Icon={FiUserCheck} Icon={UserCheck}
headline={t("admin_user_created")} headline={t("admin_user_created")}
description={t("admin_user_created_description")} 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 type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, TextField } from "@calcom/ui"; 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 = { type EnterpriseLicenseFormValues = {
licenseKey: string; licenseKey: string;
@ -91,7 +91,7 @@ const EnterpriseLicense = (
<div> <div>
<Button <Button
className="w-full justify-center text-lg" className="w-full justify-center text-lg"
EndIcon={FiExternalLink} EndIcon={ExternalLink}
href="https://console.cal.com" href="https://console.cal.com"
target="_blank"> target="_blank">
{t("purchase_license")} {t("purchase_license")}
@ -121,9 +121,9 @@ const EnterpriseLicense = (
)} )}
addOnSuffix={ addOnSuffix={
checkLicenseLoading ? ( checkLicenseLoading ? (
<FiLoader className="h-5 w-5 animate-spin" /> <Loader className="h-5 w-5 animate-spin" />
) : errors.licenseKey === undefined && isDirty ? ( ) : errors.licenseKey === undefined && isDirty ? (
<FiCheck className="h-5 w-5 text-green-700" /> <Check className="h-5 w-5 text-green-700" />
) : undefined ) : undefined
} }
color={errors.licenseKey ? "warn" : ""} 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 type { Dispatch, SetStateAction } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { FiCheck } from "@calcom/ui/components/icon"; import { Check } from "@calcom/ui/components/icon";
const StepDone = (props: { const StepDone = (props: {
currentStep: number; 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="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"> <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>
<div className="max-w-[420px] text-center"> <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> <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 { useState } from "react";
import type { ControllerRenderProps } from "react-hook-form"; 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({ const EditableHeading = function EditableHeading({
value, value,
@ -21,7 +21,7 @@ const EditableHeading = function EditableHeading({
<label className="min-w-8 relative inline-block"> <label className="min-w-8 relative inline-block">
<span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span> <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
{!isEditing && isReady && ( {!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 <input
{...passThroughProps} {...passThroughProps}

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

@ -1,12 +1,12 @@
import { Tooltip } from "@calcom/ui"; 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 }) { export default function InfoBadge({ content }: { content: string }) {
return ( return (
<> <>
<Tooltip side="top" content={content}> <Tooltip side="top" content={content}>
<span title={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> </span>
</Tooltip> </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 { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app"; import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui"; 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 { export enum UsernameChangeStatusEnum {
UPGRADE = "UPGRADE", UPGRADE = "UPGRADE",
@ -235,7 +235,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
usernameIsAvailable ? "" : "" usernameIsAvailable ? "" : ""
)}> )}>
{isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>} {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
{!isInputUsernamePremium && usernameIsAvailable ? <FiCheck className="mt-2 w-6" /> : <></>} {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 w-6" /> : <></>}
</span> </span>
</div> </div>
</div> </div>
@ -251,7 +251,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<Dialog open={openDialogSaveUsername}> <Dialog open={openDialogSaveUsername}>
<DialogContent <DialogContent
Icon={FiEdit2} Icon={Edit2}
title={t("confirm_username_change_dialog_title")} title={t("confirm_username_change_dialog_title")}
description={ description={
<> <>
@ -288,7 +288,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
data-testid="go-to-billing" data-testid="go-to-billing"
href={paymentLink}> 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> </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 { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app"; import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, TextField } from "@calcom/ui"; 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 { interface ICustomUsernameProps {
currentUsername: string | undefined; currentUsername: string | undefined;
@ -137,7 +137,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
{currentUsername !== inputUsernameValue && ( {currentUsername !== inputUsernameValue && (
<div className="absolute right-[2px] top-6 flex flex-row"> <div className="absolute right-[2px] top-6 flex flex-row">
<span className={classNames("mx-2 py-2")}> <span className={classNames("mx-2 py-2")}>
{usernameIsAvailable ? <FiCheck className="w-6" /> : <></>} {usernameIsAvailable ? <Check className="w-6" /> : <></>}
</span> </span>
</div> </div>
)} )}
@ -154,7 +154,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
</div> </div>
)} )}
<Dialog open={openDialogSaveUsername}> <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="flex flex-row">
<div className="mb-4 w-full pt-1"> <div className="mb-4 w-full pt-1">
<div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm"> <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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { Avatar } from "@calcom/ui"; 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"; import Select from "@components/ui/form/Select";
@ -49,7 +49,7 @@ export const CheckedSelect = ({
alt={option.label} alt={option.label}
/> />
{option.label} {option.label}
<FiX <X
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))} onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer" 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 "react-date-picker/dist/DatePicker.css";
import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle"; 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"; import classNames from "@lib/classNames";
@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
className className
)} )}
clearIcon={null} clearIcon={null}
calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />} calendarIcon={<Calendar className="text-subtle h-5 w-5" />}
value={date} value={date}
minDate={minDate} minDate={minDate}
disabled={disabled} disabled={disabled}

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

@ -92,11 +92,11 @@ const nextConfig = {
"@calcom/prisma", "@calcom/prisma",
"@calcom/trpc", "@calcom/trpc",
"@calcom/ui", "@calcom/ui",
"lucide-react",
], ],
modularizeImports: { modularizeImports: {
"@calcom/ui/components/icon": { "@calcom/ui/components/icon": {
transform: "@react-icons/all-files/fi/{{member}}", transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
skipDefaultConversion: true,
preventFullImport: true, preventFullImport: true,
}, },
"@calcom/features/insights/components": { "@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 { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { HeadSeo } from "@calcom/ui"; 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"; import { ssgInit } from "@server/lib/ssg";
@ -20,13 +20,13 @@ export default function Custom404() {
{ {
title: t("documentation"), title: t("documentation"),
description: t("documentation_description"), description: t("documentation_description"),
icon: FiFileText, icon: FileText,
href: DOCS_URL, href: DOCS_URL,
}, },
{ {
title: t("blog"), title: t("blog"),
description: t("blog_description"), description: t("blog_description"),
icon: FiBookOpen, icon: BookOpen,
href: `${WEBSITE_URL}/blog`, 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"> className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50"> <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> </span>
</div> </div>
<div className="min-w-0 flex-1"> <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> <p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
</div> </div>
<div className="flex-shrink-0 self-center"> <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> </div>
</a> </a>
</li> </li>
@ -140,7 +140,7 @@ export default function Custom404() {
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"> className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg"> <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> </span>
</div> </div>
<div className="min-w-0 flex-1"> <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> <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
</div> </div>
<div className="flex-shrink-0 self-center"> <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> </div>
</Link> </Link>
</li> </li>
@ -198,7 +198,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("join_our_community")}</p> <p className="text-subtle text-base">{t("join_our_community")}</p>
</div> </div>
<div className="flex-shrink-0 self-center"> <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> </div>
</a> </a>
</li> </li>
@ -257,7 +257,7 @@ export default function Custom404() {
rel="noreferrer"> rel="noreferrer">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50"> <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> </span>
</div> </div>
<div className="min-w-0 flex-1"> <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> <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
</div> </div>
<div className="flex-shrink-0 self-center"> <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> </div>
</a> </a>
</li> </li>
@ -300,7 +300,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{link.description}</p> <p className="text-subtle text-base">{link.description}</p>
</div> </div>
<div className="flex-shrink-0 self-center"> <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> </div>
</Link> </Link>
</li> </li>
@ -346,7 +346,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("join_our_community")}</p> <p className="text-subtle text-base">{t("join_our_community")}</p>
</div> </div>
<div className="flex-shrink-0 self-center"> <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> </div>
</a> </a>
</li> </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 { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, showToast } from "@calcom/ui"; import { Button, showToast } from "@calcom/ui";
import { FiCopy } from "@calcom/ui/components/icon"; import { Copy } from "@calcom/ui/components/icon";
export default function Error500() { export default function Error500() {
const { t } = useLocale(); const { t } = useLocale();
@ -34,7 +34,7 @@ export default function Error500() {
<Button <Button
color="secondary" color="secondary"
className="mt-2 border-0 font-sans font-normal hover:bg-gray-300" className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
StartIcon={FiCopy} StartIcon={Copy}
onClick={() => { onClick={() => {
navigator.clipboard.writeText(router.query.error as string); navigator.clipboard.writeText(router.query.error as string);
showToast("Link copied!", "success"); 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 { baseEventTypeSelect } from "@calcom/prisma/selects";
import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils"; import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui"; 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 { inferSSRProps } from "@lib/types/inferSSRProps";
import type { EmbedProps } from "@lib/withEmbedSsr"; import type { EmbedProps } from "@lib/withEmbedSsr";
@ -60,7 +60,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<li <li
key={index} 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"> 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 <Link
href={getUsernameSlugLink({ users: props.users, slug: type.slug })} href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
className="flex justify-between px-6 py-4" className="flex justify-between px-6 py-4"
@ -161,7 +161,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
key={type.id} key={type.id}
style={{ display: "flex", ...eventTypeListItemEmbedStyles }} 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"> 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 */} {/* 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"> <div className="block w-full p-5">
<Link <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 Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SkeletonText } from "@calcom/ui"; 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>) { export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
const { t, isLocaleReady } = useLocale(); const { t, isLocaleReady } = useLocale();
@ -16,7 +16,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
<Link <Link
href="/apps" href="/apps"
className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2"> 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" />}{" "} {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
</Link> </Link>
</div> </div>
@ -32,7 +32,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
<h3 className="font-medium capitalize">{category.name}</h3> <h3 className="font-medium capitalize">{category.name}</h3>
<p className="text-subtle text-sm"> <p className="text-subtle text-sm">
{t("number_apps", { count: category.count })}{" "} {t("number_apps", { count: category.count })}{" "}
<FiArrowRight className="inline-block h-4 w-4" /> <ArrowRight className="inline-block h-4 w-4" />
</p> </p>
</div> </div>
</Link> </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 { inferSSRProps } from "@calcom/types/inferSSRProps";
import type { HorizontalTabItemProps } from "@calcom/ui"; import type { HorizontalTabItemProps } from "@calcom/ui";
import { AllApps, AppStoreCategories, HorizontalTabs, TextField, PopularAppsSlider } 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"; import AppsLayout from "@components/apps/layouts/AppsLayout";
@ -37,7 +37,7 @@ function AppsSearch({
return ( return (
<TextField <TextField
className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0" 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" addOnClassname="!border-muted"
containerClassName={classNames("focus:!ring-offset-0", className)} containerClassName={classNames("focus:!ring-offset-0", className)}
type="search" type="search"

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

@ -30,15 +30,15 @@ import {
showToast, showToast,
} from "@calcom/ui"; } from "@calcom/ui";
import { import {
FiBarChart, BarChart,
FiCalendar, Calendar,
FiCreditCard, CreditCard,
FiGrid, Grid,
FiMoreHorizontal, MoreHorizontal,
FiPlus, Plus,
FiShare2, Share2,
FiTrash, Trash,
FiVideo, Video,
} from "@calcom/ui/components/icon"; } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell"; import { QueryCell } from "@lib/QueryCell";
@ -71,7 +71,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
color="destructive" color="destructive"
onClick={() => handleDisconnect(credentialId)} onClick={() => handleDisconnect(credentialId)}
disabled={isGlobal} disabled={isGlobal}
StartIcon={FiTrash}> StartIcon={Trash}>
{t("remove_app")} {t("remove_app")}
</DropdownItem> </DropdownItem>
</DropdownMenuItem> </DropdownMenuItem>
@ -159,7 +159,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
<div className="flex justify-end"> <div className="flex justify-end">
<Dropdown modal={false}> <Dropdown modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" /> <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
{!appIsDefault && variant === "conferencing" && ( {!appIsDefault && variant === "conferencing" && (
@ -167,7 +167,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
<DropdownItem <DropdownItem
type="button" type="button"
color="secondary" color="secondary"
StartIcon={FiVideo} StartIcon={Video}
onClick={() => { onClick={() => {
const locationType = getEventLocationTypeFromApp( const locationType = getEventLocationTypeFromApp(
item?.locationOption?.value ?? "" item?.locationOption?.value ?? ""
@ -225,13 +225,13 @@ const IntegrationsContainer = ({
const { t } = useLocale(); const { t } = useLocale();
const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true }); const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
const emptyIcon = { const emptyIcon = {
calendar: FiCalendar, calendar: Calendar,
conferencing: FiVideo, conferencing: Video,
automation: FiShare2, automation: Share2,
analytics: FiBarChart, analytics: BarChart,
payment: FiCreditCard, payment: CreditCard,
web3: FiBarChart, web3: BarChart,
other: FiGrid, other: Grid,
}; };
return ( return (
@ -270,7 +270,7 @@ const IntegrationsContainer = ({
variant ? `/apps/categories/${variant === "conferencing" ? "video" : variant}` : "/apps" variant ? `/apps/categories/${variant === "conferencing" ? "video" : variant}` : "/apps"
} }
color="secondary" color="secondary"
StartIcon={FiPlus}> StartIcon={Plus}>
{t("add")} {t("add")}
</Button> </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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, SkeletonText } from "@calcom/ui"; 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"; import AuthContainer from "@components/ui/AuthContainer";
@ -29,7 +29,7 @@ export default function Error() {
<AuthContainer title="" description=""> <AuthContainer title="" description="">
<div> <div>
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full"> <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>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title"> <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 { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import prisma from "@calcom/prisma"; import prisma from "@calcom/prisma";
import { Alert, Button, EmailField, PasswordField } from "@calcom/ui"; 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 { inferSSRProps } from "@lib/types/inferSSRProps";
import type { WithNonceProps } from "@lib/withNonce"; import type { WithNonceProps } from "@lib/withNonce";
@ -91,7 +91,7 @@ export default function Login({
setTwoFactorRequired(false); setTwoFactorRequired(false);
methods.setValue("totpCode", ""); methods.setValue("totpCode", "");
}} }}
StartIcon={FiArrowLeft} StartIcon={ArrowLeft}
color="minimal"> color="minimal">
{t("go_back")} {t("go_back")}
</Button> </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 { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui"; 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"; 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> <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
<div className="mb-4"> <div className="mb-4">
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full"> <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>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title"> <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, ConfirmationDialogContent,
VerticalDivider, VerticalDivider,
} from "@calcom/ui"; } 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"; import { HttpError } from "@lib/core/http/error";
@ -57,7 +57,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
{t("date_overrides")}{" "} {t("date_overrides")}{" "}
<Tooltip content={t("date_overrides_info")}> <Tooltip content={t("date_overrides_info")}>
<span className="inline-block"> <span className="inline-block">
<FiInfo /> <Info className="h-4 w-4" />
</span> </span>
</Tooltip> </Tooltip>
</h3> </h3>
@ -75,7 +75,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))} excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
onChange={(ranges) => append({ ranges })} onChange={(ranges) => append({ ranges })}
Trigger={ Trigger={
<Button color="secondary" StartIcon={FiPlus} data-testid="add-override"> <Button color="secondary" StartIcon={Plus} data-testid="add-override">
Add an override Add an override
</Button> </Button>
} }
@ -202,7 +202,7 @@ export default function Availability() {
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button <Button
StartIcon={FiTrash} StartIcon={Trash}
variant="icon" variant="icon"
color="destructive" color="destructive"
aria-label={t("delete")} 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 type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { EmptyScreen, showToast } from "@calcom/ui"; 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 { withQuery } from "@lib/QueryCell";
import { HttpError } from "@lib/core/http/error"; import { HttpError } from "@lib/core/http/error";
@ -75,7 +75,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
{schedules.length === 0 ? ( {schedules.length === 0 ? (
<div className="flex justify-center"> <div className="flex justify-center">
<EmptyScreen <EmptyScreen
Icon={FiClock} Icon={Clock}
headline={t("new_schedule_heading")} headline={t("new_schedule_heading")}
description={t("new_schedule_description")} description={t("new_schedule_description")}
buttonRaw={<NewScheduleButton />} 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 { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils"; import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { Button, EmailInput, HeadSeo, Badge, useCalcomTheme } from "@calcom/ui"; 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 { timeZone } from "@lib/clock";
import type { inferSSRProps } from "@lib/types/inferSSRProps"; import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -306,7 +306,7 @@ export default function Success(props: SuccessProps) {
<Link <Link
href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"} 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"> 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> </Link>
</div> </div>
)} )}
@ -347,10 +347,10 @@ export default function Success(props: SuccessProps) {
<img src={giphyImage} alt="Gif from Giphy" /> <img src={giphyImage} alt="Gif from Giphy" />
)} )}
{!giphyImage && !needsConfirmation && !isCancelled && ( {!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" />} {needsConfirmation && !isCancelled && <Calendar className="text-emphasis h-5 w-5" />}
{isCancelled && <FiX className="h-5 w-5 text-red-600" />} {isCancelled && <X className="h-5 w-5 text-red-600" />}
</div> </div>
<div className="mt-6 mb-8 text-center last:mb-0"> <div className="mt-6 mb-8 text-center last:mb-0">
<h3 <h3
@ -458,7 +458,7 @@ export default function Success(props: SuccessProps) {
className="text-default flex items-center gap-2 underline" className="text-default flex items-center gap-2 underline"
rel="noreferrer"> rel="noreferrer">
{providerName || "Link"} {providerName || "Link"}
<FiExternalLink className="text-default inline h-4 w-4" /> <ExternalLink className="text-default inline h-4 w-4" />
</a> </a>
) : ( ) : (
locationToDisplay 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 type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Alert, Button, EmptyScreen } from "@calcom/ui"; 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"; import { useInViewObserver } from "@lib/hooks/useInViewObserver";
@ -180,7 +180,7 @@ export default function Bookings() {
{query.status === "success" && isEmpty && ( {query.status === "success" && isEmpty && (
<div className="flex items-center justify-center pt-2 xl:pt-0"> <div className="flex items-center justify-center pt-2 xl:pt-0">
<EmptyScreen <EmptyScreen
Icon={FiCalendar} Icon={Calendar}
headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })} headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
description={t("no_status_bookings_yet_description", { description={t("no_status_bookings_yet_description", {
status: t(status).toLowerCase(), status: t(status).toLowerCase(),

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

@ -39,19 +39,19 @@ import {
HeadSeo, HeadSeo,
} from "@calcom/ui"; } from "@calcom/ui";
import { import {
FiArrowDown, ArrowDown,
FiArrowUp, ArrowUp,
FiClipboard, Clipboard,
FiCode, Code,
FiCopy, Copy,
FiEdit, Edit,
FiEdit2, Edit2,
FiExternalLink, ExternalLink,
FiLink, Link as LinkIcon,
FiMoreHorizontal, MoreHorizontal,
FiTrash, Trash,
FiUpload, Upload,
FiUsers, Users,
} from "@calcom/ui/components/icon"; } from "@calcom/ui/components/icon";
import { withQuery } from "@lib/QueryCell"; import { withQuery } from "@lib/QueryCell";
@ -325,7 +325,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<button <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]" 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)}> onClick={() => moveEventType(index, -1)}>
<FiArrowUp className="h-5 w-5" /> <ArrowUp className="h-5 w-5" />
</button> </button>
)} )}
@ -333,7 +333,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<button <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]" 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)}> onClick={() => moveEventType(index, 1)}>
<FiArrowDown className="h-5 w-5" /> <ArrowDown className="h-5 w-5" />
</button> </button>
)} )}
<MemoizedItem type={type} group={group} readOnly={readOnly} /> <MemoizedItem type={type} group={group} readOnly={readOnly} />
@ -373,7 +373,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
target="_blank" target="_blank"
variant="icon" variant="icon"
href={calLink} href={calLink}
StartIcon={FiExternalLink} StartIcon={ExternalLink}
/> />
</Tooltip> </Tooltip>
@ -381,7 +381,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<Button <Button
color="secondary" color="secondary"
variant="icon" variant="icon"
StartIcon={FiLink} StartIcon={LinkIcon}
onClick={() => { onClick={() => {
showToast(t("link_copied"), "success"); showToast(t("link_copied"), "success");
navigator.clipboard.writeText(calLink); navigator.clipboard.writeText(calLink);
@ -394,7 +394,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
type="button" type="button"
variant="icon" variant="icon"
color="secondary" color="secondary"
StartIcon={FiMoreHorizontal} StartIcon={MoreHorizontal}
className="ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md" className="ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md"
/> />
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -403,7 +403,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem <DropdownItem
type="button" type="button"
data-testid={"event-type-edit-" + type.id} data-testid={"event-type-edit-" + type.id}
StartIcon={FiEdit2} StartIcon={Edit2}
onClick={() => router.push("/event-types/" + type.id)}> onClick={() => router.push("/event-types/" + type.id)}>
{t("edit")} {t("edit")}
</DropdownItem> </DropdownItem>
@ -412,7 +412,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem <DropdownItem
type="button" type="button"
data-testid={"event-type-duplicate-" + type.id} data-testid={"event-type-duplicate-" + type.id}
StartIcon={FiCopy} StartIcon={Copy}
onClick={() => openDuplicateModal(type, group)}> onClick={() => openDuplicateModal(type, group)}>
{t("duplicate")} {t("duplicate")}
</DropdownItem> </DropdownItem>
@ -421,7 +421,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<EmbedButton <EmbedButton
as={DropdownItem} as={DropdownItem}
type="button" type="button"
StartIcon={FiCode} StartIcon={Code}
className="w-full rounded-none" className="w-full rounded-none"
embedUrl={encodeURIComponent(embedLink)}> embedUrl={encodeURIComponent(embedLink)}>
{t("embed")} {t("embed")}
@ -437,7 +437,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
setDeleteDialogOpen(true); setDeleteDialogOpen(true);
setDeleteDialogTypeId(type.id); setDeleteDialogTypeId(type.id);
}} }}
StartIcon={FiTrash} StartIcon={Trash}
className="w-full rounded-none"> className="w-full rounded-none">
{t("delete")} {t("delete")}
</DropdownItem> </DropdownItem>
@ -453,7 +453,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<div className="min-w-9 mx-5 flex sm:hidden"> <div className="min-w-9 mx-5 flex sm:hidden">
<Dropdown> <Dropdown>
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}> <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> </DropdownMenuTrigger>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuContent> <DropdownMenuContent>
@ -461,7 +461,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem <DropdownItem
href={calLink} href={calLink}
target="_blank" target="_blank"
StartIcon={FiExternalLink} StartIcon={ExternalLink}
className="w-full rounded-none"> className="w-full rounded-none">
{t("preview")} {t("preview")}
</DropdownItem> </DropdownItem>
@ -473,7 +473,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
navigator.clipboard.writeText(calLink); navigator.clipboard.writeText(calLink);
showToast(t("link_copied"), "success"); showToast(t("link_copied"), "success");
}} }}
StartIcon={FiClipboard} StartIcon={Clipboard}
className="w-full rounded-none text-left"> className="w-full rounded-none text-left">
{t("copy_link")} {t("copy_link")}
</DropdownItem> </DropdownItem>
@ -492,7 +492,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
.then(() => showToast(t("link_shared"), "success")) .then(() => showToast(t("link_shared"), "success"))
.catch(() => showToast(t("failed"), "error")); .catch(() => showToast(t("failed"), "error"));
}} }}
StartIcon={FiUpload} StartIcon={Upload}
className="w-full rounded-none"> className="w-full rounded-none">
{t("share")} {t("share")}
</DropdownItem> </DropdownItem>
@ -501,7 +501,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownMenuItem className="outline-none"> <DropdownMenuItem className="outline-none">
<DropdownItem <DropdownItem
onClick={() => router.push("/event-types/" + type.id)} onClick={() => router.push("/event-types/" + type.id)}
StartIcon={FiEdit} StartIcon={Edit}
className="w-full rounded-none"> className="w-full rounded-none">
{t("edit")} {t("edit")}
</DropdownItem> </DropdownItem>
@ -509,7 +509,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownMenuItem className="outline-none"> <DropdownMenuItem className="outline-none">
<DropdownItem <DropdownItem
onClick={() => openDuplicateModal(type, group)} onClick={() => openDuplicateModal(type, group)}
StartIcon={FiCopy} StartIcon={Copy}
data-testid={"event-type-duplicate-" + type.id}> data-testid={"event-type-duplicate-" + type.id}>
{t("duplicate")} {t("duplicate")}
</DropdownItem> </DropdownItem>
@ -522,7 +522,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
setDeleteDialogOpen(true); setDeleteDialogOpen(true);
setDeleteDialogTypeId(type.id); setDeleteDialogTypeId(type.id);
}} }}
StartIcon={FiTrash} StartIcon={Trash}
className="w-full rounded-none"> className="w-full rounded-none">
{t("delete")} {t("delete")}
</DropdownItem> </DropdownItem>
@ -589,7 +589,7 @@ const EventTypeListHeading = ({
<span className="text-subtle ms-2 me-2 relative -top-px text-xs"> <span className="text-subtle ms-2 me-2 relative -top-px text-xs">
<Link href={`/settings/teams/${teamId}/members`}> <Link href={`/settings/teams/${teamId}/members`}>
<Badge variant="gray"> <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} {membershipCount}
</Badge> </Badge>
</Link> </Link>
@ -617,7 +617,7 @@ const CreateFirstEventTypeView = () => {
return ( return (
<EmptyScreen <EmptyScreen
Icon={FiLink} Icon={LinkIcon}
headline={t("new_event_type_heading")} headline={t("new_event_type_heading")}
description={t("new_event_type_description")} 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc"; import { trpc } from "@calcom/trpc";
import { Button, ButtonGroup } from "@calcom/ui"; 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 Heading = () => {
const { t } = useLocale(); const { t } = useLocale();
@ -35,17 +35,17 @@ export default function InsightsPage() {
const { data: user } = trpc.viewer.me.useQuery(); const { data: user } = trpc.viewer.me.useQuery();
const features = [ const features = [
{ {
icon: <FiUsers className="h-5 w-5" />, icon: <Users className="h-5 w-5" />,
title: t("view_bookings_across"), title: t("view_bookings_across"),
description: t("view_bookings_across_description"), 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"), title: t("identify_booking_trends"),
description: t("identify_booking_trends_description"), 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"), title: t("spot_popular_event_types"),
description: t("spot_popular_event_types_description"), 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 { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Meta } from "@calcom/ui"; import { Button, Meta } from "@calcom/ui";
import { FiExternalLink } from "@calcom/ui/components/icon"; import { ExternalLink } from "@calcom/ui/components/icon";
interface CtaRowProps { interface CtaRowProps {
title: string; title: string;
@ -48,7 +48,7 @@ const BillingView = () => {
<CtaRow <CtaRow
title={t("billing_manage_details_title")} title={t("billing_manage_details_title")}
description={t("billing_manage_details_description")}> 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")} {t("billing_portal")}
</Button> </Button>
</CtaRow> </CtaRow>

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

@ -16,7 +16,7 @@ import {
Meta, Meta,
AppSkeletonLoader as SkeletonLoader, AppSkeletonLoader as SkeletonLoader,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiLink, FiPlus } from "@calcom/ui/components/icon"; import { Link as LinkIcon, Plus } from "@calcom/ui/components/icon";
const ApiKeysView = () => { const ApiKeysView = () => {
const { t } = useLocale(); const { t } = useLocale();
@ -32,7 +32,7 @@ const ApiKeysView = () => {
return ( return (
<Button <Button
color="secondary" color="secondary"
StartIcon={FiPlus} StartIcon={Plus}
onClick={() => { onClick={() => {
setApiKeyToEdit(undefined); setApiKeyToEdit(undefined);
setApiKeyModal(true); setApiKeyModal(true);
@ -72,7 +72,7 @@ const ApiKeysView = () => {
</> </>
) : ( ) : (
<EmptyScreen <EmptyScreen
Icon={FiLink} Icon={LinkIcon}
headline={t("create_first_api_key")} headline={t("create_first_api_key")}
description={t("create_first_api_key_description", { appName: APP_NAME })} description={t("create_first_api_key_description", { appName: APP_NAME })}
buttonRaw={<NewApiKeyButton />} 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 */} {/* TODO future PR to preview brandColors */}
{/* <Button {/* <Button
color="secondary" color="secondary"
EndIcon={FiExternalLink} EndIcon={ExternalLink}
className="mt-6" className="mt-6"
onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}> onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
Preview Preview

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

@ -24,7 +24,7 @@ import {
SkeletonText, SkeletonText,
showToast, showToast,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiPlus, FiCalendar } from "@calcom/ui/components/icon"; import { Plus, Calendar } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell"; import { QueryCell } from "@lib/QueryCell";
@ -50,7 +50,7 @@ const AddCalendarButton = () => {
return ( return (
<> <>
<Button color="secondary" StartIcon={FiPlus} href="/apps/categories/calendar"> <Button color="secondary" StartIcon={Plus} href="/apps/categories/calendar">
{t("add_calendar")} {t("add_calendar")}
</Button> </Button>
</> </>
@ -87,7 +87,7 @@ const CalendarsView = () => {
<div> <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-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]"> <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>
<div className="flex w-full flex-col space-y-3"> <div className="flex w-full flex-col space-y-3">
@ -198,7 +198,7 @@ const CalendarsView = () => {
</div> </div>
) : ( ) : (
<EmptyScreen <EmptyScreen
Icon={FiCalendar} Icon={Calendar}
headline={t("no_calendar_installed")} headline={t("no_calendar_installed")}
description={t("no_calendar_installed_description")} description={t("no_calendar_installed_description")}
buttonText={t("add_a_calendar")} buttonText={t("add_a_calendar")}

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

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

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

@ -38,7 +38,7 @@ import {
TextField, TextField,
Editor, Editor,
} from "@calcom/ui"; } 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 TwoFactor from "@components/auth/TwoFactor";
import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability"; import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@ -232,7 +232,7 @@ const ProfileView = () => {
{/* Delete account Dialog */} {/* Delete account Dialog */}
<Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}> <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
<DialogTrigger asChild> <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")} {t("delete_account")}
</Button> </Button>
</DialogTrigger> </DialogTrigger>
@ -240,7 +240,7 @@ const ProfileView = () => {
title={t("delete_account_modal_title")} title={t("delete_account_modal_title")}
description={t("confirm_delete_account_modal", { appName: APP_NAME })} description={t("confirm_delete_account_modal", { appName: APP_NAME })}
type="creation" type="creation"
Icon={FiAlertTriangle}> Icon={AlertTriangle}>
<> <>
<p className="text-default mb-7"> <p className="text-default mb-7">
{t("delete_account_confirmation_message", { appName: APP_NAME })} {t("delete_account_confirmation_message", { appName: APP_NAME })}
@ -283,7 +283,7 @@ const ProfileView = () => {
title={t("confirm_password")} title={t("confirm_password")}
description={t("confirm_password_change_email")} description={t("confirm_password_change_email")}
type="creation" type="creation"
Icon={FiAlertTriangle}> Icon={AlertTriangle}>
<> <>
<PasswordField <PasswordField
data-testid="password" 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 { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import prisma from "@calcom/prisma"; import prisma from "@calcom/prisma";
import { Avatar, AvatarGroup, Button, EmptyScreen, HeadSeo } from "@calcom/ui"; 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 { useToggleQuery } from "@lib/hooks/useToggleQuery";
import type { inferSSRProps } from "@lib/types/inferSSRProps"; 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"> <aside className="dark:text-inverted mt-8 flex justify-center text-center">
<Button <Button
color="minimal" color="minimal"
EndIcon={FiArrowRight} EndIcon={ArrowRight}
className="dark:hover:bg-darkgray-200" className="dark:hover:bg-darkgray-200"
href={`/team/${team.slug}?members=1`} href={`/team/${team.slug}?members=1`}
shallow={true}> 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 { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui"; import { Button } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon"; import { Plus } from "@calcom/ui/components/icon";
function Teams() { function Teams() {
const { t } = useLocale(); const { t } = useLocale();
@ -16,7 +16,7 @@ function Teams() {
CTA={ CTA={
<Button <Button
variant="fab" variant="fab"
StartIcon={FiPlus} StartIcon={Plus}
type="button" type="button"
href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}> href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
{t("new")} {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 { useLocale } from "@calcom/lib/hooks/useLocale";
import prisma, { bookingMinimalSelect } from "@calcom/prisma"; import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import type { inferSSRProps } from "@calcom/types/inferSSRProps"; 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"; import { ssrInit } from "@server/lib/ssr";
@ -222,7 +222,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
aria-label={`${open ? "close" : "open"} booking description sidebar`} 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" 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)}> onClick={() => setOpen(!open)}>
<FiChevronRight <ChevronRight
aria-hidden aria-hidden
className={classNames(open && "rotate-180", "w-5 transition-all duration-300 ease-in-out")} 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 { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
import prisma, { bookingMinimalSelect } from "@calcom/prisma"; import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import { Button, HeadSeo } from "@calcom/ui"; 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"; import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -29,7 +29,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
aria-labelledby="modal-headline"> aria-labelledby="modal-headline">
<div> <div>
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full"> <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>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline"> <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} {props.booking.title}
</h2> </h2>
<p className="text-subtle text-center"> <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")} {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
</p> </p>
</div> </div>
</div> </div>
<div className="mt-5 text-center sm:mt-6"> <div className="mt-5 text-center sm:mt-6">
<div className="mt-5"> <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")} {t("go_back")}
</Button> </Button>
</div> </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 prisma, { bookingMinimalSelect } from "@calcom/prisma";
import type { inferSSRProps } from "@calcom/types/inferSSRProps"; import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { Button, HeadSeo, EmptyScreen } from "@calcom/ui"; 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>) { export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
const { t } = useLocale(); 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} /> <HeadSeo title={t("this_meeting_has_not_started_yet")} description={props.booking.title} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<EmptyScreen <EmptyScreen
Icon={FiClock} Icon={Clock}
headline={t("this_meeting_has_not_started_yet")} headline={t("this_meeting_has_not_started_yet")}
description={ description={
<> <>
<h2 className="mb-2 text-center font-medium">{props.booking.title}</h2> <h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
<p className="text-subtle text-center"> <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")} {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
</p> </p>
</> </>
} }
buttonRaw={ buttonRaw={
<Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}> <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
{t("go_back")} {t("go_back")}
</Button> </Button>
} }

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

@ -1,6 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, EmptyScreen, HeadSeo } from "@calcom/ui"; 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() { export default function NoMeetingFound() {
const { t } = useLocale(); const { t } = useLocale();
@ -10,11 +10,11 @@ export default function NoMeetingFound() {
<HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} /> <HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<EmptyScreen <EmptyScreen
Icon={FiX} Icon={X}
headline={t("no_meeting_found")} headline={t("no_meeting_found")}
description={t("no_meeting_found_description")} description={t("no_meeting_found_description")}
buttonRaw={ 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")} {t("go_back_home")}
</Button> </Button>
} }

1
package.json
View File

@ -95,6 +95,7 @@
"dependencies": { "dependencies": {
"city-timezones": "^1.2.1", "city-timezones": "^1.2.1",
"eslint": "^8.34.0", "eslint": "^8.34.0",
"lucide-react": "^0.130.0",
"turbo": "^1.8.3" "turbo": "^1.8.3"
}, },
"resolutions": { "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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, showToast } from "@calcom/ui"; 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 useAddAppMutation from "../_utils/useAddAppMutation";
import { InstallAppButton } from "../components"; import { InstallAppButton } from "../components";
@ -63,7 +63,7 @@ export default function OmniInstallAppButton({
loading={mutation.isLoading} loading={mutation.isLoading}
color="secondary" color="secondary"
className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center" className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
StartIcon={FiPlus} StartIcon={Plus}
{...props}> {...props}>
{t("install")} {t("install")}
</Button> </Button>

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

@ -1,5 +1,5 @@
import { WEBAPP_URL } from "@calcom/lib/constants"; 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) { function getHref(baseURL: string, category: string, useQueryParam: boolean) {
const baseUrlParsed = new URL(baseURL, WEBAPP_URL); const baseUrlParsed = new URL(baseURL, WEBAPP_URL);
@ -12,37 +12,37 @@ const getAppCategories = (baseURL: string, useQueryParam: boolean) => {
{ {
name: "calendar", name: "calendar",
href: getHref(baseURL, "calendar", useQueryParam), href: getHref(baseURL, "calendar", useQueryParam),
icon: FiCalendar, icon: Calendar,
}, },
{ {
name: "conferencing", name: "conferencing",
href: getHref(baseURL, "conferencing", useQueryParam), href: getHref(baseURL, "conferencing", useQueryParam),
icon: FiVideo, icon: Video,
}, },
{ {
name: "payment", name: "payment",
href: getHref(baseURL, "payment", useQueryParam), href: getHref(baseURL, "payment", useQueryParam),
icon: FiCreditCard, icon: CreditCard,
}, },
{ {
name: "automation", name: "automation",
href: getHref(baseURL, "automation", useQueryParam), href: getHref(baseURL, "automation", useQueryParam),
icon: FiShare2, icon: Share2,
}, },
{ {
name: "analytics", name: "analytics",
href: getHref(baseURL, "analytics", useQueryParam), href: getHref(baseURL, "analytics", useQueryParam),
icon: FiBarChart, icon: BarChart,
}, },
{ {
name: "web3", name: "web3",
href: getHref(baseURL, "web3", useQueryParam), href: getHref(baseURL, "web3", useQueryParam),
icon: FiBarChart, icon: BarChart,
}, },
{ {
name: "other", name: "other",
href: getHref(baseURL, "other", useQueryParam), 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, showToast, TextField } from "@calcom/ui"; 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({ const formSchema = z.object({
api_key: z.string(), api_key: z.string(),
@ -107,7 +107,7 @@ export default function CloseComSetup() {
type="submit" type="submit"
loading={testLoading} loading={testLoading}
disabled={testPassed === true} disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined} StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
className={ className={
testPassed !== undefined testPassed !== undefined
? testPassed ? 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 { trpc } from "@calcom/trpc/react";
import type { RouterOutputs } from "@calcom/trpc/react"; import type { RouterOutputs } from "@calcom/trpc/react";
import type { App } from "@calcom/types/App"; 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 { InstallAppButtonMap } from "./apps.browser.generated";
import type { InstallAppButtonProps } from "./types"; import type { InstallAppButtonProps } from "./types";
@ -99,7 +99,7 @@ export const AppDependencyComponent = ({
<div className="items-start space-x-2.5"> <div className="items-start space-x-2.5">
<div className="flex items-start"> <div className="flex items-start">
<div> <div>
<FiCheck className="mt-1 mr-2 font-semibold" /> <Check className="mt-1 mr-2 font-semibold" />
</div> </div>
<div> <div>
<span className="font-semibold"> <span className="font-semibold">
@ -122,7 +122,7 @@ export const AppDependencyComponent = ({
<div className="items-start space-x-2.5"> <div className="items-start space-x-2.5">
<div className="text-info flex items-start"> <div className="text-info flex items-start">
<div> <div>
<FiAlertCircle className="mt-1 mr-2 font-semibold" /> <AlertCircle className="mt-1 mr-2 font-semibold" />
</div> </div>
<div> <div>
<span className="font-semibold"> <span className="font-semibold">
@ -138,7 +138,7 @@ export const AppDependencyComponent = ({
<span className="mr-1"> <span className="mr-1">
{t("connect_app", { dependencyName: dependency.name })} {t("connect_app", { dependencyName: dependency.name })}
</span> </span>
<FiArrowRight /> <ArrowRight />
</Link> </Link>
</> </>
</div> </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 { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; 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 ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean; appName: string }) => {
const { t } = useLocale(); const { t } = useLocale();
@ -12,7 +12,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
<div className="items-start space-x-2.5"> <div className="items-start space-x-2.5">
<div className="flex items-start"> <div className="flex items-start">
<div> <div>
<FiCheck className="mt-1 mr-2 font-semibold" /> <Check className="mt-1 mr-2 font-semibold" />
</div> </div>
<div> <div>
<span className="font-semibold">{t("google_calendar_is_connected")}</span> <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="items-start space-x-2.5">
<div className="flex items-start"> <div className="flex items-start">
<div> <div>
<FiAlertCircle className="mt-1 mr-2 font-semibold" /> <AlertCircle className="mt-1 mr-2 font-semibold" />
</div> </div>
<div> <div>
<span className="font-semibold">{t("this_app_requires_google_calendar", { appName })}</span> <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`} href={`${CAL_URL}/apps/google-calendar`}
className="text-info flex items-center underline"> className="text-info flex items-center underline">
<span className="mr-1">{t("connect_google_calendar")}</span> <span className="mr-1">{t("connect_google_calendar")}</span>
<FiArrowRight /> <ArrowRight />
</Link> </Link>
</> </>
</div> </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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { showToast, SkeletonText } from "@calcom/ui"; 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"; import { ETH_MESSAGE, getProviders, SUPPORTED_CHAINS } from "../utils/ethereum";
@ -132,7 +132,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
<> <>
{!balanceData.data.hasBalance && ( {!balanceData.data.hasBalance && (
<div className="mt-2 flex flex-row items-center"> <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"> <p className="ml-2 text-red-600">
<Trans i18nKey="rainbow_insufficient_balance" t={t}> <Trans i18nKey="rainbow_insufficient_balance" t={t}>
Your connected wallet doesn&apos;t contain enough {contractData.data.symbol}. 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 && ( {balanceData.data.hasBalance && isSignatureLoading && (
<div className="mt-2 flex flex-row items-center"> <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> <p className="ml-2 text-green-600">{t("rainbow_sign_message_request")}</p>
</div> </div>
)} )}
@ -152,7 +152,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
{isSignatureError && ( {isSignatureError && (
<div className="mt-2 flex flex-row items-center"> <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"> <p className="ml-2 text-red-600">
<Trans i18nKey="rainbow_signature_error" t={t}> <Trans i18nKey="rainbow_signature_error" t={t}>
{t("rainbow_signature_error")} {t("rainbow_signature_error")}

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

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

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

@ -34,7 +34,7 @@ import {
Tooltip, Tooltip,
VerticalDivider, VerticalDivider,
} from "@calcom/ui"; } 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 { RoutingPages } from "../lib/RoutingPages";
import { getSerializableForm } from "../lib/getSerializableForm"; import { getSerializableForm } from "../lib/getSerializableForm";
@ -78,7 +78,7 @@ const Actions = ({
type="button" type="button"
rel="noreferrer" rel="noreferrer"
action="preview" action="preview"
StartIcon={FiExternalLink} StartIcon={ExternalLink}
/> />
</Tooltip> </Tooltip>
<FormAction <FormAction
@ -87,7 +87,7 @@ const Actions = ({
color="secondary" color="secondary"
variant="icon" variant="icon"
type="button" type="button"
StartIcon={FiLink} StartIcon={LinkIcon}
tooltip={t("copy_link_to_form")} tooltip={t("copy_link_to_form")}
/> />
@ -99,7 +99,7 @@ const Actions = ({
color="secondary" color="secondary"
variant="icon" variant="icon"
type="button" type="button"
StartIcon={FiDownload} StartIcon={Download}
/> />
</Tooltip> </Tooltip>
<FormAction <FormAction
@ -107,7 +107,7 @@ const Actions = ({
action="embed" action="embed"
color="secondary" color="secondary"
variant="icon" variant="icon"
StartIcon={FiCode} StartIcon={Code}
tooltip={t("embed")} tooltip={t("embed")}
/> />
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -116,7 +116,7 @@ const Actions = ({
action="_delete" action="_delete"
// className="mr-3" // className="mr-3"
variant="icon" variant="icon"
StartIcon={FiTrash} StartIcon={Trash}
color="secondary" color="secondary"
type="button" type="button"
tooltip={t("delete")} tooltip={t("delete")}
@ -129,7 +129,7 @@ const Actions = ({
action="copyRedirectUrl" action="copyRedirectUrl"
color="minimal" color="minimal"
type="button" type="button"
StartIcon={FiLink}> StartIcon={LinkIcon}>
{t("Copy Typeform Redirect Url")} {t("Copy Typeform Redirect Url")}
</FormAction> </FormAction>
</FormActionsDropdown> </FormActionsDropdown>
@ -145,7 +145,7 @@ const Actions = ({
type="button" type="button"
rel="noreferrer" rel="noreferrer"
action="preview" action="preview"
StartIcon={FiExternalLink}> StartIcon={ExternalLink}>
{t("preview")} {t("preview")}
</FormAction> </FormAction>
<FormAction <FormAction
@ -154,7 +154,7 @@ const Actions = ({
routingForm={form} routingForm={form}
color="minimal" color="minimal"
type="button" type="button"
StartIcon={FiLink}> StartIcon={LinkIcon}>
{t("copy_link_to_form")} {t("copy_link_to_form")}
</FormAction> </FormAction>
<FormAction <FormAction
@ -163,7 +163,7 @@ const Actions = ({
className="w-full" className="w-full"
color="minimal" color="minimal"
type="button" type="button"
StartIcon={FiDownload}> StartIcon={Download}>
{t("download_responses")} {t("download_responses")}
</FormAction> </FormAction>
<FormAction <FormAction
@ -172,7 +172,7 @@ const Actions = ({
color="minimal" color="minimal"
type="button" type="button"
className="w-full" className="w-full"
StartIcon={FiCode}> StartIcon={Code}>
{t("embed")} {t("embed")}
</FormAction> </FormAction>
{typeformApp ? ( {typeformApp ? (
@ -182,7 +182,7 @@ const Actions = ({
action="copyRedirectUrl" action="copyRedirectUrl"
color="minimal" color="minimal"
type="button" type="button"
StartIcon={FiLink}> StartIcon={LinkIcon}>
{t("Copy Typeform Redirect Url")} {t("Copy Typeform Redirect Url")}
</FormAction> </FormAction>
) : null} ) : null}
@ -193,7 +193,7 @@ const Actions = ({
className="w-full" className="w-full"
type="button" type="button"
color="destructive" color="destructive"
StartIcon={FiTrash}> StartIcon={Trash}>
{t("delete")} {t("delete")}
</FormAction> </FormAction>
</FormActionsDropdown> </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"; } from "react-awesome-query-builder";
import { Button as CalButton, SelectWithValidation as Select, TextField, TextArea } from "@calcom/ui"; 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< export type CommonProps<
TVal extends TVal extends
@ -206,7 +206,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
if (type === "delRule" || type == "delGroup") { if (type === "delRule" || type == "delGroup") {
return ( return (
<button className="ml-5"> <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> </button>
); );
} }
@ -220,7 +220,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
} }
return ( return (
<CalButton <CalButton
StartIcon={FiPlus} StartIcon={Plus}
data-testid={dataTestId} data-testid={dataTestId}
type="button" type="button"
color="secondary" color="secondary"

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

@ -16,7 +16,7 @@ import {
TextAreaField, TextAreaField,
TextField, TextField,
} from "@calcom/ui"; } 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"; import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -295,7 +295,7 @@ const FormEdit = ({
<Button <Button
data-testid="add-field" data-testid="add-field"
type="button" type="button"
StartIcon={FiPlus} StartIcon={Plus}
color="secondary" color="secondary"
onClick={addField}> onClick={addField}>
Add Field Add Field
@ -307,7 +307,7 @@ const FormEdit = ({
) : ( ) : (
<div className="w-full"> <div className="w-full">
<EmptyScreen <EmptyScreen
Icon={FiFileText} Icon={FileText}
headline="Create your first field" headline="Create your first field"
description="Fields are the form fields that the booker would see." description="Fields are the form fields that the booker would see."
buttonRaw={ 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 type { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
import { Badge, ButtonGroup, EmptyScreen, List, ListLinkItem, Tooltip, Button } from "@calcom/ui"; import { Badge, ButtonGroup, EmptyScreen, List, ListLinkItem, Tooltip, Button } from "@calcom/ui";
import { import {
FiPlus, Plus,
FiGitMerge, GitMerge,
FiExternalLink, ExternalLink,
FiLink, Link as LinkIcon,
FiEdit, Edit,
FiDownload, Download,
FiCode, Code,
FiCopy, Copy,
FiTrash, Trash,
FiMenu, Menu,
FiMessageCircle, MessageCircle,
FiFileText, FileText,
FiShuffle, Shuffle,
FiBarChart, BarChart,
FiCheckCircle, CheckCircle,
FiMail, Mail,
} from "@calcom/ui/components/icon"; } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps"; import type { inferSSRProps } from "@lib/types/inferSSRProps";
@ -50,32 +50,32 @@ export default function RoutingForms({
const features = [ 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"), title: t("create_your_first_form"),
description: t("create_your_first_form_description"), 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"), title: t("create_your_first_route"),
description: t("route_to_the_right_person"), 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"), title: t("reporting"),
description: t("reporting_feature"), 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"), title: t("test_routing_form"),
description: t("test_preview_description"), 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"), title: t("routing_forms_send_email_owner"),
description: t("routing_forms_send_email_owner_description"), 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"), title: t("download_responses"),
description: t("download_responses_description"), description: t("download_responses_description"),
}, },
@ -87,7 +87,7 @@ export default function RoutingForms({
variant="fab" variant="fab"
routingForm={null} routingForm={null}
data-testid="new-routing-form" data-testid="new-routing-form"
StartIcon={FiPlus} StartIcon={Plus}
action="create"> action="create">
{t("new")} {t("new")}
</FormAction> </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"> <div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
{!forms?.length ? ( {!forms?.length ? (
<EmptyScreen <EmptyScreen
Icon={FiGitMerge} Icon={GitMerge}
headline={t("create_your_first_form")} headline={t("create_your_first_form")}
description={t("create_your_first_form_description")} description={t("create_your_first_form_description")}
buttonRaw={<NewFormButton />} buttonRaw={<NewFormButton />}
@ -156,7 +156,7 @@ export default function RoutingForms({
action="preview" action="preview"
routingForm={form} routingForm={form}
target="_blank" target="_blank"
StartIcon={FiExternalLink} StartIcon={ExternalLink}
color="secondary" color="secondary"
variant="icon" variant="icon"
disabled={disabled} disabled={disabled}
@ -167,7 +167,7 @@ export default function RoutingForms({
action="copyLink" action="copyLink"
color="secondary" color="secondary"
variant="icon" variant="icon"
StartIcon={FiLink} StartIcon={LinkIcon}
disabled={disabled} disabled={disabled}
tooltip={t("copy_link_to_form")} tooltip={t("copy_link_to_form")}
/> />
@ -176,7 +176,7 @@ export default function RoutingForms({
action="embed" action="embed"
color="secondary" color="secondary"
variant="icon" variant="icon"
StartIcon={FiCode} StartIcon={Code}
disabled={disabled} disabled={disabled}
tooltip={t("embed")} tooltip={t("embed")}
/> />
@ -186,14 +186,14 @@ export default function RoutingForms({
routingForm={form} routingForm={form}
color="minimal" color="minimal"
className="!flex" className="!flex"
StartIcon={FiEdit}> StartIcon={Edit}>
{t("edit")} {t("edit")}
</FormAction> </FormAction>
<FormAction <FormAction
action="download" action="download"
routingForm={form} routingForm={form}
color="minimal" color="minimal"
StartIcon={FiDownload}> StartIcon={Download}>
{t("download_responses")} {t("download_responses")}
</FormAction> </FormAction>
<FormAction <FormAction
@ -201,7 +201,7 @@ export default function RoutingForms({
routingForm={form} routingForm={form}
color="minimal" color="minimal"
className="w-full" className="w-full"
StartIcon={FiCopy}> StartIcon={Copy}>
{t("duplicate")} {t("duplicate")}
</FormAction> </FormAction>
{typeformApp?.isInstalled ? ( {typeformApp?.isInstalled ? (
@ -211,7 +211,7 @@ export default function RoutingForms({
action="copyRedirectUrl" action="copyRedirectUrl"
color="minimal" color="minimal"
type="button" type="button"
StartIcon={FiLink}> StartIcon={LinkIcon}>
{t("Copy Typeform Redirect Url")} {t("Copy Typeform Redirect Url")}
</FormAction> </FormAction>
) : null} ) : null}
@ -220,7 +220,7 @@ export default function RoutingForms({
routingForm={form} routingForm={form}
color="destructive" color="destructive"
className="w-full" className="w-full"
StartIcon={FiTrash}> StartIcon={Trash}>
{t("delete")} {t("delete")}
</FormAction> </FormAction>
</FormActionsDropdown> </FormActionsDropdown>
@ -228,13 +228,13 @@ export default function RoutingForms({
</> </>
}> }>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<Badge variant="gray" startIcon={FiMenu}> <Badge variant="gray" startIcon={Menu}>
{fields.length} {fields.length === 1 ? "field" : "fields"} {fields.length} {fields.length === 1 ? "field" : "fields"}
</Badge> </Badge>
<Badge variant="gray" startIcon={FiGitMerge}> <Badge variant="gray" startIcon={GitMerge}>
{form.routes.length} {form.routes.length === 1 ? "route" : "routes"} {form.routes.length} {form.routes.length === 1 ? "route" : "routes"}
</Badge> </Badge>
<Badge variant="gray" startIcon={FiMessageCircle}> <Badge variant="gray" startIcon={MessageCircle}>
{form._count.responses} {form._count.responses === 1 ? "response" : "responses"} {form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
</Badge> </Badge>
</div> </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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, showToast, TextField } from "@calcom/ui"; 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({ const formSchema = z.object({
api_key: z.string(), api_key: z.string(),
@ -102,7 +102,7 @@ export default function SendgridSetup() {
type="submit" type="submit"
loading={testLoading} loading={testLoading}
disabled={testPassed === true} disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined} StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
className={ className={
testPassed !== undefined testPassed !== undefined
? testPassed ? 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 { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
import AppCard from "@calcom/app-store/_components/AppCard"; import AppCard from "@calcom/app-store/_components/AppCard";
import type { EventTypeAppCardComponent } from "@calcom/app-store/types"; 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"; import type { appDataSchema } from "../zod";
@ -28,8 +28,8 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
switchChecked={enabled}> switchChecked={enabled}>
<div className="mt-2 text-sm"> <div className="mt-2 text-sm">
<div className="flex"> <div className="flex">
<span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <FiSunrise /> : <FiSunset />}</span>I am an AppCard <span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <Sunrise /> : <Sunset />}</span>I am an AppCard for
for Event with Title: {eventType.title} Event with Title: {eventType.title}
</div>{" "} </div>{" "}
<div className="mt-2"> <div className="mt-2">
Edit <span className="italic">packages/app-store/{app.slug}/EventTypeAppCardInterface.tsx</span> to 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui"; import { Button } from "@calcom/ui";
import { FiExternalLink } from "@calcom/ui/components/icon"; import { ExternalLink } from "@calcom/ui/components/icon";
export default function HowToUse() { export default function HowToUse() {
const { t } = useLocale(); const { t } = useLocale();
@ -31,7 +31,7 @@ export default function HowToUse() {
href="/api/app-store/typeform/copy-typeform-redirect-url.png" href="/api/app-store/typeform/copy-typeform-redirect-url.png"
target="_blank" target="_blank"
className="text-subtle inline-flex items-baseline text-base"> 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; Click &quot;Copy Typeform Redirect URL&quot;
</Link> </Link>
</li> </li>
@ -42,7 +42,7 @@ export default function HowToUse() {
href="https://www.typeform.com/help/a/end-screens-and-redirects-360051791392/#h_01G0CFXF21W2EQ8PXKSB4KSC8P" href="https://www.typeform.com/help/a/end-screens-and-redirects-360051791392/#h_01G0CFXF21W2EQ8PXKSB4KSC8P"
target="_blank" target="_blank"
className="text-subtle inline-flex items-baseline text-base"> 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 Redirect to your typeform
</Link> </Link>
</li> </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/" href="https://www.typeform.com/help/a/use-recall-information-to-reference-typeform-answers-variables-and-more-360052320011/"
target="_blank" target="_blank"
className="text-subtle inline-flex items-baseline text-base"> 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 Recall Information in Typeform
</Link>{" "} </Link>{" "}
to add values to query params. 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, showToast, Tooltip } from "@calcom/ui"; import { Button, showToast, Tooltip } from "@calcom/ui";
import { FiClipboard } from "@calcom/ui/components/icon"; import { Clipboard } from "@calcom/ui/components/icon";
export interface IZapierSetupProps { export interface IZapierSetupProps {
inviteLink: string; inviteLink: string;
@ -76,7 +76,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
}} }}
type="button" type="button"
className="mt-4 text-base sm:mt-0 sm:rounded-l-none"> 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")} {t("copy")}
</Button> </Button>
</Tooltip> </Tooltip>

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

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

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

@ -17,7 +17,7 @@ import {
Button, Button,
DialogClose, DialogClose,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon"; import { AlertCircle } from "@calcom/ui/components/icon";
type LocationTypeSetLinkDialogFormProps = { type LocationTypeSetLinkDialogFormProps = {
link?: string; link?: string;
@ -57,7 +57,7 @@ export function AppSetDefaultLinkDialog({
title={t("default_app_link_title")} title={t("default_app_link_title")}
description={t("default_app_link_description")} description={t("default_app_link_description")}
type="creation" type="creation"
Icon={FiAlertCircle}> Icon={AlertCircle}>
<Form <Form
form={form} form={form}
handleSubmit={(values) => { 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import type { ButtonProps } from "@calcom/ui";
import { import {
Button, Button,
ButtonProps,
Dialog, Dialog,
DialogContent, DialogContent,
DialogTrigger, DialogTrigger,
@ -12,7 +12,7 @@ import {
DialogFooter, DialogFooter,
DialogClose, DialogClose,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiTrash, FiAlertCircle } from "@calcom/ui/components/icon"; import { Trash, AlertCircle } from "@calcom/ui/components/icon";
export default function DisconnectIntegration({ export default function DisconnectIntegration({
credentialId, credentialId,
@ -54,7 +54,7 @@ export default function DisconnectIntegration({
<DialogTrigger asChild> <DialogTrigger asChild>
<Button <Button
color={buttonProps?.color || "destructive"} color={buttonProps?.color || "destructive"}
StartIcon={trashIcon ? FiTrash : undefined} StartIcon={trashIcon ? Trash : undefined}
size="base" size="base"
variant={trashIcon && !label ? "icon" : "button"} variant={trashIcon && !label ? "icon" : "button"}
disabled={isGlobal} disabled={isGlobal}
@ -66,7 +66,7 @@ export default function DisconnectIntegration({
title={t("remove_app")} title={t("remove_app")}
description={t("are_you_sure_you_want_to_remove_this_app")} description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation" type="confirmation"
Icon={FiAlertCircle}> Icon={AlertCircle}>
<DialogFooter> <DialogFooter>
<DialogClose onClick={() => setModalOpen(false)} /> <DialogClose onClick={() => setModalOpen(false)} />
<DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}> <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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Dialog, DialogContent, showToast, DialogFooter, DialogClose } from "@calcom/ui"; 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 { interface DisconnectIntegrationModalProps {
credentialId: number | null; credentialId: number | null;
@ -36,7 +36,7 @@ export default function DisconnectIntegrationModal({
title={t("remove_app")} title={t("remove_app")}
description={t("are_you_sure_you_want_to_remove_this_app")} description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation" type="confirmation"
Icon={FiAlertCircle}> Icon={AlertCircle}>
<DialogFooter> <DialogFooter>
<DialogClose onClick={handleModelClose} /> <DialogClose onClick={handleModelClose} />
<DialogClose <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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui"; import { Button } from "@calcom/ui";
import { FiLock } from "@calcom/ui/components/icon"; import { Lock } from "@calcom/ui/components/icon";
interface Props { interface Props {
samlTenantID: string; samlTenantID: string;
@ -34,7 +34,7 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
return ( return (
<Button <Button
StartIcon={FiLock} StartIcon={Lock}
color="secondary" color="secondary"
data-testid="saml" data-testid="saml"
className="flex w-full justify-center" 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { AnimatedPopover, Avatar } from "@calcom/ui"; 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"; import { useFilterQuery } from "../lib/useFilterQuery";
@ -22,7 +22,7 @@ export const PeopleFilter = () => {
<AnimatedPopover text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : dropdownTitle}> <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="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"> <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> </div>
<label htmlFor="allUsers" className="text-default mr-auto self-center truncate text-sm font-medium"> <label htmlFor="allUsers" className="text-default mr-auto self-center truncate text-sm font-medium">
{t("all_users_filter_label")} {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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { AnimatedPopover, Avatar } from "@calcom/ui"; 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"; import { useFilterQuery } from "../lib/useFilterQuery";
@ -24,7 +24,7 @@ export const TeamsMemberFilter = () => {
<AnimatedPopover text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : dropdownTitle}> <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="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"> <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> </div>
<label <label
htmlFor="allBookings" htmlFor="allBookings"
@ -45,7 +45,7 @@ export const TeamsMemberFilter = () => {
</div> </div>
<div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer"> <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"> <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> </div>
<label <label
htmlFor="yourBookings" 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday"; import { weekdayNames } from "@calcom/lib/weekday";
import { Button, SkeletonText } from "@calcom/ui"; import { Button, SkeletonText } from "@calcom/ui";
import { FiArrowRight } from "@calcom/ui/components/icon"; import { ArrowRight } from "@calcom/ui/components/icon";
export type DatePickerProps = { export type DatePickerProps = {
/** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */ /** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */
@ -82,7 +82,7 @@ const NoAvailabilityOverlay = ({
return ( 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"> <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> <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")} {t("view_next_month")}
</Button> </Button>
</div> </div>

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

@ -1,6 +1,6 @@
import dayjs from "@calcom/dayjs"; import dayjs from "@calcom/dayjs";
import { Button, ButtonGroup } from "@calcom/ui"; 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"; import { useCalendarStore } from "../../state/store";
@ -30,7 +30,7 @@ export function SchedulerHeading() {
<ButtonGroup combined> <ButtonGroup combined>
{/* TODO: i18n label with correct view */} {/* TODO: i18n label with correct view */}
<Button <Button
StartIcon={FiChevronLeft} StartIcon={ChevronLeft}
variant="icon" variant="icon"
color="secondary" color="secondary"
aria-label="Previous Week" aria-label="Previous Week"
@ -39,7 +39,7 @@ export function SchedulerHeading() {
}} }}
/> />
<Button <Button
StartIcon={FiChevronRight} StartIcon={ChevronRight}
variant="icon" variant="icon"
color="secondary" color="secondary"
aria-label="Next Week" 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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, DatePicker, DialogFooter, Form, showToast, Switch, TextField, Tooltip } from "@calcom/ui"; 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({ export default function ApiKeyDialogForm({
defaultValues, defaultValues,
@ -74,7 +74,7 @@ export default function ApiKeyDialogForm({
}} }}
type="button" type="button"
className="rounded-l-none py-[19px] text-base "> 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")} {t("copy")}
</Button> </Button>
</Tooltip> </Tooltip>

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

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

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

@ -5,12 +5,13 @@
*/ */
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import { useSession } from "next-auth/react"; 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 { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui"; import { EmptyScreen } from "@calcom/ui";
import { FiAlertTriangle } from "@calcom/ui/components/icon"; import { AlertTriangle } from "@calcom/ui/components/icon";
type LicenseRequiredProps = { type LicenseRequiredProps = {
as?: keyof JSX.IntrinsicElements | ""; as?: keyof JSX.IntrinsicElements | "";
@ -36,7 +37,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
children children
) : ( ) : (
<EmptyScreen <EmptyScreen
Icon={FiAlertTriangle} Icon={AlertTriangle}
headline={t("enterprise_license")} headline={t("enterprise_license")}
description={ description={
<div <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 { APP_NAME, CONSOLE_URL, SUPPORT_MAIL_ADDRESS, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui"; import { EmptyScreen } from "@calcom/ui";
import { FiAlertTriangle } from "@calcom/ui/components/icon"; import { AlertTriangle } from "@calcom/ui/components/icon";
type LicenseRequiredProps = { type LicenseRequiredProps = {
as?: keyof JSX.IntrinsicElements | ""; as?: keyof JSX.IntrinsicElements | "";
@ -27,7 +27,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
children children
) : ( ) : (
<EmptyScreen <EmptyScreen
Icon={FiAlertTriangle} Icon={AlertTriangle}
headline={t("enterprise_license")} headline={t("enterprise_license")}
description={ description={
<div <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 useTheme from "@calcom/lib/hooks/useTheme";
import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat"; import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
import { localStorage } from "@calcom/lib/webstorage"; 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 type { PaymentPageProps } from "../pages/payment";
import PaymentComponent from "./Payment"; import PaymentComponent from "./Payment";
@ -81,7 +81,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
aria-labelledby="modal-headline"> aria-labelledby="modal-headline">
<div> <div>
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full"> <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>
<div className="mt-3 text-center sm:mt-5"> <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, DialogTrigger,
Label, Label,
} from "@calcom/ui"; } from "@calcom/ui";
import { FiClipboard } from "@calcom/ui/components/icon"; import { Clipboard } from "@calcom/ui/components/icon";
export default function ConnectionInfo({ export default function ConnectionInfo({
teamId, teamId,
@ -99,7 +99,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
}} }}
type="button" type="button"
className="rounded-l-none py-[19px] text-base "> 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")} {t("copy")}
</Button> </Button>
</Tooltip> </Tooltip>
@ -121,7 +121,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
}} }}
type="button" type="button"
className="rounded-l-none py-[19px] text-base "> 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")} {t("copy")}
</Button> </Button>
</Tooltip> </Tooltip>
@ -157,7 +157,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => {
}} }}
type="button" type="button"
className="rounded-l-none py-[19px] text-base "> 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")} {t("copy")}
</Button> </Button>
</Tooltip> </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 { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react";
import { Button, showToast, TextArea } from "@calcom/ui"; 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 { useFreshChat } from "../lib/freshchat/FreshChatProvider";
import { isFreshChatEnabled } from "../lib/freshchat/FreshChatScript"; 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" className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium"
rel="noreferrer"> rel="noreferrer">
{t("documentation")} {t("documentation")}
<FiExternalLink <ExternalLink
className={classNames( className={classNames(
"group-hover:text-subtle text-muted", "group-hover:text-subtle text-muted",
"ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3" "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 && ( {mutation.isError && (
<div className="bg-error mb-4 flex p-4 text-sm text-red-700"> <div className="bg-error mb-4 flex p-4 text-sm text-red-700">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<FiAlertTriangle className="h-5 w-5" /> <AlertTriangle className="h-5 w-5" />
</div> </div>
<div className="ml-3 flex-grow"> <div className="ml-3 flex-grow">
<p className="font-medium">{t("feedback_error")}</p> <p className="font-medium">{t("feedback_error")}</p>

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