vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.1k Packages Projects Releases Wiki Activity

chore: icon cleanup (#13770)

Browse Source 
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
This commit is contained in:
Omar López
2024-04-03 23:23:57 +00:00
committed by GitHub
co-authored by Joe Au-Yeung sean-brydon
parent 7421cea0da
commit 3f02de8214
294 changed files with 3161 additions and 1715 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+1
View File
@@ -4,3 +4,4 @@ node_modules
**/**/public
packages/prisma/zod
apps/web/public/embed
packages/ui/components/icon/dynamicIconImports.tsx
.prettierignore
+1
View File
@@ -17,3 +17,4 @@ packages/prisma/zod
packages/prisma/enums
apps/web/public/embed
apps/api/v2/swagger/documentation.json
packages/ui/components/icon/dynamicIconImports.tsx
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 { X } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
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>
<X className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
<Icon name="x" className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
</button>
</div>
</div>
apps/web/components/AppListCard.tsx
+2 -3
View File
@@ -9,8 +9,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
import { Badge, ListItemText, Avatar } from "@calcom/ui";
import { AlertCircle } from "@calcom/ui/components/icon";
import { Avatar, Badge, Icon, ListItemText } from "@calcom/ui";
type ShouldHighlight =
| {
@@ -105,7 +104,7 @@ export default function AppListCard(props: AppListCardProps) {
<ListItemText component="p">{description}</ListItemText>
{invalidCredential && (
<div className="flex gap-x-2 pt-2">
<AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
<Icon name="circle-alert" className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
<ListItemText component="p" className="whitespace-pre-wrap text-red-500">
{t("invalid_credential")}
</ListItemText>
apps/web/components/EnterprisePage.tsx
+7 -8
View File
@@ -3,40 +3,39 @@
import { ShellMain } from "@calcom/features/shell/Shell";
import { UpgradeTip } from "@calcom/features/tips";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, ButtonGroup } from "@calcom/ui";
import { BarChart, CreditCard, Globe, Lock, Paintbrush, Users } from "@calcom/ui/components/icon";
import { Button, ButtonGroup, Icon } from "@calcom/ui";
export default function EnterprisePage() {
const { t } = useLocale();
const features = [
{
icon: <Globe className="h-5 w-5 text-red-500" />,
icon: <Icon name="globe" className="h-5 w-5 text-red-500" />,
title: t("branded_subdomain"),
description: t("branded_subdomain_description"),
},
{
icon: <BarChart className="h-5 w-5 text-blue-500" />,
icon: <Icon name="bar-chart" className="h-5 w-5 text-blue-500" />,
title: t("org_insights"),
description: t("org_insights_description"),
},
{
icon: <Paintbrush className="h-5 w-5 text-pink-500" />,
icon: <Icon name="paintbrush" className="h-5 w-5 text-pink-500" />,
title: t("extensive_whitelabeling"),
description: t("extensive_whitelabeling_description"),
},
{
icon: <Users className="h-5 w-5 text-orange-500" />,
icon: <Icon name="users" className="h-5 w-5 text-orange-500" />,
title: t("unlimited_teams"),
description: t("unlimited_teams_description"),
},
{
icon: <CreditCard className="h-5 w-5 text-green-500" />,
icon: <Icon name="credit-card" className="h-5 w-5 text-green-500" />,
title: t("unified_billing"),
description: t("unified_billing_description"),
},
{
icon: <Lock className="h-5 w-5 text-purple-500" />,
icon: <Icon name="lock" className="h-5 w-5 text-purple-500" />,
title: t("advanced_managed_events"),
description: t("advanced_managed_events_description"),
},
apps/web/components/apps/AdditionalCalendarSelector.tsx
+5 -6
View File
@@ -6,12 +6,11 @@ import { trpc } from "@calcom/trpc/react";
import {
Button,
Dropdown,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuItem,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui";
import { Plus } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -42,7 +41,7 @@ const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorPro
return (
<Dropdown modal={false}>
<DropdownMenuTrigger asChild>
<Button StartIcon={Plus} color="secondary" {...(isPending && { loading: isPending })}>
<Button StartIcon="plus" color="secondary" {...(isPending && { loading: isPending })}>
{t("add")}
</Button>
</DropdownMenuTrigger>
@@ -50,7 +49,7 @@ const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorPro
{options.map((data) => (
<DropdownMenuItem key={data.slug} className="focus:outline-none">
{data.slug === "add-new" ? (
<DropdownItem StartIcon={Plus} color="minimal" href="/apps/categories/calendar">
<DropdownItem StartIcon="plus" color="minimal" href="/apps/categories/calendar">
{t("install_new_calendar_app")}
</DropdownItem>
) : (
apps/web/components/apps/AppList.tsx
+6 -7
View File
@@ -11,17 +11,16 @@ import type { AppCategories } from "@calcom/prisma/enums";
import { trpc, type RouterOutputs } from "@calcom/trpc";
import type { App } from "@calcom/types/App";
import {
Alert,
Button,
Dropdown,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
List,
showToast,
Button,
DropdownMenuItem,
Alert,
} from "@calcom/ui";
import { MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
import AppListCard from "@components/AppListCard";
@@ -82,7 +81,7 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
<div className="flex justify-end">
<Dropdown modal={false}>
<DropdownMenuTrigger asChild>
<Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
<Button StartIcon="ellipsis" variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent>
{!appIsDefault && variant === "conferencing" && !item.credentialOwner?.teamId && (
@@ -90,7 +89,7 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
<DropdownItem
type="button"
color="secondary"
StartIcon={Video}
StartIcon="video"
onClick={() => {
const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
if (locationType?.linkType === "static") {
@@ -214,7 +213,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
color="destructive"
onClick={() => handleDisconnect(credentialId, teamId)}
disabled={isGlobal}
StartIcon={Trash}>
StartIcon="trash">
{t("remove_app")}
</DropdownItem>
</DropdownMenuItem>
apps/web/components/apps/AppPage.tsx
+9 -10
View File
@@ -1,6 +1,6 @@
import Link from "next/link";
import type { IframeHTMLAttributes } from "react";
import React, { useState, useEffect } from "react";
import React, { useEffect, useState } from "react";
import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
@@ -10,8 +10,7 @@ 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 type { App as AppType } from "@calcom/types/App";
import { Badge, Button, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";
import { Badge, Button, Icon, SkeletonButton, SkeletonText, showToast } from "@calcom/ui";
import { InstallAppButtonChild } from "./InstallAppButtonChild";
@@ -196,7 +195,7 @@ export const AppPage = ({
isGlobal ||
(existingCredentials.length > 0 && allowedMultipleInstalls ? (
<div className="flex space-x-3">
<Button StartIcon={Check} color="secondary" disabled>
<Button StartIcon="check" color="secondary" disabled>
{existingCredentials.length > 0
? t("active_install", { count: existingCredentials.length })
: t("default")}
@@ -323,7 +322,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis text-sm font-normal no-underline hover:underline"
href={docs}>
<BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
<Icon name="book-open" className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
{t("documentation")}
</a>
</li>
@@ -335,7 +334,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={website}>
<ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<Icon name="external-link" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{website.replace("https://", "")}
</a>
</li>
@@ -347,7 +346,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={`mailto:${email}`}>
<Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<Icon name="mail" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{email}
</a>
@@ -360,7 +359,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={tos}>
<File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<Icon name="file" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{t("terms_of_service")}
</a>
</li>
@@ -372,7 +371,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={privacy}>
<Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<Icon name="shield" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{t("privacy_policy")}
</a>
</li>
@@ -383,7 +382,7 @@ export const AppPage = ({
{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}`}>
<Flag className="inline h-3 w-3" /> {t("report_app")}
<Icon name="flag" className="inline h-3 w-3" /> {t("report_app")}
</a>
</div>
</div>
apps/web/components/apps/CalendarListContainer.tsx
+4 -5
View File
@@ -11,13 +11,12 @@ import {
Alert,
Button,
EmptyScreen,
List,
AppSkeletonLoader as SkeletonLoader,
ShellSubHeading,
Label,
List,
ShellSubHeading,
AppSkeletonLoader as SkeletonLoader,
showToast,
} from "@calcom/ui";
import { Calendar } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -267,7 +266,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
</>
) : (
<EmptyScreen
Icon={Calendar}
Icon="calendar"
headline={t("no_category_apps", {
category: t("calendar").toLowerCase(),
})}
apps/web/components/apps/InstallAppButtonChild.tsx
+2 -3
View File
@@ -122,14 +122,13 @@ export const InstallAppButtonChild = ({
data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
key={team.id}
disabled={isInstalled}
StartIcon={(props: { className?: string }) => (
CustomStartIcon={
<Avatar
alt={team.logo || ""}
imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
size="sm"
{...props}
/>
)}
}
onClick={() => {
mutation.mutate(
team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
apps/web/components/apps/layouts/AppsLayout.tsx
+1 -2
View File
@@ -6,7 +6,6 @@ import React from "react";
import { ShellMain } from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui";
import { AlertCircle } from "@calcom/ui/components/icon";
type AppsLayoutProps = {
children: React.ReactNode;
@@ -27,7 +26,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
<main className="w-full">
{emptyStore ? (
<EmptyScreen
Icon={AlertCircle}
Icon="circle-alert"
headline={isAdmin ? t("no_apps") : t("no_apps_configured")}
description={isAdmin ? t("enable_in_settings") : t("please_contact_admin")}
buttonText={isAdmin ? t("apps_settings") : ""}
apps/web/components/availability/SkeletonLoader.tsx
+1 -4
View File
@@ -1,7 +1,4 @@
import React from "react";
import { Button, SkeletonText } from "@calcom/ui";
import { MoreHorizontal } from "@calcom/ui/components/icon";
import classNames from "@lib/classNames";
@@ -31,7 +28,7 @@ function SkeletonItem() {
type="button"
variant="icon"
color="secondary"
StartIcon={MoreHorizontal}
StartIcon="ellipsis"
disabled
/>
</div>
apps/web/components/booking/BookingListItem.tsx
+11 -10
View File
@@ -29,13 +29,13 @@ import {
DialogClose,
DialogContent,
DialogFooter,
Icon,
MeetingTimeInTimezones,
showToast,
TableActions,
TextAreaField,
Tooltip,
} from "@calcom/ui";
import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon";
import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -138,7 +138,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setRejectionDialogIsOpen(true);
},
icon: Ban,
icon: "ban",
disabled: mutation.isPending,
},
// For bookings with payment, only confirm if the booking is paid for
@@ -152,7 +152,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
bookingConfirm(true);
},
icon: Check,
icon: "check" as const,
disabled: mutation.isPending,
},
]
@@ -169,7 +169,7 @@ function BookingListItem(booking: BookingItemProps) {
isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
}${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
`,
icon: X,
icon: "x" as const,
},
{
id: "edit_booking",
@@ -177,7 +177,7 @@ function BookingListItem(booking: BookingItemProps) {
actions: [
{
id: "reschedule",
icon: Clock,
icon: "clock" as const,
label: t("reschedule_booking"),
href: `${bookerUrl}/reschedule/${booking.uid}${
booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@@ -185,7 +185,7 @@ function BookingListItem(booking: BookingItemProps) {
},
{
id: "reschedule_request",
icon: Send,
icon: "send" as const,
iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
label: t("send_reschedule_request"),
onClick: () => {
@@ -198,7 +198,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setIsOpenLocationDialog(true);
},
icon: MapPin,
icon: "map-pin" as const,
},
],
},
@@ -212,7 +212,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setChargeCardDialogIsOpen(true);
},
icon: CreditCard,
icon: "credit-card" as const,
},
];
@@ -226,7 +226,7 @@ function BookingListItem(booking: BookingItemProps) {
const RequestSentMessage = () => {
return (
<Badge startIcon={Send} size="md" variant="gray" data-testid="request_reschedule_sent">
<Badge startIcon="send" size="md" variant="gray" data-testid="request_reschedule_sent">
{t("reschedule_request_sent")}
</Badge>
);
@@ -599,7 +599,8 @@ const RecurringBookingsTooltip = ({
);
})}>
<div className="text-default">
<RefreshCcw
<Icon
name="refresh-ccw"
strokeWidth="3"
className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
/>
apps/web/components/booking/CancelBooking.tsx
+2 -3
View File
@@ -5,8 +5,7 @@ import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import type { RecurringEvent } from "@calcom/types/Calendar";
import { Button, TextArea } from "@calcom/ui";
import { X } from "@calcom/ui/components/icon";
import { Button, Icon, TextArea } from "@calcom/ui";
type Props = {
booking: {
@@ -57,7 +56,7 @@ export default function CancelBooking(props: Props) {
{error && (
<div className="mt-8">
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<X className="h-6 w-6 text-red-600" />
<Icon name="x" className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
apps/web/components/dialog/ChargeCardDialog.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { useState } from "react";
import type { Dispatch, SetStateAction } from "react";
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
@@ -10,9 +10,9 @@ import {
DialogContent,
DialogFooter,
DialogHeader,
Icon,
showToast,
} from "@calcom/ui";
import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
interface IRescheduleDialog {
isOpenDialog: boolean;
@@ -48,7 +48,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
<DialogContent>
<div className="flex flex-row space-x-3">
<div className=" bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
<CreditCard className="m-auto h-6 w-6" />
<Icon name="credit-card" className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("charge_card")} />
@@ -56,7 +56,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
{chargeError && (
<div className="mt-4 flex text-red-500">
<AlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
<Icon name="triangle-alert" className="mr-2 h-5 w-5 " aria-hidden="true" />
<p className="text-sm">{t("error_charging_card")}</p>
</div>
)}
apps/web/components/dialog/EditLocationDialog.tsx
+2 -4
View File
@@ -18,9 +18,7 @@ import {
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Input } from "@calcom/ui";
import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
import { MapPin } from "@calcom/ui/components/icon";
import { Button, Icon, Input, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
import { QueryCell } from "@lib/QueryCell";
@@ -237,7 +235,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<MapPin className="text-emphasis h-6 w-6" />
<Icon name="map-pin" className="text-emphasis 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
@@ -10,10 +10,10 @@ import {
DialogContent,
DialogFooter,
DialogHeader,
Icon,
showToast,
TextArea,
} from "@calcom/ui";
import { Clock } from "@calcom/ui/components/icon";
interface IRescheduleDialog {
isOpenDialog: boolean;
@@ -44,7 +44,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
<DialogContent enableOverflow>
<div className="flex flex-row space-x-3">
<div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
<Clock className="m-auto h-6 w-6" />
<Icon name="clock" className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("send_reschedule_request")} />
apps/web/components/eventtype/AIEventController.tsx
+1 -2
View File
@@ -21,7 +21,6 @@ import {
PhoneInput,
showToast,
} from "@calcom/ui";
import { Sparkles } from "@calcom/ui/components/icon";
type AIEventControllerProps = {
eventType: EventTypeSetup;
@@ -44,7 +43,7 @@ export default function AIEventController({ eventType, isTeamEvent }: AIEventCon
{!isOrg || !isTeamEvent ? (
<EmptyScreen
headline={t("Cal.ai")}
Icon={Sparkles}
Icon="sparkles"
description={t("upgrade_to_cal_ai_phone_number_description")}
buttonRaw={<Button href="/enterprise">{t("upgrade")}</Button>}
/>
apps/web/components/eventtype/EventAdvancedTab.tsx
+9 -7
View File
@@ -1,4 +1,3 @@
import { InfoIcon } from "lucide-react";
import dynamic from "next/dynamic";
import type { EventTypeSetupProps } from "pages/event-types/[type]";
import { useEffect, useState } from "react";
@@ -30,15 +29,15 @@ import {
Button,
Badge,
CheckboxField,
Icon,
Label,
SelectField,
SettingsToggle,
showToast,
Switch,
TextField,
Tooltip,
showToast,
} from "@calcom/ui";
import { Copy, Edit, Info } from "@calcom/ui/components/icon";
import RequiresConfirmationController from "./RequiresConfirmationController";
@@ -180,7 +179,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
aria-label="edit custom name"
className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
onClick={() => setShowEventNameTip((old) => !old)}>
<Edit className="h-4 w-4" />
<Icon name="pencil" className="h-4 w-4" />
</Button>
}
/>
@@ -194,7 +193,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
label={
<>
{t("display_add_to_calendar_organizer")}
<InfoIcon className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md" />
<Icon
name="info"
className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md"
/>
</>
}
checked={useEventTypeDestinationCalendarEmail}
@@ -348,7 +350,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
target="_blank"
rel="noreferrer"
href="https://cal.com/docs/core-features/event-types/single-use-private-links">
<Info className="ml-1.5 h-4 w-4 cursor-pointer" />
<Icon name="info" className="ml-1.5 h-4 w-4 cursor-pointer" />
</a>
}
{...shouldLockDisableProps("hashedLink")}
@@ -389,7 +391,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
showToast(t("enabled_after_update_description"), "warning");
}
}}>
<Copy className="h-4 w-4" />
<Icon name="copy" className="h-4 w-4" />
</Button>
</Tooltip>
}
apps/web/components/eventtype/EventAppsTab.tsx
+3 -4
View File
@@ -11,8 +11,7 @@ import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hook
import type { FormValues } from "@calcom/features/eventtypes/lib/types";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, EmptyScreen, Alert } from "@calcom/ui";
import { Grid, Lock } from "@calcom/ui/components/icon";
import { Alert, Button, EmptyScreen } from "@calcom/ui";
export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
EventTypeAppCardComponentProps["eventType"];
@@ -161,12 +160,12 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
)}
{!isPending && !installedApps?.length ? (
<EmptyScreen
Icon={Grid}
Icon="grid-3x3"
headline={t("empty_installed_apps_headline")}
description={t("empty_installed_apps_description")}
buttonRaw={
appsDisableProps.disabled ? (
<Button StartIcon={Lock} color="secondary" disabled>
<Button StartIcon="lock" color="secondary" disabled>
{t("locked_by_team_admin")}
</Button>
) : (
apps/web/components/eventtype/EventAvailabilityTab.tsx
+3 -4
View File
@@ -13,8 +13,7 @@ import { weekdayNames } from "@calcom/lib/weekday";
import { SchedulingType } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
import { ExternalLink, Globe } from "@calcom/ui/components/icon";
import { Badge, Button, Icon, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
@@ -130,7 +129,7 @@ const EventTypeScheduleDetails = memo(
</div>
<div className="bg-muted border-subtle flex flex-col justify-center gap-2 rounded-b-md border p-6 sm:flex-row sm:justify-between">
<span className="text-default flex items-center justify-center text-sm sm:justify-start">
<Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
<Icon name="globe" className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
{schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
</span>
{!!schedule?.id && !schedule.isManaged && !schedule.readOnly && (
@@ -138,7 +137,7 @@ const EventTypeScheduleDetails = memo(
href={`/availability/${schedule.id}`}
disabled={isPending}
color="minimal"
EndIcon={ExternalLink}
EndIcon="external-link"
target="_blank"
rel="noopener noreferrer">
{t("edit_availability")}
apps/web/components/eventtype/EventLimitsTab.tsx
+2 -3
View File
@@ -18,7 +18,6 @@ import { ascendingLimitKeys, intervalLimitKeyToUnit } from "@calcom/lib/interval
import type { PeriodType } from "@calcom/prisma/enums";
import type { IntervalLimit } from "@calcom/types/Calendar";
import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
import { Plus, Trash2 } from "@calcom/ui/components/icon";
const MinimumBookingNoticeInput = React.forwardRef<
HTMLInputElement,
@@ -598,7 +597,7 @@ const IntervalLimitItem = ({
{hasDeleteButton && !disabled && (
<Button
variant="icon"
StartIcon={Trash2}
StartIcon="trash-2"
color="destructive"
className="border-none"
onClick={() => onDelete(limitKey)}
@@ -708,7 +707,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
);
})}
{currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && !disabled && (
<Button color="minimal" StartIcon={Plus} onClick={addLimit}>
<Button color="minimal" StartIcon="plus" onClick={addLimit}>
{t("add_limit")}
</Button>
)}
apps/web/components/eventtype/EventSetupTab.tsx
+5 -5
View File
@@ -23,6 +23,7 @@ import {
SettingsToggle,
Skeleton,
TextField,
Icon,
Editor,
SkeletonContainer,
SkeletonText,
@@ -31,7 +32,6 @@ import {
Button,
showToast,
} from "@calcom/ui";
import { Plus, X, Check, CornerDownRight } from "@calcom/ui/components/icon";
import CheckboxField from "@components/ui/form/CheckboxField";
import type { SingleValueLocationOption } from "@components/ui/form/LocationSelect";
@@ -313,7 +313,7 @@ export const EventSetupTab = (
onClick={() => remove(index)}
aria-label={t("remove")}>
<div className="h-4 w-4">
<X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
<Icon name="x" className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
</div>
</button>
)}
@@ -324,7 +324,7 @@ export const EventSetupTab = (
<div className="w-full">
<div className="flex gap-2">
<div className="flex items-center justify-center">
<CornerDownRight className="h-4 w-4" />
<Icon name="corner-down-right" className="h-4 w-4" />
</div>
<LocationInput
defaultValue={
@@ -414,7 +414,7 @@ export const EventSetupTab = (
) && (
<div className="text-default flex items-center text-sm">
<div className="mr-1.5 h-3 w-3">
<Check className="h-3 w-3" />
<Icon name="check" className="h-3 w-3" />
</div>
<Trans i18nKey="event_type_requres_google_cal">
<p>
@@ -442,7 +442,7 @@ export const EventSetupTab = (
<li>
<Button
data-testid="add-location"
StartIcon={Plus}
StartIcon="plus"
color="minimal"
onClick={() => setShowEmptyLocationSelect(true)}>
{t("add_location")}
apps/web/components/eventtype/EventTypeSingleLayout.tsx
+24 -41
View File
@@ -1,4 +1,3 @@
import { Webhook as TbWebhook } from "lucide-react";
import type { TFunction } from "next-i18next";
import { Trans } from "next-i18next";
import { useRouter } from "next/navigation";
@@ -15,7 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { HttpError } from "@calcom/lib/http-error";
import { SchedulingType } from "@calcom/prisma/enums";
import { trpc, TRPCClientError } from "@calcom/trpc/react";
import type { DialogProps } from "@calcom/ui";
import type { DialogProps, VerticalTabItemProps } from "@calcom/ui";
import {
Button,
ButtonGroup,
@@ -29,6 +28,7 @@ import {
DropdownMenuTrigger,
HorizontalTabs,
Label,
Icon,
showToast,
Skeleton,
Switch,
@@ -36,23 +36,6 @@ import {
VerticalDivider,
VerticalTabs,
} from "@calcom/ui";
import {
Link as LinkIcon,
Calendar,
Clock,
Sliders,
Repeat,
Grid,
Zap,
Sparkles,
Users,
ExternalLink,
Code,
Trash,
PhoneCall,
MoreHorizontal,
Loader,
} from "@calcom/ui/components/icon";
type Props = {
children: React.ReactNode;
@@ -97,41 +80,41 @@ function getNavigation({
{
name: "event_setup_tab_title",
href: `/event-types/${id}?tabName=setup`,
icon: LinkIcon,
icon: "link",
info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
},
{
name: "event_limit_tab_title",
href: `/event-types/${id}?tabName=limits`,
icon: Clock,
icon: "clock",
info: `event_limit_tab_description`,
},
{
name: "event_advanced_tab_title",
href: `/event-types/${id}?tabName=advanced`,
icon: Sliders,
icon: "sliders-vertical",
info: `event_advanced_tab_description`,
},
{
name: "recurring",
href: `/event-types/${id}?tabName=recurring`,
icon: Repeat,
icon: "repeat",
info: `recurring_event_tab_description`,
},
{
name: "apps",
href: `/event-types/${id}?tabName=apps`,
icon: Grid,
icon: "grid-3x3",
//TODO: Handle proper translation with count handling
info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
},
{
name: "workflows",
href: `/event-types/${id}?tabName=workflows`,
icon: Zap,
icon: "zap",
info: `${enabledWorkflowsNumber} ${t("active")}`,
},
];
] satisfies VerticalTabItemProps[];
}
function DeleteDialog({
@@ -228,7 +211,7 @@ function EventTypeSingleLayout({
const watchChildrenCount = formMethods.watch("children").length;
// Define tab navigation here
const EventTypeTabs = useMemo(() => {
const navigation = getNavigation({
const navigation: VerticalTabItemProps[] = getNavigation({
t,
length,
multipleDuration,
@@ -242,7 +225,7 @@ function EventTypeSingleLayout({
navigation.splice(1, 0, {
name: "availability",
href: `/event-types/${formMethods.getValues("id")}?tabName=availability`,
icon: Calendar,
icon: "calendar",
info:
isManagedEventType || isChildrenManagedEventType
? formMethods.getValues("schedule") === null
@@ -261,7 +244,7 @@ function EventTypeSingleLayout({
navigation.splice(2, 0, {
name: "assignment",
href: `/event-types/${formMethods.getValues("id")}?tabName=team`,
icon: Users,
icon: "users",
info: `${t(watchSchedulingType?.toLowerCase() ?? "")}${
isManagedEventType ? ` - ${t("number_member", { count: watchChildrenCount || 0 })}` : ""
}`,
@@ -273,14 +256,14 @@ function EventTypeSingleLayout({
navigation.push({
name: "instant_tab_title",
href: `/event-types/${eventType.id}?tabName=instant`,
icon: PhoneCall,
icon: "phone-call",
info: `instant_event_tab_description`,
});
}
navigation.push({
name: "webhooks",
href: `/event-types/${formMethods.getValues("id")}?tabName=webhooks`,
icon: TbWebhook,
icon: "webhook",
info: `${activeWebhooksNumber} ${t("active")}`,
});
}
@@ -289,7 +272,7 @@ function EventTypeSingleLayout({
navigation.push({
name: "Cal.ai",
href: `/event-types/${eventType.id}?tabName=ai`,
icon: Sparkles,
icon: "sparkles",
info: "cal_ai_event_tab_description", // todo `cal_ai_event_tab_description`,
});
}
@@ -378,14 +361,14 @@ function EventTypeSingleLayout({
variant="icon"
href={permalink}
rel="noreferrer"
StartIcon={ExternalLink}
StartIcon="external-link"
/>
</Tooltip>
<Button
color="secondary"
variant="icon"
StartIcon={LinkIcon}
StartIcon="link"
tooltip={t("copy_link")}
tooltipSide="bottom"
tooltipOffset={4}
@@ -396,7 +379,7 @@ function EventTypeSingleLayout({
/>
<EventTypeEmbedButton
embedUrl={encodeURIComponent(embedLink)}
StartIcon={Code}
StartIcon="code"
color="secondary"
variant="icon"
namespace=""
@@ -411,7 +394,7 @@ function EventTypeSingleLayout({
<Button
color="destructive"
variant="icon"
StartIcon={Trash}
StartIcon="trash"
tooltip={t("delete")}
tooltipSide="bottom"
tooltipOffset={4}
@@ -425,14 +408,14 @@ function EventTypeSingleLayout({
<Dropdown>
<DropdownMenuTrigger asChild>
<Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
<Button className="lg:hidden" StartIcon="ellipsis" variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent style={{ minWidth: "200px" }}>
<DropdownMenuItem className="focus:ring-muted">
<DropdownItem
target="_blank"
type="button"
StartIcon={ExternalLink}
StartIcon="external-link"
href={permalink}
rel="noreferrer">
{t("preview")}
@@ -441,7 +424,7 @@ function EventTypeSingleLayout({
<DropdownMenuItem className="focus:ring-muted">
<DropdownItem
type="button"
StartIcon={LinkIcon}
StartIcon="link"
onClick={() => {
navigator.clipboard.writeText(permalink);
showToast("Link copied!", "success");
@@ -453,7 +436,7 @@ function EventTypeSingleLayout({
<DropdownItem
type="button"
color="destructive"
StartIcon={Trash}
StartIcon="trash"
disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}>
{t("delete")}
@@ -489,7 +472,7 @@ function EventTypeSingleLayout({
</Button>
</div>
}>
<Suspense fallback={<Loader />}>
<Suspense fallback={<Icon name="loader" />}>
<div className="flex flex-col xl:flex-row xl:space-x-6">
<div className="hidden xl:block">
<VerticalTabs
apps/web/components/eventtype/EventWebhooksTab.tsx
+3 -5
View File
@@ -1,5 +1,4 @@
import type { Webhook } from "@prisma/client";
import { Webhook as TbWebhook } from "lucide-react";
import { Trans } from "next-i18next";
import Link from "next/link";
import type { EventTypeSetupProps } from "pages/event-types/[type]";
@@ -16,7 +15,6 @@ import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Alert, Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
import { Plus, Lock } from "@calcom/ui/components/icon";
export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
const { t } = useLocale();
@@ -92,7 +90,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
<Button
color="secondary"
data-testid="new_webhook"
StartIcon={Plus}
StartIcon="plus"
onClick={() => setCreateModalOpen(true)}>
{t("new_webhook")}
</Button>
@@ -160,12 +158,12 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
</>
) : (
<EmptyScreen
Icon={TbWebhook}
Icon="webhook"
headline={t("create_your_first_webhook")}
description={t("first_event_type_webhook_description")}
buttonRaw={
isChildrenManagedEventType && !isManagedEventType ? (
<Button StartIcon={Lock} color="secondary" disabled>
<Button StartIcon="lock" color="secondary" disabled>
{t("locked_by_team_admin")}
</Button>
) : (
apps/web/components/eventtype/InstantEventController.tsx
+4 -5
View File
@@ -16,7 +16,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { WebhookTriggerEvents } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import { Alert, Button, EmptyScreen, SettingsToggle, Dialog, DialogContent, showToast } from "@calcom/ui";
import { PhoneCall, Plus, Lock, Webhook as TbWebhook } from "@calcom/ui/components/icon";
type InstantEventControllerProps = {
eventType: EventTypeSetup;
@@ -48,7 +47,7 @@ export default function InstantEventController({
{!isOrg || !isTeamEvent ? (
<EmptyScreen
headline={t("instant_tab_title")}
Icon={PhoneCall}
Icon="phone-call"
description={t("uprade_to_create_instant_bookings")}
buttonRaw={<Button href="/enterprise">{t("upgrade")}</Button>}
/>
@@ -171,7 +170,7 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
<Button
color="secondary"
data-testid="new_webhook"
StartIcon={Plus}
StartIcon="plus"
onClick={() => setCreateModalOpen(true)}>
{t("new_webhook")}
</Button>
@@ -218,12 +217,12 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
{t("warning_payment_instant_meeting_event")}
</p>
<EmptyScreen
Icon={TbWebhook}
Icon="webhook"
headline={t("create_your_first_webhook")}
description={t("create_instant_meeting_webhook_description")}
buttonRaw={
isChildrenManagedEventType && !isManagedEventType ? (
<Button StartIcon={Lock} color="secondary" disabled>
<Button StartIcon="lock" color="secondary" disabled>
{t("locked_by_admin")}
</Button>
) : (
apps/web/components/eventtype/SkeletonLoader.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { Clock, User } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
function SkeletonLoader() {
return (
@@ -32,11 +32,11 @@ function SkeletonItem() {
<div className="">
<ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
<li className="flex items-center whitespace-nowrap">
<Clock className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
<Icon name="clock" className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
<SkeletonText className="h-4 w-12" />
</li>
<li className="flex items-center whitespace-nowrap">
<User className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
<Icon name="user" className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
<SkeletonText className="h-4 w-12" />
</li>
</ul>
apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
+2 -3
View File
@@ -1,8 +1,7 @@
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { List } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import { Icon, List } from "@calcom/ui";
import { AppConnectionItem } from "../components/AppConnectionItem";
import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
@@ -88,7 +87,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
onClick={() => nextStep()}
disabled={disabledNextButton}>
{firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
<ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
<Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
</button>
</>
);
apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
+2 -3
View File
@@ -1,8 +1,7 @@
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { List } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import { Icon, List } from "@calcom/ui";
import { AppConnectionItem } from "../components/AppConnectionItem";
import { StepConnectionLoader } from "../components/StepConnectionLoader";
@@ -59,7 +58,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
disabled={!hasAnyInstalledVideoApps}
onClick={() => nextStep()}>
{t("next_step_text")}
<ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
<Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
</button>
</>
);
apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+2 -3
View File
@@ -6,8 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { TRPCClientErrorLike } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Form } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import { Button, Form, Icon } from "@calcom/ui";
interface ISetupAvailabilityProps {
nextStep: () => void;
@@ -78,7 +77,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
loading={availabilityForm.formState.isSubmitting}
disabled={availabilityForm.formState.isSubmitting}>
{t("next_step_text")} <ArrowRight className="ml-2 h-4 w-4 self-center" />
{t("next_step_text")} <Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" />
</Button>
</div>
</Form>
apps/web/components/getting-started/steps-views/UserProfile.tsx
+1 -2
View File
@@ -10,7 +10,6 @@ import turndown from "@calcom/lib/turndownService";
import { trpc } from "@calcom/trpc/react";
import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
import { UserAvatar } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
type FormData = {
bio: string;
@@ -147,7 +146,7 @@ const UserProfile = () => {
</fieldset>
<Button
loading={mutation.isPending}
EndIcon={ArrowRight}
EndIcon="arrow-right"
type="submit"
className="mt-8 w-full items-center justify-center">
{t("finish")}
apps/web/components/getting-started/steps-views/UserSettings.tsx
+2 -3
View File
@@ -9,8 +9,7 @@ import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { trpc } from "@calcom/trpc/react";
import { Button, TimezoneSelect, Input } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import { Button, TimezoneSelect, Icon, Input } from "@calcom/ui";
import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@@ -116,7 +115,7 @@ const UserSettings = (props: IUserSettingsProps) => {
loading={mutation.isPending}
disabled={mutation.isPending}>
{t("next_step_text")}
<ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
<Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
</Button>
</form>
);
apps/web/components/security/TwoFactorModalHeader.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { Shield } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
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">
<Shield className="text-inverted h-6 w-6" />
<Icon name="shield" className="text-inverted h-6 w-6" />
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
apps/web/components/settings/CustomEmailTextField.tsx
+4 -5
View File
@@ -14,7 +14,6 @@ import {
Button,
InputError,
} from "@calcom/ui";
import { MoreHorizontal, Flag, Trash, Send } from "@calcom/ui/components/icon";
type CustomEmailTextFieldProps = {
formMethods: UseFormReturn<FormValues>;
@@ -71,7 +70,7 @@ const CustomEmailTextField = ({
<Dropdown>
<DropdownMenuTrigger asChild>
<Button
StartIcon={MoreHorizontal}
StartIcon="ellipsis"
variant="icon"
size="sm"
color="secondary"
@@ -82,7 +81,7 @@ const CustomEmailTextField = ({
<DropdownMenuContent>
<DropdownMenuItem>
<DropdownItem
StartIcon={Flag}
StartIcon="flag"
color="secondary"
className="disabled:opacity-40"
onClick={handleChangePrimary}
@@ -94,7 +93,7 @@ const CustomEmailTextField = ({
{!emailVerified && (
<DropdownMenuItem>
<DropdownItem
StartIcon={Send}
StartIcon="send"
color="secondary"
className="disabled:opacity-40"
onClick={handleVerifyEmail}
@@ -106,7 +105,7 @@ const CustomEmailTextField = ({
)}
<DropdownMenuItem>
<DropdownItem
StartIcon={Trash}
StartIcon="trash"
color="destructive"
className="disabled:opacity-40"
onClick={handleItemDelete}
apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientCard.tsx
+6 -5
View File
@@ -1,10 +1,9 @@
import { Asterisk, Clipboard } from "lucide-react";
import React from "react";
import { classNames } from "@calcom/lib";
import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants";
import type { Avatar } from "@calcom/prisma/client";
import { Button, showToast } from "@calcom/ui";
import { Button, Icon, showToast } from "@calcom/ui";
import { hasPermission } from "../../../../../../../packages/platform/utils/permissions";
@@ -75,7 +74,8 @@ export const OAuthClientCard = ({
<div className="flex flex-row items-center gap-2">
<div className="font-semibold">Client Id:</div>
<div>{id}</div>
<Clipboard
<Icon
name="clipboard"
type="button"
className="h-4 w-4 cursor-pointer"
onClick={() => {
@@ -89,9 +89,10 @@ export const OAuthClientCard = ({
<div className="font-semibold">Client Secret:</div>
<div className="flex items-center justify-center rounded-md">
{[...new Array(20)].map((_, index) => (
<Asterisk key={`${index}asterisk`} className="h-2 w-2" />
<Icon name="asterisk" key={`${index}asterisk`} className="h-2 w-2" />
))}
<Clipboard
<Icon
name="clipboard"
type="button"
className="ml-2 h-4 w-4 cursor-pointer"
onClick={() => {
apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientForm.tsx
+3 -4
View File
@@ -7,7 +7,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
import { showToast } from "@calcom/ui";
import { Meta, Button, TextField, Label } from "@calcom/ui";
import { Plus, Trash } from "@calcom/ui/components/icon";
import { useCreateOAuthClient } from "@lib/hooks/settings/organizations/platform/oauth-clients/usePersistOAuthClient";
@@ -156,7 +155,7 @@ export const OAuthClientForm: FC = () => {
type="button"
color="minimal"
variant="icon"
StartIcon={Plus}
StartIcon="plus"
className="text-default mx-2 mb-2"
onClick={() => {
append({ uri: "" });
@@ -168,7 +167,7 @@ export const OAuthClientForm: FC = () => {
type="button"
color="destructive"
variant="icon"
StartIcon={Trash}
StartIcon="trash"
className="text-default mx-2 mb-2"
onClick={() => {
remove(index);
@@ -191,7 +190,7 @@ export const OAuthClientForm: FC = () => {
<Avatar
alt=""
imageSrc={value}
fallback={<Plus className="text-subtle h-4 w-4" />}
fallback={<Icon name="plus" className="text-subtle h-4 w-4" />}
size="sm"
/>
<div className="ms-4">
apps/web/components/setup/AdminUser.tsx
+1 -2
View File
@@ -9,7 +9,6 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
import { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";
import { UserCheck } from "@calcom/ui/components/icon";
export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
const { t } = useLocale();
@@ -24,7 +23,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
props.onSuccess();
}}>
<EmptyScreen
Icon={UserCheck}
Icon="user-check"
headline={t("admin_user_created")}
description={t("admin_user_created_description")}
/>
apps/web/components/setup/EnterpriseLicense.tsx
+4 -4
View File
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Button, TextField } from "@calcom/ui";
import { Check, ExternalLink, Loader } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
type EnterpriseLicenseFormValues = {
licenseKey: string;
@@ -92,7 +92,7 @@ const EnterpriseLicense = (
<div>
<Button
className="w-full justify-center text-lg"
EndIcon={ExternalLink}
EndIcon="external-link"
href="https://console.cal.com"
target="_blank">
{t("purchase_license")}
@@ -122,9 +122,9 @@ const EnterpriseLicense = (
)}
addOnSuffix={
checkLicenseLoading ? (
<Loader className="h-5 w-5 animate-spin" />
<Icon name="loader" className="h-5 w-5 animate-spin" />
) : errors.licenseKey === undefined && isDirty ? (
<Check className="h-5 w-5 text-green-700" />
<Icon name="check" className="h-5 w-5 text-green-700" />
) : undefined
}
color={errors.licenseKey ? "warn" : ""}
apps/web/components/setup/StepDone.tsx
+5 -2
View File
@@ -2,7 +2,7 @@ import { useRouter } from "next/navigation";
import type { Dispatch, SetStateAction } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Check } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
const StepDone = (props: {
currentStep: number;
@@ -24,7 +24,10 @@ const StepDone = (props: {
}}>
<div className="min-h-36 my-6 flex flex-col items-center justify-center">
<div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
<Check className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
<Icon
name="check"
className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10"
/>
</div>
<div className="max-w-[420px] text-center">
<h2 className="mb-1 mt-6 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
apps/web/components/ui/LinkIconButton.tsx
+3 -5
View File
@@ -1,11 +1,9 @@
import React from "react";
import type { LucideIcon } from "@calcom/ui/components/icon";
import type { SVGComponent } from "@lib/types/SVGComponent";
import { Icon } from "@calcom/ui";
interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
Icon: SVGComponent | LucideIcon;
Icon: React.ComponentProps<typeof Icon>["name"];
}
export default function LinkIconButton(props: LinkIconButtonProps) {
@@ -15,7 +13,7 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
type="button"
{...props}
className="text-md hover:bg-emphasis hover:text-emphasis text-default flex items-center rounded-sm px-2 py-1 text-sm font-medium">
<props.Icon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
<Icon name={props.Icon} className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
{props.children}
</button>
</div>
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+9 -5
View File
@@ -16,7 +16,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, DialogFooter, Input, Label } from "@calcom/ui";
import { Check, Edit2, ExternalLink, Star as StarSolid } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
export enum UsernameChangeStatusEnum {
UPGRADE = "UPGRADE",
@@ -239,9 +239,13 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
isInputUsernamePremium ? "text-transparent" : "",
usernameIsAvailable ? "" : ""
)}>
{isInputUsernamePremium ? <StarSolid className="mt-[2px] h-4 w-4 fill-orange-400" /> : <></>}
{isInputUsernamePremium ? (
<Icon name="star" className="mt-[2px] h-4 w-4 fill-orange-400" />
) : (
<></>
)}
{!isInputUsernamePremium && usernameIsAvailable ? (
<Check className="mt-[2px] h-4 w-4" />
<Icon name="check" className="mt-[2px] h-4 w-4" />
) : (
<></>
)}
@@ -260,7 +264,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<Dialog open={openDialogSaveUsername}>
<DialogContent
Icon={Edit2}
Icon="pencil"
title={t("confirm_username_change_dialog_title")}
description={
<>
@@ -297,7 +301,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
data-testid="go-to-billing"
href={paymentLink}>
<>
{t("go_to_stripe_billing")} <ExternalLink className="ml-1 h-4 w-4" />
{t("go_to_stripe_billing")} <Icon name="external-link" className="ml-1 h-4 w-4" />
</>
</Button>
)}
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+7 -3
View File
@@ -11,7 +11,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
import { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, TextField, DialogFooter, Tooltip } from "@calcom/ui";
import { Check, Edit2 } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
interface ICustomUsernameProps {
currentUsername: string | undefined;
@@ -137,7 +137,11 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
{currentUsername !== inputUsernameValue && (
<div className="absolute right-[2px] top-6 flex h-7 flex-row">
<span className={classNames("bg-default mx-0 p-3")}>
{usernameIsAvailable ? <Check className="relative bottom-[6px] h-4 w-4" /> : <></>}
{usernameIsAvailable ? (
<Icon name="check" className="relative bottom-[6px] h-4 w-4" />
) : (
<></>
)}
</span>
</div>
)}
@@ -154,7 +158,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
</div>
)}
<Dialog open={openDialogSaveUsername}>
<DialogContent type="confirmation" Icon={Edit2} title={t("confirm_username_change_dialog_title")}>
<DialogContent type="confirmation" Icon="pencil" title={t("confirm_username_change_dialog_title")}>
<div className="flex flex-row">
<div className="mb-4 w-full pt-1">
<div className="bg-subtle flex w-full flex-wrap justify-between gap-6 rounded-sm px-4 py-3 text-sm">
apps/web/components/ui/form/CheckedSelect.tsx
+3 -2
View File
@@ -3,7 +3,7 @@ import type { Props } from "react-select";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Avatar } from "@calcom/ui";
import { X } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import Select from "@components/ui/form/Select";
@@ -43,7 +43,8 @@ export const CheckedSelect = ({
alt={option.label}
/>
{option.label}
<X
<Icon
name="x"
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
/>
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 { Calendar } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import classNames from "@lib/classNames";
@@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
className
)}
clearIcon={null}
calendarIcon={<Calendar className="text-subtle h-5 w-5" />}
calendarIcon={<Icon name="calendar" className="text-subtle h-5 w-5" />}
value={date}
minDate={minDate}
disabled={disabled}
apps/web/lib/types/SVGComponent.ts
-1
View File
@@ -1 +0,0 @@
export type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
apps/web/modules/bookings/views/bookings-listing-view.tsx
+1 -2
View File
@@ -17,7 +17,6 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
import { Alert, Button, EmptyScreen, HorizontalTabs } from "@calcom/ui";
import { Calendar } from "@calcom/ui/components/icon";
import { useInViewObserver } from "@lib/hooks/useInViewObserver";
import useMeQuery from "@lib/hooks/useMeQuery";
@@ -241,7 +240,7 @@ export default function Bookings() {
{query.status === "success" && isEmpty && (
<div className="flex items-center justify-center pt-2 xl:pt-0">
<EmptyScreen
Icon={Calendar}
Icon="calendar"
headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
description={t("no_status_bookings_yet_description", {
status: t(status).toLowerCase(),
apps/web/modules/bookings/views/bookings-single-view.tsx
+9 -8
View File
@@ -45,8 +45,7 @@ import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/t
import { localStorage } from "@calcom/lib/webstorage";
import { BookingStatus } from "@calcom/prisma/enums";
import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
import { Alert, Badge, Button, EmailInput, HeadSeo, useCalcomTheme } from "@calcom/ui";
import { AlertCircle, Calendar, Check, ChevronLeft, ExternalLink, X } from "@calcom/ui/components/icon";
import { Alert, Badge, Button, EmailInput, HeadSeo, Icon, useCalcomTheme } from "@calcom/ui";
import { timeZone } from "@lib/clock";
@@ -313,7 +312,7 @@ export default function Success(props: PageProps) {
href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
data-testid="back-to-bookings"
className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
<ChevronLeft className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
<Icon name="chevron-left" className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
</Link>
</div>
)}
@@ -357,10 +356,12 @@ export default function Success(props: PageProps) {
<img src={giphyImage} alt="Gif from Giphy" />
)}
{!giphyImage && !needsConfirmation && !isCancelled && (
<Check className="h-5 w-5 text-green-600 dark:text-green-400" />
<Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
)}
{needsConfirmation && !isCancelled && <Calendar className="text-emphasis h-5 w-5" />}
{isCancelled && <X className="h-5 w-5 text-red-600 dark:text-red-200" />}
{needsConfirmation && !isCancelled && (
<Icon name="calendar" className="text-emphasis h-5 w-5" />
)}
{isCancelled && <Icon name="x" className="h-5 w-5 text-red-600 dark:text-red-200" />}
</div>
<div className="mb-8 mt-6 text-center last:mb-0">
<h3
@@ -784,7 +785,7 @@ export default function Success(props: PageProps) {
</span>
</div>
}
CustomIcon={AlertCircle}
CustomIcon="circle-alert"
customIconColor="text-attention dark:text-orange-200"
/>
)}
@@ -813,7 +814,7 @@ const DisplayLocation = ({
className={classNames("text-default flex items-center gap-2", className)}
rel="noreferrer">
{providerName || "Link"}
<ExternalLink className="text-default inline h-4 w-4" />
<Icon name="external-link" className="text-default inline h-4 w-4" />
</a>
) : (
<p className={className}>{locationToDisplay}</p>
apps/web/modules/event-types/views/event-types-listing-view.tsx
+18 -31
View File
@@ -50,6 +50,7 @@ import {
EmptyScreen,
HeadSeo,
HorizontalTabs,
Icon,
Label,
showToast,
Skeleton,
@@ -58,20 +59,6 @@ import {
ArrowButton,
UserAvatarGroup,
} from "@calcom/ui";
import {
Clipboard,
Code,
Copy,
Edit,
Edit2,
ExternalLink,
Link as LinkIcon,
MoreHorizontal,
Trash,
Upload,
Users,
VenetianMask,
} from "@calcom/ui/components/icon";
import type { AppProps } from "@lib/app-providers";
import useMeQuery from "@lib/hooks/useMeQuery";
@@ -476,7 +463,7 @@ export const EventTypeList = ({
target="_blank"
variant="icon"
href={calLink}
StartIcon={ExternalLink}
StartIcon="external-link"
/>
</Tooltip>
@@ -484,7 +471,7 @@ export const EventTypeList = ({
<Button
color="secondary"
variant="icon"
StartIcon={LinkIcon}
StartIcon="link"
onClick={() => {
showToast(t("link_copied"), "success");
navigator.clipboard.writeText(calLink);
@@ -497,7 +484,7 @@ export const EventTypeList = ({
<Button
color="secondary"
variant="icon"
StartIcon={VenetianMask}
StartIcon="venetian-mask"
onClick={() => {
showToast(t("private_link_copied"), "success");
navigator.clipboard.writeText(placeholderHashedLink);
@@ -513,7 +500,7 @@ export const EventTypeList = ({
type="button"
variant="icon"
color="secondary"
StartIcon={MoreHorizontal}
StartIcon="ellipsis"
className="ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md"
/>
</DropdownMenuTrigger>
@@ -523,7 +510,7 @@ export const EventTypeList = ({
<DropdownItem
type="button"
data-testid={`event-type-edit-${type.id}`}
StartIcon={Edit2}
StartIcon="pencil"
onClick={() => router.push(`/event-types/${type.id}`)}>
{t("edit")}
</DropdownItem>
@@ -535,7 +522,7 @@ export const EventTypeList = ({
<DropdownItem
type="button"
data-testid={`event-type-duplicate-${type.id}`}
StartIcon={Copy}
StartIcon="copy"
onClick={() => openDuplicateModal(type, group)}>
{t("duplicate")}
</DropdownItem>
@@ -548,7 +535,7 @@ export const EventTypeList = ({
namespace=""
as={DropdownItem}
type="button"
StartIcon={Code}
StartIcon="code"
className="w-full rounded-none"
embedUrl={encodeURIComponent(embedLink)}
eventId={type.id}>
@@ -569,7 +556,7 @@ export const EventTypeList = ({
setDeleteDialogTypeId(type.id);
setDeleteDialogSchedulingType(type.schedulingType);
}}
StartIcon={Trash}
StartIcon="trash"
className="w-full rounded-none">
{t("delete")}
</DropdownItem>
@@ -586,7 +573,7 @@ export const EventTypeList = ({
<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={MoreHorizontal} />
<Button type="button" variant="icon" color="secondary" StartIcon="ellipsis" />
</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
@@ -596,7 +583,7 @@ export const EventTypeList = ({
<DropdownItem
href={calLink}
target="_blank"
StartIcon={ExternalLink}
StartIcon="external-link"
className="w-full rounded-none">
{t("preview")}
</DropdownItem>
@@ -608,7 +595,7 @@ export const EventTypeList = ({
navigator.clipboard.writeText(calLink);
showToast(t("link_copied"), "success");
}}
StartIcon={Clipboard}
StartIcon="clipboard"
className="w-full rounded-none text-left">
{t("copy_link")}
</DropdownItem>
@@ -629,7 +616,7 @@ export const EventTypeList = ({
.then(() => showToast(t("link_shared"), "success"))
.catch(() => showToast(t("failed"), "error"));
}}
StartIcon={Upload}
StartIcon="upload"
className="w-full rounded-none">
{t("share")}
</DropdownItem>
@@ -639,7 +626,7 @@ export const EventTypeList = ({
<DropdownMenuItem className="outline-none">
<DropdownItem
onClick={() => router.push(`/event-types/${type.id}`)}
StartIcon={Edit}
StartIcon="pencil"
className="w-full rounded-none">
{t("edit")}
</DropdownItem>
@@ -649,7 +636,7 @@ export const EventTypeList = ({
<DropdownMenuItem className="outline-none">
<DropdownItem
onClick={() => openDuplicateModal(type, group)}
StartIcon={Copy}
StartIcon="copy"
data-testid={`event-type-duplicate-${type.id}`}>
{t("duplicate")}
</DropdownItem>
@@ -667,7 +654,7 @@ export const EventTypeList = ({
setDeleteDialogTypeId(type.id);
setDeleteDialogSchedulingType(type.schedulingType);
}}
StartIcon={Trash}
StartIcon="trash"
className="w-full rounded-none">
{t("delete")}
</DropdownItem>
@@ -768,7 +755,7 @@ const EventTypeListHeading = ({
<span className="text-subtle relative -top-px me-2 ms-2 text-xs">
<Link href={`/settings/teams/${teamId}/members`}>
<Badge variant="gray">
<Users className="-mt-px mr-1 inline h-3 w-3" />
<Icon name="users" className="-mt-px mr-1 inline h-3 w-3" />
{membershipCount}
</Badge>
</Link>
@@ -796,7 +783,7 @@ const CreateFirstEventTypeView = ({ slug }: { slug: string }) => {
return (
<EmptyScreen
Icon={LinkIcon}
Icon="link"
headline={t("new_event_type_heading")}
description={t("new_event_type_description")}
className="mb-16"
apps/web/modules/users/views/users-public-view.tsx
+13 -5
View File
@@ -17,8 +17,7 @@ import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
import useTheme from "@calcom/lib/hooks/useTheme";
import { HeadSeo, UnpublishedEntity, UserAvatar } from "@calcom/ui";
import { ArrowRight, Verified } from "@calcom/ui/components/icon";
import { HeadSeo, Icon, UnpublishedEntity, UserAvatar } from "@calcom/ui";
import { type getServerSideProps } from "./users-public-view.getServerSideProps";
@@ -121,10 +120,16 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
<h1 className="font-cal text-emphasis my-1 text-3xl" data-testid="name-title">
{profile.name}
{!isOrg && user.verified && (
<Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
<Icon
name="badge-check"
className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black"
/>
)}
{isOrg && (
<Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-yellow-500 text-white dark:text-black" />
<Icon
name="badge-check"
className=" mx-1 -mt-1 inline h-6 w-6 fill-yellow-500 text-white dark:text-black"
/>
)}
</h1>
{!isBioEmpty && (
@@ -153,7 +158,10 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
key={type.id}
style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
className="bg-default border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
<ArrowRight className="text-emphasis absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
<Icon
name="arrow-right"
className="text-emphasis absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
/>
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
<div className="block w-full p-5">
<Link
apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
+4 -5
View File
@@ -3,8 +3,7 @@
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
import { Button, HeadSeo } from "@calcom/ui";
import { ArrowRight, Calendar, X } from "@calcom/ui/components/icon";
import { Button, HeadSeo, Icon } from "@calcom/ui";
import { type PageProps } from "./videos-meeting-ended-single-view.getServerSideProps";
@@ -28,7 +27,7 @@ export default function MeetingUnavailable(props: PageProps) {
aria-labelledby="modal-headline">
<div>
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<X className="h-6 w-6 text-red-600" />
<Icon name="x" className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
@@ -40,14 +39,14 @@ export default function MeetingUnavailable(props: PageProps) {
{props.booking.title}
</h2>
<p className="text-subtle text-center">
<Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
<Icon name="calendar" className="-mt-1 mr-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={ArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
{t("go_back")}
</Button>
</div>
apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx
+4 -5
View File
@@ -3,8 +3,7 @@
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
import { Button, HeadSeo, EmptyScreen } from "@calcom/ui";
import { ArrowRight, Calendar, Clock } from "@calcom/ui/components/icon";
import { Button, HeadSeo, Icon, EmptyScreen } from "@calcom/ui";
import { type PageProps } from "./videos-meeting-not-started-single-view.getServerSideProps";
@@ -15,19 +14,19 @@ export default function MeetingNotStarted(props: PageProps) {
<HeadSeo title={t("this_meeting_has_not_started_yet")} description={props.booking.title} />
<main className="mx-auto my-24 max-w-3xl">
<EmptyScreen
Icon={Clock}
Icon="clock"
headline={t("this_meeting_has_not_started_yet")}
description={
<>
<h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
<p className="text-subtle text-center">
<Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
<Icon name="calendar" className="-mt-1 mr-1 inline-block h-4 w-4" />
{dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
</p>
</>
}
buttonRaw={
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
{t("go_back")}
</Button>
}
apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx
+2 -3
View File
@@ -2,7 +2,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, EmptyScreen, HeadSeo } from "@calcom/ui";
import { X, ArrowRight } from "@calcom/ui/components/icon";
export default function NoMeetingFound() {
const { t } = useLocale();
@@ -12,11 +11,11 @@ export default function NoMeetingFound() {
<HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
<main className="mx-auto my-24 max-w-3xl">
<EmptyScreen
Icon={X}
Icon="x"
headline={t("no_meeting_found")}
description={t("no_meeting_found_description")}
buttonRaw={
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
<Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
{t("go_back_home")}
</Button>
}
apps/web/modules/videos/views/videos-single-view.tsx
+3 -2
View File
@@ -10,7 +10,7 @@ import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constant
import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-fns";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
import { ChevronRight } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import { type PageProps } from "./videos-single-view.getServerSideProps";
@@ -231,7 +231,8 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
aria-label={`${open ? "close" : "open"} booking description sidebar`}
className="h-20 w-6 rounded-r-md border border-l-0 border-gray-300/20 bg-black/60 text-white shadow-sm backdrop-blur-lg"
onClick={() => setOpen(!open)}>
<ChevronRight
<Icon
name="chevron-right"
aria-hidden
className={classNames(open && "rotate-180", "w-5 transition-all duration-300 ease-in-out")}
/>
apps/web/next.config.js
-4
View File
@@ -187,10 +187,6 @@ const nextConfig = {
"lucide-react",
],
modularizeImports: {
"@calcom/ui/components/icon": {
transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
preventFullImport: true,
},
"@calcom/features/insights/components": {
transform: "@calcom/features/insights/components/{{member}}",
skipDefaultConversion: true,
apps/web/pages/404.tsx
+9 -9
View File
@@ -12,7 +12,7 @@ import {
import { DOCS_URL, IS_CALCOM, JOIN_DISCORD, WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { HeadSeo } from "@calcom/ui";
import { BookOpen, Check, ChevronRight, FileText, Shield } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import { Discord } from "@calcom/ui/components/icon/Discord";
import PageWrapper from "@components/PageWrapper";
@@ -36,19 +36,19 @@ export default function Custom404() {
{
title: "Enterprise",
description: "Learn more about organizations and subdomains in our enterprise plan.",
icon: Shield,
icon: "shield" as const,
href: `${WEBSITE_URL}/enterprise`,
},
{
title: t("documentation"),
description: t("documentation_description"),
icon: FileText,
icon: "file-text" as const,
href: DOCS_URL,
},
{
title: t("blog"),
description: t("blog_description"),
icon: BookOpen,
icon: "book-open" as const,
href: `${WEBSITE_URL}/blog`,
},
];
@@ -174,7 +174,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">
<Check className="h-6 w-6 text-green-500" aria-hidden="true" />
<Icon name="check" className="h-6 w-6 text-green-500" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@@ -196,7 +196,7 @@ export default function Custom404() {
</p>
</div>
<div className="flex-shrink-0 self-center">
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</a>
</li>
@@ -215,7 +215,7 @@ export default function Custom404() {
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
<div className="flex-shrink-0">
<span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
<link.icon className="text-default h-6 w-6" aria-hidden="true" />
<Icon name={link.icon} className="text-default h-6 w-6" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
@@ -228,7 +228,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{link.description}</p>
</div>
<div className="flex-shrink-0 self-center">
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</a>
</li>
@@ -252,7 +252,7 @@ export default function Custom404() {
<p className="text-subtle text-base">{t("join_our_community")}</p>
</div>
<div className="flex-shrink-0 self-center">
<ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
<Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
</div>
</a>
</li>
apps/web/pages/500.tsx
+1 -2
View File
@@ -4,7 +4,6 @@ import { APP_NAME } from "@calcom/lib/constants";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, showToast } from "@calcom/ui";
import { Copy } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
@@ -33,7 +32,7 @@ export default function Error500() {
<Button
color="secondary"
className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
StartIcon={Copy}
StartIcon="copy"
onClick={() => {
navigator.clipboard.writeText(searchParams?.get("error") as string);
showToast("Link copied!", "success");
apps/web/pages/apps/categories/index.tsx
+3 -4
View File
@@ -5,8 +5,7 @@ import Link from "next/link";
import Shell from "@calcom/features/shell/Shell";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { SkeletonText } from "@calcom/ui";
import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
import { Icon, SkeletonText } from "@calcom/ui";
import { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
@@ -26,7 +25,7 @@ export default function Apps({ categories }: Omit<inferSSRProps<typeof getServer
<Link
href="/apps"
className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
<ArrowLeft className="h-4 w-4" />
<Icon name="arrow-left" className="h-4 w-4" />
{isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
</Link>
</div>
@@ -42,7 +41,7 @@ export default function Apps({ categories }: Omit<inferSSRProps<typeof getServer
<h3 className="font-medium capitalize">{category.name}</h3>
<p className="text-subtle text-sm">
{t("number_apps", { count: category.count })}{" "}
<ArrowRight className="inline-block h-4 w-4" />
<Icon name="arrow-right" className="inline-block h-4 w-4" />
</p>
</div>
</Link>
apps/web/pages/apps/index.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ import {
PopularAppsSlider,
RecentAppsSlider,
} from "@calcom/ui";
import { Search } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import { getServerSideProps } from "@lib/apps/getServerSideProps";
@@ -45,7 +45,7 @@ function AppsSearch({
return (
<TextField
className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
addOnLeading={<Search className="text-subtle h-4 w-4" />}
addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
addOnClassname="!border-muted"
containerClassName={classNames("focus:!ring-offset-0 m-1", className)}
type="search"
apps/web/pages/apps/installed/[category].tsx
+15 -27
View File
@@ -7,23 +7,11 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { AppCategories } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import { Button, EmptyScreen, AppSkeletonLoader as SkeletonLoader, ShellSubHeading } from "@calcom/ui";
import type { LucideIcon } from "@calcom/ui/components/icon";
import {
BarChart,
Calendar,
Contact,
CreditCard,
Grid,
Mail,
Plus,
Share2,
Video,
} from "@calcom/ui/components/icon";
import type { Icon } from "@calcom/ui";
import { AppSkeletonLoader as SkeletonLoader, Button, EmptyScreen, ShellSubHeading } from "@calcom/ui";
import { QueryCell } from "@lib/QueryCell";
import type { querySchemaType } from "@lib/apps/installed/[category]/getServerSideProps";
import { getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
import PageWrapper from "@components/PageWrapper";
import { AppList } from "@components/apps/AppList";
@@ -50,17 +38,17 @@ const IntegrationsContainer = ({
});
// TODO: Refactor and reuse getAppCategories?
const emptyIcon: Record<AppCategories, LucideIcon> = {
calendar: Calendar,
conferencing: Video,
automation: Share2,
analytics: BarChart,
payment: CreditCard,
other: Grid,
web3: CreditCard, // deprecated
video: Video, // deprecated
messaging: Mail,
crm: Contact,
const emptyIcon: Record<AppCategories, React.ComponentProps<typeof Icon>["name"]> = {
calendar: "calendar",
conferencing: "video",
automation: "share-2",
analytics: "bar-chart",
payment: "credit-card",
other: "grid-3x3",
web3: "credit-card", // deprecated
video: "video", // deprecated
messaging: "mail",
crm: "contact",
};
return (
@@ -98,7 +86,7 @@ const IntegrationsContainer = ({
data-testid="add-apps"
href={variant ? `/apps/categories/${variant}` : "/apps"}
color="secondary"
StartIcon={Plus}>
StartIcon="plus">
{t("add")}
</Button>
}
@@ -168,6 +156,6 @@ export default function InstalledApps() {
);
}
export { getServerSideProps };
export { getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
InstalledApps.PageWrapper = PageWrapper;
apps/web/pages/auth/error.tsx
+2 -3
View File
@@ -4,8 +4,7 @@ import z from "zod";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { X } from "@calcom/ui/components/icon";
import { Button, Icon } from "@calcom/ui";
import PageWrapper from "@components/PageWrapper";
import AuthContainer from "@components/ui/AuthContainer";
@@ -27,7 +26,7 @@ export default function Error() {
<AuthContainer title="" description="">
<div>
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<X className="h-6 w-6 text-red-600" />
<Icon name="x" className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
apps/web/pages/auth/login.tsx
+9 -7
View File
@@ -5,21 +5,19 @@ import classNames from "classnames";
import { signIn } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import { useEffect, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { FaGoogle } from "react-icons/fa";
import { z } from "zod";
import { SAMLLogin } from "@calcom/features/auth/SAMLLogin";
import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
import { WEBAPP_URL, WEBSITE_URL, HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
import { HOSTED_CAL_FEATURES, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { trpc } from "@calcom/trpc/react";
import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
import { ArrowLeft, Lock } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
import type { WithNonceProps } from "@lib/withNonce";
@@ -39,6 +37,10 @@ interface LoginValues {
backupCode: string;
csrfToken: string;
}
const GoogleIcon = () => (
<img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon.svg" alt="" />
);
export default function Login({
csrfToken,
isGoogleLoginEnabled,
@@ -110,7 +112,7 @@ inferSSRProps<typeof getServerSideProps> & WithNonceProps<{}>) {
}
setErrorMessage(null);
}}
StartIcon={ArrowLeft}
StartIcon="arrow-left"
color="minimal">
{t("go_back")}
</Button>
@@ -121,7 +123,7 @@ inferSSRProps<typeof getServerSideProps> & WithNonceProps<{}>) {
setErrorMessage(null);
methods.setValue("totpCode", "");
}}
StartIcon={Lock}
StartIcon="lock"
color="minimal">
{t("lost_access")}
</Button>
@@ -244,7 +246,7 @@ inferSSRProps<typeof getServerSideProps> & WithNonceProps<{}>) {
className="w-full justify-center"
disabled={formState.isSubmitting}
data-testid="google"
StartIcon={FaGoogle}
CustomStartIcon={<GoogleIcon />}
onClick={async (e) => {
e.preventDefault();
await signIn("google");
apps/web/pages/auth/logout.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
import { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { Check } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -46,7 +46,7 @@ export function Logout(props: Props) {
<AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
<div className="mb-4">
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<Check className="h-6 w-6 text-green-600" />
<Icon name="check" className="h-6 w-6 text-green-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
apps/web/pages/auth/oauth2/authorize.tsx
+3 -4
View File
@@ -7,8 +7,7 @@ import { APP_NAME } from "@calcom/lib/constants";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Avatar, Button, Select } from "@calcom/ui";
import { Plus, Info } from "@calcom/ui/components/icon";
import { Avatar, Button, Icon, Select } from "@calcom/ui";
import PageWrapper from "@components/PageWrapper";
@@ -85,7 +84,7 @@ export default function Authorize() {
<div className="flex items-center justify-center">
<Avatar
alt=""
fallback={<Plus className="text-subtle h-6 w-6" />}
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
className="items-center"
imageSrc={client.logo}
size="lg"
@@ -139,7 +138,7 @@ export default function Authorize() {
</ul>
<div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
<div>
<Info className="mr-1 mt-0.5 h-4 w-4" />
<Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
</div>
<div className="ml-1 ">
<div className="mb-1 text-sm font-medium">
apps/web/pages/auth/platform/authorize.tsx
+4 -6
View File
@@ -3,9 +3,7 @@ import { useRouter } from "next/navigation";
import { APP_NAME } from "@calcom/lib/constants";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Avatar, Button } from "@calcom/ui";
import { Info } from "@calcom/ui/components/icon";
import { Plus } from "@calcom/ui/components/icon";
import { Avatar, Button, Icon } from "@calcom/ui";
import PageWrapper from "@components/PageWrapper";
@@ -69,7 +67,7 @@ export default function Authorize() {
{client.logo ? (
<Avatar
alt=""
fallback={<Plus className="text-subtle h-6 w-6" />}
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
className="items-center"
imageSrc={client.logo}
size="lg"
@@ -77,7 +75,7 @@ export default function Authorize() {
) : (
<Avatar
alt=""
fallback={<Plus className="text-subtle h-6 w-6" />}
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
className="items-center"
imageSrc="/cal-com-icon.svg"
size="lg"
@@ -100,7 +98,7 @@ export default function Authorize() {
<ul className="space-y-4 text-sm text-black">{permissions}</ul>
<div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
<div>
<Info className="mr-1 mt-0.5 h-4 w-4" />
<Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
</div>
<div className="ml-1 ">
<div className="mb-1 text-sm font-medium">
apps/web/pages/auth/verify-email.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
"use client";
import { MailOpenIcon } from "lucide-react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
@@ -36,7 +35,7 @@ function VerifyEmailPage() {
<EmptyScreen
border
dashedBorder={false}
Icon={MailOpenIcon}
Icon="mail-open"
headline={t("check_your_email")}
description={t("verify_email_page_body", { email: session?.user?.email, appName: APP_NAME })}
className="bg-default"
apps/web/pages/auth/verify.tsx
+4 -4
View File
@@ -14,7 +14,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
import { trpc } from "@calcom/trpc/react";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { Button, showToast } from "@calcom/ui";
import { AlertTriangle, ExternalLink, MailOpen } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import Loader from "@components/Loader";
import PageWrapper from "@components/PageWrapper";
@@ -63,7 +63,7 @@ const querySchema = z.object({
const PaymentFailedIcon = () => (
<div className="rounded-full bg-orange-900 p-3">
<AlertTriangle className="h-6 w-6 flex-shrink-0 p-0.5 font-extralight text-orange-100" />
<Icon name="triangle-alert" className="h-6 w-6 flex-shrink-0 p-0.5 font-extralight text-orange-100" />
</div>
);
@@ -112,7 +112,7 @@ const PaymentSuccess = () => (
const MailOpenIcon = () => (
<div className="bg-default rounded-full p-3">
<MailOpen className="text-emphasis h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
<Icon name="mail-open" className="text-emphasis h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
</div>
);
@@ -213,7 +213,7 @@ export default function Verify(props: inferSSRProps<typeof getServerSideProps>)
: "https://mail.google.com/mail/u/0/"
}
target="_blank"
EndIcon={ExternalLink}>
EndIcon="external-link">
Open in Gmail
</Button>
</div>
apps/web/pages/availability/index.tsx
+1 -2
View File
@@ -15,7 +15,6 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { EmptyScreen, showToast, ToggleGroup } from "@calcom/ui";
import { Clock } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -110,7 +109,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
{schedules.length === 0 ? (
<div className="flex justify-center">
<EmptyScreen
Icon={Clock}
Icon="clock"
headline={t("new_schedule_heading")}
description={t("new_schedule_description")}
className="w-full"
apps/web/pages/connect-and-join.tsx
+1 -2
View File
@@ -12,7 +12,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { TRPCClientError } from "@calcom/trpc/react";
import { Button, EmptyScreen, Alert } from "@calcom/ui";
import { PhoneCall } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
@@ -53,7 +52,7 @@ function ConnectAndJoin() {
{session ? (
<EmptyScreen
headline={t("instant_tab_title")}
Icon={PhoneCall}
Icon="phone-call"
description={t("uprade_to_create_instant_bookings")}
buttonRaw={
<div className="flex flex-col items-center justify-center gap-4">
apps/web/pages/getting-started/[[...step]].tsx
+2 -2
View File
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
import { trpc } from "@calcom/trpc";
import { Button, StepCard, Steps } from "@calcom/ui";
import { Loader } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import PageWrapper from "@components/PageWrapper";
import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars";
@@ -139,7 +139,7 @@ const OnboardingPage = () => {
<Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} navigateToStep={goToIndex} />
</div>
<StepCard>
<Suspense fallback={<Loader />}>
<Suspense fallback={<Icon name="loader" />}>
{currentStep === "user-settings" && (
<UserSettings nextStep={() => goToIndex(1)} hideUsername={from === "signup"} />
)}
apps/web/pages/insights/index.tsx
+4 -4
View File
@@ -16,7 +16,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Button, ButtonGroup } from "@calcom/ui";
import { RefreshCcw, UserPlus, Users } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import { getServerSideProps } from "@lib/insights/getServerSideProps";
@@ -28,17 +28,17 @@ export default function InsightsPage() {
const features = [
{
icon: <Users className="h-5 w-5" />,
icon: <Icon name="users" className="h-5 w-5" />,
title: t("view_bookings_across"),
description: t("view_bookings_across_description"),
},
{
icon: <RefreshCcw className="h-5 w-5" />,
icon: <Icon name="refresh-ccw" className="h-5 w-5" />,
title: t("identify_booking_trends"),
description: t("identify_booking_trends_description"),
},
{
icon: <UserPlus className="h-5 w-5" />,
icon: <Icon name="user-plus" className="h-5 w-5" />,
title: t("spot_popular_event_types"),
description: t("spot_popular_event_types_description"),
},
apps/web/pages/settings/admin/oAuth/oAuthView.tsx
+4 -6
View File
@@ -5,9 +5,7 @@ import { useForm } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Meta, Form, Button, TextField, showToast, Tooltip, ImageUploader, Avatar } from "@calcom/ui";
import { Clipboard } from "@calcom/ui/components/icon";
import { Plus } from "@calcom/ui/components/icon";
import { Meta, Form, Button, Icon, TextField, showToast, Tooltip, ImageUploader, Avatar } from "@calcom/ui";
type FormValues = {
name: string;
@@ -67,7 +65,7 @@ export default function OAuthView() {
<div className="mb-5 mt-5 flex items-center">
<Avatar
alt=""
fallback={<Plus className="text-subtle h-6 w-6" />}
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
className="mr-5 items-center"
imageSrc={logo}
size="lg"
@@ -105,7 +103,7 @@ export default function OAuthView() {
}}
type="button"
className="rounded-l-none text-base"
StartIcon={Clipboard}>
StartIcon="clipboard">
{t("copy")}
</Button>
</Tooltip>
@@ -127,7 +125,7 @@ export default function OAuthView() {
}}
type="button"
className="rounded-l-none text-base"
StartIcon={Clipboard}>
StartIcon="clipboard">
{t("copy")}
</Button>
</Tooltip>
apps/web/pages/settings/billing/index.tsx
+1 -2
View File
@@ -8,7 +8,6 @@ import { classNames } from "@calcom/lib";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Meta } from "@calcom/ui";
import { ExternalLink } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
@@ -49,7 +48,7 @@ const BillingView = () => {
<Meta title={t("billing")} description={t("manage_billing_description")} borderInShellHeader={true} />
<div className="border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-8 text-sm sm:space-y-8">
<CtaRow title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
<Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
<Button color="primary" href={billingHref} target="_blank" EndIcon="external-link">
{t("billing_portal")}
</Button>
</CtaRow>
apps/web/pages/settings/developer/api-keys.tsx
+2 -3
View File
@@ -17,7 +17,6 @@ import {
SkeletonContainer,
SkeletonText,
} from "@calcom/ui";
import { Link as LinkIcon, Plus } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
@@ -47,7 +46,7 @@ const ApiKeysView = () => {
return (
<Button
color="secondary"
StartIcon={Plus}
StartIcon="plus"
onClick={() => {
setApiKeyToEdit(undefined);
setApiKeyModal(true);
@@ -95,7 +94,7 @@ const ApiKeysView = () => {
</>
) : (
<EmptyScreen
Icon={LinkIcon}
Icon="link"
headline={t("create_first_api_key")}
description={t("create_first_api_key_description", { appName: APP_NAME })}
className="rounded-b-lg rounded-t-none border-t-0"
apps/web/pages/settings/my-account/appearance.tsx
+1 -1
View File
@@ -404,7 +404,7 @@ const AppearanceView = ({
{/* TODO future PR to preview brandColors */}
{/* <Button
color="secondary"
EndIcon={ExternalLink}
EndIcon="external-link"
className="mt-6"
onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
Preview
apps/web/pages/settings/my-account/calendars.tsx
+1 -2
View File
@@ -5,7 +5,6 @@ import { Fragment } from "react";
import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Meta, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { Plus } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
import { CalendarListContainer } from "@components/apps/CalendarListContainer";
@@ -30,7 +29,7 @@ const AddCalendarButton = () => {
return (
<>
<Button color="secondary" StartIcon={Plus} href="/apps/categories/calendar">
<Button color="secondary" StartIcon="plus" href="/apps/categories/calendar">
{t("add_calendar")}
</Button>
</>
apps/web/pages/settings/my-account/conferencing.tsx
+2 -3
View File
@@ -7,7 +7,6 @@ import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, EmptyScreen, Meta, SkeletonContainer, SkeletonText } from "@calcom/ui";
import { Calendar, Plus } from "@calcom/ui/components/icon";
import { QueryCell } from "@lib/QueryCell";
@@ -30,7 +29,7 @@ const AddConferencingButton = () => {
const { t } = useLocale();
return (
<Button color="secondary" StartIcon={Plus} href="/apps/categories/conferencing">
<Button color="secondary" StartIcon="plus" href="/apps/categories/conferencing">
{t("add")}
</Button>
);
@@ -84,7 +83,7 @@ const ConferencingLayout = () => {
if (!data.items.length) {
return (
<EmptyScreen
Icon={Calendar}
Icon="calendar"
headline={t("no_category_apps", {
category: t("conferencing").toLowerCase(),
})}
apps/web/pages/settings/my-account/out-of-office/index.tsx
+13 -9
View File
@@ -1,4 +1,3 @@
import { Trash2 } from "lucide-react";
import React, { useState } from "react";
import { Controller, useForm, useFormState } from "react-hook-form";
@@ -11,15 +10,20 @@ import { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import {
Button,
Meta,
showToast,
Select,
SkeletonText,
UpgradeTeamsBadge,
Switch,
DateRangePicker,
Meta,
Select,
showToast,
SkeletonText,
Switch,
TableBody,
TableCell,
TableHead,
TableHeader,
TableNew,
TableRow,
UpgradeTeamsBadge,
} from "@calcom/ui";
import { TableNew, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@calcom/ui";
import PageWrapper from "@components/PageWrapper";
@@ -207,7 +211,7 @@ const OutOfOfficeEntriesList = () => {
color="minimal"
variant="icon"
disabled={deleteOutOfOfficeEntryMutation.isPending}
StartIcon={Trash2}
StartIcon="trash-2"
onClick={() => {
deleteOutOfOfficeEntryMutation.mutate({ outOfOfficeUid: item.uuid });
}}
apps/web/pages/settings/my-account/profile.tsx
+5 -6
View File
@@ -45,7 +45,6 @@ import {
TextField,
UserAvatar,
} from "@calcom/ui";
import { AlertTriangle, Trash2, Plus } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
import TwoFactor from "@components/auth/TwoFactor";
@@ -341,7 +340,7 @@ const ProfileView = () => {
<Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
<SectionBottomActions align="end">
<DialogTrigger asChild>
<Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Trash2}>
<Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon="trash-2">
{t("delete_account")}
</Button>
</DialogTrigger>
@@ -350,7 +349,7 @@ const ProfileView = () => {
title={t("delete_account_modal_title")}
description={t("confirm_delete_account_modal", { appName: APP_NAME })}
type="creation"
Icon={AlertTriangle}>
Icon="triangle-alert">
<>
<div className="mb-10">
<p className="text-default mb-4">{t("delete_account_confirmation_message")}</p>
@@ -393,7 +392,7 @@ const ProfileView = () => {
title={t("confirm_password")}
description={t("confirm_password_change_email")}
type="creation"
Icon={AlertTriangle}>
Icon="triangle-alert">
<div className="mb-10">
<div className="mb-4 grid gap-2 md:grid-cols-2">
<div>
@@ -442,7 +441,7 @@ const ProfileView = () => {
title={t("confirm_auth_change")}
description={t("confirm_auth_email_change")}
type="creation"
Icon={AlertTriangle}>
Icon="triangle-alert">
<DialogFooter>
<Button
color="primary"
@@ -676,7 +675,7 @@ const ProfileForm = ({
<div className="text-default mt-2 flex items-center text-sm">{t("change_email_hint")}</div>
<Button
color="minimal"
StartIcon={Plus}
StartIcon="plus"
className="mt-2"
onClick={() => handleAddSecondaryEmail()}
data-testid="add-secondary-email">
apps/web/pages/settings/organizations/platform/oauth-clients/index.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { Plus } from "lucide-react";
import { useRouter } from "next/router";
import React from "react";
@@ -39,7 +38,7 @@ export const OAuthClients = () => {
router.push("/settings/organizations/platform/oauth-clients/create");
}}
color="secondary"
StartIcon={Plus}>
StartIcon="plus">
Add
</Button>
);
@@ -83,7 +82,7 @@ export const OAuthClients = () => {
<EmptyScreen
headline="Create your first OAuth client"
description="OAuth clients facilitate access to Cal.com on behalf of users"
Icon={Plus}
Icon="plus"
className="rounded-b-lg rounded-t-none border-t-0"
buttonRaw={<NewOAuthClientButton />}
/>
apps/web/pages/signup.tsx
+28 -21
View File
@@ -1,7 +1,6 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { CalendarHeart, Info, Link2, ShieldCheckIcon, StarIcon, Users } from "lucide-react";
import { signIn } from "next-auth/react";
import { Trans } from "next-i18next";
import Link from "next/link";
@@ -28,7 +27,17 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { signupSchema as apiSignupSchema } from "@calcom/prisma/zod-utils";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { Button, HeadSeo, PasswordField, TextField, Form, Alert, showToast, CheckboxField } from "@calcom/ui";
import {
Button,
HeadSeo,
PasswordField,
TextField,
Form,
Alert,
showToast,
CheckboxField,
Icon,
} from "@calcom/ui";
import { getServerSideProps } from "@lib/signup/getServerSideProps";
@@ -49,17 +58,17 @@ const FEATURES = [
i18nOptions: {
appName: APP_NAME,
},
icon: CalendarHeart,
icon: "calendar-heart" as const,
},
{
title: "set_availability",
description: "set_availbility_description",
icon: Users,
icon: "users" as const,
},
{
title: "share_a_link_or_embed",
description: "share_a_link_or_embed_description",
icon: Link2,
icon: "link-2" as const,
i18nOptions: {
appName: APP_NAME,
},
@@ -128,12 +137,12 @@ function UsernameField({
<div className="text-sm ">
{usernameTaken ? (
<div className="text-error flex items-center">
<Info className="mr-1 inline-block h-4 w-4" />
<Icon name="info" className="mr-1 inline-block h-4 w-4" />
<p>{t("already_in_use_error")}</p>
</div>
) : premium ? (
<div data-testid="premium-username-warning" className="flex items-center">
<StarIcon className="mr-1 inline-block h-4 w-4" />
<Icon name="star" className="mr-1 inline-block h-4 w-4" />
<p>
{t("premium_username", {
price: getPremiumPlanPriceValue(),
@@ -394,18 +403,16 @@ export default function Signup({
color="secondary"
disabled={!!formMethods.formState.errors.username || premiumUsername}
loading={isGoogleLoading}
StartIcon={() => (
<>
<img
className={classNames(
"text-subtle mr-2 h-4 w-4 dark:invert",
premiumUsername && "opacity-50"
)}
src="/google-icon.svg"
alt=""
/>
</>
)}
CustomStartIcon={
<img
className={classNames(
"text-subtle mr-2 h-4 w-4 dark:invert",
premiumUsername && "opacity-50"
)}
src="/google-icon.svg"
alt=""
/>
}
className={classNames(
"w-full justify-center rounded-md text-center",
formMethods.formState.errors.username ? "opacity-50" : ""
@@ -467,7 +474,7 @@ export default function Signup({
`${process.env.NEXT_PUBLIC_WEBAPP_URL}/auth/sso/saml` + `?${sp.toString()}`
);
}}>
<ShieldCheckIcon className="mr-2 h-5 w-5" />
<Icon name="shield-check" className="mr-2 h-5 w-5" />
{t("saml_sso")}
</Button>
) : null}
@@ -574,7 +581,7 @@ export default function Signup({
<>
<div className="max-w-52 mb-8 flex flex-col leading-none sm:mb-0">
<div className="text-emphasis items-center">
<feature.icon className="mb-1 h-4 w-4" />
<Icon name={feature.icon} className="mb-1 h-4 w-4" />
<span className="text-sm font-medium">{t(feature.title)}</span>
</div>
<div className="text-subtle text-sm">
apps/web/pages/team/[slug].tsx
+1 -2
View File
@@ -20,7 +20,6 @@ import useTheme from "@calcom/lib/hooks/useTheme";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
import { Avatar, Button, HeadSeo, UnpublishedEntity, UserAvatarGroup } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
@@ -236,7 +235,7 @@ function TeamPage({
<aside className="dark:text-inverted mt-8 flex justify-center text-center">
<Button
color="minimal"
EndIcon={ArrowRight}
EndIcon="arrow-right"
data-testid="book-a-team-member-btn"
className="dark:hover:bg-darkgray-200"
href={{
apps/web/pages/teams/index.tsx
+1 -2
View File
@@ -6,7 +6,6 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui";
import { Plus } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
@@ -29,7 +28,7 @@ function Teams() {
<Button
data-testid="new-team-btn"
variant="fab"
StartIcon={Plus}
StartIcon="plus"
type="button"
href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
{t("new")}
apps/web/pages/upgrade.tsx
+2 -3
View File
@@ -8,7 +8,6 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Button, EmptyScreen } from "@calcom/ui";
import { showToast } from "@calcom/ui";
import { ArrowUpCircle, CheckCircle } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
@@ -38,7 +37,7 @@ export default function UpgradePage() {
<EmptyScreen
headline="Your upgrade is here"
description="Improve your scheduling experience by upgrading to the new plan and enjoy the new features."
Icon={ArrowUpCircle}
Icon="circle-arrow-up"
buttonRaw={
<Button
onClick={() => {
@@ -52,7 +51,7 @@ export default function UpgradePage() {
<EmptyScreen
headline="You are all set"
description="You are already on the latest plan. Nothing to upgrade. Enjoy the new features and reach out to us with any questions!"
Icon={CheckCircle}
Icon="circle-check"
buttonRaw={<Button href="mailto:support@cal.com">{t("contact_support")}</Button>}
/>
)}
package.json
-1
View File
@@ -109,7 +109,6 @@
},
"dependencies": {
"eslint": "^8.34.0",
"lucide-react": "^0.363.0",
"turbo": "^1.10.1"
},
"resolutions": {
packages/app-store/_components/AppCard.tsx
+3 -4
View File
@@ -5,8 +5,7 @@ import { useTranslation } from "react-i18next";
import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
import { classNames } from "@calcom/lib";
import type { RouterOutputs } from "@calcom/trpc/react";
import { Switch, Badge, Avatar, Button } from "@calcom/ui";
import { Settings } from "@calcom/ui/components/icon";
import { Switch, Badge, Avatar, Button, Icon } from "@calcom/ui";
import type { CredentialOwner } from "../types";
import OmniInstallAppButton from "./OmniInstallAppButton";
@@ -128,7 +127,7 @@ export default function AppCard({
<div className="relative p-4 pt-5 text-sm [&_input]:mb-0 [&_input]:leading-4">
{!hideSettingsIcon && (
<Link href={`/apps/${app.slug}/setup`} className="absolute right-4 top-4">
<Settings className="text-default h-4 w-4" aria-hidden="true" />
<Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
</Link>
)}
{children}
@@ -137,7 +136,7 @@ export default function AppCard({
<div className="flex h-64 w-full flex-col items-center justify-center gap-4 ">
<p>{t("this_app_is_not_setup_already")}</p>
<Link href={`/apps/${app.slug}/setup`}>
<Button StartIcon={Settings}>{t("setup")}</Button>
<Button StartIcon="settings">{t("setup")}</Button>
</Link>
</div>
)
packages/app-store/_components/OmniInstallAppButton.tsx
+1 -2
View File
@@ -3,7 +3,6 @@ import useApp from "@calcom/lib/hooks/useApp";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, showToast } from "@calcom/ui";
import { Plus } from "@calcom/ui/components/icon";
import useAddAppMutation from "../_utils/useAddAppMutation";
import { InstallAppButton } from "../components";
@@ -74,7 +73,7 @@ export default function OmniInstallAppButton({
loading={mutation.isPending}
color="secondary"
className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
StartIcon={Plus}
StartIcon="plus"
{...props}>
{t("add")}
</Button>
packages/app-store/_utils/getAppCategories.ts
+10 -20
View File
@@ -1,16 +1,6 @@
import { WEBAPP_URL } from "@calcom/lib/constants";
import type { AppCategories } from "@calcom/prisma/enums";
import type { LucideIcon } from "@calcom/ui/components/icon";
import {
Calendar,
Video,
CreditCard,
Share2,
BarChart,
Grid,
Mail,
Contact,
} from "@calcom/ui/components/icon";
import type { IconName } from "@calcom/ui";
function getHref(baseURL: string, category: string, useQueryParam: boolean) {
const baseUrlParsed = new URL(baseURL, WEBAPP_URL);
@@ -21,7 +11,7 @@ function getHref(baseURL: string, category: string, useQueryParam: boolean) {
type AppCategoryEntry = {
name: AppCategories;
href: string;
icon: LucideIcon;
icon: IconName;
};
const getAppCategories = (baseURL: string, useQueryParam: boolean): AppCategoryEntry[] => {
@@ -31,42 +21,42 @@ const getAppCategories = (baseURL: string, useQueryParam: boolean): AppCategoryE
{
name: "analytics",
href: getHref(baseURL, "analytics", useQueryParam),
icon: BarChart,
icon: "bar-chart",
},
{
name: "automation",
href: getHref(baseURL, "automation", useQueryParam),
icon: Share2,
icon: "share-2",
},
{
name: "calendar",
href: getHref(baseURL, "calendar", useQueryParam),
icon: Calendar,
icon: "calendar",
},
{
name: "conferencing",
href: getHref(baseURL, "conferencing", useQueryParam),
icon: Video,
icon: "video",
},
{
name: "crm",
href: getHref(baseURL, "crm", useQueryParam),
icon: Contact,
icon: "contact",
},
{
name: "messaging",
href: getHref(baseURL, "messaging", useQueryParam),
icon: Mail,
icon: "mail",
},
{
name: "payment",
href: getHref(baseURL, "payment", useQueryParam),
icon: CreditCard,
icon: "credit-card",
},
{
name: "other",
href: getHref(baseURL, "other", useQueryParam),
icon: Grid,
icon: "grid-3x3",
},
];
};
packages/app-store/alby/components/AlbyPaymentComponent.tsx
+2 -4
View File
@@ -9,9 +9,7 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useCopy } from "@calcom/lib/hooks/useCopy";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Button } from "@calcom/ui";
import { showToast } from "@calcom/ui";
import { ClipboardCheck, Clipboard } from "@calcom/ui/components/icon";
import { Button, showToast } from "@calcom/ui";
import { Spinner } from "@calcom/ui/components/icon/Spinner";
interface IAlbyPaymentComponentProps {
@@ -99,7 +97,7 @@ export const AlbyPaymentComponent = (props: IAlbyPaymentComponentProps) => {
color="secondary"
onClick={() => copyToClipboard(paymentRequest)}
className="text-subtle rounded-md"
StartIcon={isCopied ? ClipboardCheck : Clipboard}>
StartIcon={isCopied ? "clipboard-check" : "clipboard"}>
Copy Invoice
</Button>
<Link target="_blank" href="https://getalby.com" className="link mt-4 text-sm underline">
packages/app-store/alby/pages/setup/index.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Badge, Button, showToast } from "@calcom/ui";
import { Info } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import { albyCredentialKeysSchema } from "../../lib/albyCredentialKeysSchema";
@@ -169,9 +169,9 @@ function AlbySetupPage(props: IAlbySetupProps) {
{/* TODO: remove when invoices are generated using user identifier */}
<div className="mt-4 rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
<Info className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be used to
generate invoices. If you update your lightning address, please disconnect and setup the Alby
app again.
<Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be
used to generate invoices. If you update your lightning address, please disconnect and setup the
Alby app again.
</div>
<Link href="/apps/alby">
<Button color="secondary">Go to App Store Listing</Button>
packages/app-store/closecom/pages/setup/index.tsx
+1 -2
View File
@@ -7,7 +7,6 @@ import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, showToast, TextField } from "@calcom/ui";
import { Check, X } from "@calcom/ui/components/icon";
const formSchema = z.object({
api_key: z.string(),
@@ -107,7 +106,7 @@ export default function CloseComSetup() {
type="submit"
loading={testLoading}
disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
StartIcon={testPassed === undefined ? undefined : testPassed ? "check" : "x"}
className={
testPassed !== undefined
? testPassed
packages/app-store/components.tsx
+4 -4
View File
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import type { RouterOutputs } from "@calcom/trpc/react";
import type { App } from "@calcom/types/App";
import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
import { InstallAppButtonMap } from "./apps.browser.generated";
import type { InstallAppButtonProps } from "./types";
@@ -121,7 +121,7 @@ export const AppDependencyComponent = ({
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<Check className="mr-2 mt-1 font-semibold" />
<Icon name="check" className="mr-2 mt-1 font-semibold" />
</div>
<div>
<span className="font-semibold">
@@ -144,7 +144,7 @@ export const AppDependencyComponent = ({
<div className="items-start space-x-2.5">
<div className="text-info flex items-start">
<div>
<AlertCircle className="mr-2 mt-1 font-semibold" />
<Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
</div>
<div>
<span className="font-semibold">
@@ -160,7 +160,7 @@ export const AppDependencyComponent = ({
<span className="mr-1">
{t("connect_app", { dependencyName: dependency.name })}
</span>
<ArrowRight />
<Icon name="arrow-right" />
</Link>
</>
</div>
packages/app-store/giphy/components/SearchDialog.tsx
+6 -8
View File
@@ -3,10 +3,8 @@ import { useState } from "react";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { SVGComponent } from "@calcom/types/SVGComponent";
import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter, Input } from "@calcom/ui";
import { Link, Search } from "@calcom/ui/components/icon";
import type { LucideIcon } from "@calcom/ui/components/icon";
import type { IconName } from "@calcom/ui";
import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter, Icon, Input } from "@calcom/ui";
interface ISearchDialog {
isOpenDialog: boolean;
@@ -86,7 +84,7 @@ export const SearchDialog = (props: ISearchDialog) => {
return null;
};
const renderTab = (Icon: SVGComponent | LucideIcon, text: string, mode: Mode) => (
const renderTab = (iconName: IconName, text: string, mode: Mode) => (
<div
className={classNames(
"flex cursor-pointer items-center border-b-2 p-2 text-sm ",
@@ -97,7 +95,7 @@ export const SearchDialog = (props: ISearchDialog) => {
setGifImage("");
setSelectedMode(mode);
}}>
<Icon className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
<Icon name={iconName} className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
{text}
</div>
);
@@ -120,8 +118,8 @@ export const SearchDialog = (props: ISearchDialog) => {
</h3>
<p className="text-subtle mb-3 text-sm font-light">{t("find_gif_spice_confirmation")}</p>
<div className="border-emphasis flex items-center border-b border-solid">
{renderTab(Search, t("search_giphy"), MODE_SEARCH)}
{renderTab(Link, t("add_link_from_giphy"), MODE_URL)}
{renderTab("search", t("search_giphy"), MODE_SEARCH)}
{renderTab("link", t("add_link_from_giphy"), MODE_URL)}
</div>
<form
className="flex w-full justify-center space-x-2 space-y-2 rtl:space-x-reverse"
packages/app-store/giphy/components/SelectGifInput.tsx
+3 -4
View File
@@ -2,7 +2,6 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { Edit, Plus, X } from "@calcom/ui/components/icon";
import { SearchDialog } from "./SearchDialog";
@@ -28,7 +27,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
<Button
color="minimal"
type="button"
StartIcon={Edit}
StartIcon="pencil"
onClick={() => setShowDialog(true)}
disabled={props.disabled}>
Change
@@ -37,7 +36,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
<Button
color="minimal"
type="button"
StartIcon={Plus}
StartIcon="plus"
onClick={() => setShowDialog(true)}
disabled={props.disabled}>
Add from Giphy
@@ -48,7 +47,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
<Button
color="destructive"
type="button"
StartIcon={X}
StartIcon="x"
onClick={() => {
setSelectedGif("");
props.onChange("");
packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import Link from "next/link";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean; appName: string }) => {
const { t } = useLocale();
@@ -12,7 +12,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<Check className="mr-2 mt-1 font-semibold" />
<Icon name="check" className="mr-2 mt-1 font-semibold" />
</div>
<div>
<span className="font-semibold">{t("google_calendar_is_connected")}</span>
@@ -30,7 +30,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<AlertCircle className="mr-2 mt-1 font-semibold" />
<Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
</div>
<div>
<span className="font-semibold">{t("this_app_requires_google_calendar", { appName })}</span>
@@ -41,7 +41,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
href={`${WEBAPP_URL}/apps/google-calendar`}
className="text-info flex items-center underline">
<span className="mr-1">{t("connect_google_calendar")}</span>
<ArrowRight />
<Icon name="arrow-right" />
</Link>
</>
</div>
packages/app-store/ics-feedcalendar/pages/setup/index.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import { Toaster } from "react-hot-toast";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Alert, Button, Form, TextField } from "@calcom/ui";
import { Plus, Trash } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
export default function ICSFeedSetup() {
const { t } = useLocale();
@@ -75,7 +75,7 @@ export default function ICSFeedSetup() {
type="button"
className="mb-2 h-min text-sm"
onClick={() => setUrls((urls) => urls.filter((_, ii) => i !== ii))}>
<Trash size={16} />
<Icon name="trash" size={16} />
</button>
) : null}
</div>
@@ -88,7 +88,7 @@ export default function ICSFeedSetup() {
onClick={() => {
setUrls((urls) => urls.concat(""));
}}>
{t("add")} <Plus size={16} />
{t("add")} <Icon name="plus" size={16} />
</button>
{errorMessage && (
packages/app-store/make/pages/setup/index.tsx
+2 -3
View File
@@ -6,8 +6,7 @@ import { Toaster } from "react-hot-toast";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Tooltip, showToast } from "@calcom/ui";
import { Clipboard } from "@calcom/ui/components/icon";
import { Button, Icon, showToast, Tooltip } from "@calcom/ui";
import type { getServerSideProps } from "./_getServerSideProps";
@@ -164,7 +163,7 @@ const CopyApiKey = ({ apiKey }: { apiKey: string }) => {
}}
type="button"
className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
<Clipboard className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
<Icon name="clipboard" className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
packages/app-store/paypal/pages/setup/index.tsx
+3 -3
View File
@@ -1,4 +1,3 @@
import { AlertCircleIcon } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
@@ -7,6 +6,7 @@ import { Toaster } from "react-hot-toast";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Button, showToast, TextField } from "@calcom/ui";
import { Icon } from "@calcom/ui";
export default function PayPalSetup() {
const [newClientId, setNewClientId] = useState("");
@@ -88,7 +88,7 @@ export default function PayPalSetup() {
</p>
<p className="text-lgf text-default mt-5 inline-flex font-bold">
<AlertCircleIcon className="mr-2 mt-1 h-4 w-4" /> Important requirements:
<Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" /> Important requirements:
</p>
<ul className="text-default ml-1 mt-2 list-disc pl-2">
<li>Paypal Business account</li>
@@ -140,7 +140,7 @@ export default function PayPalSetup() {
<li>You should be all setup after this.</li>
</ol>
<p className="text-default mt-5 inline-flex font-bold">
<AlertCircleIcon className="mr-2 mt-1 h-4 w-4" />
<Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" />
Reminder:
</p>
<p className="text-default mt-2">
packages/app-store/routing-forms/components/FormActions.tsx
+1 -2
View File
@@ -33,7 +33,6 @@ import {
TextAreaField,
TextField,
} from "@calcom/ui";
import { MoreHorizontal } from "@calcom/ui/components/icon";
import getFieldIdentifier from "../lib/getFieldIdentifier";
import type { SerializableForm } from "../types/types";
@@ -174,7 +173,7 @@ export const FormActionsDropdown = ({
variant="icon"
color="secondary"
className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
StartIcon={MoreHorizontal}
StartIcon="ellipsis"
/>
</DropdownMenuTrigger>
<DropdownMenuContent>{children}</DropdownMenuContent>
packages/app-store/routing-forms/components/SingleForm.tsx
+13 -21
View File
@@ -31,14 +31,6 @@ import {
Tooltip,
VerticalDivider,
} from "@calcom/ui";
import {
ExternalLink,
Link as LinkIcon,
Download,
Code,
Trash,
MessageCircle,
} from "@calcom/ui/components/icon";
import { getAbsoluteEventTypeRedirectUrl } from "../getEventTypeRedirectUrl";
import { RoutingPages } from "../lib/RoutingPages";
@@ -90,7 +82,7 @@ const Actions = ({
type="button"
rel="noreferrer"
action="preview"
StartIcon={ExternalLink}
StartIcon="external-link"
/>
</Tooltip>
<FormAction
@@ -99,7 +91,7 @@ const Actions = ({
color="secondary"
variant="icon"
type="button"
StartIcon={LinkIcon}
StartIcon="link"
tooltip={t("copy_link_to_form")}
/>
@@ -111,7 +103,7 @@ const Actions = ({
color="secondary"
variant="icon"
type="button"
StartIcon={Download}
StartIcon="download"
/>
</Tooltip>
<FormAction
@@ -119,7 +111,7 @@ const Actions = ({
action="embed"
color="secondary"
variant="icon"
StartIcon={Code}
StartIcon="code"
tooltip={t("embed")}
/>
<DropdownMenuSeparator />
@@ -128,7 +120,7 @@ const Actions = ({
action="_delete"
// className="mr-3"
variant="icon"
StartIcon={Trash}
StartIcon="trash"
color="secondary"
type="button"
tooltip={t("delete")}
@@ -141,7 +133,7 @@ const Actions = ({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={LinkIcon}>
StartIcon="link">
{t("Copy Typeform Redirect Url")}
</FormAction>
</FormActionsDropdown>
@@ -157,7 +149,7 @@ const Actions = ({
type="button"
rel="noreferrer"
action="preview"
StartIcon={ExternalLink}>
StartIcon="external-link">
{t("preview")}
</FormAction>
<FormAction
@@ -166,7 +158,7 @@ const Actions = ({
routingForm={form}
color="minimal"
type="button"
StartIcon={LinkIcon}>
StartIcon="link">
{t("copy_link_to_form")}
</FormAction>
<FormAction
@@ -175,7 +167,7 @@ const Actions = ({
className="w-full"
color="minimal"
type="button"
StartIcon={Download}>
StartIcon="download">
{t("download_responses")}
</FormAction>
<FormAction
@@ -184,7 +176,7 @@ const Actions = ({
color="minimal"
type="button"
className="w-full"
StartIcon={Code}>
StartIcon="code">
{t("embed")}
</FormAction>
{typeformApp ? (
@@ -194,7 +186,7 @@ const Actions = ({
action="copyRedirectUrl"
color="minimal"
type="button"
StartIcon={LinkIcon}>
StartIcon="link">
{t("Copy Typeform Redirect Url")}
</FormAction>
) : null}
@@ -205,7 +197,7 @@ const Actions = ({
className="w-full"
type="button"
color="destructive"
StartIcon={Trash}>
StartIcon="trash">
{t("delete")}
</FormAction>
<div className="block sm:hidden">
@@ -495,7 +487,7 @@ function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleF
className="mt-2 px-4 py-3"
severity="neutral"
title={t("no_responses_yet")}
CustomIcon={MessageCircle}
CustomIcon="message-circle"
/>
</>
)}
packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
+3 -3
View File
@@ -9,7 +9,7 @@ import type {
} from "react-awesome-query-builder";
import { Button as CalButton, TextField, TextArea } from "@calcom/ui";
import { Trash, Plus } from "@calcom/ui/components/icon";
import { Icon } from "@calcom/ui";
const Select = dynamic(
async () => (await import("@calcom/ui")).SelectWithValidation
@@ -214,7 +214,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
if (type === "delRule" || type == "delGroup") {
return (
<button className="ml-5">
<Trash className="text-subtle m-0 h-4 w-4" onClick={onClick} />
<Icon name="trash" className="text-subtle m-0 h-4 w-4" onClick={onClick} />
</button>
);
}
@@ -228,7 +228,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
}
return (
<CalButton
StartIcon={Plus}
StartIcon="plus"
data-testid={dataTestId}
type="button"
color="secondary"

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