commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

Reduce bundle size by importing single icons at a time (#6644)

Browse Source 
* Removed barrel import for icons to reduce bundle size.

* Fixed replacement mistakes

* Reverted unneccesary yarn.lock updates

* Added some missed Icon. import conversions

* Remove merge artifact import in @calcom/ui

* Don't import Icon in pages/[user]

* Update packages/ui/package.json

Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Omar López <zomars@me.com>
This commit is contained in:
Jeroen Reumkens
2023-01-23 23:08:01 +00:00
committed by GitHub
co-authored by Alex van Andel Omar López
parent a888be6e04
commit cfa8fd8b67
155 changed files with 881 additions and 768 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/AddToHomescreen.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon";
export default function AddToHomescreen() {
const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
type="button"
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
<span className="sr-only">{t("dismiss")}</span>
<Icon.FiX className="h-6 w-6 text-white" aria-hidden="true" />
<FiX className="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</div>
apps/web/components/Embed.tsx
+8 -8
View File
@@ -12,7 +12,6 @@ import {
DialogClose,
DialogContent,
HorizontalTabs,
Icon,
InputLeading,
Label,
showToast,
@@ -20,6 +19,7 @@ import {
TextArea,
TextField,
} from "@calcom/ui";
import { FiCode, FiTrello, FiSun, FiArrowLeft, FiChevronRight } from "@calcom/ui/components/icon";
import ColorPicker from "@components/ui/colorpicker";
import Select from "@components/ui/form/Select";
@@ -488,7 +488,7 @@ const tabs = [
{
name: "HTML",
href: "embedTabName=embed-code",
icon: Icon.FiCode,
icon: FiCode,
type: "code",
Component: forwardRef<
HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -541,7 +541,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
{
name: "React",
href: "embedTabName=embed-react",
icon: Icon.FiCode,
icon: FiCode,
type: "code",
Component: forwardRef<
HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -581,7 +581,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
{
name: "Preview",
href: "embedTabName=embed-preview",
icon: Icon.FiTrello,
icon: FiTrello,
type: "iframe",
Component: forwardRef<
HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -617,7 +617,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
return (
<components.Control {...props}>
<Icon.FiSun className="ml-2 h-4 w-4 text-gray-500" />
<FiSun className="ml-2 h-4 w-4 text-gray-500" />
{children}
</components.Control>
);
@@ -815,7 +815,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
onClick={() => {
removeQueryParams(router, ["embedType", "embedTabName"]);
}}>
<Icon.FiArrowLeft className="mr-4 w-4" />
<FiArrowLeft className="mr-4 w-4" />
</button>
{embed.title}
</h3>
@@ -835,7 +835,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
? "Floating Popup Customization"
: "Element Click Customization"}
</div>
<Icon.FiChevronRight
<FiChevronRight
className={`${
isEmbedCustomizationOpen ? "rotate-90 transform" : ""
} ml-auto h-5 w-5 text-gray-500`}
@@ -1002,7 +1002,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
<CollapsibleTrigger className="flex w-full" type="button">
<div className="text-base font-medium text-gray-900">Cal Booking Customization</div>
<Icon.FiChevronRight
<FiChevronRight
className={`${
isBookingCustomizationOpen ? "rotate-90 transform" : ""
} ml-auto h-5 w-5 text-gray-500`}
apps/web/components/SettingsShell.tsx
+8 -7
View File
@@ -1,7 +1,8 @@
import React, { ComponentProps } from "react";
import Shell from "@calcom/features/shell/Shell";
import { ErrorBoundary, Icon } from "@calcom/ui";
import { ErrorBoundary } from "@calcom/ui";
import { FiCreditCard, FiKey, FiLock, FiTerminal, FiUser, FiUsers } from "@calcom/ui/components/icon";
import NavTabs from "./NavTabs";
@@ -9,32 +10,32 @@ const tabs = [
{
name: "profile",
href: "/settings/profile",
icon: Icon.FiUser,
icon: FiUser,
},
{
name: "teams",
href: "/settings/teams",
icon: Icon.FiUsers,
icon: FiUsers,
},
{
name: "security",
href: "/settings/security",
icon: Icon.FiKey,
icon: FiKey,
},
{
name: "developer",
href: "/settings/developer",
icon: Icon.FiTerminal,
icon: FiTerminal,
},
{
name: "billing",
href: "/settings/billing",
icon: Icon.FiCreditCard,
icon: FiCreditCard,
},
{
name: "admin",
href: "/settings/admin",
icon: Icon.FiLock,
icon: FiLock,
adminRequired: true,
},
];
apps/web/components/apps/AdditionalCalendarSelector.tsx
+4 -3
View File
@@ -4,7 +4,8 @@ import { InstallAppButton } from "@calcom/app-store/components";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import type { App } from "@calcom/types/App";
import { Button, Icon, Select } from "@calcom/ui";
import { Button, Select } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -31,7 +32,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
/>
) : (
<Button className="w-full" color="minimal" href="/apps/categories/calendar">
<Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
<FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
<p>{t("install_new_calendar_app")}</p>
</Button>
);
@@ -61,7 +62,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
<Select
name="additionalCalendar"
placeholder={
<Button StartIcon={Icon.FiPlus} color="secondary">
<Button StartIcon={FiPlus} color="secondary">
{t("add")}
</Button>
}
apps/web/components/apps/App.tsx
+19 -9
View File
@@ -12,7 +12,17 @@ import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/consta
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { App as AppType } from "@calcom/types/App";
import { Button, Icon, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
import {
FiBookOpen,
FiCheck,
FiExternalLink,
FiFile,
FiFlag,
FiMail,
FiPlus,
FiShield,
} from "@calcom/ui/components/icon";
const Component = ({
name,
@@ -118,7 +128,7 @@ const Component = ({
isGlobal ||
(existingCredentials.length > 0 && allowedMultipleInstalls ? (
<div className="flex space-x-3">
<Button StartIcon={Icon.FiCheck} color="secondary" disabled>
<Button StartIcon={FiCheck} color="secondary" disabled>
{existingCredentials.length > 0
? t("active_install", { count: existingCredentials.length })
: t("default")}
@@ -139,7 +149,7 @@ const Component = ({
}
return (
<Button
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
{...props}
// @TODO: Overriding color and size prevent us from
// having to duplicate InstallAppButton for now.
@@ -226,7 +236,7 @@ const Component = ({
rel="noreferrer"
className="text-sm font-normal text-black no-underline hover:underline"
href={docs}>
<Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
<FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
{t("documentation")}
</a>
</li>
@@ -238,7 +248,7 @@ const Component = ({
rel="noreferrer"
className="font-normal text-black no-underline hover:underline"
href={website}>
<Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
<FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
{website.replace("https://", "")}
</a>
</li>
@@ -250,7 +260,7 @@ const Component = ({
rel="noreferrer"
className="font-normal text-black no-underline hover:underline"
href={"mailto:" + email}>
<Icon.FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
<FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
{email}
</a>
@@ -263,7 +273,7 @@ const Component = ({
rel="noreferrer"
className="font-normal text-black no-underline hover:underline"
href={tos}>
<Icon.FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
<FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
{t("terms_of_service")}
</a>
</li>
@@ -275,7 +285,7 @@ const Component = ({
rel="noreferrer"
className="font-normal text-black no-underline hover:underline"
href={privacy}>
<Icon.FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
<FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
{t("privacy_policy")}
</a>
</li>
@@ -286,7 +296,7 @@ const Component = ({
{t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
</span>
<a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
<Icon.FiFlag className="inline h-3 w-3" /> {t("report_app")}
<FiFlag className="inline h-3 w-3" /> {t("report_app")}
</a>
</div>
</div>
apps/web/components/apps/CalendarListContainer.tsx
+5 -5
View File
@@ -11,13 +11,13 @@ import {
Alert,
Button,
EmptyScreen,
Icon,
List,
showToast,
AppSkeletonLoader as SkeletonLoader,
Switch,
ShellSubHeading,
} from "@calcom/ui";
import { FiArrowLeft, FiCalendar, FiPlus } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -100,7 +100,7 @@ function CalendarSwitch(props: {
/>
{!!props.destination && (
<span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
<Icon.FiArrowLeft className="h-4 w-4" />
<FiArrowLeft className="h-4 w-4" />
{t("adding_events_to")}
</span>
)}
@@ -282,8 +282,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
<div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
<div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
<div className="relative rounded-md border border-gray-200 bg-white p-1.5">
<Icon.FiCalendar className="h-8 w-8" strokeWidth="1" />
<Icon.FiPlus
<FiCalendar className="h-8 w-8" strokeWidth="1" />
<FiPlus
className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
strokeWidth="4"
/>
@@ -322,7 +322,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
</>
) : (
<EmptyScreen
Icon={Icon.FiCalendar}
Icon={FiCalendar}
headline={t("no_category_apps", {
category: t("calendar").toLowerCase(),
})}
apps/web/components/apps/IntegrationListItem.tsx
+3 -2
View File
@@ -3,7 +3,8 @@ import { useRouter } from "next/router";
import { ReactNode, useEffect, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge, Icon, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
import { Badge, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon";
import classNames from "@lib/classNames";
@@ -63,7 +64,7 @@ function IntegrationListItem(props: {
{/* Alert error that key stopped working. */}
{props.invalidCredential && (
<div className="flex items-center space-x-2 rtl:space-x-reverse">
<Icon.FiAlertCircle className="w-8 text-red-500 sm:w-4" />
<FiAlertCircle className="w-8 text-red-500 sm:w-4" />
<ListItemText component="p" className="whitespace-pre-wrap text-red-500">
{t("invalid_credential")}
</ListItemText>
apps/web/components/apps/layouts/AppsLayout.tsx
+3 -2
View File
@@ -4,7 +4,8 @@ import React, { ComponentProps } from "react";
import Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen, Icon } from "@calcom/ui";
import { EmptyScreen } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon";
type AppsLayoutProps = {
children: React.ReactNode;
@@ -25,7 +26,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
<main className="w-full">
{emptyStore ? (
<EmptyScreen
Icon={Icon.FiAlertCircle}
Icon={FiAlertCircle}
headline={t("no_apps")}
description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""}
buttonText={session.data?.user.role === "ADMIN" ? t("apps_settings") : ""}
apps/web/components/apps/layouts/InstalledAppsLayout.tsx
+7 -7
View File
@@ -4,39 +4,39 @@ import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavi
import { InstalledAppVariants } from "@calcom/app-store/utils";
import Shell from "@calcom/features/shell/Shell";
import { trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui";
import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
import { FiBarChart, FiCalendar, FiCreditCard, FiGrid, FiShare2, FiVideo } from "@calcom/ui/components/icon";
const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
{
name: "calendar",
href: "/apps/installed/calendar",
icon: Icon.FiCalendar,
icon: FiCalendar,
},
{
name: "conferencing",
href: "/apps/installed/conferencing",
icon: Icon.FiVideo,
icon: FiVideo,
},
{
name: "payment",
href: "/apps/installed/payment",
icon: Icon.FiCreditCard,
icon: FiCreditCard,
},
{
name: "automation",
href: "/apps/installed/automation",
icon: Icon.FiShare2,
icon: FiShare2,
},
{
name: "analytics",
href: "/apps/installed/analytics",
icon: Icon.FiBarChart,
icon: FiBarChart,
},
{
name: "other",
href: "/apps/installed/other",
icon: Icon.FiGrid,
icon: FiGrid,
},
];
apps/web/components/booking/AvailableEventLocations.tsx
+3 -2
View File
@@ -1,7 +1,8 @@
import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon, Tooltip } from "@calcom/ui";
import { Tooltip } from "@calcom/ui";
import { FiLink } from "@calcom/ui/components/icon";
import { Props } from "./pages/AvailabilityPage";
@@ -19,7 +20,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
return (
<div key={location.type} className="flex flex-row items-center text-sm font-medium">
{eventLocationType.iconUrl === "/link.svg" ? (
<Icon.FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
<FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
) : (
<img
src={eventLocationType.iconUrl}
apps/web/components/booking/BookingDescription.tsx
+5 -4
View File
@@ -4,7 +4,8 @@ import { FC, ReactNode, useEffect } from "react";
import dayjs from "@calcom/dayjs";
import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon, Badge } from "@calcom/ui";
import { Badge } from "@calcom/ui";
import { FiCheckSquare, FiClock, FiInfo } from "@calcom/ui/components/icon";
import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -93,7 +94,7 @@ const BookingDescription: FC<Props> = (props) => {
isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
)}>
<div>
<Icon.FiInfo
<FiInfo
className={classNames(
"ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
@@ -112,7 +113,7 @@ const BookingDescription: FC<Props> = (props) => {
isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
)}>
<div>
<Icon.FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
<FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
</div>
{requiresConfirmationText}
</div>
@@ -126,7 +127,7 @@ const BookingDescription: FC<Props> = (props) => {
isBookingPage && "dark:text-darkgray-600 text-gray-600",
!eventType.metadata?.multipleDuration && "items-center"
)}>
<Icon.FiClock
<FiClock
className={classNames(
"min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
isBookingPage && "mt-[2px]"
apps/web/components/booking/BookingListItem.tsx
+9 -9
View File
@@ -18,7 +18,6 @@ import {
DialogContent,
DialogFooter,
DialogHeader,
Icon,
MeetingTimeInTimezones,
showToast,
TextArea,
@@ -26,6 +25,7 @@ import {
ActionType,
TableActions,
} from "@calcom/ui";
import { FiCheck, FiClock, FiMapPin, FiRefreshCcw, FiSend, FiSlash, FiX } from "@calcom/ui/components/icon";
import useMeQuery from "@lib/hooks/useMeQuery";
@@ -100,7 +100,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setRejectionDialogIsOpen(true);
},
icon: Icon.FiSlash,
icon: FiSlash,
disabled: mutation.isLoading,
},
{
@@ -109,7 +109,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
bookingConfirm(true);
},
icon: Icon.FiCheck,
icon: FiCheck,
disabled: mutation.isLoading,
color: "primary",
},
@@ -135,7 +135,7 @@ function BookingListItem(booking: BookingItemProps) {
href: `/booking/${booking.uid}?cancel=true${
isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
}`,
icon: Icon.FiX,
icon: FiX,
},
{
id: "edit_booking",
@@ -143,13 +143,13 @@ function BookingListItem(booking: BookingItemProps) {
actions: [
{
id: "reschedule",
icon: Icon.FiClock,
icon: FiClock,
label: t("reschedule_booking"),
href: `/reschedule/${booking.uid}`,
},
{
id: "reschedule_request",
icon: Icon.FiSend,
icon: FiSend,
iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
label: t("send_reschedule_request"),
onClick: () => {
@@ -162,7 +162,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setIsOpenLocationDialog(true);
},
icon: Icon.FiMapPin,
icon: FiMapPin,
},
],
},
@@ -179,7 +179,7 @@ function BookingListItem(booking: BookingItemProps) {
const RequestSentMessage = () => {
return (
<div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
<Icon.FiSend className="-mt-[1px] w-4 rotate-45" />
<FiSend className="-mt-[1px] w-4 rotate-45" />
<p className="ml-2 ">{t("reschedule_request_sent")}</p>
</div>
);
@@ -455,7 +455,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
);
})}>
<div className="text-gray-600 dark:text-white">
<Icon.FiRefreshCcw
<FiRefreshCcw
strokeWidth="3"
className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
/>
apps/web/components/booking/CancelBooking.tsx
+3 -2
View File
@@ -5,7 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import type { RecurringEvent } from "@calcom/types/Calendar";
import { Button, Icon, TextArea } from "@calcom/ui";
import { Button, TextArea } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon";
type Props = {
booking: {
@@ -39,7 +40,7 @@ export default function CancelBooking(props: Props) {
{error && (
<div className="mt-8">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<Icon.FiX className="h-6 w-6 text-red-600" />
<FiX className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
apps/web/components/booking/pages/AvailabilityPage.tsx
+7 -6
View File
@@ -28,7 +28,8 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
import { trpc } from "@calcom/trpc/react";
import { Icon, HeadSeo } from "@calcom/ui";
import { HeadSeo } from "@calcom/ui";
import { FiChevronDown, FiChevronUp, FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon";
import { timeZone as localStorageTimeZone } from "@lib/clock";
import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -220,12 +221,12 @@ function TimezoneDropdown({
<Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
<Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 !mt-2 inline-block self-start rounded-md px-2 py-2 text-left text-gray-600">
<p className="flex items-center text-sm font-medium">
<Icon.FiGlobe className="min-h-4 min-w-4 ml-[2px] -mt-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]" />
<FiGlobe className="min-h-4 min-w-4 ml-[2px] -mt-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]" />
{timeZone}
{isTimeOptionsOpen ? (
<Icon.FiChevronUp className="min-h-4 min-w-4 ml-1 inline-block" />
<FiChevronUp className="min-h-4 min-w-4 ml-1 inline-block" />
) : (
<Icon.FiChevronDown className="min-h-4 min-w-4 ml-1 inline-block" />
<FiChevronDown className="min-h-4 min-w-4 ml-1 inline-block" />
)}
</p>
</Popover.Trigger>
@@ -367,7 +368,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
<BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
{!rescheduleUid && eventType.recurringEvent && (
<div className="flex items-start text-sm font-medium">
<Icon.FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
<FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
<div>
<p className="mb-1 -ml-2 inline px-2 py-1">
{getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@@ -392,7 +393,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
)}
{stripeAppData.price > 0 && (
<p className="-ml-2 px-2 text-sm font-medium">
<Icon.FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<IntlProvider locale="en">
<FormattedNumber
value={stripeAppData.price / 100.0}
apps/web/components/booking/pages/BookingPage.tsx
+22 -14
View File
@@ -39,8 +39,16 @@ import useTheme from "@calcom/lib/hooks/useTheme";
import { HttpError } from "@calcom/lib/http-error";
import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { AddressInput, Button, EmailInput, Form, Icon, PhoneInput, Tooltip } from "@calcom/ui";
import { Group, RadioField } from "@calcom/ui";
import { AddressInput, Button, EmailInput, Form, PhoneInput, Tooltip, Group, RadioField } from "@calcom/ui";
import {
FiAlertTriangle,
FiCalendar,
FiCreditCard,
FiInfo,
FiRefreshCw,
FiUser,
FiUserPlus,
} from "@calcom/ui/components/icon";
import { asStringOrNull } from "@lib/asStringOrNull";
import { timeZone } from "@lib/clock";
@@ -479,7 +487,7 @@ const BookingPage = ({
})}{" "}
| {APP_NAME}
</title>
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favico.ico" />
</Head>
<BookingPageTagManager eventType={eventType} />
<CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
@@ -501,7 +509,7 @@ const BookingPage = ({
<BookingDescription isBookingPage profile={profile} eventType={eventType}>
{stripeAppData.price > 0 && (
<p className="text-bookinglight -ml-2 px-2 text-sm ">
<Icon.FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<IntlProvider locale="en">
<FormattedNumber
value={stripeAppData.price / 100.0}
@@ -513,7 +521,7 @@ const BookingPage = ({
)}
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
<div className="items-start text-sm font-medium text-gray-600 dark:text-white">
<Icon.FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<p className="-ml-2 inline-block items-center px-2">
{getEveryFreqFor({
t,
@@ -524,7 +532,7 @@ const BookingPage = ({
</div>
)}
<div className="text-bookinghighlight flex items-start text-sm">
<Icon.FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<div className="text-sm font-medium">
{(rescheduleUid || !eventType.recurringEvent?.freq) && `${parseDate(date, i18n)}`}
{!rescheduleUid &&
@@ -552,14 +560,14 @@ const BookingPage = ({
{t("former_time")}
</p>
<p className="line-through ">
<Icon.FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
{typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
</p>
</div>
)}
{!!eventType.seatsPerTimeSlot && (
<div className="text-bookinghighlight flex items-start text-sm">
<Icon.FiUser
<FiUser
className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
? "text-rose-600"
@@ -623,7 +631,7 @@ const BookingPage = ({
/>
{bookingForm.formState.errors.email && (
<div className="mt-2 flex items-center text-sm text-red-700 ">
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<p>{t("email_validation_error")}</p>
</div>
)}
@@ -716,7 +724,7 @@ const BookingPage = ({
</div>
{bookingForm.formState.errors.phone && (
<div className="mt-2 flex items-center text-sm text-red-700 ">
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<p>{t("invalid_number")}</p>
</div>
)}
@@ -834,7 +842,7 @@ const BookingPage = ({
/>
{bookingForm.formState.errors?.customInputs?.[input.id] && (
<div className="mt-2 flex items-center text-sm text-red-700 ">
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<p>{t("invalid_number")}</p>
</div>
)}
@@ -914,7 +922,7 @@ const BookingPage = ({
</div>
{bookingForm.formState.errors.smsReminderNumber && (
<div className="mt-2 flex items-center text-sm text-red-700 ">
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
<p>{t("invalid_number")}</p>
</div>
)}
@@ -956,7 +964,7 @@ const BookingPage = ({
color="minimal"
variant="icon"
tooltip={t("additional_guests")}
StartIcon={Icon.FiUserPlus}
StartIcon={FiUserPlus}
onClick={() => setGuestToggle(!guestToggle)}
className="mr-auto"
/>
@@ -993,7 +1001,7 @@ function ErrorMessage({ error }: { error: unknown }) {
<div data-testid="booking-fail" className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
<div className="flex">
<div className="flex-shrink-0">
<Icon.FiAlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
<FiAlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
</div>
<div className="ltr:ml-3 rtl:mr-3">
<p className="text-sm text-yellow-700">
apps/web/components/dialog/EditLocationDialog.tsx
+3 -2
View File
@@ -15,7 +15,8 @@ import {
} from "@calcom/app-store/locations";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Button, Dialog, DialogContent, DialogFooter, Form, Icon, PhoneInput } from "@calcom/ui";
import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
import { FiMapPin } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -207,7 +208,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
<DialogContent disableOverflow>
<div className="flex flex-row space-x-3">
<div className="bg-secondary-100 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">
<Icon.FiMapPin className="text-primary-600 h-6 w-6" />
<FiMapPin className="text-primary-600 h-6 w-6" />
</div>
<div className="w-full">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
apps/web/components/dialog/RescheduleDialog.tsx
+2 -2
View File
@@ -9,10 +9,10 @@ import {
DialogContent,
DialogFooter,
DialogHeader,
Icon,
showToast,
TextArea,
} from "@calcom/ui";
import { FiClock } from "@calcom/ui/components/icon";
interface IRescheduleDialog {
isOpenDialog: boolean;
@@ -43,7 +43,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<Icon.FiClock className="m-auto h-6 w-6" />
<FiClock className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("send_reschedule_request")} />
apps/web/components/eventtype/AvailabilityTab.tsx
+4 -3
View File
@@ -8,7 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday";
import { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Badge, Button, Icon, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
import { FiExternalLink, FiGlobe } from "@calcom/ui/components/icon";
import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
@@ -164,13 +165,13 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
<hr />
<div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
<span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
<Icon.FiGlobe className="ltr:mr-2 rtl:ml-2" />
<FiGlobe className="ltr:mr-2 rtl:ml-2" />
{schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
</span>
<Button
href={`/availability/${schedule?.schedule.id}`}
color="minimal"
EndIcon={Icon.FiExternalLink}
EndIcon={FiExternalLink}
target="_blank"
className="justify-center border sm:border-0"
rel="noopener noreferrer">
apps/web/components/eventtype/CustomInputTypeForm.tsx
+4 -3
View File
@@ -5,7 +5,8 @@ import { FC } from "react";
import { Control, Controller, useFieldArray, useForm, UseFormRegister, useWatch } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon, Label, Select, TextField } from "@calcom/ui";
import { Button, Label, Select, TextField } from "@calcom/ui";
import { FiPlus, FiX } from "@calcom/ui/components/icon";
interface OptionTypeBase {
label: string;
@@ -185,7 +186,7 @@ function RadioInputHandler({
<Button
variant="icon"
color="minimal"
StartIcon={Icon.FiX}
StartIcon={FiX}
onClick={() => {
remove(index);
}}
@@ -196,7 +197,7 @@ function RadioInputHandler({
))}
<Button
color="minimal"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
className="!text-sm !font-medium"
onClick={() => {
append({ label: "", type: "text" });
apps/web/components/eventtype/EventAdvancedTab.tsx
+5 -5
View File
@@ -18,13 +18,13 @@ import {
DialogClose,
DialogContent,
DialogFooter,
Icon,
Label,
SettingsToggle,
showToast,
TextField,
Tooltip,
} from "@calcom/ui";
import { FiEdit, FiCopy, FiPlus } from "@calcom/ui/components/icon";
import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
@@ -128,7 +128,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
addOnSuffix={
<Button
type="button"
StartIcon={Icon.FiEdit}
StartIcon={FiEdit}
variant="icon"
color="minimal"
className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
@@ -168,7 +168,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
</ul>
{customInputs.length > 0 && (
<Button
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
color="minimal"
type="button"
onClick={() => {
@@ -314,7 +314,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
}}
className="hover:stroke-3 hover:bg-transparent hover:text-black"
type="button">
<Icon.FiCopy />
<FiCopy />
</Button>
</Tooltip>
}
@@ -413,7 +413,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
<Dialog open={selectedCustomInputModalOpen} onOpenChange={setSelectedCustomInputModalOpen}>
<DialogContent
type="creation"
Icon={Icon.FiPlus}
Icon={FiPlus}
title={t("add_new_custom_input_field")}
description={t("this_input_will_shown_booking_this_event")}>
<CustomInputTypeForm
apps/web/components/eventtype/EventAppsTab.tsx
+3 -2
View File
@@ -7,7 +7,8 @@ import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
import { EventTypeAppsList } from "@calcom/app-store/utils";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, EmptyScreen, Icon } from "@calcom/ui";
import { Button, EmptyScreen } from "@calcom/ui";
import { FiGrid } from "@calcom/ui/components/icon";
export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
EventTypeAppCardComponentProps["eventType"];
@@ -60,7 +61,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
<div className="before:border-0">
{!isLoading && !installedApps?.length ? (
<EmptyScreen
Icon={Icon.FiGrid}
Icon={FiGrid}
headline={t("empty_installed_apps_headline")}
description={t("empty_installed_apps_description")}
buttonRaw={
apps/web/components/eventtype/EventLimitsTab.tsx
+4 -3
View File
@@ -10,7 +10,8 @@ import findDurationType from "@calcom/lib/findDurationType";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { PeriodType } from "@calcom/prisma/client";
import type { BookingLimit } from "@calcom/types/Calendar";
import { Button, DateRangePicker, Icon, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
const MinimumBookingNoticeInput = React.forwardRef<
HTMLInputElement,
@@ -431,7 +432,7 @@ const BookingLimits = () => {
/>
<Button
variant="icon"
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
color="destructive"
onClick={() => {
const current = currentBookingLimits;
@@ -445,7 +446,7 @@ const BookingLimits = () => {
{currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
<Button
color="minimal"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
onClick={() => {
if (!currentBookingLimits || !watchBookingLimits) return;
const currentKeys = Object.keys(watchBookingLimits);
apps/web/components/eventtype/EventSetupTab.tsx
+6 -5
View File
@@ -12,7 +12,8 @@ import { z } from "zod";
import { EventLocationType, getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
import { Button, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
import { slugify } from "@lib/slugify";
@@ -198,10 +199,10 @@ export const EventSetupTab = (
}}
aria-label={t("edit")}
className="mr-1 p-1 text-gray-500 hover:text-gray-900">
<Icon.FiEdit2 className="h-4 w-4" />
<FiEdit2 className="h-4 w-4" />
</button>
<button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
<Icon.FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
<FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
</button>
</div>
</div>
@@ -210,7 +211,7 @@ export const EventSetupTab = (
})}
{validLocations.some((location) => location.type === MeetLocationType) && (
<div className="flex text-sm text-gray-600">
<Icon.FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
<FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
<Trans i18nKey="event_type_requres_google_cal">
<p>
The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
@@ -227,7 +228,7 @@ export const EventSetupTab = (
)}
{validLocations.length > 0 && validLocations.length !== locationOptions.length && (
<li>
<Button StartIcon={Icon.FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
<Button StartIcon={FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
{t("add_location")}
</Button>
</li>
apps/web/components/eventtype/EventTeamWebhooksTab.tsx
+3 -2
View File
@@ -9,7 +9,8 @@ import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Webhook } from "@calcom/prisma/client";
import { trpc } from "@calcom/trpc/react";
import { Button, Dialog, DialogContent, EmptyScreen, Icon, showToast } from "@calcom/ui";
import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
export const EventTeamWebhooksTab = ({
eventType,
@@ -84,7 +85,7 @@ export const EventTeamWebhooksTab = ({
<Button
color="secondary"
data-testid="new_webhook"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
onClick={() => setCreateModalOpen(true)}>
{t("new_webhook")}
</Button>
apps/web/components/eventtype/EventTypeSingleLayout.tsx
+32 -23
View File
@@ -23,7 +23,6 @@ import {
DropdownItem,
DropdownMenuTrigger,
HorizontalTabs,
Icon,
Label,
showToast,
Skeleton,
@@ -32,6 +31,21 @@ import {
VerticalDivider,
VerticalTabs,
} from "@calcom/ui";
import {
FiLink,
FiCalendar,
FiClock,
FiSliders,
FiRepeat,
FiGrid,
FiZap,
FiUsers,
FiExternalLink,
FiCode,
FiTrash,
FiMoreHorizontal,
FiLoader,
} from "@calcom/ui/components/icon";
import { EmbedButton, EmbedDialog } from "@components/Embed";
@@ -63,44 +77,44 @@ function getNavigation(props: {
{
name: "event_setup_tab_title",
href: `/event-types/${eventType.id}?tabName=setup`,
icon: Icon.FiLink,
icon: FiLink,
info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
},
{
name: "availability",
href: `/event-types/${eventType.id}?tabName=availability`,
icon: Icon.FiCalendar,
icon: FiCalendar,
info: `default_schedule_name`, // TODO: Get this from props
},
{
name: "event_limit_tab_title",
href: `/event-types/${eventType.id}?tabName=limits`,
icon: Icon.FiClock,
icon: FiClock,
info: `event_limit_tab_description`,
},
{
name: "event_advanced_tab_title",
href: `/event-types/${eventType.id}?tabName=advanced`,
icon: Icon.FiSliders,
icon: FiSliders,
info: `event_advanced_tab_description`,
},
{
name: "recurring",
href: `/event-types/${eventType.id}?tabName=recurring`,
icon: Icon.FiRepeat,
icon: FiRepeat,
info: `recurring_event_tab_description`,
},
{
name: "apps",
href: `/event-types/${eventType.id}?tabName=apps`,
icon: Icon.FiGrid,
icon: FiGrid,
//TODO: Handle proper translation with count handling
info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
},
{
name: "workflows",
href: `/event-types/${eventType.id}?tabName=workflows`,
icon: Icon.FiZap,
icon: FiZap,
info: `${enabledWorkflowsNumber} ${t("active")}`,
},
];
@@ -157,7 +171,7 @@ function EventTypeSingleLayout({
navigation.splice(2, 0, {
name: "assignment",
href: `/event-types/${eventType.id}?tabName=team`,
icon: Icon.FiUsers,
icon: FiUsers,
info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
});
navigation.push({
@@ -211,14 +225,14 @@ function EventTypeSingleLayout({
variant="icon"
href={permalink}
rel="noreferrer"
StartIcon={Icon.FiExternalLink}
StartIcon={FiExternalLink}
/>
</Tooltip>
<Button
color="secondary"
variant="icon"
StartIcon={Icon.FiLink}
StartIcon={FiLink}
tooltip={t("copy_link")}
onClick={() => {
navigator.clipboard.writeText(permalink);
@@ -227,7 +241,7 @@ function EventTypeSingleLayout({
/>
<EmbedButton
embedUrl={encodeURIComponent(embedLink)}
StartIcon={Icon.FiCode}
StartIcon={FiCode}
color="secondary"
variant="icon"
tooltip={t("embed")}
@@ -235,7 +249,7 @@ function EventTypeSingleLayout({
<Button
color="secondary"
variant="icon"
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
tooltip={t("delete")}
disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}
@@ -246,19 +260,14 @@ function EventTypeSingleLayout({
<Dropdown>
<DropdownMenuTrigger asChild>
<Button
className="lg:hidden"
StartIcon={Icon.FiMoreHorizontal}
variant="icon"
color="secondary"
/>
<Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem className="focus:ring-gray-100">
<DropdownItem
target="_blank"
type="button"
StartIcon={Icon.FiExternalLink}
StartIcon={FiExternalLink}
href={permalink}
rel="noreferrer">
{t("preview")}
@@ -267,7 +276,7 @@ function EventTypeSingleLayout({
<DropdownMenuItem className="focus:ring-gray-100">
<DropdownItem
type="button"
StartIcon={Icon.FiLink}
StartIcon={FiLink}
onClick={() => {
navigator.clipboard.writeText(permalink);
showToast("Link copied!", "success");
@@ -278,7 +287,7 @@ function EventTypeSingleLayout({
<DropdownMenuItem className="focus:ring-gray-100">
<DropdownItem
type="button"
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}>
{t("delete")}
@@ -313,7 +322,7 @@ function EventTypeSingleLayout({
</Button>
</div>
}>
<Suspense fallback={<Icon.FiLoader />}>
<Suspense fallback={<FiLoader />}>
<div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
<div className="hidden xl:block">
<VerticalTabs
apps/web/components/eventtype/SkeletonLoader.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import { Icon, SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { FiClock, FiUser } from "@calcom/ui/components/icon";
function SkeletonLoader() {
return (
@@ -31,11 +32,11 @@ function SkeletonItem() {
<div className="">
<ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
<li className="flex items-center whitespace-nowrap">
<Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
<FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
<SkeletonText className="h-4 w-12" />
</li>
<li className="flex items-center whitespace-nowrap">
<Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
<FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
<SkeletonText className="h-4 w-12" />
</li>
</ul>
apps/web/components/security/TwoFactorModalHeader.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { Icon } from "@calcom/ui";
import { ShieldCheckIcon } from "@calcom/ui/components/icon";
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return (
<div className="mb-4 sm:flex sm:items-start">
<div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<Icon.ShieldCheckIcon className="h-6 w-6 text-white" />
<ShieldCheckIcon className="h-6 w-6 text-white" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
apps/web/components/settings/CalendarSwitch.tsx
+3 -2
View File
@@ -2,7 +2,8 @@ import { useMutation } from "@tanstack/react-query";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Badge, Icon, showToast, Switch } from "@calcom/ui";
import { Badge, showToast, Switch } from "@calcom/ui";
import { FiArrowLeft } from "@calcom/ui/components/icon";
export function CalendarSwitch(props: {
type: string;
@@ -74,7 +75,7 @@ export function CalendarSwitch(props: {
/>
{props.defaultSelected && (
<Badge variant="gray">
<Icon.FiArrowLeft className="mr-1" /> {t("adding_events_to")}
<FiArrowLeft className="mr-1" /> {t("adding_events_to")}
</Badge>
)}
</div>
apps/web/components/ui/EditableHeading.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
import classNames from "classnames";
import React, { useState } from "react";
import { useState } from "react";
import { ControllerRenderProps } from "react-hook-form";
import { Icon } from "@calcom/ui";
import { FiEdit2 } from "@calcom/ui/components/icon";
const EditableHeading = function EditableHeading({
value,
@@ -21,7 +21,7 @@ const EditableHeading = function EditableHeading({
<label className="min-w-8 relative inline-block">
<span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
{!isEditing && isReady && (
<Icon.FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
<FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
)}
<input
{...passThroughProps}
apps/web/components/ui/InfoBadge.tsx
+3 -2
View File
@@ -1,11 +1,12 @@
import { Icon, Tooltip } from "@calcom/ui";
import { Tooltip } from "@calcom/ui";
import { FiInfo } from "@calcom/ui/components/icon";
export default function InfoBadge({ content }: { content: string }) {
return (
<>
<Tooltip side="top" content={content}>
<span title={content}>
<Icon.FiInfo className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
<FiInfo className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
</span>
</Tooltip>
</>
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+6 -5
View File
@@ -11,7 +11,8 @@ import { User } from "@calcom/prisma/client";
import { TRPCClientErrorLike } from "@calcom/trpc/client";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Icon, Input, Label } from "@calcom/ui";
import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Input, Label } from "@calcom/ui";
import { FiCheck, FiEdit2, FiExternalLink, StarIconSolid } from "@calcom/ui/components/icon";
export enum UsernameChangeStatusEnum {
UPGRADE = "UPGRADE",
@@ -230,8 +231,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
isInputUsernamePremium ? "text-orange-400" : "",
usernameIsAvailable ? "" : ""
)}>
{isInputUsernamePremium ? <Icon.StarIconSolid className="mt-[2px] w-6" /> : <></>}
{!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
{isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
{!isInputUsernamePremium && usernameIsAvailable ? <FiCheck className="mt-2 w-6" /> : <></>}
</span>
</div>
</div>
@@ -249,7 +250,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<DialogContent>
<div className="flex flex-row">
<div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<Icon.FiEdit2 className="m-auto h-6 w-6" />
<FiEdit2 className="m-auto h-6 w-6" />
</div>
<div className="mb-4 w-full px-4 pt-1">
<DialogHeader title={t("confirm_username_change_dialog_title")} />
@@ -283,7 +284,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
data-testid="go-to-billing"
href={paymentLink}>
<>
{t("go_to_stripe_billing")} <Icon.FiExternalLink className="ml-1 h-4 w-4" />
{t("go_to_stripe_billing")} <FiExternalLink className="ml-1 h-4 w-4" />
</>
</Button>
)}
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+4 -13
View File
@@ -7,17 +7,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { TRPCClientErrorLike } from "@calcom/trpc/client";
import { trpc } from "@calcom/trpc/react";
import { AppRouter } from "@calcom/trpc/server/routers/_app";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogHeader,
Icon,
Input,
Label,
TextField,
} from "@calcom/ui";
import { Button, Dialog, DialogClose, DialogContent, DialogHeader, TextField } from "@calcom/ui";
import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
interface ICustomUsernameProps {
currentUsername: string | undefined;
@@ -145,7 +136,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
{currentUsername !== inputUsernameValue && (
<div className="absolute right-[2px] top-6 flex flex-row">
<span className={classNames("mx-2 py-2")}>
{usernameIsAvailable ? <Icon.FiCheck className="w-6" /> : <></>}
{usernameIsAvailable ? <FiCheck className="w-6" /> : <></>}
</span>
</div>
)}
@@ -165,7 +156,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
<DialogContent>
<div style={{ display: "flex", flexDirection: "row" }}>
<div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<Icon.FiEdit2 className="m-auto h-6 w-6" />
<FiEdit2 className="m-auto h-6 w-6" />
</div>
<div className="mb-4 w-full px-4 pt-1">
<DialogHeader title={t("confirm_username_change_dialog_title")} />
apps/web/components/ui/form/CheckedSelect.tsx
+3 -2
View File
@@ -2,7 +2,8 @@ import React from "react";
import { Props } from "react-select";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon, Avatar } from "@calcom/ui";
import { Avatar } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon";
import Select from "@components/ui/form/Select";
@@ -48,7 +49,7 @@ export const CheckedSelect = ({
alt={option.label}
/>
{option.label}
<Icon.FiX
<FiX
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
className="float-right mt-0.5 h-5 w-5 cursor-pointer text-gray-500"
/>
apps/web/components/ui/form/DatePicker.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
import "react-date-picker/dist/DatePicker.css";
import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
import { Icon } from "@calcom/ui";
import { FiCalendar } from "@calcom/ui/components/icon";
import classNames from "@lib/classNames";
@@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
className
)}
clearIcon={null}
calendarIcon={<Icon.FiCalendar className="h-5 w-5 text-gray-500" />}
calendarIcon={<FiCalendar className="h-5 w-5 text-gray-500" />}
value={date}
minDate={minDate}
disabled={disabled}
apps/web/pages/404.tsx
+13 -12
View File
@@ -4,7 +4,8 @@ import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
import { Icon, HeadSeo } from "@calcom/ui";
import { HeadSeo } from "@calcom/ui";
import { FiFileText, FiCheck, FiBookOpen, FiChevronRight } from "@calcom/ui/components/icon";
import { useLocale } from "@lib/hooks/useLocale";
@@ -20,13 +21,13 @@ export default function Custom404() {
{
title: t("documentation"),
description: t("documentation_description"),
icon: Icon.FiFileText,
icon: FiFileText,
href: DOCS_URL,
},
{
title: t("blog"),
description: t("blog_description"),
icon: Icon.FiBookOpen,
icon: FiBookOpen,
href: `${WEBSITE_URL}/blog`,
},
];
@@ -75,7 +76,7 @@ export default function Custom404() {
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
<Icon.FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
<FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@@ -90,7 +91,7 @@ export default function Custom404() {
<p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
</div>
<div className="flex-shrink-0 self-center">
<Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
@@ -103,7 +104,7 @@ export default function Custom404() {
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
<Icon.FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
<FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@@ -116,7 +117,7 @@ export default function Custom404() {
<p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
</div>
<div className="flex-shrink-0 self-center">
<Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</Link>
</li>
@@ -161,7 +162,7 @@ export default function Custom404() {
<p className="text-base text-gray-500">{t("join_our_community")}</p>
</div>
<div className="flex-shrink-0 self-center">
<Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
@@ -218,7 +219,7 @@ export default function Custom404() {
rel="noreferrer">
<div className="flex-shrink-0">
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
<Icon.FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
<FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@@ -233,7 +234,7 @@ export default function Custom404() {
<p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
</div>
<div className="flex-shrink-0 self-center">
<Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
@@ -261,7 +262,7 @@ export default function Custom404() {
<p className="text-base text-gray-500">{link.description}</p>
</div>
<div className="flex-shrink-0 self-center">
<Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</Link>
</li>
@@ -307,7 +308,7 @@ export default function Custom404() {
<p className="text-base text-gray-500">{t("join_our_community")}</p>
</div>
<div className="flex-shrink-0 self-center">
<Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</a>
</li>
apps/web/pages/500.tsx
+3 -2
View File
@@ -3,7 +3,8 @@ import { useRouter } from "next/router";
import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon, showToast } from "@calcom/ui";
import { Button, showToast } from "@calcom/ui";
import { FiCopy } from "@calcom/ui/components/icon";
export default function Error500() {
const { t } = useLocale();
@@ -33,7 +34,7 @@ export default function Error500() {
<Button
color="secondary"
className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
StartIcon={Icon.FiCopy}
StartIcon={FiCopy}
onClick={() => {
navigator.clipboard.writeText(router.query.error as string);
showToast("Link copied!", "success");
apps/web/pages/[user].tsx
+5 -4
View File
@@ -26,7 +26,8 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
import prisma from "@calcom/prisma";
import { baseEventTypeSelect } from "@calcom/prisma/selects";
import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { Icon, HeadSeo, AvatarGroup, Avatar } from "@calcom/ui";
import { HeadSeo, AvatarGroup, Avatar } from "@calcom/ui";
import { BadgeCheckIcon, FiArrowRight } from "@calcom/ui/components/icon";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import { EmbedProps } from "@lib/withEmbedSsr";
@@ -55,7 +56,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<li
key={index}
className="dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600">
<Icon.FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
<FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
<Link
href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
className="flex justify-between px-6 py-4"
@@ -134,7 +135,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
{nameOrUsername}
{user.verified && (
<Icon.BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
<BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
)}
</h1>
<p className="dark:text-darkgray-600 text-s text-gray-500">{user.bio}</p>
@@ -163,7 +164,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
key={type.id}
style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
className="dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600">
<Icon.FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
<FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
<Link
prefetch={false}
apps/web/pages/apps/categories/index.tsx
+4 -3
View File
@@ -4,7 +4,8 @@ import Link from "next/link";
import { getAppRegistry } from "@calcom/app-store/_appRegistry";
import Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon, SkeletonText } from "@calcom/ui";
import { SkeletonText } from "@calcom/ui";
import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon";
export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
const { t, isLocaleReady } = useLocale();
@@ -15,7 +16,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
<Link
href="/apps"
className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
<Icon.FiArrowLeft className="h-4 w-4" />
<FiArrowLeft className="h-4 w-4" />
{isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
</Link>
</div>
@@ -31,7 +32,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
<h3 className="font-medium capitalize">{category.name}</h3>
<p className="text-sm text-gray-500">
{t("number_apps", { count: category.count })}{" "}
<Icon.FiArrowRight className="inline-block h-4 w-4" />
<FiArrowRight className="inline-block h-4 w-4" />
</p>
</div>
</Link>
apps/web/pages/apps/index.tsx
+2 -2
View File
@@ -12,10 +12,10 @@ import {
AppStoreCategories,
HorizontalTabItemProps,
HorizontalTabs,
Icon,
TextField,
PopularAppsSlider,
} from "@calcom/ui";
import { FiSearch } from "@calcom/ui/components/icon";
import AppsLayout from "@components/apps/layouts/AppsLayout";
@@ -42,7 +42,7 @@ function AppsSearch({
return (
<TextField
className="!border-gray-100 bg-gray-100 !pl-0 focus:!ring-offset-0"
addOnLeading={<Icon.FiSearch className="h-4 w-4 text-gray-500" />}
addOnLeading={<FiSearch className="h-4 w-4 text-gray-500" />}
addOnClassname="!border-gray-100"
containerClassName={classNames("focus:!ring-offset-0", className)}
type="search"
apps/web/pages/apps/installed/[category].tsx
+17 -9
View File
@@ -13,11 +13,19 @@ import {
Alert,
Button,
EmptyScreen,
Icon,
List,
AppSkeletonLoader as SkeletonLoader,
ShellSubHeading,
} from "@calcom/ui";
import {
FiBarChart,
FiCalendar,
FiCreditCard,
FiGrid,
FiPlus,
FiShare2,
FiVideo,
} from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -139,13 +147,13 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
const { t } = useLocale();
const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
const emptyIcon = {
calendar: Icon.FiCalendar,
conferencing: Icon.FiVideo,
automation: Icon.FiShare2,
analytics: Icon.FiBarChart,
payment: Icon.FiCreditCard,
web3: Icon.FiBarChart,
other: Icon.FiGrid,
calendar: FiCalendar,
conferencing: FiVideo,
automation: FiShare2,
analytics: FiBarChart,
payment: FiCreditCard,
web3: FiBarChart,
other: FiGrid,
};
return (
@@ -169,7 +177,7 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
: "/apps"
}
color="secondary"
StartIcon={Icon.FiPlus}>
StartIcon={FiPlus}>
{t("add")}
</Button>
}
apps/web/pages/auth/error.tsx
+3 -2
View File
@@ -4,7 +4,8 @@ import { useRouter } from "next/router";
import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon, SkeletonText } from "@calcom/ui";
import { Button, SkeletonText } from "@calcom/ui";
import { FiX } from "@calcom/ui/components/icon";
import AuthContainer from "@components/ui/AuthContainer";
@@ -28,7 +29,7 @@ export default function Error() {
<AuthContainer title="" description="">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<Icon.FiX className="h-6 w-6 text-red-600" />
<FiX className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
apps/web/pages/auth/login.tsx
+3 -2
View File
@@ -13,7 +13,8 @@ import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import prisma from "@calcom/prisma";
import { Alert, Button, EmailField, Icon, PasswordField } from "@calcom/ui";
import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
import { FiArrowLeft } from "@calcom/ui/components/icon";
import { ErrorCode, getSession } from "@lib/auth";
import { WEBAPP_URL, WEBSITE_URL } from "@lib/config/constants";
@@ -85,7 +86,7 @@ export default function Login({
setTwoFactorRequired(false);
methods.setValue("totpCode", "");
}}
StartIcon={Icon.FiArrowLeft}
StartIcon={FiArrowLeft}
color="minimal">
{t("go_back")}
</Button>
apps/web/pages/auth/logout.tsx
+3 -2
View File
@@ -5,7 +5,8 @@ import { useEffect } from "react";
import { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon } from "@calcom/ui";
import { Button } from "@calcom/ui";
import { FiCheck } from "@calcom/ui/components/icon";
import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -31,7 +32,7 @@ export default function Logout(props: Props) {
<AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
<div className="mb-4">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<Icon.FiCheck className="h-6 w-6 text-green-600" />
<FiCheck className="h-6 w-6 text-green-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
apps/web/pages/auth/setup/steps/StepDone.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useRouter } from "next/router";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui";
import { FiCheck } from "@calcom/ui/components/icon";
const StepDone = () => {
const router = useRouter();
@@ -18,7 +18,7 @@ const StepDone = () => {
}}>
<div className="min-h-36 my-6 flex flex-col items-center justify-center">
<div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
<Icon.FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
<FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
</div>
<div className="max-w-[420px] text-center">
<h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
apps/web/pages/availability/[schedule].tsx
+3 -3
View File
@@ -15,7 +15,6 @@ import type { Schedule as ScheduleType, TimeRange, WorkingHours } from "@calcom/
import {
Button,
Form,
Icon,
Label,
showToast,
Skeleton,
@@ -25,6 +24,7 @@ import {
Tooltip,
VerticalDivider,
} from "@calcom/ui";
import { FiInfo, FiPlus } from "@calcom/ui/components/icon";
import { HttpError } from "@lib/core/http/error";
@@ -56,7 +56,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
{t("date_overrides")}{" "}
<Tooltip content={t("date_overrides_info")}>
<span className="inline-block">
<Icon.FiInfo />
<FiInfo />
</span>
</Tooltip>
</h3>
@@ -74,7 +74,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
onChange={(ranges) => append({ ranges })}
Trigger={
<Button color="secondary" StartIcon={Icon.FiPlus} data-testid="add-override">
<Button color="secondary" StartIcon={FiPlus} data-testid="add-override">
Add an override
</Button>
}
apps/web/pages/availability/index.tsx
+3 -2
View File
@@ -5,7 +5,8 @@ import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules"
import Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { EmptyScreen, Icon, showToast } from "@calcom/ui";
import { EmptyScreen, showToast } from "@calcom/ui";
import { FiClock } from "@calcom/ui/components/icon";
import { withQuery } from "@lib/QueryCell";
import { HttpError } from "@lib/core/http/error";
@@ -76,7 +77,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
{schedules.length === 0 ? (
<div className="flex justify-center">
<EmptyScreen
Icon={Icon.FiClock}
Icon={FiClock}
headline={t("new_schedule_heading")}
description={t("new_schedule_description")}
buttonRaw={<NewScheduleButton />}
apps/web/pages/booking/[uid].tsx
+7 -6
View File
@@ -35,7 +35,8 @@ import { localStorage } from "@calcom/lib/webstorage";
import prisma from "@calcom/prisma";
import { Prisma } from "@calcom/prisma/client";
import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { Button, EmailInput, Icon, HeadSeo } from "@calcom/ui";
import { Button, EmailInput, HeadSeo } from "@calcom/ui";
import { FiX, FiChevronLeft, FiCheck, FiCalendar } from "@calcom/ui/components/icon";
import { timeZone } from "@lib/clock";
import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -142,7 +143,7 @@ function RedirectionToast({ url }: { url: string }) {
setIsToastVisible(false);
}}
className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
<Icon.FiX className="h-6 w-6 text-white" />
<FiX className="h-6 w-6 text-white" />
</button>
</div>
</div>
@@ -356,7 +357,7 @@ export default function Success(props: SuccessProps) {
<Link
href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-transparent dark:hover:text-white">
<Icon.FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
<FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
</Link>
</div>
)}
@@ -401,10 +402,10 @@ export default function Success(props: SuccessProps) {
<img src={giphyImage} alt="Gif from Giphy" />
)}
{!giphyImage && !needsConfirmation && !isCancelled && (
<Icon.FiCheck className="h-5 w-5 text-green-600" />
<FiCheck className="h-5 w-5 text-green-600" />
)}
{needsConfirmation && !isCancelled && <Icon.FiCalendar className="h-5 w-5 text-gray-900" />}
{isCancelled && <Icon.FiX className="h-5 w-5 text-red-600" />}
{needsConfirmation && !isCancelled && <FiCalendar className="h-5 w-5 text-gray-900" />}
{isCancelled && <FiX className="h-5 w-5 text-red-600" />}
</div>
<div className="mt-6 mb-8 text-center last:mb-0">
<h3
apps/web/pages/bookings/[status].tsx
+3 -2
View File
@@ -9,7 +9,8 @@ import BookingLayout from "@calcom/features/bookings/layout/BookingLayout";
import { filterQuerySchema, useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Alert, Button, EmptyScreen, Icon } from "@calcom/ui";
import { Alert, Button, EmptyScreen } from "@calcom/ui";
import { FiCalendar } from "@calcom/ui/components/icon";
import { useInViewObserver } from "@lib/hooks/useInViewObserver";
@@ -176,7 +177,7 @@ export default function Bookings() {
{query.status === "success" && isEmpty && (
<div className="flex items-center justify-center pt-2 xl:pt-0">
<EmptyScreen
Icon={Icon.FiCalendar}
Icon={FiCalendar}
headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
description={t("no_status_bookings_yet_description", {
status: t(status).toLowerCase(),
apps/web/pages/event-types/index.tsx
+33 -24
View File
@@ -26,13 +26,27 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
EmptyScreen,
Icon,
showToast,
Switch,
Avatar,
AvatarGroup,
Tooltip,
} from "@calcom/ui";
import {
FiArrowDown,
FiArrowUp,
FiClipboard,
FiCode,
FiCopy,
FiEdit,
FiEdit2,
FiExternalLink,
FiLink,
FiMoreHorizontal,
FiTrash,
FiUpload,
FiUsers,
} from "@calcom/ui/components/icon";
import { withQuery } from "@lib/QueryCell";
import { HttpError } from "@lib/core/http/error";
@@ -263,7 +277,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<button
className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
onClick={() => moveEventType(index, -1)}>
<Icon.FiArrowUp className="h-5 w-5" />
<FiArrowUp className="h-5 w-5" />
</button>
)}
@@ -271,7 +285,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<button
className="invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
onClick={() => moveEventType(index, 1)}>
<Icon.FiArrowDown className="h-5 w-5" />
<FiArrowDown className="h-5 w-5" />
</button>
)}
<MemoizedItem type={type} group={group} readOnly={readOnly} />
@@ -314,7 +328,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
target="_blank"
variant="icon"
href={calLink}
StartIcon={Icon.FiExternalLink}
StartIcon={FiExternalLink}
/>
</Tooltip>
@@ -322,7 +336,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<Button
color="secondary"
variant="icon"
StartIcon={Icon.FiLink}
StartIcon={FiLink}
onClick={() => {
showToast(t("link_copied"), "success");
navigator.clipboard.writeText(calLink);
@@ -338,7 +352,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
type="button"
variant="icon"
color="secondary"
StartIcon={Icon.FiMoreHorizontal}
StartIcon={FiMoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
@@ -346,7 +360,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem
type="button"
data-testid={"event-type-edit-" + type.id}
StartIcon={Icon.FiEdit2}
StartIcon={FiEdit2}
onClick={() => router.push("/event-types/" + type.id)}>
{t("edit")}
</DropdownItem>
@@ -355,7 +369,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownItem
type="button"
data-testid={"event-type-duplicate-" + type.id}
StartIcon={Icon.FiCopy}
StartIcon={FiCopy}
onClick={() => openDuplicateModal(type)}>
{t("duplicate")}
</DropdownItem>
@@ -364,7 +378,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<EmbedButton
as={DropdownItem}
type="button"
StartIcon={Icon.FiCode}
StartIcon={FiCode}
className="w-full rounded-none"
embedUrl={encodeURIComponent(embedLink)}>
{t("embed")}
@@ -380,7 +394,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
setDeleteDialogOpen(true);
setDeleteDialogTypeId(type.id);
}}
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
className="w-full rounded-none">
{t("delete")}
</DropdownItem>
@@ -396,12 +410,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<div className="min-w-9 mx-5 flex sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
<Button
type="button"
variant="icon"
color="secondary"
StartIcon={Icon.FiMoreHorizontal}
/>
<Button type="button" variant="icon" color="secondary" StartIcon={FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
@@ -409,7 +418,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<Link href={calLink} target="_blank">
<Button
color="minimal"
StartIcon={Icon.FiExternalLink}
StartIcon={FiExternalLink}
className="w-full rounded-none">
{t("preview")}
</Button>
@@ -421,7 +430,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
color="minimal"
className="w-full rounded-none text-left"
data-testid={"event-type-duplicate-" + type.id}
StartIcon={Icon.FiClipboard}
StartIcon={FiClipboard}
onClick={() => {
navigator.clipboard.writeText(calLink);
showToast(t("link_copied"), "success");
@@ -436,7 +445,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
color="minimal"
className="w-full rounded-none"
data-testid={"event-type-duplicate-" + type.id}
StartIcon={Icon.FiUpload}
StartIcon={FiUpload}
onClick={() => {
navigator
.share({
@@ -457,7 +466,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
onClick={() => router.push("/event-types/" + type.id)}
color="minimal"
className="w-full rounded-none"
StartIcon={Icon.FiEdit}>
StartIcon={FiEdit}>
{t("edit")}
</Button>
</DropdownMenuItem>
@@ -467,7 +476,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
color="minimal"
className="w-full rounded-none"
data-testid={"event-type-duplicate-" + type.id}
StartIcon={Icon.FiCopy}
StartIcon={FiCopy}
onClick={() => openDuplicateModal(type)}>
{t("duplicate")}
</Button>
@@ -480,7 +489,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
setDeleteDialogTypeId(type.id);
}}
color="destructive"
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
className="w-full rounded-none">
{t("delete")}
</Button>
@@ -535,7 +544,7 @@ const EventTypeListHeading = ({
<span className="relative -top-px text-xs text-gray-500 ltr:ml-2 ltr:mr-2 rtl:ml-2">
<Link href={`/settings/teams/${teamId}/members`}>
<Badge variant="gray">
<Icon.FiUsers className="mr-1 -mt-px inline h-3 w-3" />
<FiUsers className="mr-1 -mt-px inline h-3 w-3" />
{membershipCount}
</Badge>
</Link>
@@ -556,7 +565,7 @@ const CreateFirstEventTypeView = () => {
return (
<EmptyScreen
Icon={Icon.FiLink}
Icon={FiLink}
headline={t("new_event_type_heading")}
description={t("new_event_type_description")}
/>
apps/web/pages/settings/billing/index.tsx
+3 -2
View File
@@ -8,7 +8,8 @@ import { classNames } from "@calcom/lib";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Icon, Meta } from "@calcom/ui";
import { Button, Meta } from "@calcom/ui";
import { FiExternalLink } from "@calcom/ui/components/icon";
import { ssrInit } from "@server/lib/ssr";
@@ -55,7 +56,7 @@ const BillingView = () => {
<CtaRow
title={t("billing_manage_details_title")}
description={t("billing_manage_details_description")}>
<Button color="primary" href={billingHref} target="_blank" EndIcon={Icon.FiExternalLink}>
<Button color="primary" href={billingHref} target="_blank" EndIcon={FiExternalLink}>
{t("billing_portal")}
</Button>
</CtaRow>
apps/web/pages/settings/developer/api-keys.tsx
+3 -3
View File
@@ -14,10 +14,10 @@ import {
Dialog,
DialogContent,
EmptyScreen,
Icon,
Meta,
AppSkeletonLoader as SkeletonLoader,
} from "@calcom/ui";
import { FiLink, FiPlus } from "@calcom/ui/components/icon";
import { ssrInit } from "@server/lib/ssr";
@@ -35,7 +35,7 @@ const ApiKeysView = () => {
return (
<Button
color="secondary"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
onClick={() => {
setApiKeyToEdit(undefined);
setApiKeyModal(true);
@@ -75,7 +75,7 @@ const ApiKeysView = () => {
</>
) : (
<EmptyScreen
Icon={Icon.FiLink}
Icon={FiLink}
headline={t("create_first_api_key")}
description={t("create_first_api_key_description", { appName: APP_NAME })}
buttonRaw={<NewApiKeyButton />}
apps/web/pages/settings/my-account/appearance.tsx
+1 -1
View File
@@ -166,7 +166,7 @@ const AppearanceView = () => {
{/* TODO future PR to preview brandColors */}
{/* <Button
color="secondary"
EndIcon={Icon.FiExternalLink}
EndIcon={FiExternalLink}
className="mt-6"
onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
Preview
apps/web/pages/settings/my-account/calendars.tsx
+4 -4
View File
@@ -14,7 +14,6 @@ import {
Badge,
Button,
EmptyScreen,
Icon,
List,
ListItem,
ListItemText,
@@ -25,6 +24,7 @@ import {
SkeletonText,
showToast,
} from "@calcom/ui";
import { FiPlus, FiCalendar } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -52,7 +52,7 @@ const AddCalendarButton = () => {
return (
<>
<Button color="secondary" StartIcon={Icon.FiPlus} href="/apps/categories/calendar">
<Button color="secondary" StartIcon={FiPlus} href="/apps/categories/calendar">
{t("add_calendar")}
</Button>
</>
@@ -89,7 +89,7 @@ const CalendarsView = () => {
<div>
<div className="mt-4 flex space-x-4 rounded-md border-gray-200 bg-gray-50 p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
<div className=" flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 bg-white p-[6px]">
<Icon.FiCalendar className="h-6 w-6" />
<FiCalendar className="h-6 w-6" />
</div>
<div className="flex w-full flex-col space-y-3">
@@ -197,7 +197,7 @@ const CalendarsView = () => {
</div>
) : (
<EmptyScreen
Icon={Icon.FiCalendar}
Icon={FiCalendar}
headline={t("no_calendar_installed")}
description={t("no_calendar_installed_description")}
buttonText={t("add_a_calendar")}
apps/web/pages/settings/my-account/conferencing.tsx
+4 -4
View File
@@ -15,13 +15,13 @@ import {
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
Icon,
List,
Meta,
showToast,
SkeletonContainer,
SkeletonText,
} from "@calcom/ui";
import { FiAlertCircle, FiMoreHorizontal, FiTrash } from "@calcom/ui/components/icon";
import AppListCard from "@components/AppListCard";
@@ -85,7 +85,7 @@ const ConferencingLayout = () => {
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<Button StartIcon={Icon.FiMoreHorizontal} variant="icon" color="secondary" />
<Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
@@ -93,7 +93,7 @@ const ConferencingLayout = () => {
type="button"
color="destructive"
disabled={app.isGlobal}
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
onClick={() => {
setDeleteCredentialId(app.credentialIds[0]);
setDeleteAppModal(true);
@@ -114,7 +114,7 @@ const ConferencingLayout = () => {
title={t("Remove app")}
description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation"
Icon={Icon.FiAlertCircle}>
Icon={FiAlertCircle}>
<DialogFooter>
<Button color="primary" onClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}>
{t("yes_remove_app")}
apps/web/pages/settings/my-account/profile.tsx
+4 -4
View File
@@ -22,7 +22,6 @@ import {
DialogFooter,
DialogTrigger,
Form,
Icon,
ImageUploader,
Label,
Meta,
@@ -34,6 +33,7 @@ import {
SkeletonText,
TextField,
} from "@calcom/ui";
import { FiAlertTriangle, FiTrash2 } from "@calcom/ui/components/icon";
import TwoFactor from "@components/auth/TwoFactor";
import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@@ -229,7 +229,7 @@ const ProfileView = () => {
{/* Delete account Dialog */}
<Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
<DialogTrigger asChild>
<Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Icon.FiTrash2}>
<Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={FiTrash2}>
{t("delete_account")}
</Button>
</DialogTrigger>
@@ -237,7 +237,7 @@ const ProfileView = () => {
title={t("delete_account_modal_title")}
description={t("confirm_delete_account_modal", { appName: APP_NAME })}
type="creation"
Icon={Icon.FiAlertTriangle}>
Icon={FiAlertTriangle}>
<>
<p className="mb-7">{t("delete_account_confirmation_message", { appName: APP_NAME })}</p>
{isCALIdentityProviver && (
@@ -278,7 +278,7 @@ const ProfileView = () => {
title={t("confirm_password")}
description={t("confirm_password_change_email")}
type="creation"
Icon={Icon.FiAlertTriangle}>
Icon={FiAlertTriangle}>
<>
<PasswordField
data-testid="password"
apps/web/pages/team/[slug].tsx
+3 -2
View File
@@ -12,7 +12,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { Avatar, Button, Icon, HeadSeo, AvatarGroup } from "@calcom/ui";
import { Avatar, Button, HeadSeo, AvatarGroup } from "@calcom/ui";
import { FiArrowRight } from "@calcom/ui/components/icon";
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -113,7 +114,7 @@ function TeamPage({ team }: TeamPageProps) {
<aside className="mt-8 flex justify-center text-center dark:text-white">
<Button
color="minimal"
EndIcon={Icon.FiArrowRight}
EndIcon={FiArrowRight}
className="dark:hover:bg-darkgray-200"
href={`/team/${team.slug}?members=1`}
shallow={true}>
apps/web/pages/teams/index.tsx
+3 -2
View File
@@ -4,7 +4,8 @@ import { TeamsListing } from "@calcom/features/ee/teams/components";
import Shell from "@calcom/features/shell/Shell";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon } from "@calcom/ui";
import { Button } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { ssrInit } from "@server/lib/ssr";
@@ -17,7 +18,7 @@ function Teams() {
CTA={
<Button
variant="fab"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
type="button"
href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
{t("new")}
apps/web/pages/video/meeting-ended/[uid].tsx
+5 -4
View File
@@ -4,7 +4,8 @@ import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import { Button, Icon, HeadSeo } from "@calcom/ui";
import { Button, HeadSeo } from "@calcom/ui";
import { FiArrowRight, FiCalendar, FiX } from "@calcom/ui/components/icon";
import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -28,7 +29,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<Icon.FiX className="h-6 w-6 text-red-600" />
<FiX className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -40,14 +41,14 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
{props.booking.title}
</h2>
<p className="text-center text-gray-500">
<Icon.FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
<FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
</p>
</div>
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<Button data-testid="return-home" href="/event-types" EndIcon={Icon.FiArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
{t("go_back")}
</Button>
</div>
apps/web/pages/video/meeting-not-started/[uid].tsx
+5 -4
View File
@@ -5,7 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { Button, Icon, HeadSeo } from "@calcom/ui";
import { Button, HeadSeo } from "@calcom/ui";
import { FiArrowRight, FiCalendar, FiX } from "@calcom/ui/components/icon";
export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
const { t } = useLocale();
@@ -26,7 +27,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<Icon.FiX className="h-6 w-6 text-red-600" />
<FiX className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -38,7 +39,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
{props.booking.title}
</h2>
<p className="text-center text-gray-500">
<Icon.FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
<FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
</p>
</div>
@@ -50,7 +51,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<Button data-testid="return-home" href="/event-types" EndIcon={Icon.FiArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
{t("go_back")}
</Button>
</div>
apps/web/pages/video/no-meeting-found.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon, HeadSeo } from "@calcom/ui";
import { Button, HeadSeo } from "@calcom/ui";
import { FiX, FiArrowRight } from "@calcom/ui/components/icon";
export default function NoMeetingFound() {
const { t } = useLocale();
@@ -21,7 +22,7 @@ export default function NoMeetingFound() {
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<Icon.FiX className="h-6 w-6 text-red-600" />
<FiX className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -34,7 +35,7 @@ export default function NoMeetingFound() {
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<Button data-testid="return-home" href="/event-types" EndIcon={Icon.FiArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
{t("go_back_home")}
</Button>
</div>
packages/app-store/_components/OmniInstallAppButton.tsx
+3 -2
View File
@@ -2,7 +2,8 @@ import { classNames } from "@calcom/lib";
import useApp from "@calcom/lib/hooks/useApp";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Icon, showToast } from "@calcom/ui";
import { Button, showToast } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import useAddAppMutation from "../_utils/useAddAppMutation";
import { InstallAppButton } from "../components";
@@ -62,7 +63,7 @@ export default function OmniInstallAppButton({
loading={mutation.isLoading}
color="secondary"
className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
{...props}>
{t("install")}
</Button>
packages/app-store/_utils/getAppCategories.ts
+8 -8
View File
@@ -1,5 +1,5 @@
import { WEBAPP_URL } from "@calcom/lib/constants";
import { Icon } from "@calcom/ui";
import { FiCalendar, FiVideo, FiCreditCard, FiShare2, FiBarChart, FiGrid } from "@calcom/ui/components/icon";
function getHref(baseURL: string, category: string, useQueryParam: boolean) {
const baseUrlParsed = new URL(baseURL, WEBAPP_URL);
@@ -12,37 +12,37 @@ const getAppCategories = (baseURL: string, useQueryParam: boolean) => {
{
name: "calendar",
href: getHref(baseURL, "calendar", useQueryParam),
icon: Icon.FiCalendar,
icon: FiCalendar,
},
{
name: "conferencing",
href: getHref(baseURL, "conferencing", useQueryParam),
icon: Icon.FiVideo,
icon: FiVideo,
},
{
name: "payment",
href: getHref(baseURL, "payment", useQueryParam),
icon: Icon.FiCreditCard,
icon: FiCreditCard,
},
{
name: "automation",
href: getHref(baseURL, "automation", useQueryParam),
icon: Icon.FiShare2,
icon: FiShare2,
},
{
name: "analytics",
href: getHref(baseURL, "analytics", useQueryParam),
icon: Icon.FiBarChart,
icon: FiBarChart,
},
{
name: "web3",
href: getHref(baseURL, "web3", useQueryParam),
icon: Icon.FiBarChart,
icon: FiBarChart,
},
{
name: "other",
href: getHref(baseURL, "other", useQueryParam),
icon: Icon.FiGrid,
icon: FiGrid,
},
];
};
packages/app-store/closecom/pages/setup/index.tsx
+3 -2
View File
@@ -6,7 +6,8 @@ import { Toaster } from "react-hot-toast";
import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, showToast, TextField, Icon } from "@calcom/ui";
import { Button, Form, showToast, TextField } from "@calcom/ui";
import { FiCheck, FiX } from "@calcom/ui/components/icon";
const formSchema = z.object({
api_key: z.string(),
@@ -106,7 +107,7 @@ export default function CloseComSetup() {
type="submit"
loading={testLoading}
disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? Icon.FiCheck : Icon.FiX) : undefined}
StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined}
className={
testPassed !== undefined
? testPassed
packages/app-store/ee/routing-forms/components/FormActions.tsx
+2 -2
View File
@@ -22,13 +22,13 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
Form,
Icon,
showToast,
Switch,
TextAreaField,
TextField,
SettingsToggle,
} from "@calcom/ui";
import { FiMoreHorizontal } from "@calcom/ui/components/icon";
import { EmbedButton, EmbedDialog } from "@components/Embed";
@@ -162,7 +162,7 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
variant="icon"
color="secondary"
className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
StartIcon={Icon.FiMoreHorizontal}
StartIcon={FiMoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>{children}</DropdownMenuContent>
packages/app-store/ee/routing-forms/components/SingleForm.tsx
+13 -13
View File
@@ -25,7 +25,6 @@ import {
DialogHeader,
DropdownMenuSeparator,
Form,
Icon,
Meta,
SettingsToggle,
showToast,
@@ -34,6 +33,7 @@ import {
Tooltip,
VerticalDivider,
} from "@calcom/ui";
import { FiExternalLink, FiLink, FiDownload, FiCode, FiTrash } from "@calcom/ui/components/icon";
import { RoutingPages } from "../lib/RoutingPages";
import { getSerializableForm } from "../lib/getSerializableForm";
@@ -77,7 +77,7 @@ const Actions = ({
type="button"
rel="noreferrer"
action="preview"
StartIcon={Icon.FiExternalLink}
StartIcon={FiExternalLink}
/>
</Tooltip>
<FormAction
@@ -86,7 +86,7 @@ const Actions = ({
color="secondary"
variant="icon"
type="button"
StartIcon={Icon.FiLink}
StartIcon={FiLink}
tooltip={t("copy_link_to_form")}
/>
@@ -98,7 +98,7 @@ const Actions = ({
color="secondary"
variant="icon"
type="button"
StartIcon={Icon.FiDownload}
StartIcon={FiDownload}
/>
</Tooltip>
<FormAction
@@ -106,7 +106,7 @@ const Actions = ({
action="embed"
color="secondary"
variant="icon"
StartIcon={Icon.FiCode}
StartIcon={FiCode}
tooltip={t("embed")}
/>
<DropdownMenuSeparator />
@@ -115,7 +115,7 @@ const Actions = ({
action="_delete"
// className="mr-3"
variant="icon"
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
color="secondary"
type="button"
tooltip={t("delete")}
@@ -128,7 +128,7 @@ const Actions = ({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={Icon.FiLink}>
StartIcon={FiLink}>
{t("Copy Typeform Redirect Url")}
</FormAction>
</FormActionsDropdown>
@@ -144,7 +144,7 @@ const Actions = ({
type="button"
rel="noreferrer"
action="preview"
StartIcon={Icon.FiExternalLink}>
StartIcon={FiExternalLink}>
{t("preview")}
</FormAction>
<FormAction
@@ -153,7 +153,7 @@ const Actions = ({
routingForm={form}
color="minimal"
type="button"
StartIcon={Icon.FiLink}>
StartIcon={FiLink}>
{t("copy_link_to_form")}
</FormAction>
<FormAction
@@ -162,7 +162,7 @@ const Actions = ({
className="w-full"
color="minimal"
type="button"
StartIcon={Icon.FiDownload}>
StartIcon={FiDownload}>
{t("download_responses")}
</FormAction>
<FormAction
@@ -171,7 +171,7 @@ const Actions = ({
color="minimal"
type="button"
className="w-full"
StartIcon={Icon.FiCode}>
StartIcon={FiCode}>
{t("embed")}
</FormAction>
{typeformApp ? (
@@ -181,7 +181,7 @@ const Actions = ({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={Icon.FiLink}>
StartIcon={FiLink}>
{t("Copy Typeform Redirect Url")}
</FormAction>
) : null}
@@ -192,7 +192,7 @@ const Actions = ({
className="w-full"
type="button"
color="destructive"
StartIcon={Icon.FiTrash}>
StartIcon={FiTrash}>
{t("delete")}
</FormAction>
</FormActionsDropdown>
packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
+4 -3
View File
@@ -10,7 +10,8 @@ import {
TextWidgetProps,
} from "react-awesome-query-builder";
import { Button as CalButton, Icon, SelectWithValidation as Select, TextArea, TextField } from "@calcom/ui";
import { Button as CalButton, SelectWithValidation as Select, TextArea, TextField } from "@calcom/ui";
import { FiTrash, FiPlus } from "@calcom/ui/components/icon";
// import { mapListValues } from "../../../../utils/stuff";
@@ -152,7 +153,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
if (type === "delRule" || type == "delGroup") {
return (
<button className="ml-5">
<Icon.FiTrash className="m-0 h-4 w-4 text-gray-500" onClick={onClick} />
<FiTrash className="m-0 h-4 w-4 text-gray-500" onClick={onClick} />
</button>
);
}
@@ -166,7 +167,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
}
return (
<CalButton
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
data-testid={dataTestId}
type="button"
color="secondary"
packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
+3 -3
View File
@@ -10,11 +10,11 @@ import {
Button,
EmptyScreen,
FormCard,
Icon,
SelectField,
TextAreaField,
TextField,
} from "@calcom/ui";
import { FiPlus, FiFileText } from "@calcom/ui/components/icon";
import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -286,7 +286,7 @@ const FormEdit = ({
<Button
data-testid="add-field"
type="button"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
color="secondary"
onClick={addField}>
Add Field
@@ -298,7 +298,7 @@ const FormEdit = ({
) : (
<div className="w-full">
<EmptyScreen
Icon={Icon.FiFileText}
Icon={FiFileText}
headline="Create your first field"
description="Fields are the form fields that the booker would see."
buttonRaw={
packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+37 -21
View File
@@ -1,6 +1,5 @@
// TODO: i18n
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useMemo } from "react";
import SkeletonLoaderTeamList from "@calcom/features/ee/teams/components/SkeletonloaderTeamList";
import Shell, { ShellMain } from "@calcom/features/shell/Shell";
@@ -16,12 +15,29 @@ import {
ButtonGroup,
DropdownMenuSeparator,
EmptyScreen,
Icon,
List,
ListLinkItem,
Tooltip,
Button,
} from "@calcom/ui";
import {
FiPlus,
FiGitMerge,
FiExternalLink,
FiLink,
FiEdit,
FiDownload,
FiCode,
FiCopy,
FiTrash,
FiMenu,
FiMessageCircle,
FiFileText,
FiShuffle,
FiBarChart,
FiCheckCircle,
FiMail,
} from "@calcom/ui/components/icon";
import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -43,32 +59,32 @@ export default function RoutingForms({
const features = [
{
icon: <Icon.FiFileText className="h-5 w-5 text-orange-500" />,
icon: <FiFileText className="h-5 w-5 text-orange-500" />,
title: t("create_your_first_form"),
description: t("create_your_first_form_description"),
},
{
icon: <Icon.FiShuffle className="h-5 w-5 text-lime-500" />,
icon: <FiShuffle className="h-5 w-5 text-lime-500" />,
title: t("create_your_first_route"),
description: t("route_to_the_right_person"),
},
{
icon: <Icon.FiBarChart className="h-5 w-5 text-blue-500" />,
icon: <FiBarChart className="h-5 w-5 text-blue-500" />,
title: t("reporting"),
description: t("reporting_feature"),
},
{
icon: <Icon.FiCheckCircle className="h-5 w-5 text-teal-500" />,
icon: <FiCheckCircle className="h-5 w-5 text-teal-500" />,
title: t("test_routing_form"),
description: t("test_preview_description"),
},
{
icon: <Icon.FiMail className="h-5 w-5 text-yellow-500" />,
icon: <FiMail className="h-5 w-5 text-yellow-500" />,
title: t("routing_forms_send_email_owner"),
description: t("routing_forms_send_email_owner_description"),
},
{
icon: <Icon.FiDownload className="h-5 w-5 text-violet-500" />,
icon: <FiDownload className="h-5 w-5 text-violet-500" />,
title: t("download_responses"),
description: t("download_responses_description"),
},
@@ -80,7 +96,7 @@ export default function RoutingForms({
variant="fab"
routingForm={null}
data-testid="new-routing-form"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
action="create">
{t("new")}
</FormAction>
@@ -119,7 +135,7 @@ export default function RoutingForms({
<div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
{!forms?.length ? (
<EmptyScreen
Icon={Icon.FiGitMerge}
Icon={FiGitMerge}
headline={t("create_your_first_form")}
description={t("create_your_first_form_description")}
buttonRaw={<NewFormButton />}
@@ -153,7 +169,7 @@ export default function RoutingForms({
action="preview"
routingForm={form}
target="_blank"
StartIcon={Icon.FiExternalLink}
StartIcon={FiExternalLink}
color="secondary"
variant="icon"
disabled={disabled}
@@ -164,7 +180,7 @@ export default function RoutingForms({
action="copyLink"
color="secondary"
variant="icon"
StartIcon={Icon.FiLink}
StartIcon={FiLink}
disabled={disabled}
tooltip={t("copy_link_to_form")}
/>
@@ -174,14 +190,14 @@ export default function RoutingForms({
routingForm={form}
color="minimal"
className="!flex"
StartIcon={Icon.FiEdit}>
StartIcon={FiEdit}>
{t("edit")}
</FormAction>
<FormAction
action="download"
routingForm={form}
color="minimal"
StartIcon={Icon.FiDownload}>
StartIcon={FiDownload}>
{t("download_responses")}
</FormAction>
<FormAction
@@ -189,7 +205,7 @@ export default function RoutingForms({
routingForm={form}
color="minimal"
className="w-full"
StartIcon={Icon.FiCode}>
StartIcon={FiCode}>
{t("embed")}
</FormAction>
<FormAction
@@ -197,7 +213,7 @@ export default function RoutingForms({
routingForm={form}
color="minimal"
className="w-full"
StartIcon={Icon.FiCopy}>
StartIcon={FiCopy}>
{t("duplicate")}
</FormAction>
{typeformApp?.isInstalled ? (
@@ -207,7 +223,7 @@ export default function RoutingForms({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={Icon.FiLink}>
StartIcon={FiLink}>
{t("Copy Typeform Redirect Url")}
</FormAction>
) : null}
@@ -217,7 +233,7 @@ export default function RoutingForms({
routingForm={form}
color="destructive"
className="w-full"
StartIcon={Icon.FiTrash}>
StartIcon={FiTrash}>
{t("delete")}
</FormAction>
</FormActionsDropdown>
@@ -225,13 +241,13 @@ export default function RoutingForms({
</>
}>
<div className="flex flex-wrap gap-1">
<Badge variant="gray" StartIcon={Icon.FiMenu}>
<Badge variant="gray" StartIcon={FiMenu}>
{fields.length} {fields.length === 1 ? "field" : "fields"}
</Badge>
<Badge variant="gray" StartIcon={Icon.FiGitMerge}>
<Badge variant="gray" StartIcon={FiGitMerge}>
{form.routes.length} {form.routes.length === 1 ? "route" : "routes"}
</Badge>
<Badge variant="gray" StartIcon={Icon.FiMessageCircle}>
<Badge variant="gray" StartIcon={FiMessageCircle}>
{form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
</Badge>
</div>
packages/app-store/googlevideo/components/ExistingGoogleCal.tsx
+3 -2
View File
@@ -4,7 +4,8 @@ import Link from "next/link";
import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Icon, SkeletonText } from "@calcom/ui";
import { SkeletonText } from "@calcom/ui";
import { FiAlertCircle } from "@calcom/ui/components/icon";
const ExistingGoogleCal = () => {
const { t } = useLocale();
@@ -14,7 +15,7 @@ const ExistingGoogleCal = () => {
<div className="rounded-md bg-blue-100 py-3 px-4 text-blue-900">
<div className="flex items-start space-x-2.5">
<div>
<Icon.FiAlertCircle className="font-semibold" />
<FiAlertCircle className="font-semibold" />
</div>
<div>
<span className="font-semibold">{t("requires_google_calendar")}</span>
packages/app-store/rainbow/components/RainbowKit.tsx
+5 -4
View File
@@ -14,7 +14,8 @@ import { configureChains, createClient, useAccount, useSignMessage, WagmiConfig
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Icon, showToast, SkeletonText } from "@calcom/ui";
import { showToast, SkeletonText } from "@calcom/ui";
import { FiAlertTriangle, FiLoader } from "@calcom/ui/components/icon";
import { ETH_MESSAGE, getProviders, SUPPORTED_CHAINS } from "../utils/ethereum";
@@ -131,7 +132,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
<>
{!balanceData.data.hasBalance && (
<div className="mt-2 flex flex-row items-center">
<Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
<FiAlertTriangle className="h-5 w-5 text-red-600" />
<p className="ml-2 text-red-600">
<Trans i18nKey="rainbow_insufficient_balance" t={t}>
Your connected wallet doesn&apos;t contain enough {contractData.data.symbol}.
@@ -142,7 +143,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
{balanceData.data.hasBalance && isSignatureLoading && (
<div className="mt-2 flex flex-row items-center">
<Icon.FiLoader className="h-5 w-5 text-green-600" />
<FiLoader className="h-5 w-5 text-green-600" />
<p className="ml-2 text-green-600">{t("rainbow_sign_message_request")}</p>
</div>
)}
@@ -151,7 +152,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
{isSignatureError && (
<div className="mt-2 flex flex-row items-center">
<Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
<FiAlertTriangle className="h-5 w-5 text-red-600" />
<p className="ml-2 text-red-600">
<Trans i18nKey="rainbow_signature_error" t={t}>
{t("rainbow_signature_error")}
packages/app-store/sendgrid/pages/setup/index.tsx
+3 -2
View File
@@ -6,7 +6,8 @@ import { Toaster } from "react-hot-toast";
import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, Icon, showToast, TextField } from "@calcom/ui";
import { Button, Form, showToast, TextField } from "@calcom/ui";
import { FiCheck, FiX } from "@calcom/ui/components/icon";
const formSchema = z.object({
api_key: z.string(),
@@ -101,7 +102,7 @@ export default function SendgridSetup() {
type="submit"
loading={testLoading}
disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? Icon.FiCheck : Icon.FiX) : undefined}
StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined}
className={
testPassed !== undefined
? testPassed
packages/app-store/templates/event-type-app-card/components/EventTypeAppCardInterface.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { useState } from "react";
import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
import AppCard from "@calcom/app-store/_components/AppCard";
import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
import { Icon } from "@calcom/ui";
import { FiSunrise, FiSunset } from "@calcom/ui/components/icon";
import { appDataSchema } from "../zod";
@@ -28,8 +28,8 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
switchChecked={enabled}>
<div className="mt-2 text-sm">
<div className="flex">
<span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <Icon.FiSunrise /> : <Icon.FiSunset />}</span>I am
an AppCard for Event with Title: {eventType.title}
<span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <FiSunrise /> : <FiSunset />}</span>I am an AppCard
for Event with Title: {eventType.title}
</div>{" "}
<div className="mt-2">
Edit <span className="italic">packages/app-store/{app.slug}/EventTypeAppCardInterface.tsx</span> to
packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+5 -13
View File
@@ -1,7 +1,8 @@
import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon } from "@calcom/ui";
import { Button } from "@calcom/ui";
import { FiExternalLink } from "@calcom/ui/components/icon";
export default function HowToUse() {
const { t } = useLocale();
@@ -30,10 +31,7 @@ export default function HowToUse() {
href="/api/app-store/typeform/copy-typeform-redirect-url.png"
target="_blank"
className="inline-flex items-baseline text-base text-gray-500">
<Icon.FiExternalLink
className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
aria-hidden="true"
/>
<FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
Click &quot;Copy Typeform Redirect URL&quot;
</Link>
</li>
@@ -44,10 +42,7 @@ export default function HowToUse() {
href="https://www.typeform.com/help/a/end-screens-and-redirects-360051791392/#h_01G0CFXF21W2EQ8PXKSB4KSC8P"
target="_blank"
className="inline-flex items-baseline text-base text-gray-500">
<Icon.FiExternalLink
className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
aria-hidden="true"
/>
<FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
Redirect to your typeform
</Link>
</li>
@@ -57,10 +52,7 @@ export default function HowToUse() {
href="https://www.typeform.com/help/a/use-recall-information-to-reference-typeform-answers-variables-and-more-360052320011/"
target="_blank"
className="inline-flex items-baseline text-base text-gray-500">
<Icon.FiExternalLink
className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
aria-hidden="true"
/>
<FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
Recall Information in Typeform
</Link>{" "}
to add values to query params.
packages/app-store/zapier/pages/setup/index.tsx
+3 -2
View File
@@ -5,7 +5,8 @@ import { Toaster } from "react-hot-toast";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Icon, showToast, Tooltip } from "@calcom/ui";
import { Button, showToast, Tooltip } from "@calcom/ui";
import { ClipboardCopyIcon } from "@calcom/ui/components/icon";
export interface IZapierSetupProps {
inviteLink: string;
@@ -75,7 +76,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
}}
type="button"
className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
<Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
<ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
packages/features/apps/AdminAppsList.tsx
+3 -3
View File
@@ -17,7 +17,6 @@ import {
Dialog,
EmptyScreen,
Form,
Icon,
showToast,
SkeletonButton,
SkeletonContainer,
@@ -26,6 +25,7 @@ import {
TextField,
VerticalDivider,
} from "@calcom/ui";
import { FiAlertCircle, FiEdit } from "@calcom/ui/components/icon";
const IntegrationContainer = ({
app,
@@ -110,7 +110,7 @@ const IntegrationContainer = ({
variant="icon"
tooltip={t("edit_keys")}
onClick={() => setShowKeys(!showKeys)}>
<Icon.FiEdit />
<FiEdit />
</Button>
</CollapsibleTrigger>
</>
@@ -224,7 +224,7 @@ const AdminAppsListContainer = () => {
if (!apps) {
return (
<EmptyScreen
Icon={Icon.FiAlertCircle}
Icon={FiAlertCircle}
headline={t("no_available_apps")}
description={t("no_available_apps_description")}
/>
packages/features/apps/components/DisconnectIntegration.tsx
+3 -3
View File
@@ -8,11 +8,11 @@ import {
Dialog,
DialogContent,
DialogTrigger,
Icon,
showToast,
DialogFooter,
DialogClose,
} from "@calcom/ui";
import { FiTrash, FiAlertCircle } from "@calcom/ui/components/icon";
export default function DisconnectIntegration({
credentialId,
@@ -54,7 +54,7 @@ export default function DisconnectIntegration({
<DialogTrigger asChild>
<Button
color={buttonProps?.color || "destructive"}
StartIcon={trashIcon ? Icon.FiTrash : undefined}
StartIcon={trashIcon ? FiTrash : undefined}
size="base"
variant={trashIcon && !label ? "icon" : "button"}
disabled={isGlobal}
@@ -66,7 +66,7 @@ export default function DisconnectIntegration({
title={t("remove_app")}
description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation"
Icon={Icon.FiAlertCircle}>
Icon={FiAlertCircle}>
<DialogFooter>
<DialogClose onClick={() => setModalOpen(false)} />
<DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>
packages/features/auth/SAMLLogin.tsx
+3 -2
View File
@@ -7,7 +7,8 @@ import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { trpc } from "@calcom/trpc/react";
import { Button, Icon } from "@calcom/ui";
import { Button } from "@calcom/ui";
import { FiLock } from "@calcom/ui/components/icon";
interface Props {
samlTenantID: string;
@@ -35,7 +36,7 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
return (
<Button
StartIcon={Icon.FiLock}
StartIcon={FiLock}
color="secondary"
data-testid="saml"
className="flex w-full justify-center"
packages/features/bookings/components/PeopleFilter.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { AnimatedPopover, Avatar, Icon } from "@calcom/ui";
import { AnimatedPopover, Avatar } from "@calcom/ui";
import { FiUser } from "@calcom/ui/components/icon";
import { useFilterQuery } from "../lib/useFilterQuery";
@@ -19,7 +20,7 @@ export const PeopleFilter = () => {
text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : t("all_users_filter_label")}>
<div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
<div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
<Icon.FiUser className="h-5 w-5" />
<FiUser className="h-5 w-5" />
</div>
<label htmlFor="allUsers" className="mr-auto self-center truncate text-sm font-medium text-gray-700">
{t("all_users_filter_label")}
packages/features/bookings/components/TeamFilter.tsx
+4 -3
View File
@@ -2,7 +2,8 @@ import { useSession } from "next-auth/react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { AnimatedPopover, Avatar, Icon } from "@calcom/ui";
import { AnimatedPopover, Avatar } from "@calcom/ui";
import { FiLayers, FiUser } from "@calcom/ui/components/icon";
import { useFilterQuery } from "../lib/useFilterQuery";
@@ -22,7 +23,7 @@ export const TeamsMemberFilter = () => {
text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : t("all_bookings_filter_label")}>
<div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
<div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
<Icon.FiLayers className="h-5 w-5" />
<FiLayers className="h-5 w-5" />
</div>
<label
htmlFor="allBookings"
@@ -42,7 +43,7 @@ export const TeamsMemberFilter = () => {
</div>
<div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
<div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
<Icon.FiUser className="h-5 w-5" />
<FiUser className="h-5 w-5" />
</div>
<label
htmlFor="yourBookings"
packages/features/calendars/DatePicker.tsx
+3 -2
View File
@@ -7,7 +7,8 @@ import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
import { weekdayNames } from "@calcom/lib/weekday";
import { Button, Icon, SkeletonText } from "@calcom/ui";
import { Button, SkeletonText } from "@calcom/ui";
import { FiArrowRight } from "@calcom/ui/components/icon";
export type DatePickerProps = {
/** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */
@@ -83,7 +84,7 @@ const NoAvailabilityOverlay = ({
<h4 className="mb-4 font-medium text-gray-900 dark:text-white">
{t("no_availability_in_month", { month: month })}
</h4>
<Button onClick={nextMonthButton} color="primary" EndIcon={Icon.FiArrowRight}>
<Button onClick={nextMonthButton} color="primary" EndIcon={FiArrowRight}>
{t("view_next_month")}
</Button>
</div>
packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import dayjs from "@calcom/dayjs";
import { Icon, Button, ButtonGroup } from "@calcom/ui";
import { Button, ButtonGroup } from "@calcom/ui";
import { FiChevronLeft, FiChevronRight } from "@calcom/ui/components/icon";
import { useCalendarStore } from "../../state/store";
@@ -29,7 +30,7 @@ export function SchedulerHeading() {
<ButtonGroup combined>
{/* TODO: i18n label with correct view */}
<Button
StartIcon={Icon.FiChevronLeft}
StartIcon={FiChevronLeft}
variant="icon"
color="secondary"
aria-label="Previous Week"
@@ -38,7 +39,7 @@ export function SchedulerHeading() {
}}
/>
<Button
StartIcon={Icon.FiChevronRight}
StartIcon={FiChevronRight}
variant="icon"
color="secondary"
aria-label="Next Week"
packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+3 -12
View File
@@ -6,17 +6,8 @@ import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import {
Button,
Icon,
DatePicker,
DialogFooter,
Form,
showToast,
Switch,
TextField,
Tooltip,
} from "@calcom/ui";
import { Button, DatePicker, DialogFooter, Form, showToast, Switch, TextField, Tooltip } from "@calcom/ui";
import { ClipboardCopyIcon } from "@calcom/ui/components/icon";
export default function ApiKeyDialogForm({
defaultValues,
@@ -83,7 +74,7 @@ export default function ApiKeyDialogForm({
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
<ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+4 -4
View File
@@ -10,8 +10,8 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
Icon,
} from "@calcom/ui";
import { FiMoreHorizontal, FiEdit2, FiTrash } from "@calcom/ui/components/icon";
export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number];
@@ -66,12 +66,12 @@ const ApiKeyListItem = ({
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" variant="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" variant="icon" color="secondary" StartIcon={FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<DropdownItem type="button" onClick={onEditClick} StartIcon={Icon.FiEdit2}>
<DropdownItem type="button" onClick={onEditClick} StartIcon={FiEdit2}>
{t("edit") as string}
</DropdownItem>
</DropdownMenuItem>
@@ -83,7 +83,7 @@ const ApiKeyListItem = ({
id: apiKey.id,
})
}
StartIcon={Icon.FiTrash}>
StartIcon={FiTrash}>
{t("delete") as string}
</DropdownItem>
</DropdownMenuItem>
packages/features/ee/common/components/LicenseRequired.tsx
+3 -2
View File
@@ -9,7 +9,8 @@ import React, { AriaRole, ComponentType, Fragment } from "react";
import { APP_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen, Icon } from "@calcom/ui";
import { EmptyScreen } from "@calcom/ui";
import { FiAlertTriangle } from "@calcom/ui/components/icon";
type LicenseRequiredProps = {
as?: keyof JSX.IntrinsicElements | "";
@@ -35,7 +36,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
children
) : (
<EmptyScreen
Icon={Icon.FiAlertTriangle}
Icon={FiAlertTriangle}
headline={t("enterprise_license")}
description={
<div
packages/features/ee/common/components/v2/LicenseRequired.tsx
+3 -2
View File
@@ -4,7 +4,8 @@ import React, { AriaRole, ComponentType, Fragment } from "react";
import { APP_NAME, CONSOLE_URL, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen, Icon } from "@calcom/ui";
import { EmptyScreen } from "@calcom/ui";
import { FiAlertTriangle } from "@calcom/ui/components/icon";
type LicenseRequiredProps = {
as?: keyof JSX.IntrinsicElements | "";
@@ -25,7 +26,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
children
) : (
<EmptyScreen
Icon={Icon.FiAlertTriangle}
Icon={FiAlertTriangle}
headline={t("enterprise_license")}
description={
<div
packages/features/ee/payments/components/PaymentPage.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
import { localStorage } from "@calcom/lib/webstorage";
import { Icon } from "@calcom/ui";
import { FiCreditCard } from "@calcom/ui/components/icon";
import type { PaymentPageProps } from "../pages/payment";
import PaymentComponent from "./Payment";
@@ -79,7 +79,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<Icon.FiCreditCard className="h-8 w-8 text-green-600" />
<FiCreditCard className="h-8 w-8 text-green-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
packages/features/ee/sso/components/SAMLConfiguration.tsx
+5 -5
View File
@@ -13,12 +13,12 @@ import {
Dialog,
DialogContent,
DialogTrigger,
Icon,
Label,
Meta,
showToast,
AppSkeletonLoader as SkeletonLoader,
} from "@calcom/ui";
import { ClipboardCopyIcon, FiDatabase, FiTrash2 } from "@calcom/ui/components/icon";
export default function SAMLConfiguration({ teamId }: { teamId: number | null }) {
const { t } = useLocale();
@@ -90,7 +90,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
<div>
<Button
color="secondary"
StartIcon={Icon.FiDatabase}
StartIcon={FiDatabase}
onClick={() => {
setConfigModal(true);
}}>
@@ -122,7 +122,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
}}
type="button"
className="px-4 text-base">
<Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
<ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
{t("copy")}
</Button>
</div>
@@ -142,7 +142,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
}}
type="button"
className="px-4 text-base">
<Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
<ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
{t("copy")}
</Button>
</div>
@@ -157,7 +157,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
<div className="mb-3 text-base font-semibold">{t("danger_zone")}</div>
<Dialog>
<DialogTrigger asChild>
<Button color="destructive" className="border" StartIcon={Icon.FiTrash2}>
<Button color="destructive" className="border" StartIcon={FiTrash2}>
{t("delete_saml_configuration")}
</Button>
</DialogTrigger>
packages/features/ee/support/components/HelpMenuItem.tsx
+5 -4
View File
@@ -4,7 +4,8 @@ import { useChat } from "react-live-chat-loader";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Icon, showToast } from "@calcom/ui";
import { Button, showToast } from "@calcom/ui";
import { FiExternalLink, FiAlertTriangle } from "@calcom/ui/components/icon";
import ContactMenuItem from "./ContactMenuItem";
@@ -48,7 +49,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
rel="noreferrer">
{t("support_documentation")}
<Icon.FiExternalLink
<FiExternalLink
className={classNames(
"text-gray-400 group-hover:text-gray-500",
"ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
@@ -62,7 +63,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
rel="noreferrer">
{t("developer_documentation")}
<Icon.FiExternalLink
<FiExternalLink
className={classNames(
"text-gray-400 group-hover:text-gray-500",
"ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
@@ -186,7 +187,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
{mutation.isError && (
<div className="mb-4 flex bg-red-100 p-4 text-sm text-red-700">
<div className="flex-shrink-0">
<Icon.FiAlertTriangle className="h-5 w-5" />
<FiAlertTriangle className="h-5 w-5" />
</div>
<div className="ml-3 flex-grow">
<p className="font-medium">{t("feedback_error")}</p>
packages/features/ee/teams/components/AddNewTeamMembers.tsx
+5 -4
View File
@@ -8,7 +8,8 @@ import { classNames } from "@calcom/lib";
import { WEBAPP_URL, APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Avatar, Badge, Button, Icon, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { Avatar, Badge, Button, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { FiPlus, FiArrowRight, FiTrash2 } from "@calcom/ui/components/icon";
const querySchema = z.object({
id: z.string().transform((val) => parseInt(val)),
@@ -70,7 +71,7 @@ export const AddNewTeamMembersForm = ({
<Button
color="secondary"
data-testid="new-member-button"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
onClick={() => setMemberInviteModal(true)}
className="mt-6 w-full justify-center">
{t("add_team_member")}
@@ -92,7 +93,7 @@ export const AddNewTeamMembersForm = ({
/>
<hr className="my-6 border-neutral-200" />
<Button
EndIcon={Icon.FiArrowRight}
EndIcon={FiArrowRight}
className="mt-6 w-full justify-center"
disabled={publishTeamMutation.isLoading}
onClick={() => {
@@ -169,7 +170,7 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
{member.role !== "OWNER" && (
<Button
data-testid="remove-member-button"
StartIcon={Icon.FiTrash2}
StartIcon={FiTrash2}
variant="icon"
color="secondary"
className="h-[36px] w-[36px]"
packages/features/ee/teams/components/CreateANewTeamForm.tsx
+3 -2
View File
@@ -6,7 +6,8 @@ import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import slugify from "@calcom/lib/slugify";
import { trpc } from "@calcom/trpc/react";
import { Avatar, Button, Form, Icon, ImageUploader, TextField } from "@calcom/ui";
import { Avatar, Button, Form, ImageUploader, TextField } from "@calcom/ui";
import { FiArrowRight } from "@calcom/ui/components/icon";
import { NewTeamFormValues } from "../lib/types";
@@ -140,7 +141,7 @@ export const CreateANewTeamForm = () => {
disabled={createTeamMutation.isLoading}
color="primary"
type="submit"
EndIcon={Icon.FiArrowRight}
EndIcon={FiArrowRight}
className="w-full justify-center">
{t("continue")}
</Button>
packages/features/ee/teams/components/MemberListItem.tsx
+19 -12
View File
@@ -22,10 +22,17 @@ import {
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
Icon,
showToast,
Tooltip,
} from "@calcom/ui";
import {
FiClock,
FiExternalLink,
FiMoreHorizontal,
FiEdit2,
FiLock,
FiTrash,
} from "@calcom/ui/components/icon";
import MemberChangeRoleModal from "./MemberChangeRoleModal";
import TeamPill, { TeamRole } from "./TeamPill";
@@ -134,7 +141,7 @@ export default function MemberListItem(props: Props) {
onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
color="secondary"
variant="icon"
StartIcon={Icon.FiClock}
StartIcon={FiClock}
/>
</Tooltip>
<Tooltip content={t("view_public_page")}>
@@ -144,7 +151,7 @@ export default function MemberListItem(props: Props) {
color="secondary"
className={classNames(!editMode ? "rounded-r-md" : "")}
variant="icon"
StartIcon={Icon.FiExternalLink}
StartIcon={FiExternalLink}
/>
</Tooltip>
{editMode && (
@@ -154,7 +161,7 @@ export default function MemberListItem(props: Props) {
className="radix-state-open:rounded-r-md"
color="secondary"
variant="icon"
StartIcon={Icon.FiMoreHorizontal}
StartIcon={FiMoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
@@ -162,7 +169,7 @@ export default function MemberListItem(props: Props) {
<DropdownItem
type="button"
onClick={() => setShowChangeMemberRoleModal(true)}
StartIcon={Icon.FiEdit2}>
StartIcon={FiEdit2}>
{t("edit")}
</DropdownItem>
</DropdownMenuItem>
@@ -172,7 +179,7 @@ export default function MemberListItem(props: Props) {
<DropdownItem
type="button"
onClick={() => setShowImpersonateModal(true)}
StartIcon={Icon.FiLock}>
StartIcon={FiLock}>
{t("impersonate")}
</DropdownItem>
</DropdownMenuItem>
@@ -184,7 +191,7 @@ export default function MemberListItem(props: Props) {
type="button"
onClick={() => setShowDeleteModal(true)}
color="destructive"
StartIcon={Icon.FiTrash}>
StartIcon={FiTrash}>
{t("delete")}
</DropdownItem>
</DropdownMenuItem>
@@ -195,18 +202,18 @@ export default function MemberListItem(props: Props) {
<div className="flex md:hidden">
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" variant="icon" color="minimal" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" variant="icon" color="minimal" StartIcon={FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
{props.member.accepted && (
<DropdownMenuItem className="outline-none">
<DropdownItem type="button" StartIcon={Icon.FiClock}>
<DropdownItem type="button" StartIcon={FiClock}>
{t("team_view_user_availability")}
</DropdownItem>
</DropdownMenuItem>
)}
<DropdownMenuItem className="outline-none">
<DropdownItem type="button" StartIcon={Icon.FiExternalLink}>
<DropdownItem type="button" StartIcon={FiExternalLink}>
{t("view_public_page")}
</DropdownItem>
</DropdownMenuItem>
@@ -216,7 +223,7 @@ export default function MemberListItem(props: Props) {
<DropdownItem
type="button"
onClick={() => setShowChangeMemberRoleModal(true)}
StartIcon={Icon.FiEdit2}>
StartIcon={FiEdit2}>
{t("edit")}
</DropdownItem>
</DropdownMenuItem>
@@ -225,7 +232,7 @@ export default function MemberListItem(props: Props) {
type="button"
color="destructive"
onClick={() => setShowDeleteModal(true)}
StartIcon={Icon.FiTrash}>
StartIcon={FiTrash}>
{t("delete")}
</DropdownItem>
</DropdownMenuItem>
packages/features/ee/teams/components/TeamInviteListItem.tsx
+6 -10
View File
@@ -12,8 +12,8 @@ import {
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
Icon,
} from "@calcom/ui";
import { FiSlash, FiCheck, FiMoreHorizontal, FiX } from "@calcom/ui/components/icon";
interface Props {
team: {
@@ -93,7 +93,7 @@ export default function TeamInviteListItem(props: Props) {
variant="icon"
color="secondary"
onClick={declineInvite}
StartIcon={Icon.FiSlash}
StartIcon={FiSlash}
/>
<Button
type="button"
@@ -101,26 +101,22 @@ export default function TeamInviteListItem(props: Props) {
variant="icon"
color="secondary"
onClick={acceptInvite}
StartIcon={Icon.FiCheck}
StartIcon={FiCheck}
/>
</div>
<div className="block sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
<DropdownItem type="button" StartIcon={FiCheck} onClick={acceptInvite}>
{t("accept")}
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<DropdownItem
color="destructive"
type="button"
StartIcon={Icon.FiX}
onClick={declineInvite}>
<DropdownItem color="destructive" type="button" StartIcon={FiX} onClick={declineInvite}>
{t("reject")}
</DropdownItem>
</DropdownMenuItem>
packages/features/ee/teams/components/TeamListItem.tsx
+23 -16
View File
@@ -21,10 +21,21 @@ import {
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
Icon,
showToast,
Tooltip,
} from "@calcom/ui";
import {
FiMoreHorizontal,
FiCheck,
FiX,
FiLink,
FiEdit2,
FiExternalLink,
FiTrash,
FiLogOut,
FiGlobe,
FiSend,
} from "@calcom/ui/components/icon";
import { TeamRole } from "./TeamPill";
@@ -144,20 +155,16 @@ export default function TeamListItem(props: Props) {
<div className="block sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
<DropdownItem type="button" StartIcon={FiCheck} onClick={acceptInvite}>
{t("accept")}
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<DropdownItem
color="destructive"
type="button"
StartIcon={Icon.FiX}
onClick={declineInvite}>
<DropdownItem color="destructive" type="button" StartIcon={FiX} onClick={declineInvite}>
{t("reject")}
</DropdownItem>
</DropdownMenuItem>
@@ -180,7 +187,7 @@ export default function TeamListItem(props: Props) {
showToast(t("link_copied"), "success");
}}
variant="icon"
StartIcon={Icon.FiLink}
StartIcon={FiLink}
/>
</Tooltip>
)}
@@ -191,7 +198,7 @@ export default function TeamListItem(props: Props) {
type="button"
color="secondary"
variant="icon"
StartIcon={Icon.FiMoreHorizontal}
StartIcon={FiMoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuContent hidden={hideDropdown}>
@@ -200,7 +207,7 @@ export default function TeamListItem(props: Props) {
<DropdownItem
type="button"
href={"/settings/teams/" + team.id + "/profile"}
StartIcon={Icon.FiEdit2}>
StartIcon={FiEdit2}>
{t("edit_team") as string}
</DropdownItem>
</DropdownMenuItem>
@@ -212,7 +219,7 @@ export default function TeamListItem(props: Props) {
type="button"
target="_blank"
href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}`}
StartIcon={Icon.FiExternalLink}>
StartIcon={FiExternalLink}>
{t("preview_team") as string}
</DropdownItem>
</DropdownMenuItem>
@@ -223,7 +230,7 @@ export default function TeamListItem(props: Props) {
onClick={() => {
setOpenMemberInvitationModal(true);
}}
StartIcon={Icon.FiSend}>
StartIcon={FiSend}>
{t("invite_team_member") as string}
</DropdownItem>
</DropdownMenuItem>
@@ -235,7 +242,7 @@ export default function TeamListItem(props: Props) {
<DropdownItem
color="destructive"
type="button"
StartIcon={Icon.FiTrash}
StartIcon={FiTrash}
onClick={(e) => {
e.stopPropagation();
}}>
@@ -264,7 +271,7 @@ export default function TeamListItem(props: Props) {
type="button"
color="destructive"
size="lg"
StartIcon={Icon.FiLogOut}
StartIcon={FiLogOut}
className="w-full rounded-none"
onClick={(e) => {
e.stopPropagation();
@@ -312,7 +319,7 @@ const TeamPublishButton = ({ teamId }: { teamId: number }) => {
onClick={() => {
publishTeamMutation.mutate({ teamId });
}}
StartIcon={Icon.FiGlobe}>
StartIcon={FiGlobe}>
{t("team_publish")}
</DropdownItem>
</DropdownMenuItem>
packages/features/ee/teams/components/TeamsListing.tsx
+8 -7
View File
@@ -4,7 +4,8 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Alert, Button, ButtonGroup, Icon } from "@calcom/ui";
import { Alert, Button, ButtonGroup } from "@calcom/ui";
import { FiUsers, FiRefreshCcw, FiUserPlus, FiMail, FiVideo, FiEyeOff } from "@calcom/ui/components/icon";
import { UpgradeTip } from "../../../tips";
import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
@@ -24,32 +25,32 @@ export function TeamsListing() {
const features = [
{
icon: <Icon.FiUsers className="h-5 w-5 text-red-500" />,
icon: <FiUsers className="h-5 w-5 text-red-500" />,
title: t("collective_scheduling"),
description: t("make_it_easy_to_book"),
},
{
icon: <Icon.FiRefreshCcw className="h-5 w-5 text-blue-500" />,
icon: <FiRefreshCcw className="h-5 w-5 text-blue-500" />,
title: t("round_robin"),
description: t("find_the_best_person"),
},
{
icon: <Icon.FiUserPlus className="h-5 w-5 text-green-500" />,
icon: <FiUserPlus className="h-5 w-5 text-green-500" />,
title: t("fixed_round_robin"),
description: t("add_one_fixed_attendee"),
},
{
icon: <Icon.FiMail className="h-5 w-5 text-orange-500" />,
icon: <FiMail className="h-5 w-5 text-orange-500" />,
title: t("sms_attendee_action"),
description: t("make_it_easy_to_book"),
},
{
icon: <Icon.FiVideo className="h-5 w-5 text-purple-500" />,
icon: <FiVideo className="h-5 w-5 text-purple-500" />,
title: "Cal Video" + " " + t("recordings_title"),
description: t("upgrade_to_access_recordings_description"),
},
{
icon: <Icon.FiEyeOff className="h-5 w-5 text-indigo-500" />,
icon: <FiEyeOff className="h-5 w-5 text-indigo-500" />,
title: t("disable_cal_branding", { appName: APP_NAME }),
description: t("disable_cal_branding_description", { appName: APP_NAME }),
},
packages/features/ee/teams/pages/team-billing-view.tsx
+3 -2
View File
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon, Meta } from "@calcom/ui";
import { Button, Meta } from "@calcom/ui";
import { FiExternalLink } from "@calcom/ui/components/icon";
import { getLayout } from "../../../settings/layouts/SettingsLayout";
@@ -20,7 +21,7 @@ const BillingView = () => {
<p>{t("billing_manage_details_description")}</p>
</div>
<div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">
<Button color="primary" href={billingHref} target="_blank" EndIcon={Icon.FiExternalLink}>
<Button color="primary" href={billingHref} target="_blank" EndIcon={FiExternalLink}>
{t("billing_portal")}
</Button>
</div>
packages/features/ee/teams/pages/team-members-view.tsx
+3 -2
View File
@@ -5,7 +5,8 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Icon, Meta, showToast } from "@calcom/ui";
import { Button, Meta, showToast } from "@calcom/ui";
import { FiPlus } from "@calcom/ui/components/icon";
import { getLayout } from "../../../settings/layouts/SettingsLayout";
import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
@@ -55,7 +56,7 @@ const MembersView = () => {
<Button
type="button"
color="primary"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
className="ml-auto"
onClick={() => setShowMemberInvitationModal(true)}
data-testid="new-member-button">
packages/features/ee/teams/pages/team-profile-view.tsx
+5 -5
View File
@@ -19,7 +19,6 @@ import {
Dialog,
DialogTrigger,
Form,
Icon,
ImageUploader,
Label,
LinkIconButton,
@@ -28,6 +27,7 @@ import {
TextArea,
TextField,
} from "@calcom/ui";
import { FiExternalLink, FiLink, FiTrash2, FiLogOut } from "@calcom/ui/components/icon";
import { getLayout } from "../../../settings/layouts/SettingsLayout";
@@ -264,10 +264,10 @@ const ProfileView = () => {
</div>
<div className="">
<Link href={permalink} passHref={true} target="_blank">
<LinkIconButton Icon={Icon.FiExternalLink}>{t("preview")}</LinkIconButton>
<LinkIconButton Icon={FiExternalLink}>{t("preview")}</LinkIconButton>
</Link>
<LinkIconButton
Icon={Icon.FiLink}
Icon={FiLink}
onClick={() => {
navigator.clipboard.writeText(permalink);
showToast("Copied to clipboard", "success");
@@ -283,7 +283,7 @@ const ProfileView = () => {
{team?.membership.role === "OWNER" ? (
<Dialog>
<DialogTrigger asChild>
<Button color="destructive" className="border" StartIcon={Icon.FiTrash2}>
<Button color="destructive" className="border" StartIcon={FiTrash2}>
{t("disband_team")}
</Button>
</DialogTrigger>
@@ -298,7 +298,7 @@ const ProfileView = () => {
) : (
<Dialog>
<DialogTrigger asChild>
<Button color="destructive" className="border" StartIcon={Icon.FiLogOut}>
<Button color="destructive" className="border" StartIcon={FiLogOut}>
{t("leave_team")}
</Button>
</DialogTrigger>
packages/features/ee/video/ViewRecordingsDialog.tsx
+3 -2
View File
@@ -15,7 +15,8 @@ import {
DialogHeader,
UpgradeTeamsBadge,
} from "@calcom/ui";
import { Button, showToast, Icon } from "@calcom/ui";
import { Button, showToast } from "@calcom/ui";
import { FiDownload } from "@calcom/ui/components/icon";
import RecordingListSkeleton from "./components/RecordingListSkeleton";
@@ -128,7 +129,7 @@ export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => {
</div>
{hasTeamPlan ? (
<Button
StartIcon={Icon.FiDownload}
StartIcon={FiDownload}
className="ml-4 lg:ml-0"
loading={downloadingRecordingId === recording.id}
onClick={() => handleDownloadClick(recording.id)}>
packages/features/ee/video/components/UpgradeRecordingBanner.tsx
+3 -2
View File
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon, Button } from "@calcom/ui";
import { Button } from "@calcom/ui";
import { FiUsers } from "@calcom/ui/components/icon";
export default function UpgradeRecordingBanner() {
const { t } = useLocale();
@@ -10,7 +11,7 @@ export default function UpgradeRecordingBanner() {
return (
<div className="flex items-start gap-2 rounded-md bg-gray-100 p-4">
<Icon.FiUsers className="dark:bg-gray-90 inline-block h-5 w-5" />
<FiUsers className="dark:bg-gray-90 inline-block h-5 w-5" />
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold">{t("upgrade_to_access_recordings_title")}</h2>
packages/features/ee/workflows/components/EmptyScreen.tsx
+9 -8
View File
@@ -2,7 +2,8 @@ import React from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SVGComponent } from "@calcom/types/SVGComponent";
import { Button, Icon } from "@calcom/ui";
import { Button } from "@calcom/ui";
import { FiSmartphone, FiMail, FiPlus } from "@calcom/ui/components/icon";
type WorkflowExampleType = {
Icon: SVGComponent;
@@ -50,12 +51,12 @@ export default function EmptyScreen({
const { t } = useLocale();
const workflowsExamples = [
{ icon: Icon.FiSmartphone, text: t("workflow_example_1") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_2") },
{ icon: Icon.FiMail, text: t("workflow_example_3") },
{ icon: Icon.FiMail, text: t("workflow_example_4") },
{ icon: Icon.FiMail, text: t("workflow_example_5") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_6") },
{ icon: FiSmartphone, text: t("workflow_example_1") },
{ icon: FiSmartphone, text: t("workflow_example_2") },
{ icon: FiMail, text: t("workflow_example_3") },
{ icon: FiMail, text: t("workflow_example_4") },
{ icon: FiMail, text: t("workflow_example_5") },
{ icon: FiSmartphone, text: t("workflow_example_6") },
];
// new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (FiSmile icon),
@@ -73,7 +74,7 @@ export default function EmptyScreen({
{buttonOnClick && buttonText && (
<Button
type="button"
StartIcon={Icon.FiPlus}
StartIcon={FiPlus}
onClick={(e) => buttonOnClick(e)}
loading={isLoading}
className="mx-auto mt-8">

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