feather icons and inter (#3366)
This commit is contained in:
Peer Richelsen authored and 
GitHub committed
1 parent
a1fcdcae44
commit
b9645b4de5
142 files changed
+636
-941
No files matched your search
@@ -1,7 +1,7 @@
|
||||
import { XIcon } from "@heroicons/react/outline";
|
||||
import { useState } from "react";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
export default function AddToHomescreen() {
|
||||
const { t } = useLocale();
|
||||
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
|
||||
type="button"
|
||||
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<span className="sr-only">{t("dismiss")}</span>
|
||||
<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
<Icon.X className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
|
||||
},
|
||||
}}
|
||||
isSearchable={false}
|
||||
className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 font-medium text-gray-700 sm:text-sm"
|
||||
className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
|
||||
isLoading={isLoading}
|
||||
components={{ Option: ImageOption }}
|
||||
/>
|
||||
|
||||
+11
-22
@@ -1,14 +1,3 @@
|
||||
import {
|
||||
BookOpenIcon,
|
||||
CheckIcon,
|
||||
DocumentTextIcon,
|
||||
ExternalLinkIcon,
|
||||
FlagIcon,
|
||||
MailIcon,
|
||||
PlusIcon,
|
||||
ShieldCheckIcon,
|
||||
} from "@heroicons/react/outline";
|
||||
import { ChevronLeftIcon } from "@heroicons/react/solid";
|
||||
import Link from "next/link";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
@@ -19,6 +8,7 @@ import showToast from "@calcom/lib/notification";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { App as AppType } from "@calcom/types/App";
|
||||
import { Button, SkeletonButton } from "@calcom/ui";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import LicenseRequired from "@ee/components/LicenseRequired";
|
||||
|
||||
import Shell from "@components/Shell";
|
||||
@@ -94,7 +84,7 @@ const Component = ({
|
||||
<div className="bg-gray-50 px-8">
|
||||
<Link href="/apps">
|
||||
<a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
|
||||
<ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
|
||||
<Icon.ChevronLeft className="h-5 w-5" /> {t("browse_apps")}
|
||||
</a>
|
||||
</Link>
|
||||
<div className="items-center justify-between py-4 sm:flex sm:py-8">
|
||||
@@ -119,7 +109,7 @@ const Component = ({
|
||||
{!isLoading ? (
|
||||
isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
|
||||
<div className="flex space-x-3">
|
||||
<Button StartIcon={CheckIcon} color="secondary" disabled>
|
||||
<Button StartIcon={Icon.Check} color="secondary" disabled>
|
||||
{installedAppCount > 0
|
||||
? t("active_install", { count: installedAppCount })
|
||||
: t("globally_install")}
|
||||
@@ -138,7 +128,7 @@ const Component = ({
|
||||
};
|
||||
}
|
||||
return (
|
||||
<Button StartIcon={PlusIcon} {...props} data-testid="install-app-button">
|
||||
<Button StartIcon={Icon.Plus} {...props} data-testid="install-app-button">
|
||||
{t("add_another")}
|
||||
</Button>
|
||||
);
|
||||
@@ -182,8 +172,6 @@ const Component = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* reintroduce once we show permissions and features
|
||||
<NavTabs tabs={tabs} linkProps={{ shallow: true }} /> */}
|
||||
</div>
|
||||
|
||||
<div className="justify-between px-8 py-10 md:flex">
|
||||
@@ -223,7 +211,7 @@ const Component = ({
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 no-underline hover:underline"
|
||||
href={docs}>
|
||||
<BookOpenIcon className="mr-1 -mt-1 inline h-4 w-4" />
|
||||
<Icon.BookOpen className="mr-1 -mt-1 inline h-4 w-4" />
|
||||
{t("documentation")}
|
||||
</a>
|
||||
</li>
|
||||
@@ -235,7 +223,7 @@ const Component = ({
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 no-underline hover:underline"
|
||||
href={website}>
|
||||
<ExternalLinkIcon className="mr-1 -mt-px inline h-4 w-4" />
|
||||
<Icon.ExternalLink className="mr-1 -mt-px inline h-4 w-4" />
|
||||
{website.replace("https://", "")}
|
||||
</a>
|
||||
</li>
|
||||
@@ -247,7 +235,8 @@ const Component = ({
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 no-underline hover:underline"
|
||||
href={"mailto:" + email}>
|
||||
<MailIcon className="mr-1 -mt-px inline h-4 w-4" />
|
||||
<Icon.Mail className="mr-1 -mt-px inline h-4 w-4" />
|
||||
|
||||
{email}
|
||||
</a>
|
||||
</li>
|
||||
@@ -259,7 +248,7 @@ const Component = ({
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 no-underline hover:underline"
|
||||
href={tos}>
|
||||
<DocumentTextIcon className="mr-1 -mt-px inline h-4 w-4" />
|
||||
<Icon.File className="mr-1 -mt-px inline h-4 w-4" />
|
||||
{t("terms_of_service")}
|
||||
</a>
|
||||
</li>
|
||||
@@ -271,7 +260,7 @@ const Component = ({
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 no-underline hover:underline"
|
||||
href={privacy}>
|
||||
<ShieldCheckIcon className="mr-1 -mt-px inline h-4 w-4" />
|
||||
<Icon.Shield className="mr-1 -mt-px inline h-4 w-4" />
|
||||
{t("privacy_policy")}
|
||||
</a>
|
||||
</li>
|
||||
@@ -284,7 +273,7 @@ const Component = ({
|
||||
published by Cal.com. If you encounter inappropriate content or behaviour please report it.
|
||||
</small>
|
||||
<a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
|
||||
<FlagIcon className="inline h-3 w-3" /> Report App
|
||||
<Icon.Flag className="inline h-3 w-3" /> Report App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@ const DestinationCalendarSelector = ({
|
||||
}}
|
||||
isSearchable={false}
|
||||
className={classNames(
|
||||
"mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm",
|
||||
"mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
|
||||
!hidePlaceholder && "font-medium"
|
||||
)}
|
||||
onChange={(option) => {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ArrowLeftIcon, ChevronRightIcon, CodeIcon, EyeIcon, SunIcon } from "@heroicons/react/solid";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
import classNames from "classnames";
|
||||
import { useRouter } from "next/router";
|
||||
@@ -9,8 +8,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import showToast from "@calcom/lib/notification";
|
||||
import { EventType } from "@calcom/prisma/client";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { SVGComponent } from "@calcom/types/SVGComponent";
|
||||
import { Button, Switch } from "@calcom/ui";
|
||||
import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
|
||||
|
||||
import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
|
||||
@@ -452,7 +453,7 @@ const tabs = [
|
||||
{
|
||||
name: "HTML",
|
||||
tabName: "embed-code",
|
||||
icon: CodeIcon,
|
||||
icon: Icon.Code,
|
||||
type: "code",
|
||||
Component: forwardRef<
|
||||
HTMLTextAreaElement | HTMLIFrameElement | null,
|
||||
@@ -474,7 +475,8 @@ const tabs = [
|
||||
data-testid="embed-code"
|
||||
ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
|
||||
name="embed-code"
|
||||
className="h-[calc(100%-50px)]"
|
||||
className="h-[calc(100%-50px)] font-mono"
|
||||
style={{ resize: "none", overflow: "auto" }}
|
||||
readOnly
|
||||
value={
|
||||
`<!-- Cal ${embedType} embed code begins -->\n` +
|
||||
@@ -502,7 +504,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
|
||||
{
|
||||
name: "React",
|
||||
tabName: "embed-react",
|
||||
icon: CodeIcon,
|
||||
icon: Icon.Code,
|
||||
type: "code",
|
||||
Component: forwardRef<
|
||||
HTMLTextAreaElement | HTMLIFrameElement | null,
|
||||
@@ -522,8 +524,9 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
|
||||
data-testid="embed-react"
|
||||
ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
|
||||
name="embed-react"
|
||||
className="h-[calc(100%-50px)]"
|
||||
className="h-[calc(100%-50px)] font-mono"
|
||||
readOnly
|
||||
style={{ resize: "none", overflow: "auto" }}
|
||||
value={`/* First make sure that you have installed the package */
|
||||
|
||||
/* If you are using yarn */
|
||||
@@ -541,7 +544,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
|
||||
{
|
||||
name: "Preview",
|
||||
tabName: "embed-preview",
|
||||
icon: EyeIcon,
|
||||
icon: Icon.Eye,
|
||||
type: "iframe",
|
||||
Component: forwardRef<
|
||||
HTMLIFrameElement | HTMLTextAreaElement | null,
|
||||
@@ -577,7 +580,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
|
||||
const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
|
||||
return (
|
||||
<components.Control {...props}>
|
||||
<SunIcon className="h-[32px] w-[32px] text-gray-500" />
|
||||
<Icon.Sun className="ml-2 h-4 w-4 text-gray-500" />
|
||||
{children}
|
||||
</components.Control>
|
||||
);
|
||||
@@ -596,10 +599,10 @@ const ChooseEmbedTypesDialogContent = () => {
|
||||
<p className="text-sm text-gray-500">{t("choose_ways_put_cal_site")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex items-start">
|
||||
{embeds.map((embed, index) => (
|
||||
<button
|
||||
className="mr-2 w-1/3 p-3 text-left hover:rounded-md hover:border hover:bg-neutral-100"
|
||||
className="mr-2 w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-neutral-100"
|
||||
key={index}
|
||||
data-testid={embed.type}
|
||||
onClick={() => {
|
||||
@@ -804,7 +807,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||
},
|
||||
});
|
||||
}}>
|
||||
<ArrowLeftIcon className="mr-4 w-4" />
|
||||
<Icon.ArrowLeft className="mr-4 w-4" />
|
||||
</button>
|
||||
{embed.title}
|
||||
</h3>
|
||||
@@ -823,7 +826,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||
? "Floating Popup Customization"
|
||||
: "Element Click Customization"}
|
||||
</div>
|
||||
<ChevronRightIcon
|
||||
<Icon.ChevronRight
|
||||
className={`${
|
||||
isEmbedCustomizationOpen ? "rotate-90 transform" : ""
|
||||
} ml-auto h-5 w-5 text-neutral-500`}
|
||||
@@ -854,7 +857,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||
}}
|
||||
addOnLeading={<InputLeading>W</InputLeading>}
|
||||
/>
|
||||
<span className="p-2">x</span>
|
||||
<span className="p-2">×</span>
|
||||
<TextField
|
||||
labelProps={{ className: "hidden" }}
|
||||
name="height"
|
||||
@@ -1001,7 +1004,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||
onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
|
||||
<CollapsibleTrigger className="flex w-full" type="button">
|
||||
<div className="text-base font-medium text-neutral-900">Cal Booking Customization</div>
|
||||
<ChevronRightIcon
|
||||
<Icon.ChevronRight
|
||||
className={`${
|
||||
isBookingCustomizationOpen ? "rotate-90 transform" : ""
|
||||
} ml-auto h-5 w-5 text-neutral-500`}
|
||||
@@ -1132,13 +1135,15 @@ export const EmbedDialog = () => {
|
||||
|
||||
export const EmbedButton = ({
|
||||
eventTypeId,
|
||||
StartIcon,
|
||||
children,
|
||||
className = "",
|
||||
dark,
|
||||
...props
|
||||
}: {
|
||||
eventTypeId: EventType["id"];
|
||||
StartIcon?: SVGComponent;
|
||||
children?: React.ReactNode;
|
||||
className: string;
|
||||
dark?: boolean;
|
||||
}) => {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
@@ -1163,14 +1168,14 @@ export const EmbedButton = ({
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
StartIcon={StartIcon}
|
||||
size="sm"
|
||||
className={className}
|
||||
{...props}
|
||||
data-test-eventtype-id={eventTypeId}
|
||||
data-testid="event-type-embed"
|
||||
onClick={() => openEmbedModal()}>
|
||||
<CodeIcon className={classNames("h-4 w-4 ltr:mr-2 rtl:ml-2", dark ? "" : "text-neutral-500")} />
|
||||
{t("Embed")}
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@@ -1,5 +1,3 @@
|
||||
import { SwitchVerticalIcon } from "@heroicons/react/outline";
|
||||
import { SearchIcon } from "@heroicons/react/solid";
|
||||
import {
|
||||
KBarProvider,
|
||||
KBarPortal,
|
||||
@@ -11,11 +9,11 @@ import {
|
||||
useKBar,
|
||||
} from "kbar";
|
||||
import { useRouter } from "next/router";
|
||||
import { Command, CornerDownLeft } from "react-feather";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { isMac } from "@calcom/lib/isMac";
|
||||
import { Tooltip } from "@calcom/ui";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
type shortcutArrayType = {
|
||||
shortcuts?: string[];
|
||||
@@ -200,15 +198,16 @@ export const KBarContent = () => {
|
||||
<KBarPositioner>
|
||||
<KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-sm bg-white shadow-lg">
|
||||
<div className="flex items-center justify-center border-b">
|
||||
<SearchIcon className="mx-3 h-4 w-4 text-gray-500" />
|
||||
<Icon.Search className="mx-3 h-4 w-4 text-gray-500" />
|
||||
<KBarSearch className="w-full rounded-sm py-2.5 focus-visible:outline-none" />
|
||||
</div>
|
||||
<RenderResults />
|
||||
<div className="hidden items-center space-x-1 border-t px-2 py-1.5 text-xs text-gray-500 sm:flex">
|
||||
<SwitchVerticalIcon className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
|
||||
<CornerDownLeft className="h-4 w-4" />
|
||||
<Icon.ArrowUp className="h-4 w-4" />
|
||||
<Icon.ArrowDown className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
|
||||
<Icon.CornerDownLeft className="h-4 w-4" />
|
||||
<span className="pr-2">{t("open")}</span>
|
||||
{isMac ? <Command className="h-3 w-3" /> : "CTRL"}
|
||||
{isMac ? <Icon.Command className="h-3 w-3" /> : "CTRL"}
|
||||
<span className="pr-1">+ K </span>
|
||||
<span className="pr-2">{t("close")}</span>
|
||||
</div>
|
||||
@@ -228,7 +227,7 @@ export const KBarTrigger = () => {
|
||||
color="minimal"
|
||||
onClick={query.toggle}
|
||||
className="group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
|
||||
<SearchIcon className="h-5 w-5 flex-shrink-0 text-neutral-400 group-hover:text-neutral-500" />
|
||||
<Icon.Search className="h-4 w-4 flex-shrink-0 text-neutral-400 group-hover:text-neutral-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</>
|
||||
|
||||
@@ -77,7 +77,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
|
||||
<tab.icon
|
||||
className={classNames(
|
||||
isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
|
||||
"-ml-0.5 hidden h-5 w-5 ltr:mr-2 rtl:ml-2 sm:inline-block"
|
||||
"-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
import {
|
||||
CreditCardIcon,
|
||||
KeyIcon,
|
||||
LockClosedIcon,
|
||||
UserGroupIcon,
|
||||
UserIcon,
|
||||
CodeIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import React, { ComponentProps } from "react";
|
||||
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import ErrorBoundary from "@lib/ErrorBoundary";
|
||||
|
||||
import NavTabs from "./NavTabs";
|
||||
@@ -17,32 +11,32 @@ const tabs = [
|
||||
{
|
||||
name: "profile",
|
||||
href: "/settings/profile",
|
||||
icon: UserIcon,
|
||||
icon: Icon.User,
|
||||
},
|
||||
{
|
||||
name: "teams",
|
||||
href: "/settings/teams",
|
||||
icon: UserGroupIcon,
|
||||
icon: Icon.Users,
|
||||
},
|
||||
{
|
||||
name: "security",
|
||||
href: "/settings/security",
|
||||
icon: KeyIcon,
|
||||
icon: Icon.Key,
|
||||
},
|
||||
{
|
||||
name: "developer",
|
||||
href: "/settings/developer",
|
||||
icon: CodeIcon,
|
||||
icon: Icon.Terminal,
|
||||
},
|
||||
{
|
||||
name: "billing",
|
||||
href: "/settings/billing",
|
||||
icon: CreditCardIcon,
|
||||
icon: Icon.CreditCard,
|
||||
},
|
||||
{
|
||||
name: "admin",
|
||||
href: "/settings/admin",
|
||||
icon: LockClosedIcon,
|
||||
icon: Icon.Lock,
|
||||
adminRequired: true,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,19 +1,3 @@
|
||||
import { SelectorIcon } from "@heroicons/react/outline";
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
CalendarIcon,
|
||||
ClockIcon,
|
||||
CogIcon,
|
||||
CollectionIcon,
|
||||
ExternalLinkIcon,
|
||||
LightningBoltIcon,
|
||||
LinkIcon,
|
||||
LogoutIcon,
|
||||
MapIcon,
|
||||
MoonIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
ViewGridIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { UserPlan } from "@prisma/client";
|
||||
import { SessionContextValue, signOut, useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
@@ -33,6 +17,7 @@ import Dropdown, {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@calcom/ui/Dropdown";
|
||||
import { CollectionIcon, Icon } from "@calcom/ui/Icon";
|
||||
import LicenseBanner from "@ee/components/LicenseBanner";
|
||||
import TrialBanner from "@ee/components/TrialBanner";
|
||||
import HelpMenuItem from "@ee/components/support/HelpMenuItem";
|
||||
@@ -134,19 +119,19 @@ const Layout = ({
|
||||
{
|
||||
name: t("event_types_page_title"),
|
||||
href: "/event-types",
|
||||
icon: LinkIcon,
|
||||
icon: Icon.Link,
|
||||
current: router.asPath.startsWith("/event-types"),
|
||||
},
|
||||
{
|
||||
name: t("bookings"),
|
||||
href: "/bookings/upcoming",
|
||||
icon: CalendarIcon,
|
||||
icon: Icon.Calendar,
|
||||
current: router.asPath.startsWith("/bookings"),
|
||||
},
|
||||
{
|
||||
name: t("availability"),
|
||||
href: "/availability",
|
||||
icon: ClockIcon,
|
||||
icon: Icon.Clock,
|
||||
current: router.asPath.startsWith("/availability"),
|
||||
},
|
||||
routingForms
|
||||
@@ -160,14 +145,14 @@ const Layout = ({
|
||||
{
|
||||
name: t("workflows"),
|
||||
href: "/workflows",
|
||||
icon: LightningBoltIcon,
|
||||
icon: Icon.Zap,
|
||||
current: router.asPath.startsWith("/workflows"),
|
||||
pro: true,
|
||||
},
|
||||
{
|
||||
name: t("apps"),
|
||||
href: "/apps",
|
||||
icon: ViewGridIcon,
|
||||
icon: Icon.Grid,
|
||||
current: router.asPath.startsWith("/apps") && !router.asPath.startsWith("/apps/routing_forms/"),
|
||||
child: [
|
||||
{
|
||||
@@ -185,7 +170,7 @@ const Layout = ({
|
||||
{
|
||||
name: t("settings"),
|
||||
href: "/settings/profile",
|
||||
icon: CogIcon,
|
||||
icon: Icon.Settings,
|
||||
current: router.asPath.startsWith("/settings"),
|
||||
},
|
||||
];
|
||||
@@ -240,14 +225,14 @@ const Layout = ({
|
||||
item.current
|
||||
? "bg-neutral-100 text-neutral-900"
|
||||
: "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
|
||||
"group flex items-center rounded-sm px-2 py-2 text-sm font-medium"
|
||||
"group flex items-center justify-center rounded-sm py-2.5 px-2.5 text-sm font-medium sm:justify-start"
|
||||
)}>
|
||||
<item.icon
|
||||
className={classNames(
|
||||
item.current
|
||||
? "text-neutral-500"
|
||||
: "text-neutral-400 group-hover:text-neutral-500",
|
||||
"h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
|
||||
? "text-neutral-900"
|
||||
: "text-neutral-400 group-hover:text-neutral-900",
|
||||
"h-4 w-4 flex-shrink-0 md:ltr:mr-2 md:rtl:ml-3"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -285,9 +270,7 @@ const Layout = ({
|
||||
</nav>
|
||||
</div>
|
||||
<TrialBanner />
|
||||
<div
|
||||
className="rounded-sm pt-2 pb-2 pl-3 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
|
||||
data-testid="user-dropdown-trigger">
|
||||
<div data-testid="user-dropdown-trigger">
|
||||
<span className="hidden lg:inline">
|
||||
<UserDropdown />
|
||||
</span>
|
||||
@@ -333,7 +316,7 @@ const Layout = ({
|
||||
<span className="sr-only">{t("settings")}</span>
|
||||
<Link href="/settings/profile">
|
||||
<a>
|
||||
<CogIcon className="h-6 w-6" aria-hidden="true" />
|
||||
<Icon.Settings className="h-4 w-4" aria-hidden="true" />
|
||||
</a>
|
||||
</Link>
|
||||
</button>
|
||||
@@ -351,7 +334,7 @@ const Layout = ({
|
||||
<div className="mx-3 mb-8 sm:mx-8">
|
||||
<Button
|
||||
onClick={() => router.push(props.backPath as string)}
|
||||
StartIcon={ArrowLeftIcon}
|
||||
StartIcon={Icon.ArrowLeft}
|
||||
color="secondary">
|
||||
Back
|
||||
</Button>
|
||||
@@ -408,13 +391,13 @@ const Layout = ({
|
||||
item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
|
||||
itemIdx === 0 ? "rounded-l-lg" : "",
|
||||
itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
|
||||
"group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-center text-xs font-medium hover:bg-gray-50 focus:z-10 sm:text-sm"
|
||||
"group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-center text-xs text-sm font-medium hover:bg-gray-50 focus:z-10"
|
||||
)}
|
||||
aria-current={item.current ? "page" : undefined}>
|
||||
<item.icon
|
||||
className={classNames(
|
||||
item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
|
||||
"mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center"
|
||||
"mx-auto mb-1 block h-4 w-4 flex-shrink-0 text-center"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -526,11 +509,11 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||
return (
|
||||
<Dropdown open={menuOpen} onOpenChange={() => setHelpOpen(false)}>
|
||||
<DropdownMenuTrigger asChild onClick={() => setMenuOpen(true)}>
|
||||
<button className="group flex w-full cursor-pointer appearance-none items-center text-left">
|
||||
<button className="group flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left hover:bg-gray-100 sm:pl-3 md:rounded-none lg:pl-2">
|
||||
<span
|
||||
className={classNames(
|
||||
small ? "h-8 w-8" : "h-10 w-10",
|
||||
"relative flex-shrink-0 rounded-full bg-gray-300 ltr:mr-3 rtl:ml-3"
|
||||
small ? "h-8 w-8" : "h-9 w-9 ltr:mr-2 rtl:ml-3",
|
||||
"relative flex-shrink-0 rounded-full bg-gray-300 "
|
||||
)}>
|
||||
{
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
@@ -561,8 +544,8 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||
: "No public page"}
|
||||
</span>
|
||||
</span>
|
||||
<SelectorIcon
|
||||
className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
|
||||
<Icon.MoreVertical
|
||||
className="h-4 w-4 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
@@ -580,13 +563,13 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||
mutation.mutate({ away: !user?.away });
|
||||
utils.invalidateQueries("viewer.me");
|
||||
}}
|
||||
className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
|
||||
<MoonIcon
|
||||
className="flex min-w-max cursor-pointer items-center px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
|
||||
<Icon.Moon
|
||||
className={classNames(
|
||||
user.away
|
||||
? "text-purple-500 group-hover:text-purple-700"
|
||||
: "text-gray-500 group-hover:text-gray-700",
|
||||
"h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
|
||||
"h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-3"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -601,7 +584,7 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||
rel="noopener noreferrer"
|
||||
href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
|
||||
className="flex items-center px-4 py-2 text-sm text-gray-700">
|
||||
<ExternalLinkIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" />{" "}
|
||||
<Icon.ExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" />{" "}
|
||||
{t("view_public_page")}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
@@ -612,33 +595,8 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||
href={JOIN_SLACK}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
|
||||
<svg
|
||||
viewBox="0 0 2447.6 2452.5"
|
||||
className={classNames(
|
||||
"text-gray-500 group-hover:text-gray-700",
|
||||
"mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
|
||||
)}
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipRule="evenodd" fillRule="evenodd">
|
||||
<path
|
||||
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
|
||||
<Icon.Slack strokeWidth={1.5} className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" />{" "}
|
||||
{t("join_our_slack")}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
@@ -648,17 +606,17 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||
rel="noopener noreferrer"
|
||||
href={ROADMAP}
|
||||
className="flex items-center px-4 py-2 text-sm text-gray-700">
|
||||
<MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
|
||||
<Icon.Map className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" /> {t("visit_roadmap")}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<button
|
||||
className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
onClick={() => setHelpOpen(true)}>
|
||||
<QuestionMarkCircleIcon
|
||||
<Icon.HelpCircle
|
||||
className={classNames(
|
||||
"text-gray-500 group-hover:text-neutral-500",
|
||||
"h-5 w-5 flex-shrink-0 ltr:mr-3"
|
||||
"h-4 w-4 flex-shrink-0 ltr:mr-2"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -670,11 +628,11 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||
<DropdownMenuItem>
|
||||
<a
|
||||
onClick={() => signOut({ callbackUrl: "/auth/logout" })}
|
||||
className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
|
||||
<LogoutIcon
|
||||
className="flex cursor-pointer items-center px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
|
||||
<Icon.LogOut
|
||||
className={classNames(
|
||||
"text-gray-500 group-hover:text-gray-700",
|
||||
"h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
|
||||
"h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-3"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { InformationCircleIcon } from "@heroicons/react/outline";
|
||||
import { Trans } from "next-i18next";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
export function UpgradeToProDialog({
|
||||
modalOpen,
|
||||
@@ -20,7 +19,7 @@ export function UpgradeToProDialog({
|
||||
<Dialog open={modalOpen}>
|
||||
<DialogContent>
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
|
||||
<InformationCircleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />
|
||||
<Icon.AlertTriangle className="h-6 w-6 text-yellow-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
<div className="mt-3 sm:mt-0 sm:text-left">
|
||||
@@ -43,7 +42,7 @@ export function UpgradeToProDialog({
|
||||
</div>
|
||||
<div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<DialogClose asChild>
|
||||
<Button className="btn-wide table-cell text-center" onClick={() => setModalOpen(false)}>
|
||||
<Button className="table-cell w-full text-center" onClick={() => setModalOpen(false)}>
|
||||
{t("dismiss")}
|
||||
</Button>
|
||||
</DialogClose>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import Glide, { Options } from "@glidejs/glide";
|
||||
import "@glidejs/glide/dist/css/glide.core.min.css";
|
||||
import "@glidejs/glide/dist/css/glide.theme.min.css";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/solid";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
const Slider = <T extends string | unknown>({
|
||||
title = "",
|
||||
className = "",
|
||||
@@ -51,10 +52,10 @@ const Slider = <T extends string | unknown>({
|
||||
)}
|
||||
<div className="glide__arrows ml-auto" data-glide-el="controls">
|
||||
<button data-glide-dir="<" className="mr-4">
|
||||
<ArrowLeftIcon className="h-5 w-5 text-gray-600 hover:text-black" />
|
||||
<Icon.ArrowLeft className="h-5 w-5 text-gray-600 hover:text-black" />
|
||||
</button>
|
||||
<button data-glide-dir=">">
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-600 hover:text-black" />
|
||||
<Icon.ArrowRight className="h-5 w-5 text-gray-600 hover:text-black" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { PlusIcon } from "@heroicons/react/solid";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
@@ -7,6 +6,7 @@ import showToast from "@calcom/lib/notification";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Button } from "@calcom/ui";
|
||||
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Form } from "@calcom/ui/form/fields";
|
||||
|
||||
import { HttpError } from "@lib/core/http/error";
|
||||
@@ -41,7 +41,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
|
||||
return (
|
||||
<Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
|
||||
<DialogTrigger asChild>
|
||||
<Button data-testid={name} StartIcon={PlusIcon}>
|
||||
<Button data-testid={name} StartIcon={Icon.Plus}>
|
||||
{t("new_schedule_btn")}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { PlusIcon, TrashIcon } from "@heroicons/react/outline";
|
||||
import { DuplicateIcon } from "@heroicons/react/solid";
|
||||
import classNames from "classnames";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Controller, useFieldArray, useFormContext } from "react-hook-form";
|
||||
@@ -9,6 +7,7 @@ import dayjs, { Dayjs, ConfigType } from "@calcom/dayjs";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import Dropdown, { DropdownMenuContent } from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
|
||||
import { defaultDayRange } from "@lib/availability";
|
||||
@@ -231,13 +230,13 @@ export const DayRanges = ({
|
||||
<div className="space-y-2">
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="flex items-center rtl:space-x-reverse">
|
||||
<div className="flex flex-grow sm:flex-grow-0">
|
||||
<div className="flex flex-grow space-x-1 sm:flex-grow-0">
|
||||
<TimeRangeField name={`${name}.${index}`} />
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimal"
|
||||
StartIcon={TrashIcon}
|
||||
type="button"
|
||||
StartIcon={Icon.Trash}
|
||||
onClick={() => remove(index)}
|
||||
/>
|
||||
</div>
|
||||
@@ -249,7 +248,7 @@ export const DayRanges = ({
|
||||
type="button"
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={PlusIcon}
|
||||
StartIcon={Icon.Plus}
|
||||
onClick={handleAppend}
|
||||
/>
|
||||
</Tooltip>
|
||||
@@ -259,7 +258,7 @@ export const DayRanges = ({
|
||||
type="button"
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={DuplicateIcon}
|
||||
StartIcon={Icon.Copy}
|
||||
onClick={handleAppend}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid";
|
||||
import Link from "next/link";
|
||||
import { Fragment } from "react";
|
||||
|
||||
@@ -8,6 +7,7 @@ import { Availability } from "@calcom/prisma/client";
|
||||
import { inferQueryOutput } from "@calcom/trpc/react";
|
||||
import { Button } from "@calcom/ui";
|
||||
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
export function ScheduleListItem({
|
||||
schedule,
|
||||
@@ -47,7 +47,7 @@ export function ScheduleListItem({
|
||||
</div>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<Icon.MoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
@@ -61,7 +61,7 @@ export function ScheduleListItem({
|
||||
type="button"
|
||||
color="warn"
|
||||
className="w-full font-normal"
|
||||
StartIcon={isDeleting ? undefined : TrashIcon}
|
||||
StartIcon={isDeleting ? undefined : Icon.Trash}
|
||||
loading={isDeleting}>
|
||||
{isDeleting ? t("deleting") : t("delete_schedule")}
|
||||
</Button>
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
import {
|
||||
BanIcon,
|
||||
CheckIcon,
|
||||
ClockIcon,
|
||||
LocationMarkerIcon,
|
||||
PaperAirplaneIcon,
|
||||
PencilAltIcon,
|
||||
XIcon,
|
||||
} from "@heroicons/react/outline";
|
||||
import { RefreshIcon } from "@heroicons/react/solid";
|
||||
import { BookingStatus } from "@prisma/client";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
@@ -21,6 +11,7 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
|
||||
import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
import { TextArea } from "@calcom/ui/form/fields";
|
||||
|
||||
@@ -101,7 +92,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||
onClick: () => {
|
||||
setRejectionDialogIsOpen(true);
|
||||
},
|
||||
icon: BanIcon,
|
||||
icon: Icon.Slash,
|
||||
disabled: mutation.isLoading,
|
||||
},
|
||||
{
|
||||
@@ -113,7 +104,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||
onClick: () => {
|
||||
mutation.mutate(true);
|
||||
},
|
||||
icon: CheckIcon,
|
||||
icon: Icon.Check,
|
||||
disabled: mutation.isLoading,
|
||||
color: "primary",
|
||||
},
|
||||
@@ -133,22 +124,22 @@ function BookingListItem(booking: BookingItemProps) {
|
||||
? "?allRemainingBookings=true"
|
||||
: ""
|
||||
}`,
|
||||
icon: XIcon,
|
||||
icon: Icon.X,
|
||||
},
|
||||
{
|
||||
id: "edit_booking",
|
||||
label: t("edit_booking"),
|
||||
icon: PencilAltIcon,
|
||||
icon: Icon.Edit,
|
||||
actions: [
|
||||
{
|
||||
id: "reschedule",
|
||||
icon: ClockIcon,
|
||||
icon: Icon.Clock,
|
||||
label: t("reschedule_booking"),
|
||||
href: `/reschedule/${booking.uid}`,
|
||||
},
|
||||
{
|
||||
id: "reschedule_request",
|
||||
icon: PaperAirplaneIcon,
|
||||
icon: Icon.Send,
|
||||
iconClassName: "rotate-45 w-[18px] -ml-[2px]",
|
||||
label: t("send_reschedule_request"),
|
||||
onClick: () => {
|
||||
@@ -161,7 +152,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||
onClick: () => {
|
||||
setIsOpenLocationDialog(true);
|
||||
},
|
||||
icon: LocationMarkerIcon,
|
||||
icon: Icon.MapPin,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -174,7 +165,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||
const RequestSentMessage = () => {
|
||||
return (
|
||||
<div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
|
||||
<PaperAirplaneIcon className="-mt-[1px] w-4 rotate-45" />
|
||||
<Icon.Send className="-mt-[1px] w-4 rotate-45" />
|
||||
<p className="ml-2 ">{t("reschedule_request_sent")}</p>
|
||||
</div>
|
||||
);
|
||||
@@ -319,7 +310,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||
<p key={key}>{aDate}</p>
|
||||
))}>
|
||||
<div className="text-gray-600 dark:text-white">
|
||||
<RefreshIcon className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.RefreshCcw className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<p className="pl-[21px]">
|
||||
{booking.status === BookingStatus.ACCEPTED
|
||||
? `${t("event_remaining", {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { XIcon } from "@heroicons/react/solid";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { RecurringEvent } from "@calcom/types/Calendar";
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import useTheme from "@lib/hooks/useTheme";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
|
||||
@@ -39,7 +39,7 @@ export default function CancelBooking(props: Props) {
|
||||
{error && (
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
<Icon.X className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
|
||||
@@ -53,7 +53,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
|
||||
id="timeZone"
|
||||
value={selectedTimeZone}
|
||||
onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
|
||||
className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 focus:ring-black sm:text-sm"
|
||||
className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 text-sm focus:ring-black"
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -1,22 +1,8 @@
|
||||
// Get router variables
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
ClipboardCheckIcon,
|
||||
ClockIcon,
|
||||
CreditCardIcon,
|
||||
GlobeIcon,
|
||||
InformationCircleIcon,
|
||||
LocationMarkerIcon,
|
||||
RefreshIcon,
|
||||
VideoCameraIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { EventType } from "@prisma/client";
|
||||
import * as Collapsible from "@radix-ui/react-collapsible";
|
||||
import { useContracts } from "contexts/contractsContext";
|
||||
import { TFunction } from "next-i18next";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { FormattedNumber, IntlProvider } from "react-intl";
|
||||
@@ -37,6 +23,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { getRecurringFreq } from "@calcom/lib/recurringStrings";
|
||||
import { localStorage } from "@calcom/lib/webstorage";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import DatePicker from "@calcom/ui/booker/DatePicker";
|
||||
|
||||
import { timeZone as localStorageTimeZone } from "@lib/clock";
|
||||
@@ -97,7 +84,7 @@ const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
|
||||
return (
|
||||
<div className="flex h-full flex-col justify-end">
|
||||
<button title={t("profile")} onClick={() => router.replace(`${WEBSITE_URL}/${slug}`)}>
|
||||
<ArrowLeftIcon className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white" />
|
||||
<Icon.ArrowLeft className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white" />
|
||||
<p className="sr-only">Go Back</p>
|
||||
</button>
|
||||
</div>
|
||||
@@ -270,12 +257,12 @@ function TimezoneDropdown({
|
||||
<Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
|
||||
<Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
|
||||
<p className="text-gray-600 dark:text-white">
|
||||
<GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Globe className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
{timeZone}
|
||||
{isTimeOptionsOpen ? (
|
||||
<ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.ChevronUp className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.ChevronDown className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
)}
|
||||
</p>
|
||||
</Collapsible.Trigger>
|
||||
@@ -439,13 +426,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
<div className="flex flex-col space-y-4">
|
||||
{eventType?.description && (
|
||||
<p className="text-gray-600 dark:text-white">
|
||||
<InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
|
||||
<Icon.Info className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
{eventType.description}
|
||||
</p>
|
||||
)}
|
||||
{eventType?.requiresConfirmation && (
|
||||
<p className="text-gray-600 dark:text-white">
|
||||
<ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
|
||||
<Icon.CheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
{t("requires_confirmation")}
|
||||
</p>
|
||||
)}
|
||||
@@ -454,9 +441,9 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
{Object.values(AppStoreLocationType).includes(
|
||||
eventType.locations[0].type as unknown as AppStoreLocationType
|
||||
) ? (
|
||||
<VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Video className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
) : (
|
||||
<LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.MapPin className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
)}
|
||||
|
||||
{locationKeyToString(eventType.locations[0], t)}
|
||||
@@ -465,7 +452,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
{eventType.locations.length > 1 && (
|
||||
<div className="flex-warp flex text-gray-600 dark:text-white">
|
||||
<div className="mr-[10px] ml-[2px] -mt-1 ">
|
||||
<LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.MapPin className="inline-block h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
<p>
|
||||
{eventType.locations.map((el, i, arr) => {
|
||||
@@ -482,12 +469,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
</div>
|
||||
)}
|
||||
<p className="text-gray-600 dark:text-white">
|
||||
<ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Clock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
{eventType.length} {t("minutes")}
|
||||
</p>
|
||||
{eventType.price > 0 && (
|
||||
<div className="text-gray-600 dark:text-white">
|
||||
<CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
|
||||
<Icon.CreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
|
||||
<IntlProvider locale="en">
|
||||
<FormattedNumber
|
||||
value={eventType.price / 100.0}
|
||||
@@ -499,7 +486,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
)}
|
||||
{!rescheduleUid && eventType.recurringEvent && (
|
||||
<div className="text-gray-600 dark:text-white">
|
||||
<RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.RefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<div className="ml-[27px]">
|
||||
<p className="mb-1 -ml-2 inline px-2 py-1">
|
||||
{getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
|
||||
@@ -508,7 +495,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
type="number"
|
||||
min="1"
|
||||
max={eventType.recurringEvent.count}
|
||||
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
|
||||
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white"
|
||||
defaultValue={eventType.recurringEvent.count}
|
||||
onChange={(event) => {
|
||||
setRecurringEventCount(parseInt(event?.target.value));
|
||||
@@ -579,7 +566,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
{eventType?.description && (
|
||||
<div className="flex text-gray-600 dark:text-white">
|
||||
<div>
|
||||
<InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Info className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
<p>{eventType.description}</p>
|
||||
</div>
|
||||
@@ -587,7 +574,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
{eventType?.requiresConfirmation && (
|
||||
<div className="flex text-gray-600 dark:text-white">
|
||||
<div>
|
||||
<ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.CheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
{t("requires_confirmation")}
|
||||
</div>
|
||||
@@ -597,9 +584,9 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
{Object.values(AppStoreLocationType).includes(
|
||||
eventType.locations[0].type as unknown as AppStoreLocationType
|
||||
) ? (
|
||||
<VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Video className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
) : (
|
||||
<LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.MapPin className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
)}
|
||||
|
||||
{locationKeyToString(eventType.locations[0], t)}
|
||||
@@ -608,7 +595,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
{eventType.locations.length > 1 && (
|
||||
<div className="flex-warp flex text-gray-600 dark:text-white">
|
||||
<div className="mr-[10px] ml-[2px] -mt-1 ">
|
||||
<LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.MapPin className="inline-block h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
<p>
|
||||
{eventType.locations.map((el, i, arr) => {
|
||||
@@ -625,12 +612,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
</div>
|
||||
)}
|
||||
<p className="text-gray-600 dark:text-white">
|
||||
<ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Clock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
{eventType.length} {t("minutes")}
|
||||
</p>
|
||||
{!rescheduleUid && eventType.recurringEvent && (
|
||||
<div className="text-gray-600 dark:text-white">
|
||||
<RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.RefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<div className="ml-[27px]">
|
||||
<p className="mb-1 -ml-2 inline px-2 py-1">
|
||||
{getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
|
||||
@@ -639,7 +626,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
type="number"
|
||||
min="1"
|
||||
max={eventType.recurringEvent.count}
|
||||
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
|
||||
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white"
|
||||
defaultValue={eventType.recurringEvent.count}
|
||||
onChange={(event) => {
|
||||
setRecurringEventCount(parseInt(event?.target.value));
|
||||
@@ -655,7 +642,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
||||
)}
|
||||
{eventType.price > 0 && (
|
||||
<p className="-ml-2 px-2 py-1 text-gray-600 dark:text-white">
|
||||
<CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.CreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<IntlProvider locale="en">
|
||||
<FormattedNumber
|
||||
value={eventType.price / 100.0}
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
import {
|
||||
CalendarIcon,
|
||||
ClockIcon,
|
||||
CreditCardIcon,
|
||||
ExclamationCircleIcon,
|
||||
ExclamationIcon,
|
||||
InformationCircleIcon,
|
||||
ClipboardCheckIcon,
|
||||
RefreshIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client";
|
||||
import { useContracts } from "contexts/contractsContext";
|
||||
@@ -37,6 +27,7 @@ import { HttpError } from "@calcom/lib/http-error";
|
||||
import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
|
||||
import { createPaymentLink } from "@calcom/stripe/client";
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
import { EmailInput, Form } from "@calcom/ui/form/fields";
|
||||
|
||||
@@ -446,7 +437,7 @@ const BookingPage = ({
|
||||
const disableInput = !!rescheduleUid;
|
||||
const disabledExceptForOwner = disableInput && !loggedInIsOwner;
|
||||
const inputClassName =
|
||||
"focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
|
||||
"focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 text-sm";
|
||||
|
||||
let isSmsReminderNumberNeeded = false;
|
||||
|
||||
@@ -534,23 +525,23 @@ const BookingPage = ({
|
||||
)}
|
||||
{eventType?.description && (
|
||||
<p className="text-bookinglight mb-2 dark:text-white">
|
||||
<InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Info className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
{eventType.description}
|
||||
</p>
|
||||
)}
|
||||
{eventType?.requiresConfirmation && (
|
||||
<p className="text-bookinglight mb-2 dark:text-white">
|
||||
<ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Clipboard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
{t("requires_confirmation")}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-bookinglight mb-2 dark:text-white">
|
||||
<ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Clock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
{eventType.length} {t("minutes")}
|
||||
</p>
|
||||
{eventType.price > 0 && (
|
||||
<p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
|
||||
<CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
|
||||
<Icon.CreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
|
||||
<IntlProvider locale="en">
|
||||
<FormattedNumber
|
||||
value={eventType.price / 100.0}
|
||||
@@ -562,7 +553,7 @@ const BookingPage = ({
|
||||
)}
|
||||
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
|
||||
<div className="mb-3 text-gray-600 dark:text-white">
|
||||
<RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.RefreshCw className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<p className="mb-1 -ml-2 inline px-2 py-1">
|
||||
{getEveryFreqFor({
|
||||
t,
|
||||
@@ -573,7 +564,7 @@ const BookingPage = ({
|
||||
</div>
|
||||
)}
|
||||
<div className="text-bookinghighlight mb-4 flex">
|
||||
<CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
|
||||
<Icon.Calendar className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
|
||||
<div className="-mt-1">
|
||||
{(rescheduleUid || !eventType.recurringEvent?.freq) &&
|
||||
parseDate(dayjs(date).tz(timeZone()), i18n)}
|
||||
@@ -605,7 +596,7 @@ const BookingPage = ({
|
||||
{t("former_time")}
|
||||
</p>
|
||||
<p className="text-gray-500 line-through dark:text-white">
|
||||
<CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.Calendar className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
|
||||
{typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -650,7 +641,7 @@ const BookingPage = ({
|
||||
/>
|
||||
{bookingForm.formState.errors.email && (
|
||||
<div className="mt-2 flex items-center text-sm text-red-700 ">
|
||||
<ExclamationCircleIcon className="mr-2 h-3 w-3" />
|
||||
<Icon.Info className="mr-2 h-3 w-3" />
|
||||
<p>{t("email_validation_error")}</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -696,7 +687,7 @@ const BookingPage = ({
|
||||
</div>
|
||||
{bookingForm.formState.errors.phone && (
|
||||
<div className="mt-2 flex items-center text-sm text-red-700 ">
|
||||
<ExclamationCircleIcon className="mr-2 h-3 w-3" />
|
||||
<Icon.Info className="mr-2 h-3 w-3" />
|
||||
<p>{t("invalid_number")}</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -854,7 +845,7 @@ const BookingPage = ({
|
||||
</div>
|
||||
{bookingForm.formState.errors.smsReminderNumber && (
|
||||
<div className="mt-2 flex items-center text-sm text-red-700 ">
|
||||
<ExclamationCircleIcon className="mr-2 h-3 w-3" />
|
||||
<Icon.Info className="mr-2 h-3 w-3" />
|
||||
<p>{t("invalid_number")}</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -922,7 +913,7 @@ function ErrorMessage({ error }: { error: unknown }) {
|
||||
<div data-testid="booking-fail" className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
||||
<Icon.AlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ltr:ml-3 rtl:mr-3">
|
||||
<p className="text-sm text-yellow-700">
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { ExclamationIcon } from "@heroicons/react/outline";
|
||||
import { CheckIcon } from "@heroicons/react/solid";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import React, { PropsWithChildren, ReactNode } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
export type ConfirmationDialogContentProps = {
|
||||
confirmBtn?: ReactNode;
|
||||
@@ -39,17 +38,17 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
|
||||
<div className="mt-0.5 ltr:mr-3">
|
||||
{variety === "danger" && (
|
||||
<div className="mx-auto rounded-full bg-red-100 p-2 text-center">
|
||||
<ExclamationIcon className="h-5 w-5 text-red-600" />
|
||||
<Icon.AlertCircle className="h-5 w-5 text-red-600" />
|
||||
</div>
|
||||
)}
|
||||
{variety === "warning" && (
|
||||
<div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
|
||||
<ExclamationIcon className="h-5 w-5 text-orange-600" />
|
||||
<Icon.AlertCircle className="h-5 w-5 text-orange-600" />
|
||||
</div>
|
||||
)}
|
||||
{variety === "success" && (
|
||||
<div className="mx-auto rounded-full bg-green-100 p-2 text-center">
|
||||
<CheckIcon className="h-5 w-5 text-green-600" />
|
||||
<Icon.Check className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { ExclamationIcon } from "@heroicons/react/outline";
|
||||
import { CheckIcon } from "@heroicons/react/solid";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import React, { PropsWithChildren } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
export type DeleteStripeDialogContentProps = {
|
||||
cancelAllBookingsBtnText?: string;
|
||||
@@ -37,17 +36,17 @@ export default function DeleteStripeDialogContent(props: PropsWithChildren<Delet
|
||||
<div className="mt-0.5 ltr:mr-3">
|
||||
{variety === "danger" && (
|
||||
<div className="mx-auto rounded-full bg-red-100 p-2 text-center">
|
||||
<ExclamationIcon className="h-5 w-5 text-red-600" />
|
||||
<Icon.AlertTriangle className="h-5 w-5 text-red-600" />
|
||||
</div>
|
||||
)}
|
||||
{variety === "warning" && (
|
||||
<div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
|
||||
<ExclamationIcon className="h-5 w-5 text-orange-600" />
|
||||
<Icon.AlertTriangle className="h-5 w-5 text-orange-600" />
|
||||
</div>
|
||||
)}
|
||||
{variety === "success" && (
|
||||
<div className="mx-auto rounded-full bg-green-100 p-2 text-center">
|
||||
<CheckIcon className="h-5 w-5 text-green-600" />
|
||||
<Icon.Check className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { LocationMarkerIcon } from "@heroicons/react/solid";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { isValidPhoneNumber } from "libphonenumber-js";
|
||||
import dynamic from "next/dynamic";
|
||||
@@ -11,6 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import { Button } from "@calcom/ui";
|
||||
import { Dialog, DialogContent } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Form } from "@calcom/ui/form/fields";
|
||||
|
||||
import { QueryCell } from "@lib/QueryCell";
|
||||
@@ -173,7 +173,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
||||
{...locationFormMethods.register("locationLink")}
|
||||
required
|
||||
id="link"
|
||||
className="block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
||||
defaultValue={
|
||||
defaultValues
|
||||
? defaultValues.find(
|
||||
@@ -388,7 +388,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
||||
<div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
<div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
|
||||
<LocationMarkerIcon className="text-primary-600 h-6 w-6" />
|
||||
<Icon.MapPin className="text-primary-600 h-6 w-6" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
@@ -460,7 +460,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
||||
: locationOptions
|
||||
}
|
||||
isSearchable={false}
|
||||
className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
|
||||
className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
locationFormMethods.setValue("locationType", val.value);
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ClockIcon } from "@heroicons/react/outline";
|
||||
import { RescheduleResponse } from "pages/api/book/request-reschedule";
|
||||
import React, { useState, Dispatch, SetStateAction } from "react";
|
||||
import { useMutation } from "react-query";
|
||||
@@ -8,6 +7,7 @@ import showToast from "@calcom/lib/notification";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { TextArea } from "@calcom/ui/form/fields";
|
||||
|
||||
import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
|
||||
@@ -58,7 +58,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
|
||||
<DialogContent>
|
||||
<div className="flex flex-row space-x-3">
|
||||
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
|
||||
<ClockIcon className="m-auto h-6 w-6" />
|
||||
<Icon.Clock className="m-auto h-6 w-6" />
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<DialogHeader title={t("send_reschedule_request")} />
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { SchedulingType } from "@prisma/client";
|
||||
import { useSession } from "next-auth/react";
|
||||
@@ -23,6 +22,7 @@ import Dropdown, {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
|
||||
|
||||
import { HttpError } from "@lib/core/http/error";
|
||||
@@ -286,14 +286,14 @@ export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
|
||||
<Button
|
||||
onClick={() => props.openModal(props.options[0])}
|
||||
data-testid="new-event-type"
|
||||
StartIcon={PlusIcon}
|
||||
StartIcon={Icon.Plus}
|
||||
disabled={!props.canAddEvents}>
|
||||
{t("new_event_type_btn")}
|
||||
</Button>
|
||||
) : (
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button EndIcon={ChevronDownIcon}>{t("new_event_type_btn")}</Button>
|
||||
<Button EndIcon={Icon.ChevronDown}>{t("new_event_type_btn")}</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
import {
|
||||
ClipboardCheckIcon,
|
||||
ClockIcon,
|
||||
CreditCardIcon,
|
||||
RefreshIcon,
|
||||
UserIcon,
|
||||
UsersIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { Prisma, SchedulingType } from "@prisma/client";
|
||||
import { useMemo } from "react";
|
||||
import { FormattedNumber, IntlProvider } from "react-intl";
|
||||
@@ -13,6 +5,7 @@ import { FormattedNumber, IntlProvider } from "react-intl";
|
||||
import { parseRecurringEvent } from "@calcom/lib";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { baseEventTypeSelect } from "@calcom/prisma/selects";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import classNames from "@lib/classNames";
|
||||
|
||||
@@ -44,34 +37,34 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
|
||||
{eventType.description.length > 100 && "..."}
|
||||
</h2>
|
||||
)}
|
||||
<ul className="mt-2 flex flex-wrap sm:flex-nowrap">
|
||||
<li className="mr-4 mb-1 flex items-center whitespace-nowrap">
|
||||
<ClockIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
{eventType.length}m
|
||||
<ul className="mt-2 flex flex-wrap space-x-1 sm:flex-nowrap ">
|
||||
<li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
|
||||
<Icon.Clock className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
|
||||
{eventType.length} {t("minutes")}
|
||||
</li>
|
||||
{eventType.schedulingType ? (
|
||||
<li className="mr-4 mb-1 flex items-center whitespace-nowrap">
|
||||
<UsersIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
<li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
|
||||
<Icon.Users className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
|
||||
{eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
|
||||
{eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
|
||||
</li>
|
||||
) : (
|
||||
<li className="mr-4 mb-1 flex items-center whitespace-nowrap">
|
||||
<UserIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
<li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
|
||||
<Icon.User className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
|
||||
{t("1_on_1")}
|
||||
</li>
|
||||
)}
|
||||
{recurringEvent?.count && recurringEvent.count > 0 && (
|
||||
<li className="mr-4 mb-1 flex items-center whitespace-nowrap">
|
||||
<RefreshIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
<li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
|
||||
<Icon.RefreshCw className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
|
||||
{t("repeats_up_to", {
|
||||
count: recurringEvent.count,
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
{eventType.price > 0 && (
|
||||
<li className="mr-4 mb-1 flex items-center whitespace-nowrap">
|
||||
<CreditCardIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
<li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
|
||||
<Icon.CreditCard className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
|
||||
<IntlProvider locale="en">
|
||||
<FormattedNumber
|
||||
value={eventType.price / 100.0}
|
||||
@@ -82,8 +75,8 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
|
||||
</li>
|
||||
)}
|
||||
{eventType.requiresConfirmation && (
|
||||
<li className="mr-4 mb-1 flex items-center whitespace-nowrap">
|
||||
<ClipboardCheckIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
<li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
|
||||
<Icon.CheckSquare className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
|
||||
{t("requires_confirmation")}
|
||||
</li>
|
||||
)}
|
||||
|
||||
@@ -82,7 +82,7 @@ export default function RecurringEventController({
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
|
||||
className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
||||
defaultValue={recurringEventState.interval}
|
||||
onChange={(event) => {
|
||||
const newVal = {
|
||||
@@ -97,7 +97,7 @@ export default function RecurringEventController({
|
||||
options={recurringEventFreqOptions}
|
||||
value={recurringEventFreqOptions[recurringEventState.freq]}
|
||||
isSearchable={false}
|
||||
className="w-18 block min-w-0 rounded-sm sm:text-sm"
|
||||
className="w-18 block min-w-0 rounded-sm text-sm"
|
||||
onChange={(event) => {
|
||||
const newVal = {
|
||||
...recurringEventState,
|
||||
@@ -114,7 +114,7 @@ export default function RecurringEventController({
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
|
||||
className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
||||
defaultValue={recurringEventState.count}
|
||||
onChange={(event) => {
|
||||
const newVal = {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { LinkIcon } from "@heroicons/react/outline";
|
||||
import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon, UserIcon } from "@heroicons/react/solid";
|
||||
import React from "react";
|
||||
|
||||
import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
function SkeletonLoader() {
|
||||
return (
|
||||
@@ -35,11 +34,11 @@ function SkeletonItem() {
|
||||
<div className="">
|
||||
<ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
|
||||
<li className="flex items-center whitespace-nowrap">
|
||||
<ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
|
||||
<Icon.Clock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
|
||||
<SkeletonText width="12" height="4" />
|
||||
</li>
|
||||
<li className="flex items-center whitespace-nowrap">
|
||||
<UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
|
||||
<Icon.User className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
|
||||
<SkeletonText width="16" height="4" />
|
||||
</li>
|
||||
</ul>
|
||||
@@ -47,14 +46,14 @@ function SkeletonItem() {
|
||||
</div>
|
||||
<div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
|
||||
<div className="flex justify-between rtl:space-x-reverse">
|
||||
<div className="btn-icon appearance-none">
|
||||
<ExternalLinkIcon className="h-5 w-5" />
|
||||
<div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
|
||||
<Icon.ExternalLink className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="btn-icon appearance-none">
|
||||
<LinkIcon className="h-5 w-5" />
|
||||
<div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
|
||||
<Icon.Link className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="btn-icon appearance-none">
|
||||
<DotsHorizontalIcon className="h-5 w-5" />
|
||||
<div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
|
||||
<Icon.MoreHorizontal className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -56,7 +56,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
|
||||
defaultValue={selectedInputOption}
|
||||
options={inputOptions}
|
||||
isSearchable={false}
|
||||
className="mt-1 mb-2 block w-full min-w-0 flex-1 sm:text-sm"
|
||||
className="mt-1 mb-2 block w-full min-w-0 flex-1 text-sm"
|
||||
onChange={(option) => option && field.onChange(option.value)}
|
||||
value={selectedInputOption}
|
||||
onBlur={field.onBlur}
|
||||
|
||||
@@ -74,7 +74,7 @@ const ChangePasswordSection = () => {
|
||||
name="current_password"
|
||||
id="current_password"
|
||||
required
|
||||
className="block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
||||
placeholder={t("your_old_password")}
|
||||
/>
|
||||
</div>
|
||||
@@ -91,7 +91,7 @@ const ChangePasswordSection = () => {
|
||||
value={newPassword}
|
||||
required
|
||||
onInput={(e) => setNewPassword(e.currentTarget.value)}
|
||||
className="block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
||||
placeholder={t("super_secure_new_password")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -70,7 +70,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
|
||||
required
|
||||
value={password}
|
||||
onInput={(e) => setPassword(e.currentTarget.value)}
|
||||
className="block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -139,7 +139,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
|
||||
required
|
||||
value={password}
|
||||
onInput={(e) => setPassword(e.currentTarget.value)}
|
||||
className="block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -175,7 +175,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
|
||||
minLength={6}
|
||||
inputMode="numeric"
|
||||
onInput={(e) => setTotpCode(e.currentTarget.value)}
|
||||
className="block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
||||
autoComplete="one-time-code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ShieldCheckIcon } from "@heroicons/react/solid";
|
||||
import React from "react";
|
||||
|
||||
import { ShieldCheckIcon } from "@calcom/ui/Icon";
|
||||
|
||||
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
|
||||
return (
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
|
||||
@@ -90,7 +90,7 @@ export default function MemberChangeRoleModal(props: {
|
||||
value={role}
|
||||
onChange={(option) => option && setRole(option)}
|
||||
id="role"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 text-sm"
|
||||
/>
|
||||
</div>
|
||||
{errorMessage && (
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { UserIcon } from "@heroicons/react/outline";
|
||||
import { InformationCircleIcon } from "@heroicons/react/solid";
|
||||
import { MembershipRole } from "@prisma/client";
|
||||
import React, { useState, SyntheticEvent, useMemo } from "react";
|
||||
|
||||
@@ -7,6 +5,7 @@ import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { TextField } from "@calcom/ui/form/fields";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
@@ -75,7 +74,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
|
||||
<DialogContent>
|
||||
<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">
|
||||
<UserIcon className="text-brandcontrast h-6 w-6" />
|
||||
<Icon.User className="text-brandcontrast h-6 w-6" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
@@ -104,7 +103,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
|
||||
options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
|
||||
id="role"
|
||||
name="role"
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex items-start">
|
||||
@@ -114,7 +113,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
|
||||
name="sendInviteEmail"
|
||||
defaultChecked
|
||||
id="sendInviteEmail"
|
||||
className="rounded-sm border-gray-300 text-black sm:text-sm"
|
||||
className="rounded-sm border-gray-300 text-sm text-black"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm ltr:ml-2 rtl:mr-2">
|
||||
@@ -124,7 +123,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row rounded-sm bg-gray-50 px-3 py-2">
|
||||
<InformationCircleIcon className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
|
||||
<Icon.Info className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
|
||||
<span className="ml-2 text-sm leading-tight text-gray-500">
|
||||
Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not have
|
||||
a pro account.{" "}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { LockClosedIcon, PencilIcon, UserRemoveIcon } from "@heroicons/react/outline";
|
||||
import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon } from "@heroicons/react/solid";
|
||||
import { MembershipRole } from "@prisma/client";
|
||||
import { signIn } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
@@ -17,6 +15,7 @@ import Dropdown, {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
|
||||
|
||||
@@ -101,7 +100,7 @@ export default function MemberListItem(props: Props) {
|
||||
{props.member.role && <TeamRole role={props.member.role} />}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex space-x-2">
|
||||
<Tooltip side="top" content={t("team_view_user_availability")}>
|
||||
<Button
|
||||
// Disabled buttons don't trigger Tooltips
|
||||
@@ -113,19 +112,19 @@ export default function MemberListItem(props: Props) {
|
||||
disabled={!props.member.accepted}
|
||||
onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
|
||||
color="minimal"
|
||||
className="group hidden h-10 w-10 items-center justify-center border border-transparent px-0 py-0 text-neutral-400 hover:border-gray-200 hover:bg-white sm:flex">
|
||||
<ClockIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
size="icon">
|
||||
<Icon.Clock className="h-5 w-5 group-hover:text-gray-800" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 hover:bg-white">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<Link href={"/" + props.member.username}>
|
||||
<a target="_blank">
|
||||
<Button color="minimal" StartIcon={ExternalLinkIcon} className="w-full font-normal">
|
||||
<Button color="minimal" StartIcon={Icon.ExternalLink} className="w-full font-normal">
|
||||
{t("view_public_page")}
|
||||
</Button>
|
||||
</a>
|
||||
@@ -143,7 +142,7 @@ export default function MemberListItem(props: Props) {
|
||||
<Button
|
||||
onClick={() => setShowChangeMemberRoleModal(true)}
|
||||
color="minimal"
|
||||
StartIcon={PencilIcon}
|
||||
StartIcon={Icon.Edit2}
|
||||
className="w-full flex-shrink-0 font-normal">
|
||||
{t("edit_role")}
|
||||
</Button>
|
||||
@@ -159,7 +158,7 @@ export default function MemberListItem(props: Props) {
|
||||
<Button
|
||||
onClick={() => setShowImpersonateModal(true)}
|
||||
color="minimal"
|
||||
StartIcon={LockClosedIcon}
|
||||
StartIcon={Icon.Lock}
|
||||
className="w-full flex-shrink-0 font-normal">
|
||||
{t("impersonate")}
|
||||
</Button>
|
||||
@@ -175,7 +174,7 @@ export default function MemberListItem(props: Props) {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
color="warn"
|
||||
StartIcon={UserRemoveIcon}
|
||||
StartIcon={Icon.UserMinus}
|
||||
className="w-full font-normal">
|
||||
{t("remove_member")}
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { UsersIcon } from "@heroicons/react/outline";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
@@ -6,6 +5,7 @@ import { trpc } from "@calcom/trpc/react";
|
||||
import { Button } from "@calcom/ui";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
@@ -39,7 +39,7 @@ export default function TeamCreate(props: Props) {
|
||||
<DialogContent>
|
||||
<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">
|
||||
<UsersIcon className="text-brandcontrast h-6 w-6" />
|
||||
<Icon.Users className="text-brandcontrast h-6 w-6" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
@@ -62,7 +62,7 @@ export default function TeamCreate(props: Props) {
|
||||
id="name"
|
||||
placeholder="Acme Inc."
|
||||
required
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
{errorMessage && <Alert severity="error" title={errorMessage} />}
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
import { LogoutIcon } from "@heroicons/react/outline";
|
||||
import {
|
||||
DotsHorizontalIcon,
|
||||
ExternalLinkIcon,
|
||||
LinkIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
CheckIcon,
|
||||
XIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { MembershipRole } from "@prisma/client";
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -22,6 +12,7 @@ import Dropdown, {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
|
||||
import classNames from "@lib/classNames";
|
||||
@@ -110,8 +101,8 @@ export default function TeamListItem(props: Props) {
|
||||
</div>
|
||||
<div className="block sm:hidden">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 ">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
@@ -119,7 +110,7 @@ export default function TeamListItem(props: Props) {
|
||||
color="minimal"
|
||||
size="sm"
|
||||
className="w-full rounded-none font-medium"
|
||||
StartIcon={CheckIcon}
|
||||
StartIcon={Icon.Check}
|
||||
onClick={acceptInvite}>
|
||||
{t("accept")}
|
||||
</Button>
|
||||
@@ -129,7 +120,7 @@ export default function TeamListItem(props: Props) {
|
||||
color="warn"
|
||||
size="sm"
|
||||
className="w-full rounded-none font-medium"
|
||||
StartIcon={XIcon}
|
||||
StartIcon={Icon.X}
|
||||
onClick={declineInvite}>
|
||||
{t("reject")}
|
||||
</Button>
|
||||
@@ -140,7 +131,7 @@ export default function TeamListItem(props: Props) {
|
||||
</>
|
||||
)}
|
||||
{!isInvitee && (
|
||||
<div className="flex rtl:space-x-reverse">
|
||||
<div className="flex space-x-2 rtl:space-x-reverse">
|
||||
<TeamRole role={team.role} />
|
||||
|
||||
<Tooltip side="top" content={t("copy_link_team")}>
|
||||
@@ -153,12 +144,12 @@ export default function TeamListItem(props: Props) {
|
||||
size="icon"
|
||||
color="minimal"
|
||||
type="button">
|
||||
<LinkIcon className="h-5 w-5 group-hover:text-gray-600" />
|
||||
<Icon.Link className="h-5 w-5 group-hover:text-gray-600" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 ">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{isAdmin && (
|
||||
@@ -169,7 +160,7 @@ export default function TeamListItem(props: Props) {
|
||||
color="minimal"
|
||||
size="sm"
|
||||
className="w-full rounded-none font-medium"
|
||||
StartIcon={PencilIcon}>
|
||||
StartIcon={Icon.Edit2}>
|
||||
{t("edit_team")}
|
||||
</Button>
|
||||
</a>
|
||||
@@ -183,7 +174,7 @@ export default function TeamListItem(props: Props) {
|
||||
color="minimal"
|
||||
size="sm"
|
||||
className="w-full rounded-none font-medium"
|
||||
StartIcon={ExternalLinkIcon}>
|
||||
StartIcon={Icon.ExternalLink}>
|
||||
{t("preview_team")}
|
||||
</Button>
|
||||
</a>
|
||||
@@ -201,7 +192,7 @@ export default function TeamListItem(props: Props) {
|
||||
color="warn"
|
||||
size="sm"
|
||||
className="w-full rounded-none font-medium"
|
||||
StartIcon={TrashIcon}>
|
||||
StartIcon={Icon.Trash}>
|
||||
{t("disband_team")}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
@@ -227,7 +218,7 @@ export default function TeamListItem(props: Props) {
|
||||
type="button"
|
||||
color="warn"
|
||||
size="lg"
|
||||
StartIcon={LogoutIcon}
|
||||
StartIcon={Icon.LogOut}
|
||||
className="w-full rounded-none"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { HashtagIcon, InformationCircleIcon, LinkIcon, PhotographIcon } from "@heroicons/react/solid";
|
||||
import React, { useRef, useState } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
@@ -8,6 +7,7 @@ import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { TextField } from "@calcom/ui/form/fields";
|
||||
|
||||
import ImageUploader from "@components/ImageUploader";
|
||||
@@ -82,7 +82,7 @@ export default function TeamSettings(props: Props) {
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="flex-grow space-y-6">
|
||||
<SettingInputContainer
|
||||
Icon={LinkIcon}
|
||||
Icon={Icon.Link}
|
||||
label="Team URL"
|
||||
htmlFor="team-url"
|
||||
Input={
|
||||
@@ -100,7 +100,7 @@ export default function TeamSettings(props: Props) {
|
||||
}
|
||||
/>
|
||||
<SettingInputContainer
|
||||
Icon={HashtagIcon}
|
||||
Icon={Icon.Hash}
|
||||
label="Team Name"
|
||||
htmlFor="name"
|
||||
Input={
|
||||
@@ -111,7 +111,7 @@ export default function TeamSettings(props: Props) {
|
||||
id="name"
|
||||
placeholder={t("your_team_name")}
|
||||
required
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
|
||||
defaultValue={team?.name as string}
|
||||
/>
|
||||
}
|
||||
@@ -119,7 +119,7 @@ export default function TeamSettings(props: Props) {
|
||||
<hr />
|
||||
<div>
|
||||
<SettingInputContainer
|
||||
Icon={InformationCircleIcon}
|
||||
Icon={Icon.Info}
|
||||
label={t("about")}
|
||||
htmlFor="about"
|
||||
Input={
|
||||
@@ -130,7 +130,7 @@ export default function TeamSettings(props: Props) {
|
||||
name="about"
|
||||
rows={3}
|
||||
defaultValue={team?.bio as string}
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
|
||||
/>
|
||||
<p className="mt-2 text-sm text-gray-500">{t("team_description")}</p>
|
||||
</>
|
||||
@@ -139,7 +139,7 @@ export default function TeamSettings(props: Props) {
|
||||
</div>
|
||||
<div>
|
||||
<SettingInputContainer
|
||||
Icon={PhotographIcon}
|
||||
Icon={Icon.Image}
|
||||
label="Logo"
|
||||
htmlFor="avatar"
|
||||
Input={
|
||||
@@ -151,7 +151,7 @@ export default function TeamSettings(props: Props) {
|
||||
name="avatar"
|
||||
id="avatar"
|
||||
placeholder="URL"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
|
||||
defaultValue={team?.logo ?? undefined}
|
||||
/>
|
||||
<ImageUploader
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ClockIcon, ExternalLinkIcon, LinkIcon, LogoutIcon, TrashIcon } from "@heroicons/react/solid";
|
||||
import { MembershipRole } from "@prisma/client";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
@@ -8,6 +7,7 @@ import showToast from "@calcom/lib/notification";
|
||||
import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
@@ -66,11 +66,11 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
|
||||
<div className="space-y-1">
|
||||
<Link href={permalink} passHref={true}>
|
||||
<a target="_blank">
|
||||
<LinkIconButton Icon={ExternalLinkIcon}>{t("preview")}</LinkIconButton>
|
||||
<LinkIconButton Icon={Icon.ExternalLink}>{t("preview")}</LinkIconButton>
|
||||
</a>
|
||||
</Link>
|
||||
<LinkIconButton
|
||||
Icon={LinkIcon}
|
||||
Icon={Icon.Link}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(permalink);
|
||||
showToast("Copied to clipboard", "success");
|
||||
@@ -84,7 +84,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
Icon={TrashIcon}>
|
||||
Icon={Icon.Trash}>
|
||||
{t("disband_team")}
|
||||
</LinkIconButton>
|
||||
</DialogTrigger>
|
||||
@@ -100,7 +100,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<LinkIconButton
|
||||
Icon={LogoutIcon}
|
||||
Icon={Icon.LogOut}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
@@ -120,7 +120,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
|
||||
{props.team?.id && props.role !== MembershipRole.MEMBER && (
|
||||
<Link href={`/settings/teams/${props.team.id}/availability`}>
|
||||
<div className="mt-5 hidden space-y-1 sm:block">
|
||||
<LinkIconButton Icon={ClockIcon}>View Availability</LinkIconButton>
|
||||
<LinkIconButton Icon={Icon.Clock}>View Availability</LinkIconButton>
|
||||
<p className="mt-2 text-sm text-gray-500">See your team members availability at a glance.</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { ArrowRightIcon } from "@heroicons/react/outline";
|
||||
import { ArrowLeftIcon } from "@heroicons/react/solid";
|
||||
import classnames from "classnames";
|
||||
import Link from "next/link";
|
||||
import { TeamPageProps } from "pages/team/[slug]";
|
||||
@@ -7,6 +5,7 @@ import React from "react";
|
||||
|
||||
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
@@ -38,7 +37,7 @@ const Team = ({ team }: TeamPageProps) => {
|
||||
return (
|
||||
<Link key={member.id} href={`/${member.username}`}>
|
||||
<div className={classes}>
|
||||
<ArrowRightIcon
|
||||
<Icon.ArrowRight
|
||||
className={classnames(
|
||||
"text-black dark:text-white",
|
||||
"absolute top-4 right-4",
|
||||
@@ -85,7 +84,7 @@ const Team = ({ team }: TeamPageProps) => {
|
||||
<Members members={team.members} />
|
||||
{team.eventTypes.length > 0 && (
|
||||
<aside className="mt-8 text-center dark:text-white">
|
||||
<Button color="secondary" href={`/team/${team.slug}`} shallow={true} StartIcon={ArrowLeftIcon}>
|
||||
<Button color="secondary" href={`/team/${team.slug}`} shallow={true} StartIcon={Icon.ArrowLeft}>
|
||||
{t("go_back")}
|
||||
</Button>
|
||||
</aside>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { PencilIcon } from "@heroicons/react/solid";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
const EditableHeading = ({
|
||||
title,
|
||||
onChange,
|
||||
@@ -24,7 +25,7 @@ const EditableHeading = ({
|
||||
{title}
|
||||
</h1>
|
||||
{!readOnly ? (
|
||||
<PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
|
||||
<Icon.Edit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { InformationCircleIcon } from "@heroicons/react/solid";
|
||||
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
|
||||
export default function InfoBadge({ content }: { content: string }) {
|
||||
@@ -7,7 +6,7 @@ export default function InfoBadge({ content }: { content: string }) {
|
||||
<>
|
||||
<Tooltip side="top" content={content}>
|
||||
<span title={content}>
|
||||
<InformationCircleIcon className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
|
||||
<Icon.Info className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</>
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function SettingInputContainer({
|
||||
htmlFor,
|
||||
}: {
|
||||
Input: React.ReactNode;
|
||||
Icon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
|
||||
Icon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element | null;
|
||||
label: string;
|
||||
htmlFor?: string;
|
||||
}) {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { ChevronDownIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
|
||||
import React, { FC } from "react";
|
||||
|
||||
import Button from "@calcom/ui/Button";
|
||||
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { SVGComponent } from "@lib/types/SVGComponent";
|
||||
|
||||
@@ -37,8 +37,8 @@ const DropdownActions = ({
|
||||
return (
|
||||
<Dropdown>
|
||||
{!actionTrigger ? (
|
||||
<DropdownMenuTrigger className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
) : (
|
||||
<DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
|
||||
@@ -84,7 +84,7 @@ const TableActions: FC<Props> = ({ actions }) => {
|
||||
onClick={action.onClick || defaultAction}
|
||||
StartIcon={action.icon}
|
||||
startIconClassName={action.iconClassName}
|
||||
{...(action?.actions ? { EndIcon: ChevronDownIcon } : null)}
|
||||
{...(action?.actions ? { EndIcon: Icon.ChevronDown } : null)}
|
||||
disabled={action.disabled}
|
||||
color={action.color || "secondary"}>
|
||||
{action.label}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { CheckIcon, ExternalLinkIcon, PencilAltIcon, StarIcon, XIcon } from "@heroicons/react/solid";
|
||||
import classNames from "classnames";
|
||||
import { debounce } from "lodash";
|
||||
import { MutableRefObject, useCallback, useEffect, useState } from "react";
|
||||
@@ -12,6 +11,7 @@ import { trpc } from "@calcom/trpc/react";
|
||||
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Input, Label } from "@calcom/ui/form/fields";
|
||||
|
||||
export enum UsernameChangeStatusEnum {
|
||||
@@ -145,6 +145,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||
<div className="flex flex-row">
|
||||
<Button
|
||||
type="button"
|
||||
color="primary"
|
||||
className="mx-2"
|
||||
onClick={() => setOpenDialogSaveUsername(true)}
|
||||
data-testid={`update-username-btn-${index}`}>
|
||||
@@ -152,7 +153,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
color="secondary"
|
||||
className="mx-2"
|
||||
onClick={() => {
|
||||
if (currentUsername) {
|
||||
@@ -223,8 +224,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||
premiumUsername ? "text-orange-500" : "",
|
||||
usernameIsAvailable ? "" : ""
|
||||
)}>
|
||||
{premiumUsername ? <StarIcon className="mt-[4px] w-6" /> : <></>}
|
||||
{!premiumUsername && usernameIsAvailable ? <CheckIcon className="mt-[4px] w-6" /> : <></>}
|
||||
{premiumUsername ? <Icon.Star className="mt-[4px] w-6" /> : <></>}
|
||||
{!premiumUsername && usernameIsAvailable ? <Icon.Check className="mt-[4px] w-6" /> : <></>}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -250,17 +251,12 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||
)}
|
||||
<Dialog open={openDialogSaveUsername}>
|
||||
<DialogContent>
|
||||
<DialogClose asChild>
|
||||
<div className="fixed top-1 right-1 flex h-8 w-8 justify-center rounded-full hover:bg-gray-200">
|
||||
<XIcon className="w-4" />
|
||||
</div>
|
||||
</DialogClose>
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
|
||||
<PencilAltIcon className="m-auto h-6 w-6" />
|
||||
<Icon.Edit2 className="m-auto h-6 w-6" />
|
||||
</div>
|
||||
<div className="mb-4 w-full px-4 pt-1">
|
||||
<DialogHeader title="Confirm username change" />
|
||||
<DialogHeader title={t("confirm_username_change_dialog_title")} />
|
||||
{usernameChangeCondition && usernameChangeCondition !== UsernameChangeStatusEnum.NORMAL && (
|
||||
<p className="-mt-4 mb-4 text-sm text-gray-800">
|
||||
{usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE &&
|
||||
@@ -297,7 +293,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||
data-testid="go-to-billing"
|
||||
href={`/api/integrations/stripepayment/subscription?intentUsername=${inputUsernameValue}`}>
|
||||
<>
|
||||
{t("go_to_stripe_billing")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
|
||||
{t("go_to_stripe_billing")} <Icon.ExternalLink className="ml-1 h-4 w-4" />
|
||||
</>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { CheckIcon, PencilAltIcon, XIcon } from "@heroicons/react/solid";
|
||||
import classNames from "classnames";
|
||||
import { debounce } from "lodash";
|
||||
import { MutableRefObject, useCallback, useEffect, useState } from "react";
|
||||
@@ -10,6 +9,7 @@ import { trpc } from "@calcom/trpc/react";
|
||||
import { AppRouter } from "@calcom/trpc/server/routers/_app";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Input, Label } from "@calcom/ui/form/fields";
|
||||
|
||||
interface ICustomUsernameProps {
|
||||
@@ -137,7 +137,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
|
||||
{currentUsername !== inputUsernameValue && (
|
||||
<div className="absolute right-[2px] top-0 flex flex-row">
|
||||
<span className={classNames("mx-2 py-1")}>
|
||||
{usernameIsAvailable ? <CheckIcon className="mt-[4px] w-6" /> : <></>}
|
||||
{usernameIsAvailable ? <Icon.Check className="mt-[4px] w-6" /> : <></>}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -155,14 +155,9 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
|
||||
)}
|
||||
<Dialog open={openDialogSaveUsername}>
|
||||
<DialogContent>
|
||||
<DialogClose asChild>
|
||||
<div className="fixed top-1 right-1 flex h-8 w-8 justify-center rounded-full hover:bg-gray-200">
|
||||
<XIcon className="w-4" />
|
||||
</div>
|
||||
</DialogClose>
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
|
||||
<PencilAltIcon className="m-auto h-6 w-6" />
|
||||
<Icon.Edit2 className="m-auto h-6 w-6" />
|
||||
</div>
|
||||
<div className="mb-4 w-full px-4 pt-1">
|
||||
<DialogHeader title={t("confirm_username_change_dialog_title")} />
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { CheckIcon, XIcon } from "@heroicons/react/outline";
|
||||
import React from "react";
|
||||
import { Props } from "react-select";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import Avatar from "@components/ui/Avatar";
|
||||
import Select from "@components/ui/form/Select";
|
||||
@@ -41,7 +41,7 @@ export const CheckedSelect = ({
|
||||
{label}
|
||||
{disabled && (
|
||||
<div className="flex-grow">
|
||||
<CheckIcon className="float-right h-6 w-6 text-neutral-500" />
|
||||
<Icon.Check className="float-right h-6 w-6 text-neutral-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -59,7 +59,7 @@ export const CheckedSelect = ({
|
||||
alt={option.label}
|
||||
/>
|
||||
{option.label}
|
||||
<XIcon
|
||||
<Icon.X
|
||||
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
|
||||
className="float-right mt-0.5 h-5 w-5 cursor-pointer text-neutral-500"
|
||||
/>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { CalendarIcon } from "@heroicons/react/solid";
|
||||
import React from "react";
|
||||
import "react-calendar/dist/Calendar.css";
|
||||
import "react-date-picker/dist/DatePicker.css";
|
||||
import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
|
||||
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import classNames from "@lib/classNames";
|
||||
|
||||
type Props = {
|
||||
@@ -18,11 +19,11 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
|
||||
return (
|
||||
<PrimitiveDatePicker
|
||||
className={classNames(
|
||||
"focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 sm:text-sm",
|
||||
"focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 text-sm",
|
||||
className
|
||||
)}
|
||||
clearIcon={null}
|
||||
calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
|
||||
calendarIcon={<Icon.Calendar className="h-5 w-5 text-gray-500" />}
|
||||
value={date}
|
||||
minDate={minDate}
|
||||
disabled={disabled}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
// @see: https://github.com/wojtekmaj/react-daterange-picker/issues/91
|
||||
import { ArrowRightIcon, CalendarIcon } from "@heroicons/react/solid";
|
||||
import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
|
||||
import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
|
||||
import React from "react";
|
||||
import "react-calendar/dist/Calendar.css";
|
||||
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
type Props = {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
@@ -14,10 +15,10 @@ type Props = {
|
||||
export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
|
||||
return (
|
||||
<PrimitiveDateRangePicker
|
||||
className="rounded-sm border-gray-300 sm:text-sm"
|
||||
className="rounded-sm border-gray-300 text-sm"
|
||||
clearIcon={null}
|
||||
calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
|
||||
rangeDivider={<ArrowRightIcon className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
|
||||
calendarIcon={<Icon.Calendar className="h-5 w-5 text-gray-500" />}
|
||||
rangeDivider={<Icon.ArrowRight className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
|
||||
value={[startDate, endDate]}
|
||||
onChange={([startDate, endDate]) => {
|
||||
if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
|
||||
|
||||
@@ -22,12 +22,12 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
|
||||
ref={ref}
|
||||
type="number"
|
||||
className={classNames(
|
||||
"block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm",
|
||||
"block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm",
|
||||
rest.className
|
||||
)}
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<span className="text-gray-500 sm:text-sm" id="duration">
|
||||
<span className="text-sm text-gray-500" id="duration">
|
||||
mins
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { ChevronDownIcon } from "@heroicons/react/solid";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
import React from "react";
|
||||
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import classNames from "@lib/classNames";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
@@ -34,11 +35,11 @@ export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
className={classNames(
|
||||
"border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left sm:text-sm",
|
||||
"border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left text-sm",
|
||||
disabled && "cursor-default bg-gray-200 focus:ring-0 "
|
||||
)}>
|
||||
{getLabel(props.value) ?? placeholder}
|
||||
<ChevronDownIcon className="float-right h-5 w-5 text-neutral-500" />
|
||||
<Icon.ChevronDown className="float-right h-5 w-5 text-neutral-500" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<RadioAreaGroup className="space-y-2 text-sm" name={props.name} onChange={props.onChange}>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { PlusIcon } from "@heroicons/react/solid";
|
||||
import { useState } from "react";
|
||||
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { QueryCell } from "@lib/QueryCell";
|
||||
|
||||
@@ -42,9 +42,9 @@ export default function WebhookListContainer(props: WebhookListContainerType) {
|
||||
subtitle={props.subtitle}
|
||||
actions={
|
||||
<Button
|
||||
color="secondary"
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={PlusIcon}
|
||||
StartIcon={Icon.Plus}
|
||||
onClick={() => setNewWebhookModal(true)}
|
||||
data-testid="new_webhook"
|
||||
/>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
|
||||
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
@@ -56,7 +55,7 @@ export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhoo
|
||||
onClick={() => props.onEditWebhook()}
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={PencilAltIcon}
|
||||
StartIcon={Icon.Edit2}
|
||||
className="ml-4 w-full self-center p-2"
|
||||
/>
|
||||
</Tooltip>
|
||||
@@ -69,7 +68,7 @@ export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhoo
|
||||
}}
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={TrashIcon}
|
||||
StartIcon={Icon.Trash}
|
||||
className="ml-2 w-full self-center p-2"
|
||||
/>
|
||||
</DialogTrigger>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ChevronRightIcon, SwitchHorizontalIcon } from "@heroicons/react/solid";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
import { useState } from "react";
|
||||
import { useWatch } from "react-hook-form";
|
||||
@@ -7,6 +6,7 @@ import classNames from "@calcom/lib/classNames";
|
||||
import showToast from "@calcom/lib/notification";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { InputGroupBox } from "@calcom/ui/form/fields";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
@@ -25,7 +25,7 @@ export default function WebhookTestDisclosure() {
|
||||
return (
|
||||
<Collapsible open={open} onOpenChange={() => setOpen(!open)}>
|
||||
<CollapsibleTrigger type="button" className="flex w-full cursor-pointer">
|
||||
<ChevronRightIcon className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
|
||||
<Icon.ChevronRight className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
|
||||
<span className="text-sm font-medium text-gray-700">{t("webhook_test")}</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
@@ -33,7 +33,6 @@ export default function WebhookTestDisclosure() {
|
||||
<div className="flex justify-between bg-gray-50 p-2">
|
||||
<h3 className="self-center text-gray-700">{t("webhook_response")}</h3>
|
||||
<Button
|
||||
StartIcon={SwitchHorizontalIcon}
|
||||
type="button"
|
||||
color="minimal"
|
||||
disabled={mutation.isLoading}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { XIcon } from "@heroicons/react/outline";
|
||||
import { BadgeCheckIcon } from "@heroicons/react/solid";
|
||||
import { Trans } from "react-i18next";
|
||||
|
||||
import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon, BadgeCheckIcon } from "@calcom/ui/Icon";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
@@ -58,7 +57,7 @@ export default function LicenseBanner() {
|
||||
<DialogTrigger asChild>
|
||||
<button className="-mr-1 flex rounded-sm p-2 hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<span className="sr-only">{t("dismiss")}</span>
|
||||
<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
<Icon.X className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent />
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { ExclamationIcon } from "@heroicons/react/solid";
|
||||
import { useSession } from "next-auth/react";
|
||||
import React, { AriaRole, ComponentType, FC, Fragment } from "react";
|
||||
|
||||
import { CONSOLE_URL } from "@calcom/lib/constants";
|
||||
import EmptyScreen from "@calcom/ui/EmptyScreen";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
type LicenseRequiredProps = {
|
||||
as?: keyof JSX.IntrinsicElements | "";
|
||||
@@ -25,7 +25,7 @@ const LicenseRequired: FC<LicenseRequiredProps> = ({ children, as = "", ...rest
|
||||
children
|
||||
) : (
|
||||
<EmptyScreen
|
||||
Icon={ExclamationIcon}
|
||||
Icon={Icon.AlertTriangle}
|
||||
headline="This is an enterprise feature"
|
||||
description={
|
||||
<>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ClipboardCopyIcon } from "@heroicons/react/solid";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
@@ -8,6 +7,7 @@ import showToast from "@calcom/lib/notification";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { DialogFooter } from "@calcom/ui/Dialog";
|
||||
import { ClipboardCopyIcon } from "@calcom/ui/Icon";
|
||||
import Switch from "@calcom/ui/Switch";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
import { Form, TextField } from "@calcom/ui/form/fields";
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { PlusIcon } from "@heroicons/react/outline";
|
||||
import { useState } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import ApiKeyDialogForm from "@ee/components/apiKeys/ApiKeyDialogForm";
|
||||
import ApiKeyListItem, { TApiKeys } from "@ee/components/apiKeys/ApiKeyListItem";
|
||||
|
||||
@@ -30,12 +30,7 @@ function ApiKeyListContainer() {
|
||||
title={t("api_keys")}
|
||||
subtitle={t("api_keys_subtitle")}
|
||||
actions={
|
||||
<Button
|
||||
color="secondary"
|
||||
size="icon"
|
||||
StartIcon={PlusIcon}
|
||||
onClick={() => setNewApiKeyModal(true)}
|
||||
/>
|
||||
<Button color="minimal" size="icon" StartIcon={Icon.Plus} onClick={() => setNewApiKeyModal(true)} />
|
||||
}
|
||||
/>
|
||||
<LicenseRequired>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
|
||||
import { ExclamationIcon } from "@heroicons/react/solid";
|
||||
|
||||
import dayjs from "@calcom/dayjs";
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
|
||||
import { ListItem } from "@components/List";
|
||||
@@ -48,7 +46,7 @@ export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey:
|
||||
)}>
|
||||
{neverExpires ? (
|
||||
<div className="flex flex-row space-x-3 text-gray-500">
|
||||
<ExclamationIcon className="w-4" />
|
||||
<Icon.AlertTriangle className="w-4" />
|
||||
{t("api_key_never_expires")}
|
||||
</div>
|
||||
) : (
|
||||
@@ -65,7 +63,7 @@ export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey:
|
||||
onClick={() => props.onEditApiKey()}
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={PencilAltIcon}
|
||||
StartIcon={Icon.Edit2}
|
||||
className="ml-4 w-full self-center p-2"
|
||||
/>
|
||||
</Tooltip>
|
||||
@@ -78,7 +76,6 @@ export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey:
|
||||
}}
|
||||
color="minimal"
|
||||
size="icon"
|
||||
StartIcon={TrashIcon}
|
||||
className="ml-2 w-full self-center p-2"
|
||||
/>
|
||||
</DialogTrigger>
|
||||
|
||||
@@ -12,7 +12,7 @@ import { useLocale } from "@lib/hooks/useLocale";
|
||||
const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
|
||||
iconStyle: "solid" as const,
|
||||
classes: {
|
||||
base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black sm:text-sm",
|
||||
base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black text-sm",
|
||||
},
|
||||
style: {
|
||||
base: {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { CreditCardIcon } from "@heroicons/react/solid";
|
||||
import { Elements } from "@stripe/react-stripe-js";
|
||||
import classNames from "classnames";
|
||||
import Head from "next/head";
|
||||
@@ -9,6 +8,7 @@ import dayjs from "@calcom/dayjs";
|
||||
import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
||||
import { WEBSITE_URL } from "@calcom/lib/constants";
|
||||
import getStripe from "@calcom/stripe/client";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import PaymentComponent from "@ee/components/stripe/Payment";
|
||||
import { PaymentPageProps } from "@ee/pages/payment/[uid]";
|
||||
|
||||
@@ -73,7 +73,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
||||
<CreditCardIcon className="h-8 w-8 text-green-600" />
|
||||
<Icon.CreditCard className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { ExternalLinkIcon, ExclamationIcon } from "@heroicons/react/solid";
|
||||
import { useState } from "react";
|
||||
import { HelpScout, useChat } from "react-live-chat-loader";
|
||||
import { useChat } from "react-live-chat-loader";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import showToast from "@calcom/lib/notification";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import classNames from "@lib/classNames";
|
||||
|
||||
@@ -51,7 +51,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
|
||||
className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
rel="noreferrer">
|
||||
{t("support_documentation")}
|
||||
<ExternalLinkIcon
|
||||
<Icon.ExternalLink
|
||||
className={classNames(
|
||||
"text-neutral-400 group-hover:text-neutral-500",
|
||||
"ml-1 h-5 w-5 flex-shrink-0 ltr:mr-3"
|
||||
@@ -65,7 +65,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
|
||||
className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
rel="noreferrer">
|
||||
{t("developer_documentation")}
|
||||
<ExternalLinkIcon
|
||||
<Icon.ExternalLink
|
||||
className={classNames(
|
||||
"text-neutral-400 group-hover:text-neutral-500",
|
||||
"ml-1 h-5 w-5 flex-shrink-0 ltr:mr-3"
|
||||
@@ -86,7 +86,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
|
||||
name="comment"
|
||||
rows={3}
|
||||
onChange={(event) => setComment(event.target.value)}
|
||||
className="my-1 block w-full rounded-sm border-gray-300 py-2 pb-2 sm:text-sm"
|
||||
className="my-1 block w-full rounded-sm border-gray-300 py-2 pb-2 text-sm"
|
||||
/>
|
||||
|
||||
<div className="my-3 flex justify-end">
|
||||
@@ -189,7 +189,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
|
||||
{mutation.isError && (
|
||||
<div className="mb-4 flex bg-red-100 p-4 text-sm text-red-700">
|
||||
<div className="flex-shrink-0">
|
||||
<ExclamationIcon className="h-5 w-5" />
|
||||
<Icon.AlertTriangle className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="ml-3 flex-grow">
|
||||
<p className="font-medium">{t("feedback_error")}</p>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function TeamAvailabilityModal(props: Props) {
|
||||
value={selectedTimeZone}
|
||||
onChange={(timezone) => setSelectedTimeZone(timezone.value)}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
|
||||
className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 text-sm focus:border-neutral-800 focus:ring-neutral-800"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -73,7 +73,7 @@ export default function TeamAvailabilityModal(props: Props) {
|
||||
]}
|
||||
isSearchable={false}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container focus:ring-primary-500 focus:border-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
|
||||
className="react-select-container focus:ring-primary-500 focus:border-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
|
||||
value={{ value: frequency, label: `${frequency} minutes` }}
|
||||
onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
|
||||
/>
|
||||
|
||||
@@ -80,7 +80,7 @@ export default function TeamAvailabilityScreen(props: Props) {
|
||||
value={selectedTimeZone}
|
||||
onChange={(timezone) => setSelectedTimeZone(timezone.value)}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container w-full rounded-sm border border-gray-300 sm:text-sm"
|
||||
className="react-select-container w-full rounded-sm border border-gray-300 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
@@ -92,7 +92,7 @@ export default function TeamAvailabilityScreen(props: Props) {
|
||||
{ value: 60, label: "60 minutes" },
|
||||
]}
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
|
||||
value={{ value: frequency, label: `${frequency} minutes` }}
|
||||
onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
|
||||
/>
|
||||
|
||||
@@ -74,7 +74,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
defaultValue={actionOptions[0]}
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { PlusIcon } from "@heroicons/react/solid";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { WorkflowTriggerEvents, WorkflowActions, TimeUnit } from "@prisma/client";
|
||||
import { isValidPhoneNumber } from "libphonenumber-js";
|
||||
@@ -12,6 +11,7 @@ import showToast from "@calcom/lib/notification";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Button } from "@calcom/ui";
|
||||
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Form, TextField } from "@calcom/ui/form/fields";
|
||||
import { TIME_UNIT, WORKFLOW_ACTIONS, WORKFLOW_TRIGGER_EVENTS } from "@ee/lib/workflows/constants";
|
||||
import {
|
||||
@@ -86,7 +86,7 @@ export function NewWorkflowButton() {
|
||||
return (
|
||||
<Dialog name="new-workflow">
|
||||
<DialogTrigger asChild>
|
||||
<Button StartIcon={PlusIcon}>{t("new_workflow_btn")}</Button>
|
||||
<Button StartIcon={Icon.Plus}>{t("new_workflow_btn")}</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<div className="mb-4">
|
||||
@@ -119,7 +119,7 @@ export function NewWorkflowButton() {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
form.setValue("trigger", val.value);
|
||||
@@ -152,7 +152,7 @@ export function NewWorkflowButton() {
|
||||
type="number"
|
||||
min="1"
|
||||
defaultValue={24}
|
||||
className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm"
|
||||
className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
|
||||
{...form.register("time", { valueAsNumber: true })}
|
||||
/>
|
||||
<div className="w-28">
|
||||
@@ -163,7 +163,7 @@ export function NewWorkflowButton() {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="block min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
form.setValue("timeUnit", val.value);
|
||||
@@ -190,7 +190,7 @@ export function NewWorkflowButton() {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
form.setValue("action", val.value);
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { LightningBoltIcon } from "@heroicons/react/outline";
|
||||
import { DotsHorizontalIcon, PencilIcon, TrashIcon, LinkIcon } from "@heroicons/react/solid";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
@@ -11,6 +9,7 @@ import { Button, Tooltip } from "@calcom/ui";
|
||||
import { Dialog } from "@calcom/ui/Dialog";
|
||||
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
|
||||
import EmptyScreen from "@calcom/ui/EmptyScreen";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { HttpError } from "@lib/core/http/error";
|
||||
|
||||
@@ -21,7 +20,7 @@ const CreateFirstWorkflowView = () => {
|
||||
|
||||
return (
|
||||
<EmptyScreen
|
||||
Icon={LightningBoltIcon}
|
||||
Icon={Icon.Zap}
|
||||
headline={t("new_workflow_heading")}
|
||||
description={t("new_workflow_description")}
|
||||
/>
|
||||
@@ -88,7 +87,10 @@ export default function WorkflowListPage({ workflows }: Props) {
|
||||
<span>{t(`${workflow.trigger.toLowerCase()}_trigger`)}</span>
|
||||
</li>
|
||||
<li className="mb-1 mr-4 flex min-w-[11rem] items-center whitespace-nowrap">
|
||||
<LinkIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
<Icon.Link
|
||||
className="mr-1.5 inline h-4 w-4 text-neutral-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{workflow.activeOn && workflow.activeOn.length > 0 ? (
|
||||
<Tooltip
|
||||
content={workflow.activeOn.map((activeOn, key) => (
|
||||
@@ -104,11 +106,11 @@ export default function WorkflowListPage({ workflows }: Props) {
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="mr-5 flex flex-shrink-0">
|
||||
<div className="flex flex-shrink-0">
|
||||
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
@@ -118,7 +120,7 @@ export default function WorkflowListPage({ workflows }: Props) {
|
||||
size="sm"
|
||||
color="minimal"
|
||||
className="w-full rounded-none"
|
||||
StartIcon={PencilIcon}>
|
||||
StartIcon={Icon.Edit2}>
|
||||
{t("edit")}
|
||||
</Button>
|
||||
</Link>
|
||||
@@ -131,7 +133,7 @@ export default function WorkflowListPage({ workflows }: Props) {
|
||||
}}
|
||||
color="warn"
|
||||
size="sm"
|
||||
StartIcon={TrashIcon}
|
||||
StartIcon={Icon.Trash}
|
||||
className="w-full rounded-none">
|
||||
{t("delete")}
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid";
|
||||
import {
|
||||
TimeUnit,
|
||||
WorkflowStep,
|
||||
@@ -15,6 +14,7 @@ import classNames from "@calcom/lib/classNames";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Button } from "@calcom/ui";
|
||||
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import Select from "@calcom/ui/form/Select";
|
||||
import { TextField, TextArea } from "@calcom/ui/form/fields";
|
||||
import {
|
||||
@@ -294,7 +294,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="mt-3 block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
form.setValue(`steps.${step.stepNumber - 1}.template`, val.value);
|
||||
@@ -395,8 +395,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
|
||||
</div>
|
||||
<div>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
@@ -419,7 +419,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
|
||||
}}
|
||||
color="warn"
|
||||
size="sm"
|
||||
StartIcon={TrashIcon}
|
||||
StartIcon={Icon.Trash}
|
||||
className="w-full rounded-none">
|
||||
{t("delete")}
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { PencilIcon } from "@heroicons/react/solid";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { TimeUnit, WorkflowStep, WorkflowTriggerEvents } from "@prisma/client";
|
||||
import { isValidPhoneNumber } from "libphonenumber-js";
|
||||
@@ -11,6 +10,7 @@ import { z } from "zod";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import Loader from "@calcom/ui/Loader";
|
||||
import LicenseRequired from "@ee/components/LicenseRequired";
|
||||
import WorkflowDetailsPage from "@ee/components/workflows/WorkflowDetailsPage";
|
||||
@@ -127,7 +127,7 @@ function WorkflowPage() {
|
||||
? form.getValues("name")
|
||||
: workflow?.name}
|
||||
</h1>
|
||||
<PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
|
||||
<Icon.Edit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
|
||||
</>
|
||||
) : (
|
||||
<div style={{ marginBottom: -11 }}>
|
||||
|
||||
+12
-13
@@ -1,11 +1,10 @@
|
||||
import { BookOpenIcon, CheckIcon, DocumentTextIcon } from "@heroicons/react/outline";
|
||||
import { ChevronRightIcon } from "@heroicons/react/solid";
|
||||
import { GetStaticPropsContext } from "next";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
@@ -23,13 +22,13 @@ export default function Custom404() {
|
||||
{
|
||||
title: t("documentation"),
|
||||
description: t("documentation_description"),
|
||||
icon: DocumentTextIcon,
|
||||
icon: Icon.FileText,
|
||||
href: DOCS_URL,
|
||||
},
|
||||
{
|
||||
title: t("blog"),
|
||||
description: t("blog_description"),
|
||||
icon: BookOpenIcon,
|
||||
icon: Icon.BookOpen,
|
||||
href: `${WEBSITE_URL}/blog`,
|
||||
},
|
||||
];
|
||||
@@ -78,7 +77,7 @@ export default function Custom404() {
|
||||
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
||||
<div className="flex-shrink-0">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
|
||||
<CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
|
||||
<Icon.Check className="h-6 w-6 text-green-500" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -93,7 +92,7 @@ export default function Custom404() {
|
||||
<p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -105,7 +104,7 @@ export default function Custom404() {
|
||||
<a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
||||
<div className="flex-shrink-0">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
|
||||
<DocumentTextIcon className="h-6 w-6 text-gray-700" aria-hidden="true" />
|
||||
<Icon.FileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -118,7 +117,7 @@ export default function Custom404() {
|
||||
<p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
@@ -164,7 +163,7 @@ export default function Custom404() {
|
||||
<p className="text-base text-gray-500">{t("join_our_community")}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -216,7 +215,7 @@ export default function Custom404() {
|
||||
<a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
||||
<div className="flex-shrink-0">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
|
||||
<CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
|
||||
<Icon.Check className="h-6 w-6 text-green-500" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -233,7 +232,7 @@ export default function Custom404() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
@@ -261,7 +260,7 @@ export default function Custom404() {
|
||||
<p className="text-base text-gray-500">{link.description}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
@@ -308,7 +307,7 @@ export default function Custom404() {
|
||||
<p className="text-base text-gray-500">{t("join_our_community")}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { ArrowRightIcon } from "@heroicons/react/outline";
|
||||
import { BadgeCheckIcon } from "@heroicons/react/solid";
|
||||
import { UserPlan } from "@prisma/client";
|
||||
import classNames from "classnames";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
@@ -25,6 +23,7 @@ import defaultEvents, {
|
||||
} from "@calcom/lib/defaultEvents";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { baseEventTypeSelect } from "@calcom/prisma/selects/event-types";
|
||||
import { BadgeCheckIcon, Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
|
||||
import useTheme from "@lib/hooks/useTheme";
|
||||
@@ -68,7 +67,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
<li
|
||||
key={index}
|
||||
className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-gray-800 dark:hover:border-neutral-600">
|
||||
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
||||
<Icon.ArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
||||
<Link href={getUsernameSlugLink({ users: props.users, slug: type.slug })}>
|
||||
<a className="flex justify-between px-6 py-4" data-testid="event-type-link">
|
||||
<div className="flex-shrink">
|
||||
@@ -163,7 +162,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
key={type.id}
|
||||
style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
|
||||
className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-gray-800 dark:hover:border-neutral-600">
|
||||
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
||||
<Icon.ArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
||||
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
|
||||
<Link
|
||||
prefetch={false}
|
||||
|
||||
@@ -23,6 +23,14 @@ class MyDocument extends Document<Props> {
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
|
||||
<meta name="msapplication-TileColor" content="#ff0000" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<link
|
||||
rel="preload"
|
||||
href="/fonts/Inter-roman.var.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
<link rel="preload" href="/fonts/cal.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
|
||||
{/* Define isEmbed here so that it can be shared with App(embed-iframe) as well as the following code to change background and hide body */}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ChevronLeftIcon } from "@heroicons/react/solid";
|
||||
import { AppCategories } from "@prisma/client";
|
||||
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
|
||||
import Link from "next/link";
|
||||
@@ -7,6 +6,7 @@ import { useRouter } from "next/router";
|
||||
import { getAppRegistry } from "@calcom/app-store/_appRegistry";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import prisma from "@calcom/prisma";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import Shell from "@components/Shell";
|
||||
import AppCard from "@components/apps/AppCard";
|
||||
@@ -22,7 +22,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
|
||||
<div className="mb-10 bg-gray-50 px-4 pb-2">
|
||||
<Link href="/apps">
|
||||
<a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
|
||||
<ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
|
||||
<Icon.ChevronLeft className="h-5 w-5" /> {t("browse_apps")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { ChevronLeftIcon } from "@heroicons/react/outline";
|
||||
import { InferGetStaticPropsType } from "next";
|
||||
import Link from "next/link";
|
||||
|
||||
import { getAppRegistry } from "@calcom/app-store/_appRegistry";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import Shell from "@components/Shell";
|
||||
import AppStoreCategories from "@components/apps/Categories";
|
||||
@@ -17,7 +17,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
|
||||
<div className="mb-10 bg-gray-50 px-4 pb-2">
|
||||
<Link href="/apps">
|
||||
<a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
|
||||
<ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
|
||||
<Icon.ChevronLeft className="h-5 w-5" /> {t("browse_apps")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ArrowRightIcon, ViewGridIcon } from "@heroicons/react/solid";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
@@ -11,6 +10,7 @@ import type { App } from "@calcom/types/App";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import EmptyScreen from "@calcom/ui/EmptyScreen";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { QueryCell } from "@lib/QueryCell";
|
||||
import classNames from "@lib/classNames";
|
||||
@@ -241,12 +241,12 @@ export default function IntegrationsPage() {
|
||||
</>
|
||||
) : (
|
||||
<EmptyScreen
|
||||
Icon={ViewGridIcon}
|
||||
Icon={Icon.Grid}
|
||||
headline={t("empty_installed_apps_headline")}
|
||||
description={
|
||||
<>
|
||||
<span className="mb-6 block">{t("empty_installed_apps_description")}</span>
|
||||
<Button href="/apps" EndIcon={ArrowRightIcon}>
|
||||
<Button href="/apps" EndIcon={Icon.ArrowRight}>
|
||||
{t("empty_installed_apps_button")}
|
||||
</Button>
|
||||
</>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { XIcon } from "@heroicons/react/outline";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function Error() {
|
||||
<AuthContainer title="" description="">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
<Icon.X className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
|
||||
@@ -152,7 +152,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
||||
type="password"
|
||||
autoComplete="password"
|
||||
required
|
||||
className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 focus:outline-none focus:ring-black sm:text-sm"
|
||||
className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-black"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ArrowLeftIcon } from "@heroicons/react/solid";
|
||||
import classNames from "classnames";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import { getCsrfToken, signIn } from "next-auth/react";
|
||||
@@ -10,6 +9,7 @@ import { useForm } from "react-hook-form";
|
||||
import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { EmailField, Form, PasswordField } from "@calcom/ui/form/fields";
|
||||
|
||||
import { ErrorCode, getSession } from "@lib/auth";
|
||||
@@ -90,7 +90,7 @@ export default function Login({
|
||||
setTwoFactorRequired(false);
|
||||
form.setValue("totpCode", "");
|
||||
}}
|
||||
StartIcon={ArrowLeftIcon}
|
||||
StartIcon={Icon.ArrowLeft}
|
||||
color="minimal">
|
||||
{t("go_back")}
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { CheckIcon } from "@heroicons/react/outline";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
@@ -8,6 +7,7 @@ import { useEffect } from "react";
|
||||
import { WEBSITE_URL } from "@calcom/lib/constants";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function Logout(props: Props) {
|
||||
<AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")}>
|
||||
<div className="mb-4">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
||||
<CheckIcon className="h-6 w-6 text-green-600" />
|
||||
<Icon.Check className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
|
||||
@@ -95,20 +95,20 @@ export default function Signup({ email }: Props) {
|
||||
</span>
|
||||
}
|
||||
labelProps={{ className: "block text-sm font-medium text-gray-700" }}
|
||||
className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:border-black focus:ring-black sm:text-sm"
|
||||
className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 text-sm lowercase focus:border-black focus:ring-black"
|
||||
{...register("username")}
|
||||
required
|
||||
/>
|
||||
<EmailField
|
||||
{...register("email")}
|
||||
className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
|
||||
className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
|
||||
/>
|
||||
<PasswordField
|
||||
labelProps={{
|
||||
className: "block text-sm font-medium text-gray-700",
|
||||
}}
|
||||
{...register("password")}
|
||||
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
|
||||
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
|
||||
/>
|
||||
<PasswordField
|
||||
label={t("confirm_password")}
|
||||
@@ -119,7 +119,7 @@ export default function Signup({ email }: Props) {
|
||||
validate: (value) =>
|
||||
value === methods.watch("password") || (t("error_password_mismatch") as string),
|
||||
})}
|
||||
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
|
||||
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex space-x-2 rtl:space-x-reverse">
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { BadgeCheckIcon } from "@heroicons/react/solid";
|
||||
import { GetStaticPaths, GetStaticProps } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
@@ -11,6 +10,7 @@ import showToast from "@calcom/lib/notification";
|
||||
import { stringOrNumber } from "@calcom/prisma/zod-utils";
|
||||
import { inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { BadgeCheckIcon } from "@calcom/ui/Icon";
|
||||
import Switch from "@calcom/ui/Switch";
|
||||
import { Form } from "@calcom/ui/form/fields";
|
||||
|
||||
@@ -102,7 +102,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<TimezoneSelect
|
||||
value={value}
|
||||
className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
|
||||
className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 text-sm"
|
||||
onChange={(timezone) => onChange(timezone.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { ClockIcon } from "@heroicons/react/outline";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import showToast from "@calcom/lib/notification";
|
||||
import { inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import EmptyScreen from "@calcom/ui/EmptyScreen";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { withQuery } from "@lib/QueryCell";
|
||||
import { HttpError } from "@lib/core/http/error";
|
||||
@@ -32,7 +31,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
|
||||
<>
|
||||
{schedules.length === 0 ? (
|
||||
<EmptyScreen
|
||||
Icon={ClockIcon}
|
||||
Icon={Icon.Clock}
|
||||
headline={t("new_schedule_heading")}
|
||||
description={t("new_schedule_description")}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { CalendarIcon } from "@heroicons/react/outline";
|
||||
import { GetStaticPaths, GetStaticProps } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import { Fragment } from "react";
|
||||
@@ -10,6 +9,7 @@ import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import EmptyScreen from "@calcom/ui/EmptyScreen";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { useInViewObserver } from "@lib/hooks/useInViewObserver";
|
||||
|
||||
@@ -126,7 +126,7 @@ export default function Bookings() {
|
||||
)}
|
||||
{query.status === "success" && isEmpty && (
|
||||
<EmptyScreen
|
||||
Icon={CalendarIcon}
|
||||
Icon={Icon.Calendar}
|
||||
headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
|
||||
description={t("no_status_bookings_yet_description", {
|
||||
status: t(status).toLowerCase(),
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { CalendarIcon, XIcon, RefreshIcon } from "@heroicons/react/solid";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
@@ -13,6 +12,7 @@ import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
|
||||
import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
|
||||
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { TextField } from "@calcom/ui/form/fields";
|
||||
|
||||
import { getSession } from "@lib/auth";
|
||||
@@ -64,7 +64,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
{error && (
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
<Icon.X className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
@@ -77,7 +77,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
<>
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
<Icon.X className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 sm:mt-5">
|
||||
<h3
|
||||
@@ -106,7 +106,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
props.booking?.eventType.recurringEvent.freq &&
|
||||
props.recurringInstances && (
|
||||
<div className="text-center text-gray-500">
|
||||
<RefreshIcon className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<Icon.RefreshCcw className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
|
||||
<p className="mb-1 -ml-2 inline px-2 py-1">
|
||||
{getEveryFreqFor({
|
||||
t,
|
||||
@@ -120,7 +120,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
<div className="flex flex-row items-start justify-center space-x-3">
|
||||
{props.booking?.eventType.recurringEvent && props.recurringInstances ? (
|
||||
<>
|
||||
<CalendarIcon className="mt-2 ml-1 h-4 w-4" />
|
||||
<Icon.Calendar className="mt-2 ml-1 h-4 w-4" />
|
||||
<div className="mb-1 inline py-1 text-left">
|
||||
<div className="">
|
||||
{dayjs(props.recurringInstances[0].startTime).format(
|
||||
@@ -153,7 +153,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CalendarIcon className="mt-1 mr-1 h-4 w-4" />
|
||||
<Icon.Calendar className="mt-1 mr-1 h-4 w-4" />
|
||||
{dayjs(props.booking?.startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { CheckIcon } from "@heroicons/react/outline";
|
||||
import { ArrowLeftIcon } from "@heroicons/react/solid";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
@@ -45,7 +44,7 @@ export default function CancelSuccess() {
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
||||
<CheckIcon className="h-6 w-6 text-green-600" />
|
||||
<Icon.Check className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
@@ -65,7 +64,7 @@ export default function CancelSuccess() {
|
||||
<Button
|
||||
data-testid="back-to-bookings"
|
||||
href={isRecurringEvent ? "/bookings/recurring" : "/bookings/upcoming"}
|
||||
StartIcon={ArrowLeftIcon}>
|
||||
StartIcon={Icon.ArrowLeft}>
|
||||
{t("back_to_bookings")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -1,18 +1,3 @@
|
||||
import { GlobeAltIcon, PhoneIcon, XIcon } from "@heroicons/react/outline";
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
ClockIcon,
|
||||
DocumentDuplicateIcon,
|
||||
DocumentIcon,
|
||||
ExternalLinkIcon,
|
||||
LinkIcon,
|
||||
LocationMarkerIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
UserAddIcon,
|
||||
UsersIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { EventTypeCustomInput, MembershipRole, PeriodType, Prisma, SchedulingType } from "@prisma/client";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
@@ -42,6 +27,7 @@ import { RecurringEvent } from "@calcom/types/Calendar";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import Switch from "@calcom/ui/Switch";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
import { Form } from "@calcom/ui/form/fields";
|
||||
@@ -87,7 +73,6 @@ interface Token {
|
||||
}
|
||||
|
||||
interface NFT extends Token {
|
||||
// Some OpenSea NFTs have several contracts
|
||||
contracts: Array<Token>;
|
||||
}
|
||||
|
||||
@@ -175,7 +160,7 @@ const SuccessRedirectEdit = <T extends UseFormReturn<FormValues>>({
|
||||
}}
|
||||
readOnly={proUpgradeRequired}
|
||||
type="url"
|
||||
className="block w-full rounded-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
||||
placeholder={t("external_redirect_url")}
|
||||
defaultValue={eventType.successRedirectUrl || ""}
|
||||
{...formMethods.register("successRedirectUrl")}
|
||||
@@ -226,7 +211,7 @@ const AvailabilitySelect = ({
|
||||
options={options}
|
||||
isSearchable={false}
|
||||
onChange={props.onChange}
|
||||
className={classNames("block w-full min-w-0 flex-1 rounded-sm sm:text-sm", className)}
|
||||
className={classNames("block w-full min-w-0 flex-1 rounded-sm text-sm", className)}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
@@ -478,7 +463,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<Select
|
||||
options={locationOptions}
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(e) => {
|
||||
if (e?.value) {
|
||||
const newLocationType: LocationType = e.value;
|
||||
@@ -507,7 +492,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<div className="flex justify-between">
|
||||
{location.type === LocationType.InPerson && (
|
||||
<div className="flex flex-grow items-center">
|
||||
<LocationMarkerIcon className="h-6 w-6" />
|
||||
<Icon.MapPin className="h-6 w-6" />
|
||||
<span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
|
||||
{location.address}
|
||||
</span>
|
||||
@@ -515,7 +500,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
)}
|
||||
{location.type === LocationType.Link && (
|
||||
<div className="flex flex-grow items-center">
|
||||
<GlobeAltIcon className="h-6 w-6" />
|
||||
<Icon.Globe className="h-6 w-6" />
|
||||
<span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
|
||||
{location.link}
|
||||
</span>
|
||||
@@ -523,7 +508,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
)}
|
||||
{location.type === LocationType.UserPhone && (
|
||||
<div className="flex flex-grow items-center">
|
||||
<PhoneIcon className="h-6 w-6" />
|
||||
<Icon.Phone className="h-6 w-6" />
|
||||
<span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
|
||||
{location.hostPhoneNumber}
|
||||
</span>
|
||||
@@ -531,7 +516,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
)}
|
||||
{location.type === LocationType.Phone && (
|
||||
<div className="flex flex-grow items-center">
|
||||
<PhoneIcon className="h-6 w-6" />
|
||||
<Icon.Phone className="h-6 w-6" />
|
||||
<span className="text-sm ltr:ml-2 rtl:mr-2">{t("phone_call")}</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -812,10 +797,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
}}
|
||||
aria-label={t("edit")}
|
||||
className="mr-1 p-1 text-gray-500 hover:text-gray-900">
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
<Icon.Edit2 className="h-4 w-4" />
|
||||
</button>
|
||||
<button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
|
||||
<XIcon className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
|
||||
<Icon.X className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -828,7 +813,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
type="button"
|
||||
className="flex rounded-sm py-2 hover:bg-gray-100"
|
||||
onClick={() => setShowLocationModal(true)}>
|
||||
<PlusIcon className="mt-0.5 h-4 w-4 text-neutral-900" />
|
||||
<Icon.Plus className="mt-0.5 h-4 w-4 text-neutral-900" />
|
||||
<span className="ml-1 text-sm font-medium text-neutral-700">{t("add_location")}</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -897,7 +882,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
id="slug-label"
|
||||
htmlFor="slug"
|
||||
className="flex text-sm font-medium text-neutral-700">
|
||||
<LinkIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.Link className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
{t("url")}
|
||||
</label>
|
||||
</div>
|
||||
@@ -912,7 +897,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
id="slug"
|
||||
aria-labelledby="slug-label"
|
||||
required
|
||||
className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm"
|
||||
defaultValue={eventType.slug}
|
||||
{...formMethods.register("slug", {
|
||||
setValueAs: (v) => slugify(v),
|
||||
@@ -929,7 +914,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<MinutesField
|
||||
label={
|
||||
<>
|
||||
<ClockIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
|
||||
<Icon.Clock className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
|
||||
{t("duration")}
|
||||
</>
|
||||
}
|
||||
@@ -952,7 +937,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<label
|
||||
htmlFor="location"
|
||||
className="mt-2.5 flex text-sm font-medium text-neutral-700">
|
||||
<LocationMarkerIcon className="mt-0.5 mb-4 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.MapPin className="mt-0.5 mb-4 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
{t("location")}
|
||||
</label>
|
||||
</div>
|
||||
@@ -971,7 +956,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="mt-0 flex text-sm font-medium text-neutral-700">
|
||||
<DocumentIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.FileText className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
{t("description")}
|
||||
</label>
|
||||
</div>
|
||||
@@ -994,7 +979,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<label
|
||||
htmlFor="availability"
|
||||
className="mt-0 flex text-sm font-medium text-neutral-700">
|
||||
<ClockIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.Clock className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
{t("availability")} <InfoBadge content={t("you_can_manage_your_schedules")} />
|
||||
</label>
|
||||
</div>
|
||||
@@ -1021,7 +1006,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<label
|
||||
htmlFor="schedulingType"
|
||||
className="mt-2 flex text-sm font-medium text-neutral-700">
|
||||
<UsersIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
|
||||
<Icon.Users className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
|
||||
{t("scheduling_type")}
|
||||
</label>
|
||||
</div>
|
||||
@@ -1045,7 +1030,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<div className="block sm:flex">
|
||||
<div className="min-w-48 mb-4 sm:mb-0">
|
||||
<label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
|
||||
<UserAddIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
|
||||
<Icon.UserPlus className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
|
||||
{t("attendees")}
|
||||
</label>
|
||||
</div>
|
||||
@@ -1084,7 +1069,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
type="button"
|
||||
data-testid="show-advanced-settings"
|
||||
className="flex w-full">
|
||||
<ChevronRightIcon
|
||||
<Icon.ChevronRight
|
||||
className={`${
|
||||
advancedSettingsVisible ? "rotate-90 transform" : ""
|
||||
} ml-auto h-5 w-5 text-neutral-500`}
|
||||
@@ -1229,7 +1214,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
{t("edit")}
|
||||
</Button>
|
||||
<button type="button" onClick={() => removeCustom(idx)}>
|
||||
<XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
|
||||
<Icon.X className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1243,7 +1228,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
}}
|
||||
color="secondary"
|
||||
type="button"
|
||||
StartIcon={PlusIcon}>
|
||||
StartIcon={Icon.Plus}>
|
||||
{t("add_input")}
|
||||
</Button>
|
||||
</li>
|
||||
@@ -1369,7 +1354,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
}}
|
||||
type="button"
|
||||
className="text-md flex items-center border border-gray-300 px-2 py-1 text-sm font-medium text-gray-700 ltr:rounded-r-sm ltr:border-l-0 rtl:rounded-l-sm rtl:border-r-0">
|
||||
<DocumentDuplicateIcon className="w-6 p-1 text-neutral-500" />
|
||||
<Icon.Copy className="w-6 p-1 text-neutral-500" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@@ -1425,7 +1410,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(val) => {
|
||||
formMethods.setValue(
|
||||
"slotInterval",
|
||||
@@ -1477,14 +1462,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<div className="inline-flex">
|
||||
<input
|
||||
type="number"
|
||||
className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
|
||||
className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
||||
placeholder="30"
|
||||
{...formMethods.register("periodDays", { valueAsNumber: true })}
|
||||
defaultValue={eventType.periodDays || 30}
|
||||
/>
|
||||
<select
|
||||
id=""
|
||||
className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base text-sm focus:outline-none"
|
||||
{...formMethods.register("periodCountCalendarDays")}
|
||||
defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
|
||||
<option value="1">{t("calendar_days")}</option>
|
||||
@@ -1558,7 +1543,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(val) => {
|
||||
if (val) onChange(val.value);
|
||||
}}
|
||||
@@ -1596,7 +1581,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
return (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
|
||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||
onChange={(val) => {
|
||||
if (val) onChange(val.value);
|
||||
}}
|
||||
@@ -1690,7 +1675,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="focus:border-primary-500 focus:ring-primary-500 py- block w-20 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
|
||||
className="focus:border-primary-500 focus:ring-primary-500 py- block w-20 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
||||
placeholder={`${defaultSeatsPro}`}
|
||||
min={minSeats}
|
||||
{...formMethods.register("seatsPerTimeSlot", {
|
||||
@@ -1711,7 +1696,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<Select
|
||||
isSearchable={false}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-auto rounded-sm border border-gray-300 sm:text-sm "
|
||||
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-auto rounded-sm border border-gray-300 text-sm "
|
||||
onChange={(val) => {
|
||||
if (!val) {
|
||||
return;
|
||||
@@ -1816,7 +1801,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
min="0.5"
|
||||
type="number"
|
||||
required
|
||||
className="block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm"
|
||||
className="block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm"
|
||||
placeholder="Price"
|
||||
onChange={(e) => {
|
||||
field.onChange(e.target.valueAsNumber * 100);
|
||||
@@ -1826,7 +1811,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
)}
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<span className="text-gray-500 sm:text-sm" id="duration">
|
||||
<span className="text-sm text-gray-500" id="duration">
|
||||
{new Intl.NumberFormat("en", {
|
||||
style: "currency",
|
||||
currency: currency,
|
||||
@@ -1917,7 +1902,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-md inline-flex items-center rounded-sm px-2 py-1 text-sm font-medium text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
|
||||
<ExternalLinkIcon
|
||||
<Icon.ExternalLink
|
||||
className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -1930,7 +1915,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
}}
|
||||
type="button"
|
||||
className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
|
||||
<LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.Link className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
{t("copy_link")}
|
||||
</button>
|
||||
{hashedLinkVisible && (
|
||||
@@ -1945,7 +1930,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
}}
|
||||
type="button"
|
||||
className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
|
||||
<LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.Link className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
|
||||
{t("copy_private_link")}
|
||||
</button>
|
||||
)}
|
||||
@@ -1953,12 +1938,12 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900"
|
||||
eventTypeId={eventType.id}
|
||||
/>
|
||||
{/* This will only show if the user is not a member (ADMIN,OWNER) and if there is no current membership
|
||||
{/* This will only show if the user is not a member (ADMIN,OWNER) and if there is no current membership
|
||||
- meaning you are within an eventtype that does not belong to a team */}
|
||||
{(props.currentUserMembership?.role !== "MEMBER" || !props.currentUserMembership) && (
|
||||
<Dialog>
|
||||
<DialogTrigger className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-red-500 hover:bg-gray-200">
|
||||
<TrashIcon className="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.Trash className="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2" />
|
||||
{t("delete")}
|
||||
</DialogTrigger>
|
||||
<ConfirmationDialogContent
|
||||
@@ -1994,7 +1979,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||
<div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
<div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
|
||||
<PlusIcon className="text-primary-600 h-6 w-6" />
|
||||
<Icon.Plus className="text-primary-600 h-6 w-6" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
|
||||
@@ -1,17 +1,3 @@
|
||||
import { CalendarIcon } from "@heroicons/react/outline";
|
||||
import {
|
||||
ArrowDownIcon,
|
||||
ArrowUpIcon,
|
||||
ClipboardCopyIcon,
|
||||
DotsHorizontalIcon,
|
||||
DuplicateIcon,
|
||||
ExternalLinkIcon,
|
||||
LinkIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
UploadIcon,
|
||||
UsersIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import { UserPlan } from "@prisma/client";
|
||||
import { Trans } from "next-i18next";
|
||||
import Head from "next/head";
|
||||
@@ -33,6 +19,7 @@ import Dropdown, {
|
||||
DropdownMenuTrigger,
|
||||
} from "@calcom/ui/Dropdown";
|
||||
import EmptyScreen from "@calcom/ui/EmptyScreen";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Tooltip } from "@calcom/ui/Tooltip";
|
||||
|
||||
import { withQuery } from "@lib/QueryCell";
|
||||
@@ -230,15 +217,15 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
{types.length > 1 && !type.$disabled && (
|
||||
<>
|
||||
<button
|
||||
className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
|
||||
className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 items-center justify-center rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:flex"
|
||||
onClick={() => moveEventType(index, -1)}>
|
||||
<ArrowUpIcon />
|
||||
<Icon.ArrowUp className="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="invisible absolute left-1/2 mt-8 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
|
||||
className="invisible absolute left-1/2 mt-8 -ml-4 hidden h-7 w-7 scale-0 items-center justify-center rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:flex"
|
||||
onClick={() => moveEventType(index, 1)}>
|
||||
<ArrowDownIcon />
|
||||
<Icon.ArrowDown className="h-5 w-5" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
@@ -264,76 +251,77 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
type.$disabled && "pointer-events-none cursor-not-allowed"
|
||||
)}>
|
||||
<Tooltip side="top" content={t("preview") as string}>
|
||||
<a
|
||||
href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}
|
||||
<Button
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={classNames("btn-icon appearance-none", type.$disabled && " opacity-30")}>
|
||||
<ExternalLinkIcon
|
||||
className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
|
||||
/>
|
||||
</a>
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimal"
|
||||
className={classNames(!type.$disabled && "group-hover:text-black")}
|
||||
StartIcon={Icon.ExternalLink}
|
||||
href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip side="top" content={t("copy_link") as string}>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimal"
|
||||
className={classNames(type.$disabled && " opacity-30")}
|
||||
StartIcon={Icon.Link}
|
||||
onClick={() => {
|
||||
showToast(t("link_copied"), "success");
|
||||
navigator.clipboard.writeText(`${CAL_URL}/${group.profile.slug}/${type.slug}`);
|
||||
}}
|
||||
className={classNames("btn-icon", type.$disabled && " opacity-30")}>
|
||||
<LinkIcon
|
||||
className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
|
||||
/>
|
||||
</button>
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger
|
||||
className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300"
|
||||
data-testid={"event-type-options-" + type.id}>
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimal"
|
||||
className={classNames(type.$disabled && " opacity-30")}
|
||||
StartIcon={Icon.MoreHorizontal}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Link href={"/event-types/" + type.id} passHref={true}>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={type.$disabled}
|
||||
color="minimal"
|
||||
className={classNames(
|
||||
"w-full rounded-none",
|
||||
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
|
||||
)}
|
||||
StartIcon={PencilIcon}>
|
||||
StartIcon={Icon.Edit2}>
|
||||
{t("edit") as string}
|
||||
</Button>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
size="sm"
|
||||
className={classNames(
|
||||
"w-full rounded-none",
|
||||
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
|
||||
)}
|
||||
disabled={type.$disabled}
|
||||
data-testid={"event-type-duplicate-" + type.id}
|
||||
StartIcon={DuplicateIcon}
|
||||
StartIcon={Icon.Copy}
|
||||
onClick={() => openModal(group, type)}>
|
||||
{t("duplicate") as string}
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<EmbedButton
|
||||
dark
|
||||
StartIcon={Icon.Code}
|
||||
className={classNames(
|
||||
"w-full rounded-none",
|
||||
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
|
||||
)}
|
||||
eventTypeId={type.id}
|
||||
/>
|
||||
eventTypeId={type.id}>
|
||||
{t("embed")}
|
||||
</EmbedButton>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
{/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
|
||||
@@ -346,7 +334,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
}}
|
||||
color="warn"
|
||||
size="sm"
|
||||
StartIcon={TrashIcon}
|
||||
StartIcon={Icon.Trash}
|
||||
className="w-full rounded-none">
|
||||
{t("delete") as string}
|
||||
</Button>
|
||||
@@ -359,31 +347,37 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
</div>
|
||||
<div className="mr-5 flex flex-shrink-0 sm:hidden">
|
||||
<Dropdown>
|
||||
<DropdownMenuTrigger className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
|
||||
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
|
||||
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="minimal"
|
||||
className={classNames(type.$disabled && " opacity-30")}
|
||||
StartIcon={Icon.MoreHorizontal}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent portalled>
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Link href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}>
|
||||
<a target="_blank">
|
||||
<Button
|
||||
color="minimal"
|
||||
size="sm"
|
||||
StartIcon={ExternalLinkIcon}
|
||||
className="w-full rounded-none">
|
||||
{t("preview") as string}
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
color="minimal"
|
||||
size="sm"
|
||||
StartIcon={Icon.ExternalLink}
|
||||
className="w-full rounded-none">
|
||||
{t("preview") as string}
|
||||
</Button>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
size="sm"
|
||||
className="w-full rounded-none text-left"
|
||||
data-testid={"event-type-duplicate-" + type.id}
|
||||
StartIcon={ClipboardCopyIcon}
|
||||
StartIcon={Icon.Clipboard}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`${CAL_URL}/${group.profile.slug}/${type.slug}`);
|
||||
showToast(t("link_copied"), "success");
|
||||
@@ -392,14 +386,14 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
{isNativeShare ? (
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
size="sm"
|
||||
className="w-full rounded-none"
|
||||
data-testid={"event-type-duplicate-" + type.id}
|
||||
StartIcon={UploadIcon}
|
||||
StartIcon={Icon.Upload}
|
||||
onClick={() => {
|
||||
navigator
|
||||
.share({
|
||||
@@ -414,31 +408,31 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
href={"/event-types/" + type.id}
|
||||
color="minimal"
|
||||
className="w-full rounded-none"
|
||||
StartIcon={PencilIcon}>
|
||||
StartIcon={Icon.Edit2}>
|
||||
{t("edit") as string}
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
size="sm"
|
||||
className="w-full rounded-none"
|
||||
data-testid={"event-type-duplicate-" + type.id}
|
||||
StartIcon={DuplicateIcon}
|
||||
StartIcon={Icon.Copy}
|
||||
onClick={() => openModal(group, type)}>
|
||||
{t("duplicate") as string}
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem className="outline-none">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(true);
|
||||
@@ -446,7 +440,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||
}}
|
||||
color="warn"
|
||||
size="sm"
|
||||
StartIcon={TrashIcon}
|
||||
StartIcon={Icon.Trash}
|
||||
className="w-full rounded-none">
|
||||
{t("delete") as string}
|
||||
</Button>
|
||||
@@ -499,7 +493,7 @@ const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeading
|
||||
<Link href="/settings/teams">
|
||||
<a>
|
||||
<Badge variant="gray">
|
||||
<UsersIcon className="mr-1 -mt-px inline h-3 w-3" />
|
||||
<Icon.Users className="mr-1 -mt-px inline h-3 w-3" />
|
||||
{membershipCount}
|
||||
</Badge>
|
||||
</a>
|
||||
@@ -523,7 +517,7 @@ const CreateFirstEventTypeView = () => {
|
||||
|
||||
return (
|
||||
<EmptyScreen
|
||||
Icon={CalendarIcon}
|
||||
Icon={Icon.Calendar}
|
||||
headline={t("new_event_type_heading")}
|
||||
description={t("new_event_type_description")}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ArrowRightIcon } from "@heroicons/react/outline";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import classnames from "classnames";
|
||||
@@ -20,6 +19,7 @@ import { fetchUsername } from "@calcom/lib/fetchUsername";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { Form } from "@calcom/ui/form/fields";
|
||||
|
||||
import { getSession } from "@lib/auth";
|
||||
@@ -323,7 +323,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
||||
id="token"
|
||||
placeholder={t("access_token")}
|
||||
required
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
|
||||
/>
|
||||
<Button type="submit" className="mt-1 ml-4 h-10">
|
||||
{t("import")}
|
||||
@@ -354,7 +354,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
||||
placeholder={t("your_name")}
|
||||
defaultValue={props.user.name ?? enteredName}
|
||||
required
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
@@ -372,7 +372,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
||||
id="timeZone"
|
||||
value={selectedTimeZone}
|
||||
onChange={({ value }) => setSelectedTimeZone(value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 text-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</fieldset>
|
||||
</section>
|
||||
@@ -448,7 +448,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
||||
<section>
|
||||
<Schedule name="schedule" />
|
||||
<footer className="flex flex-col space-y-6 py-6 sm:mx-auto sm:w-full">
|
||||
<Button className="justify-center" EndIcon={ArrowRightIcon} type="submit">
|
||||
<Button className="justify-center" EndIcon={Icon.ArrowRight} type="submit">
|
||||
{t("continue")}
|
||||
</Button>
|
||||
</footer>
|
||||
@@ -478,7 +478,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
||||
placeholder={t("your_name")}
|
||||
defaultValue={props.user.name || enteredName}
|
||||
required
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
@@ -491,7 +491,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
||||
name="bio"
|
||||
id="bio"
|
||||
required
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
|
||||
defaultValue={props.user.bio || undefined}
|
||||
/>
|
||||
<p className="mt-2 text-sm leading-tight text-gray-500 dark:text-white">
|
||||
@@ -584,7 +584,6 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
||||
className="justify-center"
|
||||
disabled={isSubmitting}
|
||||
onClick={debouncedHandleConfirmStep}
|
||||
EndIcon={ArrowRightIcon}
|
||||
data-testid={`continue-button-${currentStep}`}>
|
||||
{steps[currentStep].confirmText}
|
||||
</Button>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { PlusIcon } from "@heroicons/react/solid";
|
||||
import React from "react";
|
||||
|
||||
import { Button, ButtonBaseProps } from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { sandboxPage } from ".";
|
||||
|
||||
@@ -31,8 +31,8 @@ const page = sandboxPage(function ButtonPage() {
|
||||
// { href: "/staging" },
|
||||
// { href: "/staging", disabled: true },
|
||||
|
||||
{ StartIcon: PlusIcon },
|
||||
{ EndIcon: PlusIcon },
|
||||
{ StartIcon: Icon.Plus },
|
||||
{ EndIcon: Icon.Plus },
|
||||
];
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { ExternalLinkIcon } from "@heroicons/react/solid";
|
||||
import { useState } from "react";
|
||||
import { ReactNode } from "react";
|
||||
import { HelpScout, useChat } from "react-live-chat-loader";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import useMeQuery from "@lib/hooks/useMeQuery";
|
||||
|
||||
@@ -46,7 +46,7 @@ export default function Billing() {
|
||||
className="mb-4">
|
||||
<form method="POST" action="/api/upgrade">
|
||||
<Button type="submit">
|
||||
{t("upgrade_now")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
|
||||
{t("upgrade_now")} <Icon.ExternalLink className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
@@ -55,7 +55,7 @@ export default function Billing() {
|
||||
<Card title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
|
||||
<form method="POST" action="/api/integrations/stripepayment/portal">
|
||||
<Button type="submit" color="secondary">
|
||||
{t("go_to_billing_portal")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
|
||||
{t("go_to_billing_portal")} <Icon.ExternalLink className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { TrashIcon } from "@heroicons/react/solid";
|
||||
import crypto from "crypto";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import { signOut } from "next-auth/react";
|
||||
@@ -14,6 +13,7 @@ import { AppRouter } from "@calcom/trpc/server/routers/_app";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { withQuery } from "@lib/QueryCell";
|
||||
import { asStringOrNull, asStringOrUndefined } from "@lib/asStringOrNull";
|
||||
@@ -239,7 +239,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
autoComplete="given-name"
|
||||
placeholder={t("your_name")}
|
||||
required
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
|
||||
defaultValue={user.name || undefined}
|
||||
/>
|
||||
</div>
|
||||
@@ -255,7 +255,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder={t("your_email")}
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 text-sm focus:border-neutral-800 focus:ring-neutral-800"
|
||||
defaultValue={user.email}
|
||||
/>
|
||||
<p className="mt-2 text-sm text-gray-500" id="email-description">
|
||||
@@ -276,7 +276,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
placeholder={t("little_something_about")}
|
||||
rows={3}
|
||||
defaultValue={user.bio || undefined}
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border-gray-300 text-sm focus:border-neutral-800 focus:ring-neutral-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -294,7 +294,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
name="avatar"
|
||||
id="avatar"
|
||||
placeholder="URL"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
|
||||
defaultValue={imageSrc}
|
||||
/>
|
||||
<div className="flex items-center px-5">
|
||||
@@ -329,7 +329,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
id="languageSelect"
|
||||
value={selectedLanguage || props.localeProp}
|
||||
onChange={(v) => v && setSelectedLanguage(v)}
|
||||
className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm text-sm capitalize"
|
||||
options={localeOptions}
|
||||
/>
|
||||
</div>
|
||||
@@ -343,7 +343,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
id="timeZone"
|
||||
value={selectedTimeZone}
|
||||
onChange={(v) => v && setSelectedTimeZone(v)}
|
||||
className="mt-1 block w-full rounded-sm sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -356,7 +356,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
id="timeFormatSelect"
|
||||
value={selectedTimeFormat || user.timeFormat}
|
||||
onChange={(v) => v && setSelectedTimeFormat(v)}
|
||||
className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm text-sm capitalize"
|
||||
options={timeFormatOptions}
|
||||
/>
|
||||
</div>
|
||||
@@ -370,7 +370,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
id="weekStart"
|
||||
value={selectedWeekStartDay}
|
||||
onChange={(v) => v && setSelectedWeekStartDay(v)}
|
||||
className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm text-sm capitalize"
|
||||
options={[
|
||||
{ value: "Sunday", label: nameOfDay(props.localeProp, 0) },
|
||||
{ value: "Monday", label: nameOfDay(props.localeProp, 1) },
|
||||
@@ -413,7 +413,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
defaultValue={selectedTheme || themeOptions[0]}
|
||||
value={selectedTheme || themeOptions[0]}
|
||||
onChange={(v) => v && setSelectedTheme(v)}
|
||||
className="mt-1 block w-full rounded-sm sm:text-sm"
|
||||
className="mt-1 block w-full rounded-sm text-sm"
|
||||
options={themeOptions}
|
||||
/>
|
||||
</div>
|
||||
@@ -471,7 +471,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
||||
<Button
|
||||
type="button"
|
||||
color="warn"
|
||||
StartIcon={TrashIcon}
|
||||
StartIcon={Icon.Trash}
|
||||
className="border-2 border-red-700 text-red-700"
|
||||
data-testid="delete-account">
|
||||
{t("delete_account")}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { PlusIcon } from "@heroicons/react/solid";
|
||||
import { MembershipRole } from "@prisma/client";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
@@ -8,6 +7,7 @@ import { trpc } from "@calcom/trpc/react";
|
||||
import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import SAMLConfiguration from "@ee/components/saml/Configuration";
|
||||
|
||||
import { QueryCell } from "@lib/QueryCell";
|
||||
@@ -158,7 +158,7 @@ export function TeamSettingsPage() {
|
||||
<Button
|
||||
type="button"
|
||||
color="secondary"
|
||||
StartIcon={PlusIcon}
|
||||
StartIcon={Icon.Plus}
|
||||
onClick={() => setShowMemberInvitationModal(true)}
|
||||
data-testid="new-member-button">
|
||||
{t("new_member")}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
|
||||
import classNames from "classnames";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Trans } from "next-i18next";
|
||||
@@ -9,6 +8,7 @@ import { trpc } from "@calcom/trpc/react";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import EmptyScreen from "@calcom/ui/EmptyScreen";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import useMeQuery from "@lib/hooks/useMeQuery";
|
||||
|
||||
@@ -62,9 +62,9 @@ function Teams() {
|
||||
<Button
|
||||
disabled={isFreePlan}
|
||||
type="button"
|
||||
className="btn btn-white"
|
||||
color="secondary"
|
||||
onClick={() => setShowCreateTeamModal(true)}>
|
||||
<PlusIcon className="inline-block h-3.5 w-3.5 text-gray-700 group-hover:text-black ltr:mr-2 rtl:ml-2" />
|
||||
<Icon.Plus className="inline-block h-3.5 w-3.5 text-gray-700 group-hover:text-black ltr:mr-2 rtl:ml-2" />
|
||||
{t("new_team")}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -77,11 +77,7 @@ function Teams() {
|
||||
)}
|
||||
{isLoading && <SkeletonLoaderTeamList />}
|
||||
{!teams.length && !isLoading && (
|
||||
<EmptyScreen
|
||||
Icon={UserGroupIcon}
|
||||
headline={t("no_teams")}
|
||||
description={t("no_teams_description")}
|
||||
/>
|
||||
<EmptyScreen Icon={Icon.Users} headline={t("no_teams")} description={t("no_teams_description")} />
|
||||
)}
|
||||
{teams.length > 0 && <TeamList teams={teams} />}
|
||||
</>
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { CheckIcon } from "@heroicons/react/outline";
|
||||
import { ChevronLeftIcon, ClockIcon, XIcon } from "@heroicons/react/solid";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
||||
import classNames from "classnames";
|
||||
import { createEvent } from "ics";
|
||||
@@ -27,6 +25,7 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
|
||||
import { localStorage } from "@calcom/lib/webstorage";
|
||||
import { Prisma } from "@calcom/prisma/client";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { EmailInput } from "@calcom/ui/form/fields";
|
||||
|
||||
import { asStringOrThrow } from "@lib/asStringOrNull";
|
||||
@@ -125,7 +124,7 @@ function RedirectionToast({ url }: { url: string }) {
|
||||
window.clearInterval(timerRef.current as number);
|
||||
}}
|
||||
className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<XIcon className="h-6 w-6 text-white" />
|
||||
<Icon.X className="h-6 w-6 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -260,7 +259,7 @@ export default function Success(props: SuccessProps) {
|
||||
<div className="mt-2 ml-4 -mb-4">
|
||||
<Link href={eventType.recurringEvent?.count ? "/bookings/recurring" : "/bookings/upcoming"}>
|
||||
<a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
|
||||
<ChevronLeftIcon className="h-5 w-5" /> {t("back_to_bookings")}
|
||||
<Icon.ChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -301,10 +300,10 @@ export default function Success(props: SuccessProps) {
|
||||
<img src={giphyImage} alt="Gif from Giphy" />
|
||||
)}
|
||||
{!giphyImage && !needsConfirmation && !isCancelled && (
|
||||
<CheckIcon className="h-8 w-8 text-green-600" />
|
||||
<Icon.Check className="h-8 w-8 text-green-600" />
|
||||
)}
|
||||
{needsConfirmation && !isCancelled && <ClockIcon className="h-8 w-8 text-green-600" />}
|
||||
{isCancelled && <XIcon className="h-8 w-8 text-red-600" />}
|
||||
{needsConfirmation && !isCancelled && <Icon.Clock className="h-8 w-8 text-green-600" />}
|
||||
{isCancelled && <Icon.X className="h-8 w-8 text-red-600" />}
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { ArrowRightIcon } from "@heroicons/react/solid";
|
||||
import { UserPlan } from "@prisma/client";
|
||||
import classNames from "classnames";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
@@ -10,6 +9,7 @@ import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
||||
import { CAL_URL } from "@calcom/lib/constants";
|
||||
import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
|
||||
import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
|
||||
@@ -51,7 +51,7 @@ function TeamPage({ team }: TeamPageProps) {
|
||||
"hover:border-brand group relative rounded-sm border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600",
|
||||
isEmbed ? "" : "bg-white hover:bg-gray-50"
|
||||
)}>
|
||||
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
||||
<Icon.ArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
||||
<Link href={`${team.slug}/${type.slug}`}>
|
||||
<a className="flex justify-between px-6 py-4">
|
||||
<div className="flex-shrink">
|
||||
@@ -111,7 +111,7 @@ function TeamPage({ team }: TeamPageProps) {
|
||||
<aside className="mt-8 text-center dark:text-white">
|
||||
<Button
|
||||
color="secondary"
|
||||
EndIcon={ArrowRightIcon}
|
||||
EndIcon={Icon.ArrowRight}
|
||||
href={`/team/${team.slug}?members=1`}
|
||||
shallow={true}>
|
||||
{t("book_a_team_member")}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { CalendarIcon, XIcon } from "@heroicons/react/outline";
|
||||
import { ArrowRightIcon } from "@heroicons/react/solid";
|
||||
import { NextPageContext } from "next";
|
||||
import { getSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import dayjs from "@calcom/dayjs";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { detectBrowserTimeFormat } from "@lib/timeFormat";
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
@@ -15,6 +15,7 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
// if no booking redirectis to the 404 page
|
||||
const emptyBooking = props.booking === null;
|
||||
@@ -41,7 +42,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
<Icon.X className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
@@ -53,7 +54,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
<Icon.Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
@@ -62,8 +63,8 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
Go back home
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={Icon.ArrowRight}>
|
||||
{t("go_back")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,21 @@
|
||||
import { CalendarIcon, XIcon } from "@heroicons/react/outline";
|
||||
import { ArrowRightIcon } from "@heroicons/react/solid";
|
||||
import { NextPageContext } from "next";
|
||||
import { getSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import dayjs from "@calcom/dayjs";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
|
||||
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { detectBrowserTimeFormat } from "@lib/timeFormat";
|
||||
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
|
||||
//if no booking redirectis to the 404 page
|
||||
@@ -42,7 +43,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
<Icon.X className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
@@ -54,7 +55,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
<Icon.Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
@@ -68,8 +69,8 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
Go back home
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={Icon.ArrowRight}>
|
||||
{t("go_back")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { XIcon } from "@heroicons/react/outline";
|
||||
import { ArrowRightIcon } from "@heroicons/react/solid";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
@@ -26,7 +24,7 @@ export default function NoMeetingFound() {
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
<Icon.X className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
@@ -39,7 +37,7 @@ export default function NoMeetingFound() {
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={Icon.ArrowRight}>
|
||||
{t("go_back_home")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Loaded 100 of 142 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user