WIP files + new tokens
This commit is contained in:
parent
6d82e3f1b6
commit
7b1d9e9f21
|
@ -29,7 +29,7 @@ export default function AddToHomescreen() {
|
||||||
<path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z" />
|
<path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<p className="text-xs font-medium text-white ltr:ml-3 rtl:mr-3">
|
<p className="text-inverted text-xs font-medium ltr:ml-3 rtl:mr-3">
|
||||||
<span className="inline">{t("add_to_homescreen")}</span>
|
<span className="inline">{t("add_to_homescreen")}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -40,7 +40,7 @@ export default function AddToHomescreen() {
|
||||||
type="button"
|
type="button"
|
||||||
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
|
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
|
||||||
<span className="sr-only">{t("dismiss")}</span>
|
<span className="sr-only">{t("dismiss")}</span>
|
||||||
<FiX className="h-6 w-6 text-white" aria-hidden="true" />
|
<FiX className="text-inverted h-6 w-6" aria-hidden="true" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -73,7 +73,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
isSearchable={false}
|
isSearchable={false}
|
||||||
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"
|
className="border-default text-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm font-medium"
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
components={{ Option: ImageOption }}
|
components={{ Option: ImageOption }}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -68,7 +68,7 @@ export default function AppListCard(props: AppListCardProps) {
|
||||||
{logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
|
{logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
|
||||||
<div className="flex grow flex-col gap-y-1 truncate">
|
<div className="flex grow flex-col gap-y-1 truncate">
|
||||||
<div className="flex items-center gap-x-2">
|
<div className="flex items-center gap-x-2">
|
||||||
<h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
|
<h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
|
||||||
<div className="flex items-center gap-x-2">
|
<div className="flex items-center gap-x-2">
|
||||||
{isDefault && <Badge variant="green">{t("default")}</Badge>}
|
{isDefault && <Badge variant="green">{t("default")}</Badge>}
|
||||||
{isTemplate && <Badge variant="red">Template</Badge>}
|
{isTemplate && <Badge variant="red">Template</Badge>}
|
||||||
|
|
|
@ -117,7 +117,7 @@ const DestinationCalendarSelector = ({
|
||||||
}}
|
}}
|
||||||
isSearchable={false}
|
isSearchable={false}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
|
"border-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm",
|
||||||
!hidePlaceholder && "font-medium"
|
!hidePlaceholder && "font-medium"
|
||||||
)}
|
)}
|
||||||
onChange={(option) => {
|
onChange={(option) => {
|
||||||
|
|
|
@ -506,7 +506,7 @@ const tabs = [
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<small className="flex py-4 text-gray-500">
|
<small className="text-subtle flex py-4">
|
||||||
{t("place_where_cal_widget_appear", { appName: APP_NAME })}
|
{t("place_where_cal_widget_appear", { appName: APP_NAME })}
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
|
@ -531,7 +531,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
|
||||||
<!-- Cal ${embedType} embed code ends -->`
|
<!-- Cal ${embedType} embed code ends -->`
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<p className="hidden text-sm text-gray-500">
|
<p className="text-subtle hidden text-sm">
|
||||||
{t(
|
{t(
|
||||||
"Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
|
"Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
|
||||||
)}
|
)}
|
||||||
|
@ -558,7 +558,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<small className="flex py-4 text-gray-500">{t("create_update_react_component")}</small>
|
<small className="text-subtle flex py-4">{t("create_update_react_component")}</small>
|
||||||
<TextArea
|
<TextArea
|
||||||
data-testid="embed-react"
|
data-testid="embed-react"
|
||||||
ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
|
ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
|
||||||
|
@ -619,7 +619,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
|
||||||
const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
|
const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
|
||||||
return (
|
return (
|
||||||
<components.Control {...props}>
|
<components.Control {...props}>
|
||||||
<FiSun className="ml-2 h-4 w-4 text-gray-500" />
|
<FiSun className="text-subtle ml-2 h-4 w-4" />
|
||||||
{children}
|
{children}
|
||||||
</components.Control>
|
</components.Control>
|
||||||
);
|
);
|
||||||
|
@ -631,17 +631,17 @@ const ChooseEmbedTypesDialogContent = () => {
|
||||||
return (
|
return (
|
||||||
<DialogContent type="creation" size="lg">
|
<DialogContent type="creation" size="lg">
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
|
<h3 className="text-emphasis text-lg font-bold leading-6" id="modal-title">
|
||||||
{t("how_you_want_add_cal_site", { appName: APP_NAME })}
|
{t("how_you_want_add_cal_site", { appName: APP_NAME })}
|
||||||
</h3>
|
</h3>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-500">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
|
<p className="text-subtle text-sm">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start">
|
<div className="flex items-start">
|
||||||
{embeds.map((embed, index) => (
|
{embeds.map((embed, index) => (
|
||||||
<button
|
<button
|
||||||
className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
|
className="hover:bg-subtle w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 ltr:mr-2 rtl:ml-2"
|
||||||
key={index}
|
key={index}
|
||||||
data-testid={embed.type}
|
data-testid={embed.type}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -649,11 +649,11 @@ const ChooseEmbedTypesDialogContent = () => {
|
||||||
embedType: embed.type,
|
embedType: embed.type,
|
||||||
});
|
});
|
||||||
}}>
|
}}>
|
||||||
<div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
|
<div className="bg-default order-none box-border flex-none rounded-sm border border-solid">
|
||||||
{embed.illustration}
|
{embed.illustration}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 font-medium text-gray-900">{embed.title}</div>
|
<div className="text-emphasis mt-2 font-medium">{embed.title}</div>
|
||||||
<p className="text-sm text-gray-500">{embed.subtitle}</p>
|
<p className="text-subtle text-sm">{embed.subtitle}</p>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -814,8 +814,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||||
return (
|
return (
|
||||||
<DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
|
<DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<div className="flex w-1/3 flex-col bg-gray-50 p-8">
|
<div className="bg-muted flex w-1/3 flex-col p-8">
|
||||||
<h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
|
<h3 className="text-emphasis mb-2 flex text-xl font-bold leading-6" id="modal-title">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
removeQueryParams(router, ["embedType", "embedTabName"]);
|
removeQueryParams(router, ["embedType", "embedTabName"]);
|
||||||
|
@ -832,7 +832,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||||
onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
|
onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
|
||||||
<CollapsibleTrigger
|
<CollapsibleTrigger
|
||||||
type="button"
|
type="button"
|
||||||
className="flex w-full items-center text-base font-medium text-gray-900">
|
className="text-emphasis flex w-full items-center text-base font-medium">
|
||||||
<div>
|
<div>
|
||||||
{embedType === "inline"
|
{embedType === "inline"
|
||||||
? "Inline Embed Customization"
|
? "Inline Embed Customization"
|
||||||
|
@ -843,7 +843,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||||
<FiChevronRight
|
<FiChevronRight
|
||||||
className={`${
|
className={`${
|
||||||
isEmbedCustomizationOpen ? "rotate-90 transform" : ""
|
isEmbedCustomizationOpen ? "rotate-90 transform" : ""
|
||||||
} ml-auto h-5 w-5 text-gray-500`}
|
} text-subtle ml-auto h-5 w-5`}
|
||||||
/>
|
/>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
<CollapsibleContent className="text-sm">
|
<CollapsibleContent className="text-sm">
|
||||||
|
@ -1010,11 +1010,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||||
open={isBookingCustomizationOpen}
|
open={isBookingCustomizationOpen}
|
||||||
onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
|
onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
|
||||||
<CollapsibleTrigger className="flex w-full" type="button">
|
<CollapsibleTrigger className="flex w-full" type="button">
|
||||||
<div className="text-base font-medium text-gray-900">Cal Booking Customization</div>
|
<div className="text-emphasis text-base font-medium">Cal Booking Customization</div>
|
||||||
<FiChevronRight
|
<FiChevronRight
|
||||||
className={`${
|
className={`${
|
||||||
isBookingCustomizationOpen ? "rotate-90 transform" : ""
|
isBookingCustomizationOpen ? "rotate-90 transform" : ""
|
||||||
} ml-auto h-5 w-5 text-gray-500`}
|
} text-subtle ml-auto h-5 w-5`}
|
||||||
/>
|
/>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
<CollapsibleContent>
|
<CollapsibleContent>
|
||||||
|
|
|
@ -123,7 +123,7 @@ export default function ImageUploader({
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<div className="mb-4 sm:flex sm:items-start">
|
<div className="mb-4 sm:flex sm:items-start">
|
||||||
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
||||||
<h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
|
<h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
|
||||||
{t("upload_target", { target })}
|
{t("upload_target", { target })}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
@ -131,9 +131,9 @@ export default function ImageUploader({
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<div className="cropper mt-6 flex flex-col items-center justify-center p-8">
|
<div className="cropper mt-6 flex flex-col items-center justify-center p-8">
|
||||||
{!result && (
|
{!result && (
|
||||||
<div className="flex h-20 max-h-20 w-20 items-center justify-start rounded-full bg-gray-50">
|
<div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
|
||||||
{!imageSrc && (
|
{!imageSrc && (
|
||||||
<p className="w-full text-center text-sm text-white sm:text-xs">
|
<p className="text-inverted w-full text-center text-sm sm:text-xs">
|
||||||
{t("no_target", { target })}
|
{t("no_target", { target })}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
@ -144,7 +144,7 @@ export default function ImageUploader({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
|
{result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
|
||||||
<label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
|
<label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
|
||||||
<input
|
<input
|
||||||
onInput={onInputFile}
|
onInput={onInputFile}
|
||||||
type="file"
|
type="file"
|
||||||
|
|
|
@ -69,8 +69,8 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
isCurrent
|
isCurrent
|
||||||
? "border-gray-900 text-gray-900"
|
? "text-emphasis border-gray-900"
|
||||||
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
|
: "hover:border-default hover:text-default text-subtle border-transparent",
|
||||||
"group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
|
"group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
|
@ -78,7 +78,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
|
||||||
{tab.icon && (
|
{tab.icon && (
|
||||||
<tab.icon
|
<tab.icon
|
||||||
className={classNames(
|
className={classNames(
|
||||||
isCurrent ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
|
isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
|
||||||
"-ml-0.5 hidden h-4 w-4 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"
|
aria-hidden="true"
|
||||||
|
|
|
@ -95,7 +95,7 @@ const Component = ({
|
||||||
return (
|
return (
|
||||||
<div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
|
<div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
|
||||||
{hasImages && (
|
{hasImages && (
|
||||||
<div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4 md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
|
<div className="align-center bg-subtle mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4 md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
|
||||||
{images ? (
|
{images ? (
|
||||||
images.map((img) => (
|
images.map((img) => (
|
||||||
<img
|
<img
|
||||||
|
@ -119,12 +119,12 @@ const Component = ({
|
||||||
<header>
|
<header>
|
||||||
<div className="mb-4 flex items-center">
|
<div className="mb-4 flex items-center">
|
||||||
<img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
|
<img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
|
||||||
<h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
|
<h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-sm font-medium text-gray-600">
|
<h2 className="text-sm font-medium text-gray-600">
|
||||||
<Link
|
<Link
|
||||||
href={`categories/${categories[0]}`}
|
href={`categories/${categories[0]}`}
|
||||||
className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
|
className="bg-subtle rounded-md p-1 text-xs capitalize text-gray-800">
|
||||||
{categories[0]}
|
{categories[0]}
|
||||||
</Link>{" "}
|
</Link>{" "}
|
||||||
• {t("published_by", { author })}
|
• {t("published_by", { author })}
|
||||||
|
@ -235,7 +235,7 @@ const Component = ({
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="prose-sm prose mt-8">{body}</div>
|
<div className="prose-sm prose mt-8">{body}</div>
|
||||||
<h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
|
<h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
|
||||||
<span>
|
<span>
|
||||||
{price === 0 ? (
|
{price === 0 ? (
|
||||||
t("free_to_use_apps")
|
t("free_to_use_apps")
|
||||||
|
@ -251,16 +251,16 @@ const Component = ({
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
|
<h4 className="text-emphasis mt-8 mb-2 font-semibold ">{t("learn_more")}</h4>
|
||||||
<ul className="prose-sm -ml-1 -mr-1 leading-5">
|
<ul className="prose-sm -ml-1 -mr-1 leading-5">
|
||||||
{docs && (
|
{docs && (
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="text-sm font-normal text-black no-underline hover:underline"
|
className="text-emphasis text-sm font-normal no-underline hover:underline"
|
||||||
href={docs}>
|
href={docs}>
|
||||||
<FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
|
<FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
|
||||||
{t("documentation")}
|
{t("documentation")}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -270,9 +270,9 @@ const Component = ({
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="font-normal text-black no-underline hover:underline"
|
className="text-emphasis font-normal no-underline hover:underline"
|
||||||
href={website}>
|
href={website}>
|
||||||
<FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
|
<FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
|
||||||
{website.replace("https://", "")}
|
{website.replace("https://", "")}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -282,9 +282,9 @@ const Component = ({
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="font-normal text-black no-underline hover:underline"
|
className="text-emphasis font-normal no-underline hover:underline"
|
||||||
href={"mailto:" + email}>
|
href={"mailto:" + email}>
|
||||||
<FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
|
<FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
|
||||||
|
|
||||||
{email}
|
{email}
|
||||||
</a>
|
</a>
|
||||||
|
@ -295,9 +295,9 @@ const Component = ({
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="font-normal text-black no-underline hover:underline"
|
className="text-emphasis font-normal no-underline hover:underline"
|
||||||
href={tos}>
|
href={tos}>
|
||||||
<FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
|
<FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
|
||||||
{t("terms_of_service")}
|
{t("terms_of_service")}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -307,16 +307,16 @@ const Component = ({
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="font-normal text-black no-underline hover:underline"
|
className="text-emphasis font-normal no-underline hover:underline"
|
||||||
href={privacy}>
|
href={privacy}>
|
||||||
<FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
|
<FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
|
||||||
{t("privacy_policy")}
|
{t("privacy_policy")}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
<hr className="my-8" />
|
<hr className="my-8" />
|
||||||
<span className="leading-1 block text-xs text-gray-500">
|
<span className="leading-1 text-subtle block text-xs">
|
||||||
{t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
|
{t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
|
||||||
</span>
|
</span>
|
||||||
<a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
|
<a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
|
||||||
|
|
|
@ -99,7 +99,7 @@ function CalendarSwitch(props: {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{!!props.destination && (
|
{!!props.destination && (
|
||||||
<span className="ml-8 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
|
<span className="bg-subtle ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
|
||||||
<FiArrowLeft className="h-4 w-4" />
|
<FiArrowLeft className="h-4 w-4" />
|
||||||
{t("adding_events_to")}
|
{t("adding_events_to")}
|
||||||
</span>
|
</span>
|
||||||
|
@ -177,14 +177,14 @@ function ConnectedCalendarsList(props: Props) {
|
||||||
credentialId={item.credentialId}
|
credentialId={item.credentialId}
|
||||||
trashIcon
|
trashIcon
|
||||||
onSuccess={props.onChanged}
|
onSuccess={props.onChanged}
|
||||||
buttonProps={{ className: "border border-gray-300" }}
|
buttonProps={{ className: "border border-default" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
}>
|
}>
|
||||||
<div className="border-t border-gray-200">
|
<div className="border-t border-gray-200">
|
||||||
{!fromOnboarding && (
|
{!fromOnboarding && (
|
||||||
<>
|
<>
|
||||||
<p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
|
<p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
|
||||||
<ul className="space-y-2 px-5 py-4">
|
<ul className="space-y-2 px-5 py-4">
|
||||||
{item.calendars.map((cal) => (
|
{item.calendars.map((cal) => (
|
||||||
<CalendarSwitch
|
<CalendarSwitch
|
||||||
|
@ -218,7 +218,7 @@ function ConnectedCalendarsList(props: Props) {
|
||||||
credentialId={item.credentialId}
|
credentialId={item.credentialId}
|
||||||
trashIcon
|
trashIcon
|
||||||
onSuccess={props.onChanged}
|
onSuccess={props.onChanged}
|
||||||
buttonProps={{ className: "border border-gray-300" }}
|
buttonProps={{ className: "border border-default" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -279,12 +279,12 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
|
<div className="bg-muted flex justify-between rounded-md border border-gray-200 p-4">
|
||||||
<div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
|
<div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
|
||||||
<div className="relative rounded-md border border-gray-200 bg-white p-1.5">
|
<div className="bg-default relative rounded-md border border-gray-200 p-1.5">
|
||||||
<FiCalendar className="h-8 w-8" strokeWidth="1" />
|
<FiCalendar className="h-8 w-8" strokeWidth="1" />
|
||||||
<FiPlus
|
<FiPlus
|
||||||
className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
|
className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
|
||||||
strokeWidth="4"
|
strokeWidth="4"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -119,7 +119,7 @@ const DestinationCalendarSelector = ({
|
||||||
}}
|
}}
|
||||||
isSearchable={false}
|
isSearchable={false}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
|
"border-default block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm",
|
||||||
!hidePlaceholder && "font-medium"
|
!hidePlaceholder && "font-medium"
|
||||||
)}
|
)}
|
||||||
onChange={(option) => {
|
onChange={(option) => {
|
||||||
|
|
|
@ -28,7 +28,7 @@ export default function TwoFactor({ center = true }) {
|
||||||
<div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
|
<div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
|
||||||
<Label className="mt-4"> {t("2fa_code")}</Label>
|
<Label className="mt-4"> {t("2fa_code")}</Label>
|
||||||
|
|
||||||
<p className="mb-4 text-sm text-gray-500">{t("2fa_enabled_instructions")}</p>
|
<p className="text-subtle mb-4 text-sm">{t("2fa_enabled_instructions")}</p>
|
||||||
<input hidden type="hidden" value={value} {...methods.register("totpCode")} />
|
<input hidden type="hidden" value={value} {...methods.register("totpCode")} />
|
||||||
<div className="flex flex-row justify-between">
|
<div className="flex flex-row justify-between">
|
||||||
<Input
|
<Input
|
||||||
|
|
|
@ -7,7 +7,7 @@ import classNames from "@lib/classNames";
|
||||||
|
|
||||||
function SkeletonLoader() {
|
function SkeletonLoader() {
|
||||||
return (
|
return (
|
||||||
<ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
|
<ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:mx-0 sm:overflow-hidden">
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
|
|
|
@ -67,7 +67,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||||
<div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
|
<div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
|
||||||
<div className="mb-6 flex items-center text-left text-base">
|
<div className="mb-6 flex items-center text-left text-base">
|
||||||
<div className="mr-4">
|
<div className="mr-4">
|
||||||
<span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
|
<span className="text-bookingdarker dark:text-darkgray-800 text-emphasis font-semibold">
|
||||||
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
|
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-bookinglight font-medium">
|
<span className="text-bookinglight font-medium">
|
||||||
|
@ -121,7 +121,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||||
{seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
|
{seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
|
"text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 bg-default mb-2 block rounded-sm border py-2 font-medium opacity-25 dark:border-transparent ",
|
||||||
brand === "#fff" || brand === "#ffffff" ? "" : ""
|
brand === "#fff" || brand === "#ffffff" ? "" : ""
|
||||||
)}>
|
)}>
|
||||||
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
|
{dayjs(slot.time).tz(timeZone()).format(timeFormat)}
|
||||||
|
@ -132,8 +132,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||||
href={bookingUrl}
|
href={bookingUrl}
|
||||||
prefetch={false}
|
prefetch={false}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"hover:bg-brand hover:border-brand hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
|
"hover:bg-brand hover:border-brand-default hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
|
||||||
"dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
|
"dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 bg-default mb-2 block rounded-md border py-2 text-sm font-medium dark:border-transparent",
|
||||||
brand === "#fff" || brand === "#ffffff" ? "" : ""
|
brand === "#fff" || brand === "#ffffff" ? "" : ""
|
||||||
)}
|
)}
|
||||||
data-testid="time">
|
data-testid="time">
|
||||||
|
@ -159,7 +159,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
||||||
|
|
||||||
{!isLoading && !slots.length && (
|
{!isLoading && !slots.length && (
|
||||||
<div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
|
<div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
|
||||||
<h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
|
<h1 className="dark:text-inverted text-emphasis my-6 text-xl">{t("all_booked_today")}</h1>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
@ -86,7 +86,7 @@ const BookingDescription: FC<Props> = (props) => {
|
||||||
<h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
|
<h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||||
{profile.name}
|
{profile.name}
|
||||||
</h2>
|
</h2>
|
||||||
<h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
|
<h1 className="font-cal dark:text-darkgray-900 text-emphasis mb-6 break-words text-2xl font-semibold">
|
||||||
{eventType.title}
|
{eventType.title}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
|
<div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
|
||||||
|
@ -139,7 +139,7 @@ const BookingDescription: FC<Props> = (props) => {
|
||||||
className={classNames(
|
className={classNames(
|
||||||
duration === dur.toString()
|
duration === dur.toString()
|
||||||
? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
|
? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
|
||||||
: "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-gray-200 text-gray-900 dark:text-white",
|
: "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-emphasis text-emphasis dark:text-inverted",
|
||||||
"cursor-pointer"
|
"cursor-pointer"
|
||||||
)}
|
)}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
|
@ -179,7 +179,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
|
|
||||||
const RequestSentMessage = () => {
|
const RequestSentMessage = () => {
|
||||||
return (
|
return (
|
||||||
<div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
|
<div className="text-subtle ml-1 mr-8 flex" data-testid="request_reschedule_sent">
|
||||||
<FiSend className="-mt-[1px] w-4 rotate-45" />
|
<FiSend className="-mt-[1px] w-4 rotate-45" />
|
||||||
<p className="ml-2 ">{t("reschedule_request_sent")}</p>
|
<p className="ml-2 ">{t("reschedule_request_sent")}</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -255,7 +255,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
label={
|
label={
|
||||||
<>
|
<>
|
||||||
{t("rejection_reason")}
|
{t("rejection_reason")}
|
||||||
<span className="font-normal text-gray-500"> (Optional)</span>
|
<span className="text-subtle font-normal"> (Optional)</span>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
value={rejectionReason}
|
value={rejectionReason}
|
||||||
|
@ -276,13 +276,13 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
<tr className="group flex flex-col hover:bg-gray-50 sm:flex-row">
|
<tr className="hover:bg-muted group flex flex-col sm:flex-row">
|
||||||
<td
|
<td
|
||||||
className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
|
className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
|
||||||
onClick={onClickTableData}>
|
onClick={onClickTableData}>
|
||||||
<div className="cursor-pointer py-4">
|
<div className="cursor-pointer py-4">
|
||||||
<div className="text-sm leading-6 text-gray-900">{startTime}</div>
|
<div className="text-emphasis text-sm leading-6">{startTime}</div>
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-subtle text-sm">
|
||||||
{formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
|
{formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
|
||||||
{formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
|
{formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
|
||||||
<MeetingTimeInTimezones
|
<MeetingTimeInTimezones
|
||||||
|
@ -309,7 +309,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
{recurringDates !== undefined && (
|
{recurringDates !== undefined && (
|
||||||
<div className="mt-2 text-sm text-gray-400">
|
<div className="text-muted mt-2 text-sm">
|
||||||
<RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
|
<RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -319,8 +319,8 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
{/* Time and Badges for mobile */}
|
{/* Time and Badges for mobile */}
|
||||||
<div className="w-full pt-4 pb-2 sm:hidden">
|
<div className="w-full pt-4 pb-2 sm:hidden">
|
||||||
<div className="flex w-full items-center justify-between sm:hidden">
|
<div className="flex w-full items-center justify-between sm:hidden">
|
||||||
<div className="text-sm leading-6 text-gray-900">{startTime}</div>
|
<div className="text-emphasis text-sm leading-6">{startTime}</div>
|
||||||
<div className="pr-2 text-sm text-gray-500">
|
<div className="text-subtle pr-2 text-sm">
|
||||||
{formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
|
{formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
|
||||||
{formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
|
{formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
|
||||||
<MeetingTimeInTimezones
|
<MeetingTimeInTimezones
|
||||||
|
@ -349,7 +349,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
{recurringDates !== undefined && (
|
{recurringDates !== undefined && (
|
||||||
<div className="text-sm text-gray-400 sm:hidden">
|
<div className="text-muted text-sm sm:hidden">
|
||||||
<RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
|
<RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -359,7 +359,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
<div
|
<div
|
||||||
title={title}
|
title={title}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
|
"max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
|
||||||
isCancelled ? "line-through" : ""
|
isCancelled ? "line-through" : ""
|
||||||
)}>
|
)}>
|
||||||
{title}
|
{title}
|
||||||
|
@ -397,7 +397,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
<>
|
<>
|
||||||
{isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
|
{isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
|
||||||
{isConfirmed && <TableActions actions={bookedActions} />}
|
{isConfirmed && <TableActions actions={bookedActions} />}
|
||||||
{isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
|
{isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
{isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
|
{isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
|
||||||
|
@ -456,10 +456,10 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
})}>
|
})}>
|
||||||
<div className="text-gray-600 dark:text-white">
|
<div className="dark:text-inverted text-gray-600">
|
||||||
<FiRefreshCcw
|
<FiRefreshCcw
|
||||||
strokeWidth="3"
|
strokeWidth="3"
|
||||||
className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
|
className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
|
||||||
/>
|
/>
|
||||||
<p className="mt-1 pl-5 text-xs">
|
<p className="mt-1 pl-5 text-xs">
|
||||||
{booking.status === BookingStatus.ACCEPTED
|
{booking.status === BookingStatus.ACCEPTED
|
||||||
|
@ -532,13 +532,13 @@ const DisplayAttendees = ({
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
return (
|
return (
|
||||||
<div className="text-sm text-gray-900">
|
<div className="text-emphasis text-sm">
|
||||||
{user && <FirstAttendee user={user} currentEmail={currentEmail} />}
|
{user && <FirstAttendee user={user} currentEmail={currentEmail} />}
|
||||||
{attendees.length > 1 ? <span>, </span> : <span> {t("and")} </span>}
|
{attendees.length > 1 ? <span>, </span> : <span> {t("and")} </span>}
|
||||||
<Attendee {...attendees[0]} />
|
<Attendee {...attendees[0]} />
|
||||||
{attendees.length > 1 && (
|
{attendees.length > 1 && (
|
||||||
<>
|
<>
|
||||||
<div className="inline-block text-sm text-gray-900"> {t("and")} </div>
|
<div className="text-emphasis inline-block text-sm"> {t("and")} </div>
|
||||||
{attendees.length > 2 ? (
|
{attendees.length > 2 ? (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
content={attendees.slice(1).map((attendee) => (
|
content={attendees.slice(1).map((attendee) => (
|
||||||
|
|
|
@ -39,11 +39,11 @@ export default function CancelBooking(props: Props) {
|
||||||
<>
|
<>
|
||||||
{error && (
|
{error && (
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
|
||||||
<FiX className="h-6 w-6 text-red-600" />
|
<FiX className="h-6 w-6 text-red-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 text-center sm:mt-5">
|
<div className="mt-3 text-center sm:mt-5">
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
|
||||||
{error}
|
{error}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,12 +51,14 @@ export default function CancelBooking(props: Props) {
|
||||||
)}
|
)}
|
||||||
{!error && (
|
{!error && (
|
||||||
<div className="mt-5 sm:mt-6">
|
<div className="mt-5 sm:mt-6">
|
||||||
<label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
|
<label className="text-bookingdark dark:text-inverted font-medium">
|
||||||
|
{t("cancellation_reason")}
|
||||||
|
</label>
|
||||||
<TextArea
|
<TextArea
|
||||||
placeholder={t("cancellation_reason_placeholder")}
|
placeholder={t("cancellation_reason_placeholder")}
|
||||||
value={cancellationReason}
|
value={cancellationReason}
|
||||||
onChange={(e) => setCancellationReason(e.target.value)}
|
onChange={(e) => setCancellationReason(e.target.value)}
|
||||||
className="dark:bg-darkgray-100 dark:border-darkgray-400 mt-2 mb-4 w-full dark:text-white "
|
className="dark:bg-darkgray-100 dark:border-darkgray-400 dark:text-inverted mt-2 mb-4 w-full "
|
||||||
rows={3}
|
rows={3}
|
||||||
/>
|
/>
|
||||||
<div className="flex flex-col-reverse rtl:space-x-reverse ">
|
<div className="flex flex-col-reverse rtl:space-x-reverse ">
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
|
||||||
|
|
||||||
function SkeletonLoader() {
|
function SkeletonLoader() {
|
||||||
return (
|
return (
|
||||||
<ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
|
<ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:overflow-hidden">
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
|
|
|
@ -17,7 +17,7 @@ export function TimezoneDropdown({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
|
<div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 focus-within:bg-emphasis hover:bg-subtle [&_svg]:focus-within:text-emphasis [&_p]:focus-within:text-emphasis dark:[&_svg]:focus-within:text-inverted dark:[&_p]:focus-within:text-inverted -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium lg:max-w-[12rem]">
|
||||||
<FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
|
<FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
|
||||||
<TimeOptions onSelectTimeZone={handleSelectTimeZone} />
|
<TimeOptions onSelectTimeZone={handleSelectTimeZone} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -159,7 +159,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
|
||||||
className={classNames(
|
className={classNames(
|
||||||
isBackgroundTransparent
|
isBackgroundTransparent
|
||||||
? ""
|
? ""
|
||||||
: "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
|
: "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-default pb-4 md:pb-0",
|
||||||
"border-bookinglightest md:rounded-md md:border",
|
"border-bookinglightest md:rounded-md md:border",
|
||||||
isEmbed && "mx-auto"
|
isEmbed && "mx-auto"
|
||||||
)}>
|
)}>
|
||||||
|
@ -183,7 +183,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
|
||||||
type="number"
|
type="number"
|
||||||
min="1"
|
min="1"
|
||||||
max={eventType.recurringEvent.count}
|
max={eventType.recurringEvent.count}
|
||||||
className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
|
className="w-15 dark:bg-darkgray-200 border-default bg-default h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
|
||||||
defaultValue={eventType.recurringEvent.count}
|
defaultValue={eventType.recurringEvent.count}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
setRecurringEventCount(parseInt(event?.target.value));
|
setRecurringEventCount(parseInt(event?.target.value));
|
||||||
|
@ -219,8 +219,8 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
|
||||||
data-testid="former_time_p_desktop">
|
data-testid="former_time_p_desktop">
|
||||||
{t("former_time")}
|
{t("former_time")}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-500 line-through dark:text-darkgray-600">
|
<p className="text-subtle line-through dark:text-darkgray-600">
|
||||||
<CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
|
<CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-subtle" />
|
||||||
{typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
|
{typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -482,7 +482,7 @@ const BookingPage = ({
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"main",
|
"main",
|
||||||
isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-white dark:border",
|
isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-default dark:border",
|
||||||
"dark:border-darkgray-300 rounded-md sm:border"
|
"dark:border-darkgray-300 rounded-md sm:border"
|
||||||
)}>
|
)}>
|
||||||
<div className="sm:flex">
|
<div className="sm:flex">
|
||||||
|
@ -491,7 +491,7 @@ const BookingPage = ({
|
||||||
<BookingDescription isBookingPage profile={profile} eventType={eventType}>
|
<BookingDescription isBookingPage profile={profile} eventType={eventType}>
|
||||||
<BookingDescriptionPayment eventType={eventType} />
|
<BookingDescriptionPayment eventType={eventType} />
|
||||||
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
|
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
|
||||||
<div className="items-start text-sm font-medium text-gray-600 dark:text-white">
|
<div className="dark:text-inverted items-start text-sm font-medium text-gray-600">
|
||||||
<FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
|
<FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
|
||||||
<p className="-ml-2 inline-block items-center px-2">
|
<p className="-ml-2 inline-block items-center px-2">
|
||||||
{getEveryFreqFor({
|
{getEveryFreqFor({
|
||||||
|
|
|
@ -161,7 +161,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="locationInput" className="block text-sm font-medium text-gray-700">
|
<label htmlFor="locationInput" className="text-default block text-sm font-medium">
|
||||||
{t(eventLocationType.messageForOrganizer || "")}
|
{t(eventLocationType.messageForOrganizer || "")}
|
||||||
</label>
|
</label>
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
|
@ -171,7 +171,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
||||||
id="locationInput"
|
id="locationInput"
|
||||||
placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
|
placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
|
||||||
required
|
required
|
||||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
className="border-default block w-full rounded-sm text-sm"
|
||||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
defaultValue={
|
defaultValue={
|
||||||
defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
|
defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
|
||||||
|
@ -219,11 +219,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
|
||||||
{t("edit_location")}
|
{t("edit_location")}
|
||||||
</h3>
|
</h3>
|
||||||
{!booking && (
|
{!booking && (
|
||||||
<p className="text-sm text-gray-400">
|
<p className="text-muted text-sm">
|
||||||
<Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
|
<Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
|
||||||
Can't find the right video app? Visit our
|
Can't find the right video app? Visit our
|
||||||
<Link className="cursor-pointer text-blue-500 underline" href="/apps/categories/video">
|
<Link className="cursor-pointer text-blue-500 underline" href="/apps/categories/video">
|
||||||
|
@ -238,8 +238,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
||||||
|
|
||||||
{booking && (
|
{booking && (
|
||||||
<>
|
<>
|
||||||
<p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
|
<p className="text-emphasis mt-6 mb-2 ml-1 text-sm font-bold">{t("current_location")}:</p>
|
||||||
<p className="mb-2 ml-1 text-sm text-black">
|
<p className="text-emphasis mb-2 ml-1 text-sm">
|
||||||
{getHumanReadableLocationValue(booking.location, t)}
|
{getHumanReadableLocationValue(booking.location, t)}
|
||||||
</p>
|
</p>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -48,10 +48,10 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-1">
|
<div className="pt-1">
|
||||||
<DialogHeader title={t("send_reschedule_request")} />
|
<DialogHeader title={t("send_reschedule_request")} />
|
||||||
<p className="text-sm text-gray-500">{t("reschedule_modal_description")}</p>
|
<p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
|
||||||
<p className="mt-6 mb-2 text-sm font-bold text-black">
|
<p className="text-emphasis mt-6 mb-2 text-sm font-bold">
|
||||||
{t("reason_for_reschedule_request")}
|
{t("reason_for_reschedule_request")}
|
||||||
<span className="font-normal text-gray-500"> (Optional)</span>
|
<span className="text-subtle font-normal"> (Optional)</span>
|
||||||
</p>
|
</p>
|
||||||
<TextArea
|
<TextArea
|
||||||
data-testid="reschedule_reason"
|
data-testid="reschedule_reason"
|
||||||
|
|
|
@ -29,15 +29,15 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
|
<div className="bg-default overflow-hidden shadow sm:rounded-lg">
|
||||||
<div className="border-t border-gray-200 px-4 py-5 sm:p-0">
|
<div className="border-t border-gray-200 px-4 py-5 sm:p-0">
|
||||||
<dl className="sm:divide-y sm:divide-gray-200">
|
<dl className="sm:divide-y sm:divide-gray-200">
|
||||||
{debugMap.map(([key, value]) => {
|
{debugMap.map(([key, value]) => {
|
||||||
if (value !== undefined) {
|
if (value !== undefined) {
|
||||||
return (
|
return (
|
||||||
<div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
<div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
|
||||||
<dt className="text-sm font-bold text-black">{key}</dt>
|
<dt className="text-emphasis text-sm font-bold">{key}</dt>
|
||||||
<dd className="mt-1 text-sm text-black sm:col-span-2 sm:mt-0">{value}</dd>
|
<dd className="text-emphasis mt-1 text-sm sm:col-span-2 sm:mt-0">{value}</dd>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -53,11 +53,11 @@ export const ErrorPage: React.FC<Props> = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="min-h-screen bg-white px-4">
|
<div className="bg-default min-h-screen px-4">
|
||||||
<main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
|
<main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<p className="text-sm font-semibold uppercase tracking-wide text-black">{statusCode}</p>
|
<p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{statusCode}</p>
|
||||||
<h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
|
<h1 className="text-emphasis mt-2 text-4xl font-extrabold tracking-tight sm:text-5xl">
|
||||||
{message}
|
{message}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -123,10 +123,7 @@ const EventTypeScheduleDetails = () => {
|
||||||
return (
|
return (
|
||||||
<li key={day} className="my-6 flex border-transparent last:mb-2">
|
<li key={day} className="my-6 flex border-transparent last:mb-2">
|
||||||
<span
|
<span
|
||||||
className={classNames(
|
className={classNames("w-20 font-medium sm:w-32", !isAvailable && "text-subtle opacity-50")}>
|
||||||
"w-20 font-medium sm:w-32",
|
|
||||||
!isAvailable && "text-gray-500 opacity-50"
|
|
||||||
)}>
|
|
||||||
{day}
|
{day}
|
||||||
</span>
|
</span>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
|
@ -144,7 +141,7 @@ const EventTypeScheduleDetails = () => {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
|
<span className="text-subtle ml-6 opacity-50 sm:ml-0">{t("unavailable")}</span>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
@ -177,7 +174,7 @@ const EventTypeSchedule = () => {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="availability" className="mb-2 block text-sm font-medium leading-none text-gray-700">
|
<label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
|
||||||
{t("availability")}
|
{t("availability")}
|
||||||
</label>
|
</label>
|
||||||
<Controller
|
<Controller
|
||||||
|
|
|
@ -58,23 +58,23 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
|
||||||
className="mb-0"
|
className="mb-0"
|
||||||
/>
|
/>
|
||||||
<div className="pt-6 text-sm">
|
<div className="pt-6 text-sm">
|
||||||
<div className="mb-6 rounded-md bg-gray-100 p-2">
|
<div className="bg-subtle mb-6 rounded-md p-2">
|
||||||
<h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
|
<h1 className="text-emphasis mb-2 ml-1 font-medium">{t("available_variables")}</h1>
|
||||||
<div className="mb-2.5 flex font-normal">
|
<div className="mb-2.5 flex font-normal">
|
||||||
<p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
|
<p className="text-muted ml-1 mr-5 w-28">{`{Event type title}`}</p>
|
||||||
<p className="text-gray-900">{t("event_name_info")}</p>
|
<p className="text-emphasis">{t("event_name_info")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-2.5 flex font-normal">
|
<div className="mb-2.5 flex font-normal">
|
||||||
<p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
|
<p className="text-muted ml-1 mr-5 w-28">{`{Organiser}`}</p>
|
||||||
<p className="text-gray-900">{t("your_full_name")}</p>
|
<p className="text-emphasis">{t("your_full_name")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-2.5 flex font-normal">
|
<div className="mb-2.5 flex font-normal">
|
||||||
<p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
|
<p className="text-muted ml-1 mr-5 w-28">{`{Scheduler}`}</p>
|
||||||
<p className="text-gray-900">{t("scheduler_full_name")}</p>
|
<p className="text-emphasis">{t("scheduler_full_name")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-1 flex font-normal">
|
<div className="mb-1 flex font-normal">
|
||||||
<p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
|
<p className="text-muted ml-1 mr-5 w-28">{`{Location}`}</p>
|
||||||
<p className="text-gray-900">{t("location_info")}</p>
|
<p className="text-emphasis">{t("location_info")}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
|
<h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
|
||||||
|
@ -84,8 +84,8 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
|
||||||
backgroundImage: "url(/calendar-preview.svg)",
|
backgroundImage: "url(/calendar-preview.svg)",
|
||||||
}}>
|
}}>
|
||||||
<div className="m-auto flex items-center justify-center self-stretch">
|
<div className="m-auto flex items-center justify-center self-stretch">
|
||||||
<div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
|
<div className="bg-subtle mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black text-[12px] leading-3">
|
||||||
<p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">{previewText}</p>
|
<p className="text-emphasis overflow-hidden text-ellipsis p-1.5 font-medium">{previewText}</p>
|
||||||
<p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
|
<p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -99,7 +99,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
|
||||||
<Link
|
<Link
|
||||||
href="/apps/categories/calendar"
|
href="/apps/categories/calendar"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="text-sm text-gray-600 hover:text-gray-900">
|
className="hover:text-emphasis text-sm text-gray-600">
|
||||||
{t("add_another_calendar")}
|
{t("add_another_calendar")}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
@ -134,7 +134,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
|
||||||
StartIcon={FiEdit}
|
StartIcon={FiEdit}
|
||||||
variant="icon"
|
variant="icon"
|
||||||
color="minimal"
|
color="minimal"
|
||||||
className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
|
className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
|
||||||
onClick={() => setShowEventNameTip((old) => !old)}
|
onClick={() => setShowEventNameTip((old) => !old)}
|
||||||
aria-label="edit custom name"
|
aria-label="edit custom name"
|
||||||
/>
|
/>
|
||||||
|
@ -248,7 +248,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
|
||||||
showToast(t("enabled_after_update_description"), "warning");
|
showToast(t("enabled_after_update_description"), "warning");
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="hover:stroke-3 hover:bg-transparent hover:text-black"
|
className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
|
||||||
type="button">
|
type="button">
|
||||||
<FiCopy />
|
<FiCopy />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -84,7 +84,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{!isLoading && notInstalledApps?.length ? (
|
{!isLoading && notInstalledApps?.length ? (
|
||||||
<h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">Available Apps</h2>
|
<h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">Available Apps</h2>
|
||||||
) : null}
|
) : null}
|
||||||
<div className="before:border-0">
|
<div className="before:border-0">
|
||||||
{notInstalledApps?.map((app) => (
|
{notInstalledApps?.map((app) => (
|
||||||
|
|
|
@ -290,7 +290,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
|
||||||
<RadioGroup.Item
|
<RadioGroup.Item
|
||||||
id={period.type}
|
id={period.type}
|
||||||
value={period.type}
|
value={period.type}
|
||||||
className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
|
className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
|
||||||
<RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
|
<RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
|
||||||
</RadioGroup.Item>
|
</RadioGroup.Item>
|
||||||
{period.prefix ? <span>{period.prefix} </span> : null}
|
{period.prefix ? <span>{period.prefix} </span> : null}
|
||||||
|
@ -298,14 +298,14 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
|
||||||
<div className="flex h-9">
|
<div className="flex h-9">
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
className="block w-16 rounded-md border-gray-300 py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
className="border-default block w-16 rounded-md py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
||||||
placeholder="30"
|
placeholder="30"
|
||||||
{...formMethods.register("periodDays", { valueAsNumber: true })}
|
{...formMethods.register("periodDays", { valueAsNumber: true })}
|
||||||
defaultValue={eventType.periodDays || 30}
|
defaultValue={eventType.periodDays || 30}
|
||||||
/>
|
/>
|
||||||
<select
|
<select
|
||||||
id=""
|
id=""
|
||||||
className="block h-9 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
|
className="border-default block h-9 w-full rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
|
||||||
{...formMethods.register("periodCountCalendarDays")}
|
{...formMethods.register("periodCountCalendarDays")}
|
||||||
defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
|
defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
|
||||||
<option value="1">{t("calendar_days")}</option>
|
<option value="1">{t("calendar_days")}</option>
|
||||||
|
@ -405,7 +405,7 @@ const BookingLimits = () => {
|
||||||
<Input
|
<Input
|
||||||
id={`${bookingLimitKey}-limit`}
|
id={`${bookingLimitKey}-limit`}
|
||||||
type="number"
|
type="number"
|
||||||
className="mb-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
|
className="border-default mb-0 block w-16 rounded-md text-sm [appearance:textfield]"
|
||||||
placeholder="1"
|
placeholder="1"
|
||||||
min={1}
|
min={1}
|
||||||
defaultValue={bookingAmount}
|
defaultValue={bookingAmount}
|
||||||
|
|
|
@ -199,7 +199,7 @@ export const EventSetupTab = (
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
key={`${location.type}${index}`}
|
key={`${location.type}${index}`}
|
||||||
className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
|
className="border-default mb-2 rounded-md border py-1.5 px-2">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<img
|
<img
|
||||||
|
@ -221,11 +221,11 @@ export const EventSetupTab = (
|
||||||
openLocationModal(location.type);
|
openLocationModal(location.type);
|
||||||
}}
|
}}
|
||||||
aria-label={t("edit")}
|
aria-label={t("edit")}
|
||||||
className="mr-1 p-1 text-gray-500 hover:text-gray-900">
|
className="hover:text-emphasis text-subtle mr-1 p-1">
|
||||||
<FiEdit2 className="h-4 w-4" />
|
<FiEdit2 className="h-4 w-4" />
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
|
<button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
|
||||||
<FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
|
<FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -52,7 +52,7 @@ const CheckedHostField = ({
|
||||||
options?: Options<CheckedSelectOption>;
|
options?: Options<CheckedSelectOption>;
|
||||||
} & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
|
} & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col space-y-5 bg-gray-50 p-4">
|
<div className="bg-muted flex flex-col space-y-5 p-4">
|
||||||
<div>
|
<div>
|
||||||
<Label>{labelText}</Label>
|
<Label>{labelText}</Label>
|
||||||
<CheckedTeamSelect
|
<CheckedTeamSelect
|
||||||
|
|
|
@ -197,7 +197,7 @@ function EventTypeSingleLayout({
|
||||||
heading={eventType.title}
|
heading={eventType.title}
|
||||||
CTA={
|
CTA={
|
||||||
<div className="flex items-center justify-end">
|
<div className="flex items-center justify-end">
|
||||||
<div className="hidden items-center rounded-md px-2 sm:hover:bg-gray-100 lg:flex">
|
<div className="sm:hover:bg-subtle hidden items-center rounded-md px-2 lg:flex">
|
||||||
<Skeleton
|
<Skeleton
|
||||||
as={Label}
|
as={Label}
|
||||||
htmlFor="hiddenSwitch"
|
htmlFor="hiddenSwitch"
|
||||||
|
@ -215,7 +215,7 @@ function EventTypeSingleLayout({
|
||||||
<VerticalDivider className="hidden lg:block" />
|
<VerticalDivider className="hidden lg:block" />
|
||||||
|
|
||||||
{/* TODO: Figure out why combined isnt working - works in storybook */}
|
{/* TODO: Figure out why combined isnt working - works in storybook */}
|
||||||
<ButtonGroup combined containerProps={{ className: "border-gray-300 hidden lg:flex" }}>
|
<ButtonGroup combined containerProps={{ className: "border-default hidden lg:flex" }}>
|
||||||
{/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
|
{/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
|
||||||
<Tooltip content={t("preview")}>
|
<Tooltip content={t("preview")}>
|
||||||
<Button
|
<Button
|
||||||
|
@ -295,7 +295,7 @@ function EventTypeSingleLayout({
|
||||||
</DropdownItem>
|
</DropdownItem>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
<div className="flex h-9 flex-row items-center justify-between py-2 px-4 sm:hover:bg-gray-100">
|
<div className="sm:hover:bg-subtle flex h-9 flex-row items-center justify-between py-2 px-4">
|
||||||
<Skeleton
|
<Skeleton
|
||||||
as={Label}
|
as={Label}
|
||||||
htmlFor="hiddenSwitch"
|
htmlFor="hiddenSwitch"
|
||||||
|
@ -312,7 +312,7 @@ function EventTypeSingleLayout({
|
||||||
</div>
|
</div>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<div className="border-l-2 border-gray-300" />
|
<div className="border-default border-l-2" />
|
||||||
<Button
|
<Button
|
||||||
className="ml-4 lg:ml-0"
|
className="ml-4 lg:ml-0"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
@ -339,7 +339,7 @@ function EventTypeSingleLayout({
|
||||||
<div className="w-full ltr:mr-2 rtl:ml-2">
|
<div className="w-full ltr:mr-2 rtl:ml-2">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"mt-4 rounded-md border-gray-200 bg-white sm:mx-0 xl:mt-0",
|
"bg-default mt-4 rounded-md border-gray-200 sm:mx-0 xl:mt-0",
|
||||||
disableBorder ? "border-0 " : "p-2 md:border md:p-6"
|
disableBorder ? "border-0 " : "p-2 md:border md:p-6"
|
||||||
)}>
|
)}>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -57,12 +57,12 @@ export default function RecurringEventController({
|
||||||
{recurringEventState && (
|
{recurringEventState && (
|
||||||
<div data-testid="recurring-event-collapsible" className="text-sm">
|
<div data-testid="recurring-event-collapsible" className="text-sm">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
|
<p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
min="1"
|
min="1"
|
||||||
max="20"
|
max="20"
|
||||||
className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
className="border-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
||||||
defaultValue={recurringEventState.interval}
|
defaultValue={recurringEventState.interval}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
const newVal = {
|
const newVal = {
|
||||||
|
@ -89,12 +89,12 @@ export default function RecurringEventController({
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 flex items-center">
|
<div className="mt-4 flex items-center">
|
||||||
<p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
|
<p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
min="1"
|
min="1"
|
||||||
max="20"
|
max="20"
|
||||||
className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
className="border-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
|
||||||
defaultValue={recurringEventState.count}
|
defaultValue={recurringEventState.count}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
const newVal = {
|
const newVal = {
|
||||||
|
@ -105,7 +105,7 @@ export default function RecurringEventController({
|
||||||
setRecurringEventState(newVal);
|
setRecurringEventState(newVal);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<p className="text-gray-900 ltr:mr-2 rtl:ml-2">
|
<p className="text-emphasis ltr:mr-2 rtl:ml-2">
|
||||||
{t("events", {
|
{t("events", {
|
||||||
count: recurringEventState.count,
|
count: recurringEventState.count,
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -82,7 +82,7 @@ export default function RequiresConfirmationController({
|
||||||
<RadioGroup.Item
|
<RadioGroup.Item
|
||||||
id="always"
|
id="always"
|
||||||
value="always"
|
value="always"
|
||||||
className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
|
className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
|
||||||
<RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
|
<RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
|
||||||
</RadioGroup.Item>
|
</RadioGroup.Item>
|
||||||
<Label htmlFor="always" className="!m-0 flex items-center">
|
<Label htmlFor="always" className="!m-0 flex items-center">
|
||||||
|
@ -93,7 +93,7 @@ export default function RequiresConfirmationController({
|
||||||
<RadioGroup.Item
|
<RadioGroup.Item
|
||||||
id="notice"
|
id="notice"
|
||||||
value="notice"
|
value="notice"
|
||||||
className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
|
className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
|
||||||
<RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
|
<RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
|
||||||
</RadioGroup.Item>
|
</RadioGroup.Item>
|
||||||
<Label htmlFor="notice" className="!m-0 flex items-center">
|
<Label htmlFor="notice" className="!m-0 flex items-center">
|
||||||
|
@ -116,7 +116,7 @@ export default function RequiresConfirmationController({
|
||||||
});
|
});
|
||||||
formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
|
formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
|
||||||
}}
|
}}
|
||||||
className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
|
className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
|
||||||
defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
|
defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
|
||||||
/>
|
/>
|
||||||
<select
|
<select
|
||||||
|
@ -130,7 +130,7 @@ export default function RequiresConfirmationController({
|
||||||
});
|
});
|
||||||
formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
|
formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
|
||||||
}}
|
}}
|
||||||
className="ml-2 block h-9 rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
|
className="border-default ml-2 block h-9 rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
|
||||||
defaultValue={
|
defaultValue={
|
||||||
metadata?.requiresConfirmationThreshold?.unit ||
|
metadata?.requiresConfirmationThreshold?.unit ||
|
||||||
defaultRequiresConfirmationSetup.unit
|
defaultRequiresConfirmationSetup.unit
|
||||||
|
|
|
@ -11,7 +11,7 @@ function SkeletonLoader() {
|
||||||
<SkeletonText className="h-4 w-24" />
|
<SkeletonText className="h-4 w-24" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
|
<ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:mx-0 sm:overflow-hidden">
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
<SkeletonItem />
|
<SkeletonItem />
|
||||||
|
|
|
@ -28,14 +28,14 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
|
||||||
<p className="font-sans text-sm font-bold leading-5">
|
<p className="font-sans text-sm font-bold leading-5">
|
||||||
{name}
|
{name}
|
||||||
{/* Temporarily removed till we use it on another place */}
|
{/* Temporarily removed till we use it on another place */}
|
||||||
{/* <span className="mx-1 rounded-[4px] bg-green-100 py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
|
{/* <span className="mx-1 rounded-[4px] bg-success py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
|
||||||
{t("default")}
|
{t("default")}
|
||||||
</span> */}
|
</span> */}
|
||||||
</p>
|
</p>
|
||||||
<div className="fle-row flex">
|
<div className="fle-row flex">
|
||||||
<span
|
<span
|
||||||
title={externalId}
|
title={externalId}
|
||||||
className="max-w-44 mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm text-gray-500">
|
className="max-w-44 text-subtle mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm">
|
||||||
{externalId}{" "}
|
{externalId}{" "}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,7 +17,7 @@ const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps)
|
||||||
<>
|
<>
|
||||||
<div className="mt-6 flex flex-row">
|
<div className="mt-6 flex flex-row">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<label htmlFor="createEventsOn" className="flex text-sm font-medium text-gray-700">
|
<label htmlFor="createEventsOn" className="text-default flex text-sm font-medium">
|
||||||
{t("create_events_on")}
|
{t("create_events_on")}
|
||||||
</label>
|
</label>
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
|
|
|
@ -33,7 +33,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
|
||||||
firstCalendar.integration.title &&
|
firstCalendar.integration.title &&
|
||||||
firstCalendar.integration.imageSrc && (
|
firstCalendar.integration.imageSrc && (
|
||||||
<>
|
<>
|
||||||
<List className="rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
|
<List className="bg-default rounded-md border border-gray-200 p-0 dark:bg-black">
|
||||||
<ConnectedCalendarItem
|
<ConnectedCalendarItem
|
||||||
key={firstCalendar.integration.title}
|
key={firstCalendar.integration.title}
|
||||||
name={firstCalendar.integration.title}
|
name={firstCalendar.integration.title}
|
||||||
|
@ -49,13 +49,13 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
|
||||||
</List>
|
</List>
|
||||||
{/* Create event on selected calendar */}
|
{/* Create event on selected calendar */}
|
||||||
<CreateEventsOnCalendarSelect calendar={destinationCalendar} />
|
<CreateEventsOnCalendarSelect calendar={destinationCalendar} />
|
||||||
<p className="mt-4 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
|
<p className="text-subtle mt-4 text-sm">{t("connect_calendars_from_app_store")}</p>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Connect calendars list */}
|
{/* Connect calendars list */}
|
||||||
{firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
|
{firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
|
||||||
<List className="mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black sm:mx-0">
|
<List className="bg-default mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 p-0 dark:bg-black sm:mx-0">
|
||||||
{queryIntegrations.data &&
|
{queryIntegrations.data &&
|
||||||
queryIntegrations.data.items.map((item) => (
|
queryIntegrations.data.items.map((item) => (
|
||||||
<li key={item.title}>
|
<li key={item.title}>
|
||||||
|
@ -73,7 +73,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{queryIntegrations.isLoading && (
|
{queryIntegrations.isLoading && (
|
||||||
<ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
|
<ul className="bg-default divide-y divide-gray-200 rounded-md border border-gray-200 p-0 dark:bg-black">
|
||||||
{[0, 0, 0, 0].map((_item, index) => {
|
{[0, 0, 0, 0].map((_item, index) => {
|
||||||
return (
|
return (
|
||||||
<li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
|
<li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
|
||||||
|
@ -89,7 +89,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
|
||||||
type="button"
|
type="button"
|
||||||
data-testid="save-calendar-button"
|
data-testid="save-calendar-button"
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white",
|
"text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm",
|
||||||
disabledNextButton ? "cursor-not-allowed opacity-20" : ""
|
disabledNextButton ? "cursor-not-allowed opacity-20" : ""
|
||||||
)}
|
)}
|
||||||
onClick={() => nextStep()}
|
onClick={() => nextStep()}
|
||||||
|
|
|
@ -50,7 +50,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
|
||||||
const updateSchedule = trpc.viewer.availability.schedule.update.useMutation(mutationOptions);
|
const updateSchedule = trpc.viewer.availability.schedule.update.useMutation(mutationOptions);
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
className="w-full bg-white text-black dark:bg-opacity-5 dark:text-white"
|
className="bg-default dark:text-inverted text-emphasis w-full dark:bg-opacity-5"
|
||||||
form={availabilityForm}
|
form={availabilityForm}
|
||||||
handleSubmit={async (values) => {
|
handleSubmit={async (values) => {
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -117,7 +117,7 @@ const UserProfile = (props: IUserProfileProps) => {
|
||||||
name="avatar"
|
name="avatar"
|
||||||
id="avatar"
|
id="avatar"
|
||||||
placeholder="URL"
|
placeholder="URL"
|
||||||
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
|
className="border-default mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
|
||||||
defaultValue={imageSrc}
|
defaultValue={imageSrc}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center px-4">
|
<div className="flex items-center px-4">
|
||||||
|
@ -142,19 +142,19 @@ const UserProfile = (props: IUserProfileProps) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<fieldset className="mt-8">
|
<fieldset className="mt-8">
|
||||||
<Label className="mb-2 block text-sm font-medium text-gray-700">{t("about")}</Label>
|
<Label className="text-default mb-2 block text-sm font-medium">{t("about")}</Label>
|
||||||
<Editor
|
<Editor
|
||||||
getText={() => md.render(getValues("bio") || user?.bio || "")}
|
getText={() => md.render(getValues("bio") || user?.bio || "")}
|
||||||
setText={(value: string) => setValue("bio", turndown(value))}
|
setText={(value: string) => setValue("bio", turndown(value))}
|
||||||
excludedToolbarItems={["blockType"]}
|
excludedToolbarItems={["blockType"]}
|
||||||
/>
|
/>
|
||||||
<p className="mt-2 font-sans text-sm font-normal text-gray-600 dark:text-white">
|
<p className="dark:text-inverted mt-2 font-sans text-sm font-normal text-gray-600">
|
||||||
{t("few_sentences_about_yourself")}
|
{t("few_sentences_about_yourself")}
|
||||||
</p>
|
</p>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white">
|
className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
|
||||||
{t("finish")}
|
{t("finish")}
|
||||||
<ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
|
<ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -63,7 +63,7 @@ const UserSettings = (props: IUserSettingsProps) => {
|
||||||
|
|
||||||
{/* Full name textfield */}
|
{/* Full name textfield */}
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<label htmlFor="name" className="mb-2 block text-sm font-medium text-gray-700">
|
<label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
|
||||||
{t("full_name")}
|
{t("full_name")}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
|
@ -73,7 +73,7 @@ const UserSettings = (props: IUserSettingsProps) => {
|
||||||
type="text"
|
type="text"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
autoCorrect="off"
|
autoCorrect="off"
|
||||||
className="w-full rounded-md border border-gray-300 text-sm"
|
className="border-default w-full rounded-md border text-sm"
|
||||||
/>
|
/>
|
||||||
{errors.name && (
|
{errors.name && (
|
||||||
<p data-testid="required" className="py-2 text-xs text-red-500">
|
<p data-testid="required" className="py-2 text-xs text-red-500">
|
||||||
|
@ -83,7 +83,7 @@ const UserSettings = (props: IUserSettingsProps) => {
|
||||||
</div>
|
</div>
|
||||||
{/* Timezone select field */}
|
{/* Timezone select field */}
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
|
<label htmlFor="timeZone" className="text-default block text-sm font-medium">
|
||||||
{t("timezone")}
|
{t("timezone")}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
@ -94,7 +94,7 @@ const UserSettings = (props: IUserSettingsProps) => {
|
||||||
className="mt-2 w-full rounded-md text-sm"
|
className="mt-2 w-full rounded-md text-sm"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<p className="mt-3 flex flex-row font-sans text-xs leading-tight text-gray-500 dark:text-white">
|
<p className="text-subtle dark:text-inverted mt-3 flex flex-row font-sans text-xs leading-tight">
|
||||||
{t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
|
{t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,7 +24,9 @@ export default function WizardLayout({
|
||||||
}, [router.asPath]);
|
}, [router.asPath]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dark:bg-brand dark:text-brand-contrast min-h-screen text-black" data-testid="onboarding">
|
<div
|
||||||
|
className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen"
|
||||||
|
data-testid="onboarding">
|
||||||
<div>
|
<div>
|
||||||
<Toaster position="bottom-right" />
|
<Toaster position="bottom-right" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,7 +36,7 @@ export default function WizardLayout({
|
||||||
<div className="mx-auto sm:max-w-[520px]">
|
<div className="mx-auto sm:max-w-[520px]">
|
||||||
<header>
|
<header>
|
||||||
<p className="font-cal mb-3 text-[28px] font-medium leading-7">{title} </p>
|
<p className="font-cal mb-3 text-[28px] font-medium leading-7">{title} </p>
|
||||||
<p className="font-sans text-sm font-normal text-gray-500">{subtitle} </p>
|
<p className="text-subtle font-sans text-sm font-normal">{subtitle} </p>
|
||||||
</header>
|
</header>
|
||||||
<Steps maxSteps={maxSteps} currentStep={currentStep} navigateToStep={noop} />
|
<Steps maxSteps={maxSteps} currentStep={currentStep} navigateToStep={noop} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -62,11 +62,11 @@ const ChangePasswordSection = () => {
|
||||||
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
|
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
|
||||||
<div className="py-6 lg:pb-5">
|
<div className="py-6 lg:pb-5">
|
||||||
<div className="my-3">
|
<div className="my-3">
|
||||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
|
<h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("change_password")}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
|
<div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
|
||||||
<div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
|
<div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
|
||||||
<label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
|
<label htmlFor="current_password" className="text-default block text-sm font-medium">
|
||||||
{t("current_password")}
|
{t("current_password")}
|
||||||
</label>
|
</label>
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
|
@ -77,13 +77,13 @@ const ChangePasswordSection = () => {
|
||||||
name="current_password"
|
name="current_password"
|
||||||
id="current_password"
|
id="current_password"
|
||||||
required
|
required
|
||||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
className="border-default block w-full rounded-sm text-sm"
|
||||||
placeholder={t("your_old_password")}
|
placeholder={t("your_old_password")}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full sm:w-1/2">
|
<div className="w-full sm:w-1/2">
|
||||||
<label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
|
<label htmlFor="new_password" className="text-default block text-sm font-medium">
|
||||||
{t("new_password")}
|
{t("new_password")}
|
||||||
</label>
|
</label>
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
|
@ -94,7 +94,7 @@ const ChangePasswordSection = () => {
|
||||||
value={newPassword}
|
value={newPassword}
|
||||||
required
|
required
|
||||||
onInput={(e) => setNewPassword(e.currentTarget.value)}
|
onInput={(e) => setNewPassword(e.currentTarget.value)}
|
||||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
className="border-default block w-full rounded-sm text-sm"
|
||||||
placeholder={t("super_secure_new_password")}
|
placeholder={t("super_secure_new_password")}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -70,10 +70,10 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<PasswordField
|
<PasswordField
|
||||||
labelProps={{
|
labelProps={{
|
||||||
className: "block text-sm font-medium text-gray-700",
|
className: "block text-sm font-medium text-default",
|
||||||
}}
|
}}
|
||||||
{...form.register("password")}
|
{...form.register("password")}
|
||||||
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"
|
className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
|
||||||
/>
|
/>
|
||||||
<Label className="mt-4"> {t("2fa_code")}</Label>
|
<Label className="mt-4"> {t("2fa_code")}</Label>
|
||||||
|
|
||||||
|
|
|
@ -22,14 +22,14 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
|
||||||
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex flex-row items-center">
|
<div className="flex flex-row items-center">
|
||||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
|
<h2 className="font-cal text-emphasis text-lg font-medium leading-6">
|
||||||
{t("user_impersonation_heading")}
|
{t("user_impersonation_heading")}
|
||||||
</h2>
|
</h2>
|
||||||
<Badge className="ml-2 text-xs" variant={!disableImpersonation ? "success" : "gray"}>
|
<Badge className="ml-2 text-xs" variant={!disableImpersonation ? "success" : "gray"}>
|
||||||
{!disableImpersonation ? t("enabled") : t("disabled")}
|
{!disableImpersonation ? t("enabled") : t("disabled")}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-1 text-sm text-gray-500">{t("user_impersonation_description")}</p>
|
<p className="text-subtle mt-1 text-sm">{t("user_impersonation_description")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5 sm:mt-0 sm:self-center">
|
<div className="mt-5 sm:mt-0 sm:self-center">
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -135,7 +135,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
|
||||||
<WithStep step={SetupStep.ConfirmPassword} current={step}>
|
<WithStep step={SetupStep.ConfirmPassword} current={step}>
|
||||||
<form onSubmit={handleSetup}>
|
<form onSubmit={handleSetup}>
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
|
<label htmlFor="password" className="text-default mt-4 block text-sm font-medium">
|
||||||
{t("password")}
|
{t("password")}
|
||||||
</label>
|
</label>
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
|
@ -146,7 +146,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
|
||||||
required
|
required
|
||||||
value={password}
|
value={password}
|
||||||
onInput={(e) => setPassword(e.currentTarget.value)}
|
onInput={(e) => setPassword(e.currentTarget.value)}
|
||||||
className="block w-full rounded-sm border-gray-300 text-sm"
|
className="border-default block w-full rounded-sm text-sm"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -17,12 +17,12 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
|
||||||
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex flex-row items-center">
|
<div className="flex flex-row items-center">
|
||||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
|
<h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("2fa")}</h2>
|
||||||
<Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
|
<Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
|
||||||
{enabled ? t("enabled") : t("disabled")}
|
{enabled ? t("enabled") : t("disabled")}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
|
<p className="text-subtle mt-1 text-sm">{t("add_an_extra_layer_of_security")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5 sm:mt-0 sm:self-center">
|
<div className="mt-5 sm:mt-0 sm:self-center">
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -4,13 +4,13 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
|
||||||
return (
|
return (
|
||||||
<div className="mb-4 sm:flex sm:items-start">
|
<div className="mb-4 sm:flex sm:items-start">
|
||||||
<div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
|
<div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
<FiShield className="h-6 w-6 text-white" />
|
<FiShield className="text-inverted h-6 w-6" />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
<h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-gray-400">{description}</p>
|
<p className="text-muted text-sm">{description}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -77,10 +77,10 @@ const DisableTwoFactorAuthModal = ({
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<PasswordField
|
<PasswordField
|
||||||
labelProps={{
|
labelProps={{
|
||||||
className: "block text-sm font-medium text-gray-700",
|
className: "block text-sm font-medium text-default",
|
||||||
}}
|
}}
|
||||||
{...form.register("password")}
|
{...form.register("password")}
|
||||||
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"
|
className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
|
||||||
/>
|
/>
|
||||||
<Label className="mt-4"> {t("2fa_code")}</Label>
|
<Label className="mt-4"> {t("2fa_code")}</Label>
|
||||||
|
|
||||||
|
|
|
@ -111,7 +111,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
|
||||||
<Label htmlFor="username" className={classNames(longWebsiteUrl && "mb-0")}>
|
<Label htmlFor="username" className={classNames(longWebsiteUrl && "mb-0")}>
|
||||||
<span className="block">{t("username")}</span>
|
<span className="block">{t("username")}</span>
|
||||||
{longWebsiteUrl && (
|
{longWebsiteUrl && (
|
||||||
<small className="items-centerpx-3 mt-2 inline-flex rounded-t-md border border-b-0 border-gray-300 bg-gray-100 py-1 px-3 text-gray-500">
|
<small className="items-centerpx-3 bg-subtle border-default text-subtle mt-2 inline-flex rounded-t-md border border-b-0 py-1 px-3">
|
||||||
{process.env.NEXT_PUBLIC_WEBSITE_URL}
|
{process.env.NEXT_PUBLIC_WEBSITE_URL}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
|
@ -119,7 +119,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
|
||||||
<TextField
|
<TextField
|
||||||
addOnLeading={
|
addOnLeading={
|
||||||
!longWebsiteUrl && (
|
!longWebsiteUrl && (
|
||||||
<span className="inline-flex items-center rounded-none px-3 text-sm text-gray-500">
|
<span className="text-subtle inline-flex items-center rounded-none px-3 text-sm">
|
||||||
{process.env.NEXT_PUBLIC_WEBSITE_URL}/
|
{process.env.NEXT_PUBLIC_WEBSITE_URL}/
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
|
|
|
@ -37,13 +37,13 @@ const ChooseLicense = (
|
||||||
<RadioGroup.Item value="FREE">
|
<RadioGroup.Item value="FREE">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
|
"bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
|
||||||
value === "FREE" && "ring-2 ring-black"
|
value === "FREE" && "ring-2 ring-black"
|
||||||
)}>
|
)}>
|
||||||
<h2 className="font-cal text-xl text-black">{t("agplv3_license")}</h2>
|
<h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
|
||||||
<p className="font-medium text-green-800">{t("free_license_fee")}</p>
|
<p className="font-medium text-green-800">{t("free_license_fee")}</p>
|
||||||
<p className="text-gray-500">{t("forever_open_and_free")}</p>
|
<p className="text-subtle">{t("forever_open_and_free")}</p>
|
||||||
<ul className="ml-4 list-disc text-left text-xs text-gray-500">
|
<ul className="text-subtle ml-4 list-disc text-left text-xs">
|
||||||
<li>{t("required_to_keep_your_code_open_source")}</li>
|
<li>{t("required_to_keep_your_code_open_source")}</li>
|
||||||
<li>{t("cannot_repackage_and_resell")}</li>
|
<li>{t("cannot_repackage_and_resell")}</li>
|
||||||
<li>{t("no_enterprise_features")}</li>
|
<li>{t("no_enterprise_features")}</li>
|
||||||
|
@ -53,15 +53,15 @@ const ChooseLicense = (
|
||||||
<RadioGroup.Item value="EE">
|
<RadioGroup.Item value="EE">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
|
"bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
|
||||||
value === "EE" && "ring-2 ring-black"
|
value === "EE" && "ring-2 ring-black"
|
||||||
)}>
|
)}>
|
||||||
<h2 className="font-cal text-xl text-black">{t("ee_enterprise_license")}</h2>
|
<h2 className="font-cal text-emphasis text-xl">{t("ee_enterprise_license")}</h2>
|
||||||
<p className="font-medium text-green-800">
|
<p className="font-medium text-green-800">
|
||||||
{t("enterprise_booking_fee", { enterprise_booking_fee: ENTERPRISE_BOOKING_FEE })}
|
{t("enterprise_booking_fee", { enterprise_booking_fee: ENTERPRISE_BOOKING_FEE })}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-500">{t("enterprise_license_includes")}</p>
|
<p className="text-subtle">{t("enterprise_license_includes")}</p>
|
||||||
<ul className="ml-4 list-disc text-left text-xs text-gray-500">
|
<ul className="text-subtle ml-4 list-disc text-left text-xs">
|
||||||
<li>{t("no_need_to_keep_your_code_open_source")}</li>
|
<li>{t("no_need_to_keep_your_code_open_source")}</li>
|
||||||
<li>{t("repackage_rebrand_resell")}</li>
|
<li>{t("repackage_rebrand_resell")}</li>
|
||||||
<li>{t("a_vast_suite_of_enterprise_features")}</li>
|
<li>{t("a_vast_suite_of_enterprise_features")}</li>
|
||||||
|
|
|
@ -87,7 +87,7 @@ const EnterpriseLicense = (
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormProvider {...formMethods}>
|
<FormProvider {...formMethods}>
|
||||||
<form {...rest} className="space-y-4 rounded-md bg-white px-8 py-10" onSubmit={handleSubmit}>
|
<form {...rest} className="bg-default space-y-4 rounded-md px-8 py-10" onSubmit={handleSubmit}>
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
className="w-full justify-center text-lg"
|
className="w-full justify-center text-lg"
|
||||||
|
@ -98,7 +98,7 @@ const EnterpriseLicense = (
|
||||||
</Button>
|
</Button>
|
||||||
<div className="relative flex justify-center">
|
<div className="relative flex justify-center">
|
||||||
<hr className="my-8 w-full border-[1.5px] border-gray-200" />
|
<hr className="my-8 w-full border-[1.5px] border-gray-200" />
|
||||||
<span className="absolute mt-[22px] bg-white px-3.5 text-sm">OR</span>
|
<span className="bg-default absolute mt-[22px] px-3.5 text-sm">OR</span>
|
||||||
</div>
|
</div>
|
||||||
{t("already_have_key")}
|
{t("already_have_key")}
|
||||||
<Controller
|
<Controller
|
||||||
|
@ -108,7 +108,7 @@ const EnterpriseLicense = (
|
||||||
<TextField
|
<TextField
|
||||||
{...formMethods.register("licenseKey")}
|
{...formMethods.register("licenseKey")}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"mb-0 group-hover:border-gray-400",
|
"group-hover:border-emphasis mb-0",
|
||||||
(checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
|
(checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
|
||||||
)}
|
)}
|
||||||
placeholder="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
|
placeholder="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
|
||||||
|
@ -116,8 +116,8 @@ const EnterpriseLicense = (
|
||||||
value={value}
|
value={value}
|
||||||
addOnFilled={false}
|
addOnFilled={false}
|
||||||
addOnClassname={classNames(
|
addOnClassname={classNames(
|
||||||
"hover:border-gray-300",
|
"hover:border-default",
|
||||||
errors.licenseKey === undefined && isDirty && "group-hover:border-gray-400"
|
errors.licenseKey === undefined && isDirty && "group-hover:border-emphasis"
|
||||||
)}
|
)}
|
||||||
addOnSuffix={
|
addOnSuffix={
|
||||||
checkLicenseLoading ? (
|
checkLicenseLoading ? (
|
||||||
|
|
|
@ -23,8 +23,8 @@ const StepDone = (props: {
|
||||||
router.replace(props.nextStepPath);
|
router.replace(props.nextStepPath);
|
||||||
}}>
|
}}>
|
||||||
<div className="min-h-36 my-6 flex flex-col items-center justify-center">
|
<div className="min-h-36 my-6 flex flex-col items-center justify-center">
|
||||||
<div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
|
<div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
|
||||||
<FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
|
<FiCheck className="text-inverted dark:bg-default inline-block h-10 w-10 dark:text-gray-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="max-w-[420px] text-center">
|
<div className="max-w-[420px] text-center">
|
||||||
<h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
|
<h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
|
||||||
|
|
|
@ -17,19 +17,19 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link key={member.id} href={`/${member.username}`}>
|
<Link key={member.id} href={`/${member.username}`}>
|
||||||
<div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4 hover:cursor-pointer hover:bg-gray-50 ">
|
<div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 bg-default hover:bg-muted group flex min-h-full flex-col space-y-2 rounded-md p-4 hover:cursor-pointer ">
|
||||||
<Avatar
|
<Avatar
|
||||||
size="md"
|
size="md"
|
||||||
alt={member.name || ""}
|
alt={member.name || ""}
|
||||||
imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
|
imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
|
||||||
/>
|
/>
|
||||||
<section className="line-clamp-4 mt-2 w-full space-y-1">
|
<section className="line-clamp-4 mt-2 w-full space-y-1">
|
||||||
<p className="font-medium text-gray-900 dark:text-white">{member.name}</p>
|
<p className="text-emphasis dark:text-inverted font-medium">{member.name}</p>
|
||||||
<div className="line-clamp-3 overflow-ellipsis text-sm font-normal text-gray-500 dark:text-white">
|
<div className="line-clamp-3 text-subtle dark:text-inverted overflow-ellipsis text-sm font-normal">
|
||||||
{!isBioEmpty ? (
|
{!isBioEmpty ? (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
|
className="dark:text-darkgray-600 text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
|
||||||
dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
|
dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -24,15 +24,15 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
|
<div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
|
||||||
{props.heading && <h2 className="font-cal text-center text-3xl text-gray-900">{props.heading}</h2>}
|
{props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}
|
||||||
</div>
|
</div>
|
||||||
{props.loading && (
|
{props.loading && (
|
||||||
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
|
<div className="bg-muted absolute z-50 flex h-screen w-full items-center">
|
||||||
<Loader />
|
<Loader />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
<div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
<div className="mx-2 rounded-md border border-gray-200 bg-white px-4 py-10 sm:px-10">
|
<div className="bg-default mx-2 rounded-md border border-gray-200 px-4 py-10 sm:px-10">
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 text-center text-sm text-gray-600">{props.footerText}</div>
|
<div className="mt-8 text-center text-sm text-gray-600">{props.footerText}</div>
|
||||||
|
|
|
@ -21,7 +21,7 @@ const EditableHeading = function EditableHeading({
|
||||||
<label className="min-w-8 relative inline-block">
|
<label className="min-w-8 relative inline-block">
|
||||||
<span className="whitespace-pre text-xl tracking-normal text-transparent">{value} </span>
|
<span className="whitespace-pre text-xl tracking-normal text-transparent">{value} </span>
|
||||||
{!isEditing && isReady && (
|
{!isEditing && isReady && (
|
||||||
<FiEdit2 className=" ml-1 -mt-px inline h-3 w-3 text-gray-500 group-hover:text-gray-500" />
|
<FiEdit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline h-3 w-3" />
|
||||||
)}
|
)}
|
||||||
<input
|
<input
|
||||||
{...passThroughProps}
|
{...passThroughProps}
|
||||||
|
@ -29,7 +29,7 @@ const EditableHeading = function EditableHeading({
|
||||||
value={value}
|
value={value}
|
||||||
required
|
required
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
|
"text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
|
||||||
)}
|
)}
|
||||||
onFocus={(e) => {
|
onFocus={(e) => {
|
||||||
setIsEditing(true);
|
setIsEditing(true);
|
||||||
|
|
|
@ -6,7 +6,7 @@ export default function InfoBadge({ content }: { content: string }) {
|
||||||
<>
|
<>
|
||||||
<Tooltip side="top" content={content}>
|
<Tooltip side="top" content={content}>
|
||||||
<span title={content}>
|
<span title={content}>
|
||||||
<FiInfo className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
|
<FiInfo className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -12,8 +12,8 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
{...props}
|
{...props}
|
||||||
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">
|
className="text-md hover:bg-emphasis hover:text-emphasis text-default flex items-center rounded-sm px-2 py-1 text-sm font-medium">
|
||||||
<props.Icon className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
|
<props.Icon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
|
||||||
{props.children}
|
{props.children}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,7 +19,7 @@ export default function ModalContainer(
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"inline-block w-full transform bg-white text-left align-bottom transition-all sm:align-middle",
|
"inline-block w-full transform bg-default text-left align-bottom transition-all sm:align-middle",
|
||||||
{
|
{
|
||||||
"sm:w-full sm:max-w-lg ": !props.wide,
|
"sm:w-full sm:max-w-lg ": !props.wide,
|
||||||
"sm:w-4xl sm:max-w-4xl": props.wide,
|
"sm:w-4xl sm:max-w-4xl": props.wide,
|
||||||
|
|
|
@ -12,7 +12,7 @@ const PoweredByCal = () => {
|
||||||
<Link
|
<Link
|
||||||
href={POWERED_BY_URL}
|
href={POWERED_BY_URL}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
|
className="text-bookinglight dark:text-inverted opacity-50 hover:opacity-100">
|
||||||
{t("powered_by")}{" "}
|
{t("powered_by")}{" "}
|
||||||
<img
|
<img
|
||||||
className="relative -mt-px inline h-[10px] w-auto dark:hidden"
|
className="relative -mt-px inline h-[10px] w-auto dark:hidden"
|
||||||
|
|
|
@ -13,8 +13,8 @@ export default function SettingInputContainer({
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="block sm:flex">
|
<div className="block sm:flex">
|
||||||
<div className="min-w-48 mb-4 sm:mb-0">
|
<div className="min-w-48 mb-4 sm:mb-0">
|
||||||
<label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-gray-700">
|
<label htmlFor={htmlFor} className="text-default mt-1 flex text-sm font-medium">
|
||||||
<Icon className="mt-0.5 h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
|
<Icon className="text-subtle mt-0.5 h-4 w-4 ltr:mr-2 rtl:ml-2" />
|
||||||
{label}
|
{label}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -195,7 +195,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||||
<span
|
<span
|
||||||
className={classNames(
|
className={classNames(
|
||||||
isInputUsernamePremium ? "border border-orange-400 " : "",
|
isInputUsernamePremium ? "border border-orange-400 " : "",
|
||||||
"hidden h-9 items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
|
"border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 border-r-gray-300 px-3 text-sm md:inline-flex"
|
||||||
)}>
|
)}>
|
||||||
{process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
|
{process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
|
||||||
</span>
|
</span>
|
||||||
|
@ -216,7 +216,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||||
markAsError
|
markAsError
|
||||||
? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none"
|
? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none"
|
||||||
: "border-l-gray-300",
|
: "border-l-gray-300",
|
||||||
disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
|
disabled ? "bg-subtle text-muted focus:border-0" : ""
|
||||||
)}
|
)}
|
||||||
value={inputUsernameValue}
|
value={inputUsernameValue}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
|
@ -261,15 +261,15 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
|
||||||
<p className="mb-4 text-sm text-gray-800">{t("change_username_standard_to_premium")}</p>
|
<p className="mb-4 text-sm text-gray-800">{t("change_username_standard_to_premium")}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
|
<div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
|
||||||
<div className="flex-1 px-2">
|
<div className="flex-1 px-2">
|
||||||
<p className="text-gray-500">{t("current_username")}</p>
|
<p className="text-subtle">{t("current_username")}</p>
|
||||||
<p className="mt-1" data-testid="current-username">
|
<p className="mt-1" data-testid="current-username">
|
||||||
{currentUsername}
|
{currentUsername}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-6 flex-1">
|
<div className="ml-6 flex-1">
|
||||||
<p className="text-gray-500" data-testid="new-username">
|
<p className="text-subtle" data-testid="new-username">
|
||||||
{t("new_username")}
|
{t("new_username")}
|
||||||
</p>
|
</p>
|
||||||
<p>{inputUsernameValue}</p>
|
<p>{inputUsernameValue}</p>
|
||||||
|
|
|
@ -162,15 +162,15 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
|
||||||
<div className="mb-4 w-full px-4 pt-1">
|
<div className="mb-4 w-full px-4 pt-1">
|
||||||
<DialogHeader title={t("confirm_username_change_dialog_title")} />
|
<DialogHeader title={t("confirm_username_change_dialog_title")} />
|
||||||
|
|
||||||
<div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
|
<div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
|
||||||
<div className="flex-1 px-2">
|
<div className="flex-1 px-2">
|
||||||
<p className="text-gray-500">{t("current_username")}</p>
|
<p className="text-subtle">{t("current_username")}</p>
|
||||||
<p className="mt-1" data-testid="current-username">
|
<p className="mt-1" data-testid="current-username">
|
||||||
{currentUsername}
|
{currentUsername}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<p className="text-gray-500" data-testid="new-username">
|
<p className="text-subtle" data-testid="new-username">
|
||||||
{t("new_username")}
|
{t("new_username")}
|
||||||
</p>
|
</p>
|
||||||
<p>{inputUsernameValue}</p>
|
<p>{inputUsernameValue}</p>
|
||||||
|
|
|
@ -22,7 +22,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
|
||||||
{React.createElement(
|
{React.createElement(
|
||||||
descriptionAsLabel ? "div" : "label",
|
descriptionAsLabel ? "div" : "label",
|
||||||
{
|
{
|
||||||
className: "flex text-sm font-medium text-gray-700",
|
className: "flex text-sm font-medium text-default",
|
||||||
...(!descriptionAsLabel
|
...(!descriptionAsLabel
|
||||||
? {
|
? {
|
||||||
htmlFor: rest.id,
|
htmlFor: rest.id,
|
||||||
|
@ -40,7 +40,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
|
||||||
{
|
{
|
||||||
className: classNames(
|
className: classNames(
|
||||||
"relative flex items-start",
|
"relative flex items-start",
|
||||||
descriptionAsLabel ? "text-gray-700" : "text-gray-900"
|
descriptionAsLabel ? "text-default" : "text-emphasis"
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
<>
|
<>
|
||||||
|
@ -49,7 +49,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
|
||||||
{...rest}
|
{...rest}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
|
className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
|
<span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
|
||||||
|
|
|
@ -51,7 +51,7 @@ export const CheckedSelect = ({
|
||||||
{option.label}
|
{option.label}
|
||||||
<FiX
|
<FiX
|
||||||
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
|
onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
|
||||||
className="float-right mt-0.5 h-5 w-5 cursor-pointer text-gray-500"
|
className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -19,11 +19,11 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
|
||||||
return (
|
return (
|
||||||
<PrimitiveDatePicker
|
<PrimitiveDatePicker
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 text-sm",
|
"focus:ring-primary-500 focus:border-primary-500 border-default rounded-sm border p-1 pl-2 text-sm",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
clearIcon={null}
|
clearIcon={null}
|
||||||
calendarIcon={<FiCalendar className="h-5 w-5 text-gray-500" />}
|
calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />}
|
||||||
value={date}
|
value={date}
|
||||||
minDate={minDate}
|
minDate={minDate}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
|
|
@ -29,7 +29,7 @@ const OptionWithIcon = ({
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
{icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
|
{icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
|
||||||
<span className={classNames("text-sm font-medium", isSelected ? "text-white" : "text-gray-900")}>
|
<span className={classNames("text-sm font-medium", isSelected ? "text-inverted" : "text-emphasis")}>
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,7 +11,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
|
||||||
<div className="block sm:flex">
|
<div className="block sm:flex">
|
||||||
{!!label && (
|
{!!label && (
|
||||||
<div className="min-w-48 mb-4 sm:mb-0">
|
<div className="min-w-48 mb-4 sm:mb-0">
|
||||||
<label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-gray-700">
|
<label htmlFor={rest.id} className="text-default flex h-full items-center text-sm font-medium">
|
||||||
{label}
|
{label}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -23,12 +23,12 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
|
||||||
ref={ref}
|
ref={ref}
|
||||||
type="number"
|
type="number"
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm",
|
"border-default block w-full rounded-sm pl-2 pr-12 text-sm",
|
||||||
rest.className
|
rest.className
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||||
<span className="text-sm text-gray-500" id="duration">
|
<span className="text-subtle text-sm" id="duration">
|
||||||
mins
|
mins
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -51,21 +51,21 @@ export default function Custom404() {
|
||||||
noindex: true,
|
noindex: true,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="min-h-screen bg-white px-4" data-testid="404-page">
|
<div className="bg-default min-h-screen px-4" data-testid="404-page">
|
||||||
<main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
|
<main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
|
||||||
{isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (
|
{isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-semibold uppercase tracking-wide text-black">
|
<p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
|
||||||
{t("missing_license")}
|
{t("missing_license")}
|
||||||
</p>
|
</p>
|
||||||
<h1 className="font-cal mt-2 text-3xl font-extrabold text-gray-900">
|
<h1 className="font-cal text-emphasis mt-2 text-3xl font-extrabold">
|
||||||
{t("signup_requires")}
|
{t("signup_requires")}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-4">{t("signup_requires_description", { companyName: COMPANY_NAME })}</p>
|
<p className="mt-4">{t("signup_requires_description", { companyName: COMPANY_NAME })}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-12">
|
<div className="mt-12">
|
||||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
|
<h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
|
||||||
{t("next_steps")}
|
{t("next_steps")}
|
||||||
</h2>
|
</h2>
|
||||||
<ul role="list" className="mt-4">
|
<ul role="list" className="mt-4">
|
||||||
|
@ -79,7 +79,7 @@ export default function Custom404() {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-emphasis text-base font-medium">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
||||||
<span className="focus:outline-none">
|
<span className="focus:outline-none">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
|
@ -87,10 +87,10 @@ export default function Custom404() {
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
|
<p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="flex-shrink-0 self-center">
|
||||||
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -102,21 +102,21 @@ export default function Custom404() {
|
||||||
href={`${DEVELOPER_DOCS}/self-hosting/installation`}
|
href={`${DEVELOPER_DOCS}/self-hosting/installation`}
|
||||||
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
|
<span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
|
||||||
<FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
|
<FiFileText className="text-default h-6 w-6" aria-hidden="true" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-emphasis text-base font-medium">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
{t("prisma_studio_tip")}
|
{t("prisma_studio_tip")}
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
|
<p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="flex-shrink-0 self-center">
|
||||||
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
@ -125,7 +125,7 @@ export default function Custom404() {
|
||||||
href={JOIN_SLACK}
|
href={JOIN_SLACK}
|
||||||
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
|
<span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 2447.6 2452.5"
|
viewBox="0 0 2447.6 2452.5"
|
||||||
className="h-6 w-6"
|
className="h-6 w-6"
|
||||||
|
@ -152,16 +152,16 @@ export default function Custom404() {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-emphasis text-base font-medium">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
Slack
|
Slack
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{t("join_our_community")}</p>
|
<p className="text-subtle text-base">{t("join_our_community")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="flex-shrink-0 self-center">
|
||||||
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -169,7 +169,7 @@ export default function Custom404() {
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
<Link
|
<Link
|
||||||
href={`${WEBSITE_URL}/enterprise`}
|
href={`${WEBSITE_URL}/enterprise`}
|
||||||
className="text-base font-medium text-black hover:text-gray-500">
|
className="hover:text-subtle text-emphasis text-base font-medium">
|
||||||
{t("contact_sales")}
|
{t("contact_sales")}
|
||||||
<span aria-hidden="true"> →</span>
|
<span aria-hidden="true"> →</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -177,10 +177,13 @@ export default function Custom404() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
<>
|
||||||
<>
|
<>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
|
<p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
|
||||||
<h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
|
{t("error_404")}
|
||||||
|
</p>
|
||||||
|
<h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
|
||||||
{isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
|
{isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
|
||||||
</h1>
|
</h1>
|
||||||
{isSubpage ? (
|
{isSubpage ? (
|
||||||
|
@ -205,7 +208,7 @@ export default function Custom404() {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-12">
|
<div className="mt-12">
|
||||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
|
<h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
|
||||||
{t("popular_pages")}
|
{t("popular_pages")}
|
||||||
</h2>
|
</h2>
|
||||||
{!isSubpage && isCalcom && (
|
{!isSubpage && isCalcom && (
|
||||||
|
@ -222,7 +225,7 @@ export default function Custom404() {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-emphasis text-base font-medium">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
||||||
<span className="focus:outline-none">
|
<span className="focus:outline-none">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
|
@ -230,10 +233,10 @@ export default function Custom404() {
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
|
<p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="flex-shrink-0 self-center">
|
||||||
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
@ -247,21 +250,21 @@ export default function Custom404() {
|
||||||
href={link.href}
|
href={link.href}
|
||||||
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
|
<span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
|
||||||
<link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
|
<link.icon className="text-default h-6 w-6" aria-hidden="true" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-emphasis text-base font-medium">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
{link.title}
|
{link.title}
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{link.description}</p>
|
<p className="text-subtle text-base">{link.description}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="flex-shrink-0 self-center">
|
||||||
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
@ -271,7 +274,7 @@ export default function Custom404() {
|
||||||
href={JOIN_SLACK}
|
href={JOIN_SLACK}
|
||||||
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
|
<span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 2447.6 2452.5"
|
viewBox="0 0 2447.6 2452.5"
|
||||||
className="h-6 w-6"
|
className="h-6 w-6"
|
||||||
|
@ -298,28 +301,29 @@ export default function Custom404() {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-emphasis text-base font-medium">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
Slack
|
Slack
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{t("join_our_community")}</p>
|
<p className="text-subtle text-base">{t("join_our_community")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="flex-shrink-0 self-center">
|
||||||
<FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
<Link href="/" className="text-base font-medium text-black hover:text-gray-500">
|
<Link href="/" className="hover:text-subtle text-emphasis text-base font-medium">
|
||||||
{t("or_go_back_home")}
|
{t("or_go_back_home")}
|
||||||
<span aria-hidden="true"> →</span>
|
<span aria-hidden="true"> →</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,14 +11,14 @@ export default function Error500() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-gray-100">
|
<div className="bg-subtle flex h-screen">
|
||||||
<Head>
|
<Head>
|
||||||
<title>Something unexpected occurred | {APP_NAME}</title>
|
<title>Something unexpected occurred | {APP_NAME}</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<div className="rtl: m-auto rounded-md bg-white p-10 text-right ltr:text-left">
|
<div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
|
||||||
<h1 className="font-cal text-6xl text-black">500</h1>
|
<h1 className="font-cal text-emphasis text-6xl">500</h1>
|
||||||
<h2 className="mt-6 text-2xl font-medium text-black">It's not you, it's us.</h2>
|
<h2 className="text-emphasis mt-6 text-2xl font-medium">It's not you, it's us.</h2>
|
||||||
<p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
|
<p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
|
||||||
Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
|
Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
|
||||||
away for you.
|
away for you.
|
||||||
|
@ -28,7 +28,7 @@ export default function Error500() {
|
||||||
<p className="mb-4 max-w-2xl text-sm text-gray-600">
|
<p className="mb-4 max-w-2xl text-sm text-gray-600">
|
||||||
Please provide the following text when contacting support to better help you:
|
Please provide the following text when contacting support to better help you:
|
||||||
</p>
|
</p>
|
||||||
<pre className="w-full max-w-2xl whitespace-normal break-words rounded-md bg-gray-200 p-4 text-gray-900">
|
<pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
|
||||||
{router.query.error}
|
{router.query.error}
|
||||||
<br />
|
<br />
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -49,8 +49,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
||||||
const groupEventTypes = props.users.some((user) => !user.allowDynamicBooking) ? (
|
const groupEventTypes = props.users.some((user) => !user.allowDynamicBooking) ? (
|
||||||
<div className="space-y-6" data-testid="event-types">
|
<div className="space-y-6" data-testid="event-types">
|
||||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
<div className="p-8 text-center text-muted dark:text-inverted">
|
||||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">{" " + t("unavailable")}</h2>
|
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-inverted">{" " + t("unavailable")}</h2>
|
||||||
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
|
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -60,14 +60,14 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
||||||
{eventTypes.map((type, index) => (
|
{eventTypes.map((type, index) => (
|
||||||
<li
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
|
className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted">
|
||||||
<FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
<FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
|
||||||
<Link
|
<Link
|
||||||
href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
|
href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
|
||||||
className="flex justify-between px-6 py-4"
|
className="flex justify-between px-6 py-4"
|
||||||
data-testid="event-type-link">
|
data-testid="event-type-link">
|
||||||
<div className="flex-shrink">
|
<div className="flex-shrink">
|
||||||
<p className="dark:text-darkgray-700 text-sm font-semibold text-gray-900">{type.title}</p>
|
<p className="dark:text-darkgray-700 text-sm font-semibold text-emphasis">{type.title}</p>
|
||||||
<EventTypeDescription className="text-sm" eventType={type} />
|
<EventTypeDescription className="text-sm" eventType={type} />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-1 self-center">
|
<div className="mt-1 self-center">
|
||||||
|
@ -130,23 +130,23 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
||||||
className={classNames(
|
className={classNames(
|
||||||
shouldAlignCentrally ? "mx-auto" : "",
|
shouldAlignCentrally ? "mx-auto" : "",
|
||||||
isEmbed
|
isEmbed
|
||||||
? " border-bookinglightest dark:bg-darkgray-50 rounded-md border bg-white sm:dark:border-gray-600"
|
? " border-bookinglightest dark:bg-darkgray-50 rounded-md border bg-default sm:dark:border-gray-600"
|
||||||
: "",
|
: "",
|
||||||
"max-w-3xl py-24 px-4"
|
"max-w-3xl py-24 px-4"
|
||||||
)}>
|
)}>
|
||||||
{isSingleUser && ( // When we deal with a single user, not dynamic group
|
{isSingleUser && ( // When we deal with a single user, not dynamic group
|
||||||
<div className="mb-8 text-center">
|
<div className="mb-8 text-center">
|
||||||
<Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
|
<Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
|
||||||
<h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
|
<h1 className="font-cal mb-1 text-3xl text-emphasis dark:text-inverted">
|
||||||
{nameOrUsername}
|
{nameOrUsername}
|
||||||
{user.verified && (
|
{user.verified && (
|
||||||
<BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
|
<BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-inverted" />
|
||||||
)}
|
)}
|
||||||
</h1>
|
</h1>
|
||||||
{!isBioEmpty && (
|
{!isBioEmpty && (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className=" dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
|
className=" dark:text-darkgray-600 text-sm text-subtle [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
|
||||||
dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
|
dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
@ -161,8 +161,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
||||||
data-testid="event-types">
|
data-testid="event-types">
|
||||||
{user.away ? (
|
{user.away ? (
|
||||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
<div className="p-8 text-center text-muted dark:text-inverted">
|
||||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-inverted">
|
||||||
😴{" " + t("user_away")}
|
😴{" " + t("user_away")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
|
<p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
|
||||||
|
@ -175,8 +175,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
||||||
<div
|
<div
|
||||||
key={type.id}
|
key={type.id}
|
||||||
style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
|
style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
|
||||||
className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
|
className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted
|
||||||
<FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
|
<FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
|
||||||
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
|
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
|
||||||
<div className="block w-full p-5">
|
<div className="block w-full p-5">
|
||||||
<Link
|
<Link
|
||||||
|
@ -193,7 +193,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
||||||
}}
|
}}
|
||||||
data-testid="event-type-link">
|
data-testid="event-type-link">
|
||||||
<div className="flex flex-wrap items-center">
|
<div className="flex flex-wrap items-center">
|
||||||
<h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
|
<h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-default">
|
||||||
{type.title}
|
{type.title}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -20,12 +20,12 @@ export default function Type(props: AvailabilityPageProps) {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
|
|
||||||
return props.away ? (
|
return props.away ? (
|
||||||
<div className="h-screen dark:bg-gray-900">
|
<div className="dark:bg-inverted h-screen">
|
||||||
<main className="mx-auto max-w-3xl px-4 py-24">
|
<main className="mx-auto max-w-3xl px-4 py-24">
|
||||||
<div className="space-y-6" data-testid="event-types">
|
<div className="space-y-6" data-testid="event-types">
|
||||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
<div className="text-muted dark:text-inverted p-8 text-center">
|
||||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
<h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
|
||||||
😴{" " + t("user_away")}
|
😴{" " + t("user_away")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto max-w-md">{t("user_away_description")}</p>
|
<p className="mx-auto max-w-md">{t("user_away_description")}</p>
|
||||||
|
@ -39,8 +39,8 @@ export default function Type(props: AvailabilityPageProps) {
|
||||||
<main className="mx-auto max-w-3xl px-4 py-24">
|
<main className="mx-auto max-w-3xl px-4 py-24">
|
||||||
<div className="space-y-6" data-testid="event-types">
|
<div className="space-y-6" data-testid="event-types">
|
||||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
<div className="text-muted dark:text-inverted p-8 text-center">
|
||||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
<h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
|
||||||
{" " + t("unavailable")}
|
{" " + t("unavailable")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
|
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
|
||||||
|
|
|
@ -34,12 +34,12 @@ export type BookPageProps = inferSSRProps<typeof getServerSideProps>;
|
||||||
export default function Book(props: BookPageProps) {
|
export default function Book(props: BookPageProps) {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
return props.away ? (
|
return props.away ? (
|
||||||
<div className="h-screen dark:bg-gray-900">
|
<div className="dark:bg-inverted h-screen">
|
||||||
<main className="mx-auto max-w-3xl px-4 py-24">
|
<main className="mx-auto max-w-3xl px-4 py-24">
|
||||||
<div className="space-y-6" data-testid="event-types">
|
<div className="space-y-6" data-testid="event-types">
|
||||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
<div className="text-muted dark:text-inverted p-8 text-center">
|
||||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
<h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
|
||||||
😴{" " + t("user_away")}
|
😴{" " + t("user_away")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto max-w-md">{t("user_away_description")}</p>
|
<p className="mx-auto max-w-md">{t("user_away_description")}</p>
|
||||||
|
@ -49,12 +49,12 @@ export default function Book(props: BookPageProps) {
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
) : props.isDynamicGroupBooking && !props.profile.allowDynamicBooking ? (
|
) : props.isDynamicGroupBooking && !props.profile.allowDynamicBooking ? (
|
||||||
<div className="h-screen dark:bg-gray-900">
|
<div className="dark:bg-inverted h-screen">
|
||||||
<main className="mx-auto max-w-3xl px-4 py-24">
|
<main className="mx-auto max-w-3xl px-4 py-24">
|
||||||
<div className="space-y-6" data-testid="event-types">
|
<div className="space-y-6" data-testid="event-types">
|
||||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
<div className="text-muted dark:text-inverted p-8 text-center">
|
||||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
<h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
|
||||||
{" " + t("unavailable")}
|
{" " + t("unavailable")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
|
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
|
||||||
|
|
|
@ -46,7 +46,7 @@ class MyDocument extends Document<Props> {
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<body
|
<body
|
||||||
className="dark:bg-darkgray-50 desktop-transparent bg-gray-100 antialiased"
|
className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
|
||||||
style={
|
style={
|
||||||
isEmbed
|
isEmbed
|
||||||
? {
|
? {
|
||||||
|
|
|
@ -11,7 +11,7 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
|
||||||
const { status } = useSession();
|
const { status } = useSession();
|
||||||
|
|
||||||
if (status === "loading") {
|
if (status === "loading") {
|
||||||
return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
|
return <div className="absolute z-50 flex h-screen w-full items-center bg-emphasis" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (status === "unauthenticated") {
|
if (status === "unauthenticated") {
|
||||||
|
|
|
@ -24,7 +24,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
|
||||||
<>
|
<>
|
||||||
<Link
|
<Link
|
||||||
href="/apps"
|
href="/apps"
|
||||||
className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
|
className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
|
||||||
{isLocaleReady ? t("app_store") : <SkeletonText className="h-4 w-24" />}{" "}
|
{isLocaleReady ? t("app_store") : <SkeletonText className="h-4 w-24" />}{" "}
|
||||||
</Link>
|
</Link>
|
||||||
{category && (
|
{category && (
|
||||||
|
|
|
@ -15,7 +15,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
|
||||||
<div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
|
<div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
|
||||||
<Link
|
<Link
|
||||||
href="/apps"
|
href="/apps"
|
||||||
className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
|
className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
|
||||||
<FiArrowLeft className="h-4 w-4" />
|
<FiArrowLeft className="h-4 w-4" />
|
||||||
{isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
|
{isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -27,10 +27,10 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
|
||||||
key={category.name}
|
key={category.name}
|
||||||
href={"/apps/categories/" + category.name}
|
href={"/apps/categories/" + category.name}
|
||||||
data-testid={`app-store-category-${category.name}`}
|
data-testid={`app-store-category-${category.name}`}
|
||||||
className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
|
className="bg-subtle relative flex rounded-sm px-6 py-4 sm:block">
|
||||||
<div className="self-center">
|
<div className="self-center">
|
||||||
<h3 className="font-medium capitalize">{category.name}</h3>
|
<h3 className="font-medium capitalize">{category.name}</h3>
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-subtle text-sm">
|
||||||
{t("number_apps", { count: category.count })}{" "}
|
{t("number_apps", { count: category.count })}{" "}
|
||||||
<FiArrowRight className="inline-block h-4 w-4" />
|
<FiArrowRight className="inline-block h-4 w-4" />
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -36,9 +36,9 @@ function AppsSearch({
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<TextField
|
<TextField
|
||||||
className="!border-gray-100 bg-gray-100 !pl-0 focus:!ring-offset-0"
|
className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
|
||||||
addOnLeading={<FiSearch className="h-4 w-4 text-gray-500" />}
|
addOnLeading={<FiSearch className="text-subtle h-4 w-4" />}
|
||||||
addOnClassname="!border-gray-100"
|
addOnClassname="!border-muted"
|
||||||
containerClassName={classNames("focus:!ring-offset-0", className)}
|
containerClassName={classNames("focus:!ring-offset-0", className)}
|
||||||
type="search"
|
type="search"
|
||||||
autoComplete="false"
|
autoComplete="false"
|
||||||
|
|
|
@ -28,15 +28,15 @@ export default function Error() {
|
||||||
return (
|
return (
|
||||||
<AuthContainer title="" description="">
|
<AuthContainer title="" description="">
|
||||||
<div>
|
<div>
|
||||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
|
||||||
<FiX className="h-6 w-6 text-red-600" />
|
<FiX className="h-6 w-6 text-red-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 text-center sm:mt-5">
|
<div className="mt-3 text-center sm:mt-5">
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
|
||||||
{error}
|
{error}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<p className="text-sm text-gray-500">{errorMsg}</p>
|
<p className="text-subtle text-sm">{errorMsg}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -60,7 +60,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
||||||
<>
|
<>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
|
<h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">
|
||||||
{t("password_updated")}
|
{t("password_updated")}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
@ -77,8 +77,8 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
||||||
<>
|
<>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">{t("whoops")}</h2>
|
<h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">{t("whoops")}</h2>
|
||||||
<h2 className="text-center text-3xl font-extrabold text-gray-900">{t("request_is_expired")}</h2>
|
<h2 className="text-emphasis text-center text-3xl font-extrabold">{t("request_is_expired")}</h2>
|
||||||
</div>
|
</div>
|
||||||
<p>{t("request_is_expired_instructions")}</p>
|
<p>{t("request_is_expired_instructions")}</p>
|
||||||
<Link href="/auth/forgot-password" passHref legacyBehavior>
|
<Link href="/auth/forgot-password" passHref legacyBehavior>
|
||||||
|
|
|
@ -96,7 +96,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
|
||||||
footerText={
|
footerText={
|
||||||
!success && (
|
!success && (
|
||||||
<>
|
<>
|
||||||
<Link href="/auth/login" className="font-medium text-gray-900">
|
<Link href="/auth/login" className="text-emphasis font-medium">
|
||||||
{t("back_to_signin")}
|
{t("back_to_signin")}
|
||||||
</Link>
|
</Link>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -31,15 +31,15 @@ export default function Logout(props: Props) {
|
||||||
return (
|
return (
|
||||||
<AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
|
<AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
|
||||||
<FiCheck className="h-6 w-6 text-green-600" />
|
<FiCheck className="h-6 w-6 text-green-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 text-center sm:mt-5">
|
<div className="mt-3 text-center sm:mt-5">
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
|
||||||
{t("youve_been_logged_out")}
|
{t("youve_been_logged_out")}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<p className="text-sm text-gray-500">{t("hope_to_see_you_soon")}</p>
|
<p className="text-subtle text-sm">{t("hope_to_see_you_soon")}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -103,7 +103,7 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
|
||||||
id={`wizard-step-${currentStep}`}
|
id={`wizard-step-${currentStep}`}
|
||||||
name={`wizard-step-${currentStep}`}
|
name={`wizard-step-${currentStep}`}
|
||||||
classNames={{
|
classNames={{
|
||||||
form: "mb-4 rounded-md bg-white px-0 pt-0 md:max-w-full",
|
form: "mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full",
|
||||||
appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
|
appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
|
||||||
verticalTabsItem: "!w-48 md:p-4",
|
verticalTabsItem: "!w-48 md:p-4",
|
||||||
}}
|
}}
|
||||||
|
@ -121,7 +121,7 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Meta title={t("setup")} description={t("setup_description")} />
|
<Meta title={t("setup")} description={t("setup_description")} />
|
||||||
<main className="flex items-center bg-gray-100 print:h-full md:h-screen">
|
<main className="flex items-center bg-subtle print:h-full md:h-screen">
|
||||||
<WizardForm
|
<WizardForm
|
||||||
href="/auth/setup"
|
href="/auth/setup"
|
||||||
steps={steps}
|
steps={steps}
|
||||||
|
|
|
@ -101,7 +101,7 @@ export default function Verify() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-black bg-opacity-90 text-white backdrop-blur-md backdrop-grayscale backdrop-filter">
|
<div className="text-inverted bg-black bg-opacity-90 backdrop-blur-md backdrop-grayscale backdrop-filter">
|
||||||
<Head>
|
<Head>
|
||||||
<title>
|
<title>
|
||||||
{/* @note: Ternary can look ugly ant his might be extracted later but I think at 3 it's not yet worth
|
{/* @note: Ternary can look ugly ant his might be extracted later but I think at 3 it's not yet worth
|
||||||
|
@ -117,11 +117,11 @@ export default function Verify() {
|
||||||
<div className="m-10 flex max-w-2xl flex-col items-start border border-white p-12 text-left">
|
<div className="m-10 flex max-w-2xl flex-col items-start border border-white p-12 text-left">
|
||||||
<div className="rounded-full border border-white p-3">
|
<div className="rounded-full border border-white p-3">
|
||||||
{hasPaymentFailed ? (
|
{hasPaymentFailed ? (
|
||||||
<ExclamationIcon className="h-12 w-12 flex-shrink-0 p-0.5 font-extralight text-white" />
|
<ExclamationIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
|
||||||
) : sessionId ? (
|
) : sessionId ? (
|
||||||
<CheckIcon className="h-12 w-12 flex-shrink-0 p-0.5 font-extralight text-white" />
|
<CheckIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
|
||||||
) : (
|
) : (
|
||||||
<MailOpenIcon className="h-12 w-12 flex-shrink-0 p-0.5 font-extralight text-white" />
|
<MailOpenIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-cal my-6 text-3xl font-normal">
|
<h3 className="font-cal my-6 text-3xl font-normal">
|
||||||
|
@ -139,7 +139,7 @@ export default function Verify() {
|
||||||
{hasPaymentFailed &&
|
{hasPaymentFailed &&
|
||||||
"Once you activate your account you will be able to try purchase your premium username again or select a different one."}
|
"Once you activate your account you will be able to try purchase your premium username again or select a different one."}
|
||||||
</p>
|
</p>
|
||||||
<p className="mt-6 text-gray-400">
|
<p className="text-muted mt-6">
|
||||||
Don't see an email? Click the button below to send another email.
|
Don't see an email? Click the button below to send another email.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
|
@ -53,7 +53,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
return (
|
return (
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<h3 className="font-medium leading-6 text-gray-900">
|
<h3 className="text-emphasis font-medium leading-6">
|
||||||
{t("date_overrides")}{" "}
|
{t("date_overrides")}{" "}
|
||||||
<Tooltip content={t("date_overrides_info")}>
|
<Tooltip content={t("date_overrides_info")}>
|
||||||
<span className="inline-block">
|
<span className="inline-block">
|
||||||
|
@ -61,7 +61,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mb-4 text-sm text-gray-500">{t("date_overrides_subtitle")}</p>
|
<p className="text-subtle mb-4 text-sm">{t("date_overrides_subtitle")}</p>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<DateOverrideList
|
<DateOverrideList
|
||||||
excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
|
excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
|
||||||
|
@ -180,7 +180,7 @@ export default function Availability() {
|
||||||
}
|
}
|
||||||
CTA={
|
CTA={
|
||||||
<div className="flex items-center justify-end">
|
<div className="flex items-center justify-end">
|
||||||
<div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
|
<div className="sm:hover:bg-subtle flex items-center rounded-md px-2">
|
||||||
<Skeleton
|
<Skeleton
|
||||||
as={Label}
|
as={Label}
|
||||||
htmlFor="hiddenSwitch"
|
htmlFor="hiddenSwitch"
|
||||||
|
@ -217,7 +217,7 @@ export default function Availability() {
|
||||||
|
|
||||||
<VerticalDivider />
|
<VerticalDivider />
|
||||||
|
|
||||||
<div className="border-l-2 border-gray-300" />
|
<div className="border-default border-l-2" />
|
||||||
<Button className="ml-4 lg:ml-0" type="submit" form="availability-form">
|
<Button className="ml-4 lg:ml-0" type="submit" form="availability-form">
|
||||||
{t("save")}
|
{t("save")}
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -259,7 +259,7 @@ export default function Availability() {
|
||||||
<div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
|
<div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
|
||||||
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
|
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
|
<label htmlFor="timeZone" className="text-default block text-sm font-medium">
|
||||||
{t("timezone")}
|
{t("timezone")}
|
||||||
</label>
|
</label>
|
||||||
<Controller
|
<Controller
|
||||||
|
@ -268,7 +268,7 @@ export default function Availability() {
|
||||||
value ? (
|
value ? (
|
||||||
<TimezoneSelect
|
<TimezoneSelect
|
||||||
value={value}
|
value={value}
|
||||||
className="focus:border-brand mt-1 block w-72 rounded-md border-gray-300 text-sm"
|
className="focus:border-brand-default border-default mt-1 block w-72 rounded-md text-sm"
|
||||||
onChange={(timezone) => onChange(timezone.value)}
|
onChange={(timezone) => onChange(timezone.value)}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
@ -279,7 +279,7 @@ export default function Availability() {
|
||||||
</div>
|
</div>
|
||||||
<hr className="my-6 mr-8" />
|
<hr className="my-6 mr-8" />
|
||||||
<div className="hidden rounded-md md:block">
|
<div className="hidden rounded-md md:block">
|
||||||
<h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
|
<h3 className="text-emphasis text-sm font-medium">{t("something_doesnt_look_right")}</h3>
|
||||||
<div className="mt-3 flex">
|
<div className="mt-3 flex">
|
||||||
<Button href="/availability/troubleshoot" color="secondary">
|
<Button href="/availability/troubleshoot" color="secondary">
|
||||||
{t("launch_troubleshooter")}
|
{t("launch_troubleshooter")}
|
||||||
|
|
|
@ -82,7 +82,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
|
<div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-default">
|
||||||
<ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}>
|
<ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}>
|
||||||
{schedules.map((schedule) => (
|
{schedules.map((schedule) => (
|
||||||
<ScheduleListItem
|
<ScheduleListItem
|
||||||
|
|
|
@ -46,7 +46,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
|
||||||
}, [] as IBusySlot[]) || [];
|
}, [] as IBusySlot[]) || [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-xl overflow-hidden rounded-md bg-white shadow">
|
<div className="bg-default max-w-xl overflow-hidden rounded-md shadow">
|
||||||
<div className="px-4 py-5 sm:p-6">
|
<div className="px-4 py-5 sm:p-6">
|
||||||
{t("overview_of_day")}{" "}
|
{t("overview_of_day")}{" "}
|
||||||
<input
|
<input
|
||||||
|
@ -57,7 +57,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
|
||||||
if (e.target.value) setSelectedDate(e.target.value);
|
if (e.target.value) setSelectedDate(e.target.value);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<small className="block text-gray-400">{t("hover_over_bold_times_tip")}</small>
|
<small className="text-muted block">{t("hover_over_bold_times_tip")}</small>
|
||||||
<div className="mt-4 space-y-4">
|
<div className="mt-4 space-y-4">
|
||||||
<div className="bg-brand dark:bg-darkmodebrand overflow-hidden rounded-md">
|
<div className="bg-brand dark:bg-darkmodebrand overflow-hidden rounded-md">
|
||||||
<div className="text-brandcontrast dark:text-darkmodebrandcontrast px-4 py-2 sm:px-6">
|
<div className="text-brandcontrast dark:text-darkmodebrandcontrast px-4 py-2 sm:px-6">
|
||||||
|
@ -79,9 +79,9 @@ const AvailabilityView = ({ user }: { user: User }) => {
|
||||||
.map((slot: IBusySlot) => (
|
.map((slot: IBusySlot) => (
|
||||||
<div
|
<div
|
||||||
key={dayjs(slot.start).format("HH:mm")}
|
key={dayjs(slot.start).format("HH:mm")}
|
||||||
className="overflow-hidden rounded-md bg-gray-100"
|
className="bg-subtle overflow-hidden rounded-md"
|
||||||
data-testid="troubleshooter-busy-time">
|
data-testid="troubleshooter-busy-time">
|
||||||
<div className="px-4 py-5 text-black sm:p-6">
|
<div className="text-emphasis px-4 py-5 sm:p-6">
|
||||||
{t("calendar_shows_busy_between")}{" "}
|
{t("calendar_shows_busy_between")}{" "}
|
||||||
<span className="font-medium text-gray-800" title={dayjs(slot.start).format("HH:mm")}>
|
<span className="font-medium text-gray-800" title={dayjs(slot.start).format("HH:mm")}>
|
||||||
{dayjs(slot.start).format("HH:mm")}
|
{dayjs(slot.start).format("HH:mm")}
|
||||||
|
@ -98,8 +98,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
|
||||||
</div>
|
</div>
|
||||||
));
|
));
|
||||||
return (
|
return (
|
||||||
<div className="overflow-hidden rounded-md bg-gray-100">
|
<div className="bg-subtle overflow-hidden rounded-md">
|
||||||
<div className="px-4 py-5 text-black sm:p-6">{t("calendar_no_busy_slots")}</div>
|
<div className="text-emphasis px-4 py-5 sm:p-6">{t("calendar_no_busy_slots")}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
|
|
|
@ -130,7 +130,7 @@ function RedirectionToast({ url }: { url: string }) {
|
||||||
<div className="border border-green-600 bg-green-500 p-2 sm:p-3">
|
<div className="border border-green-600 bg-green-500 p-2 sm:p-3">
|
||||||
<div className="flex flex-wrap items-center justify-between">
|
<div className="flex flex-wrap items-center justify-between">
|
||||||
<div className="flex w-0 flex-1 items-center">
|
<div className="flex w-0 flex-1 items-center">
|
||||||
<p className="truncate font-medium text-white sm:mx-3">
|
<p className="text-inverted truncate font-medium sm:mx-3">
|
||||||
<span className="md:hidden">Redirecting to {url} ...</span>
|
<span className="md:hidden">Redirecting to {url} ...</span>
|
||||||
<span className="hidden md:inline">
|
<span className="hidden md:inline">
|
||||||
{t("you_are_being_redirected", { url, seconds: timeRemaining })}
|
{t("you_are_being_redirected", { url, seconds: timeRemaining })}
|
||||||
|
@ -144,7 +144,7 @@ function RedirectionToast({ url }: { url: string }) {
|
||||||
redirectToExternalUrl(urlWithSuccessParamsRef.current);
|
redirectToExternalUrl(urlWithSuccessParamsRef.current);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
|
className="bg-default flex w-full items-center justify-center rounded-sm border border-transparent px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
|
||||||
{t("continue")}
|
{t("continue")}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -155,7 +155,7 @@ function RedirectionToast({ url }: { url: string }) {
|
||||||
setIsToastVisible(false);
|
setIsToastVisible(false);
|
||||||
}}
|
}}
|
||||||
className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
|
className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
|
||||||
<FiX className="h-6 w-6 text-white" />
|
<FiX className="text-inverted h-6 w-6" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -376,7 +376,7 @@ export default function Success(props: SuccessProps) {
|
||||||
<div className="mt-2 ml-4 -mb-4">
|
<div className="mt-2 ml-4 -mb-4">
|
||||||
<Link
|
<Link
|
||||||
href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
|
href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
|
||||||
className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-transparent dark:hover:text-white">
|
className="hover:bg-subtle text-subtle dark:hover:text-inverted mt-2 inline-flex px-1 py-2 text-sm hover:text-gray-800 dark:hover:bg-transparent">
|
||||||
<FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
|
<FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
@ -400,7 +400,7 @@ export default function Success(props: SuccessProps) {
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"main inline-block transform overflow-hidden rounded-lg border sm:my-8 sm:max-w-xl",
|
"main inline-block transform overflow-hidden rounded-lg border sm:my-8 sm:max-w-xl",
|
||||||
isBackgroundTransparent ? "" : "dark:bg-darkgray-100 dark:border-darkgray-200 bg-white",
|
isBackgroundTransparent ? "" : "dark:bg-darkgray-100 dark:border-darkgray-200 bg-default",
|
||||||
"px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
|
"px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
|
||||||
)}
|
)}
|
||||||
role="dialog"
|
role="dialog"
|
||||||
|
@ -410,12 +410,12 @@ export default function Success(props: SuccessProps) {
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"mx-auto flex items-center justify-center",
|
"mx-auto flex items-center justify-center",
|
||||||
!giphyImage && !isCancelled && !needsConfirmation
|
!giphyImage && !isCancelled && !needsConfirmation
|
||||||
? "h-12 w-12 rounded-full bg-green-100"
|
? "bg-success h-12 w-12 rounded-full"
|
||||||
: "",
|
: "",
|
||||||
!giphyImage && !isCancelled && needsConfirmation
|
!giphyImage && !isCancelled && needsConfirmation
|
||||||
? "h-12 w-12 rounded-full bg-gray-100"
|
? "bg-subtle h-12 w-12 rounded-full"
|
||||||
: "",
|
: "",
|
||||||
isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
|
isCancelled ? "bg-error h-12 w-12 rounded-full" : ""
|
||||||
)}>
|
)}>
|
||||||
{giphyImage && !needsConfirmation && (
|
{giphyImage && !needsConfirmation && (
|
||||||
// eslint-disable-next-line @next/next/no-img-element
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
|
@ -424,12 +424,12 @@ export default function Success(props: SuccessProps) {
|
||||||
{!giphyImage && !needsConfirmation && !isCancelled && (
|
{!giphyImage && !needsConfirmation && !isCancelled && (
|
||||||
<FiCheck className="h-5 w-5 text-green-600" />
|
<FiCheck className="h-5 w-5 text-green-600" />
|
||||||
)}
|
)}
|
||||||
{needsConfirmation && !isCancelled && <FiCalendar className="h-5 w-5 text-gray-900" />}
|
{needsConfirmation && !isCancelled && <FiCalendar className="text-emphasis h-5 w-5" />}
|
||||||
{isCancelled && <FiX className="h-5 w-5 text-red-600" />}
|
{isCancelled && <FiX className="h-5 w-5 text-red-600" />}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-6 mb-8 text-center last:mb-0">
|
<div className="mt-6 mb-8 text-center last:mb-0">
|
||||||
<h3
|
<h3
|
||||||
className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white"
|
className="text-emphasis dark:text-inverted text-2xl font-semibold leading-6"
|
||||||
data-testid={isCancelled ? "cancelled-headline" : ""}
|
data-testid={isCancelled ? "cancelled-headline" : ""}
|
||||||
id="modal-headline">
|
id="modal-headline">
|
||||||
{needsConfirmation && !isCancelled
|
{needsConfirmation && !isCancelled
|
||||||
|
@ -532,10 +532,10 @@ export default function Success(props: SuccessProps) {
|
||||||
href={locationToDisplay}
|
href={locationToDisplay}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title={locationToDisplay}
|
title={locationToDisplay}
|
||||||
className="flex items-center gap-2 text-gray-700 underline dark:text-gray-50"
|
className="text-default flex items-center gap-2 underline dark:text-gray-50"
|
||||||
rel="noreferrer">
|
rel="noreferrer">
|
||||||
{providerName || "Link"}
|
{providerName || "Link"}
|
||||||
<FiExternalLink className="inline h-4 w-4 text-gray-700 dark:text-white" />
|
<FiExternalLink className="text-default dark:text-inverted inline h-4 w-4" />
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
locationToDisplay
|
locationToDisplay
|
||||||
|
@ -586,12 +586,12 @@ export default function Success(props: SuccessProps) {
|
||||||
<>
|
<>
|
||||||
<hr className="border-bookinglightest dark:border-darkgray-300 mb-8" />
|
<hr className="border-bookinglightest dark:border-darkgray-300 mb-8" />
|
||||||
<div className="text-center last:pb-0">
|
<div className="text-center last:pb-0">
|
||||||
<span className="text-gray-900 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
<span className="text-emphasis ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
||||||
{t("need_to_make_a_change")}
|
{t("need_to_make_a_change")}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{!props.recurringBookings && (
|
{!props.recurringBookings && (
|
||||||
<span className="text-bookinglight inline text-gray-700">
|
<span className="text-bookinglight text-default inline">
|
||||||
<span className="underline">
|
<span className="underline">
|
||||||
<Link href={`/reschedule/${bookingInfo?.uid}`} legacyBehavior>
|
<Link href={`/reschedule/${bookingInfo?.uid}`} legacyBehavior>
|
||||||
{t("reschedule")}
|
{t("reschedule")}
|
||||||
|
@ -604,7 +604,7 @@ export default function Success(props: SuccessProps) {
|
||||||
<button
|
<button
|
||||||
data-testid="cancel"
|
data-testid="cancel"
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"text-bookinglight text-gray-700 underline",
|
"text-bookinglight text-default underline",
|
||||||
props.recurringBookings && "ltr:mr-2 rtl:ml-2"
|
props.recurringBookings && "ltr:mr-2 rtl:ml-2"
|
||||||
)}
|
)}
|
||||||
onClick={() => setIsCancellationMode(true)}>
|
onClick={() => setIsCancellationMode(true)}>
|
||||||
|
@ -634,7 +634,7 @@ export default function Success(props: SuccessProps) {
|
||||||
<>
|
<>
|
||||||
<hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
|
<hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
|
||||||
<div className="text-bookingdark align-center flex flex-row justify-center pt-8">
|
<div className="text-bookingdark align-center flex flex-row justify-center pt-8">
|
||||||
<span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
<span className="text-default flex self-center font-medium ltr:mr-2 rtl:ml-2 dark:text-gray-50">
|
||||||
{t("add_to_calendar")}
|
{t("add_to_calendar")}
|
||||||
</span>
|
</span>
|
||||||
<div className="justify-left mt-1 flex text-left sm:mt-0">
|
<div className="justify-left mt-1 flex text-left sm:mt-0">
|
||||||
|
@ -656,7 +656,7 @@ export default function Success(props: SuccessProps) {
|
||||||
encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
|
encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
|
||||||
: "")
|
: "")
|
||||||
}
|
}
|
||||||
className="h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:text-white">
|
className="dark:text-inverted h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-gray-700">
|
||||||
<svg
|
<svg
|
||||||
className="-mt-1.5 inline-block h-4 w-4"
|
className="-mt-1.5 inline-block h-4 w-4"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
|
@ -682,7 +682,7 @@ export default function Success(props: SuccessProps) {
|
||||||
? "&location=" + encodeURIComponent(locationVideoCallUrl)
|
? "&location=" + encodeURIComponent(locationVideoCallUrl)
|
||||||
: "")
|
: "")
|
||||||
}
|
}
|
||||||
className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
|
className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<svg
|
<svg
|
||||||
className="mr-1 -mt-1.5 inline-block h-4 w-4"
|
className="mr-1 -mt-1.5 inline-block h-4 w-4"
|
||||||
|
@ -709,7 +709,7 @@ export default function Success(props: SuccessProps) {
|
||||||
? "&location=" + encodeURIComponent(locationVideoCallUrl)
|
? "&location=" + encodeURIComponent(locationVideoCallUrl)
|
||||||
: "")
|
: "")
|
||||||
}
|
}
|
||||||
className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
|
className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<svg
|
<svg
|
||||||
className="mr-1 -mt-1.5 inline-block h-4 w-4"
|
className="mr-1 -mt-1.5 inline-block h-4 w-4"
|
||||||
|
@ -722,7 +722,7 @@ export default function Success(props: SuccessProps) {
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href={"data:text/calendar," + eventLink()}
|
href={"data:text/calendar," + eventLink()}
|
||||||
className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
|
className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700"
|
||||||
download={props.eventType.title + ".ics"}>
|
download={props.eventType.title + ".ics"}>
|
||||||
<svg
|
<svg
|
||||||
version="1.1"
|
version="1.1"
|
||||||
|
@ -741,7 +741,7 @@ export default function Success(props: SuccessProps) {
|
||||||
{session === null && !(userIsOwner || props.hideBranding) && (
|
{session === null && !(userIsOwner || props.hideBranding) && (
|
||||||
<>
|
<>
|
||||||
<hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
|
<hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
|
||||||
<div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 pt-8 text-center text-xs dark:text-white">
|
<div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 dark:text-inverted pt-8 text-center text-xs">
|
||||||
<a href="https://cal.com/signup">
|
<a href="https://cal.com/signup">
|
||||||
{t("create_booking_link_with_calcom", { appName: APP_NAME })}
|
{t("create_booking_link_with_calcom", { appName: APP_NAME })}
|
||||||
</a>
|
</a>
|
||||||
|
@ -759,7 +759,7 @@ export default function Success(props: SuccessProps) {
|
||||||
name="email"
|
name="email"
|
||||||
id="email"
|
id="email"
|
||||||
defaultValue={email}
|
defaultValue={email}
|
||||||
className="mr- focus:border-brand border-bookinglightest dark:border-darkgray-300 mt-0 block w-full rounded-none rounded-l-md border-gray-300 shadow-sm focus:ring-black dark:bg-black dark:text-white sm:text-sm"
|
className="mr- focus:border-brand-default border-bookinglightest dark:border-darkgray-300 border-default dark:text-inverted mt-0 block w-full rounded-none rounded-l-md shadow-sm focus:ring-black dark:bg-black sm:text-sm"
|
||||||
placeholder="rick.astley@cal.com"
|
placeholder="rick.astley@cal.com"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -122,10 +122,10 @@ export default function Bookings() {
|
||||||
{!!bookingsToday.length && status === "upcoming" && (
|
{!!bookingsToday.length && status === "upcoming" && (
|
||||||
<div className="mb-6 pt-2 xl:pt-0">
|
<div className="mb-6 pt-2 xl:pt-0">
|
||||||
<WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
|
<WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
|
||||||
<p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("today")}</p>
|
<p className="text-subtle mb-2 text-xs font-medium uppercase leading-4">{t("today")}</p>
|
||||||
<div className="overflow-hidden rounded-md border border-gray-200">
|
<div className="overflow-hidden rounded-md border border-gray-200">
|
||||||
<table className="w-full max-w-full table-fixed">
|
<table className="w-full max-w-full table-fixed">
|
||||||
<tbody className="divide-y divide-gray-200 bg-white" data-testid="today-bookings">
|
<tbody className="bg-default divide-y divide-gray-200" data-testid="today-bookings">
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{bookingsToday.map((booking: BookingOutput) => (
|
{bookingsToday.map((booking: BookingOutput) => (
|
||||||
<BookingListItem
|
<BookingListItem
|
||||||
|
@ -144,7 +144,7 @@ export default function Bookings() {
|
||||||
<div className="pt-2 xl:pt-0">
|
<div className="pt-2 xl:pt-0">
|
||||||
<div className="overflow-hidden rounded-md border border-gray-200">
|
<div className="overflow-hidden rounded-md border border-gray-200">
|
||||||
<table className="w-full max-w-full table-fixed">
|
<table className="w-full max-w-full table-fixed">
|
||||||
<tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">
|
<tbody className="bg-default divide-y divide-gray-200" data-testid="bookings">
|
||||||
{query.data.pages.map((page, index) => (
|
{query.data.pages.map((page, index) => (
|
||||||
<Fragment key={index}>
|
<Fragment key={index}>
|
||||||
{page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
|
{page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
|
||||||
|
|
|
@ -122,13 +122,13 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
|
||||||
title={type.title}>
|
title={type.title}>
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span
|
||||||
className="font-semibold text-gray-700 ltr:mr-1 rtl:ml-1"
|
className="text-default font-semibold ltr:mr-1 rtl:ml-1"
|
||||||
data-testid={"event-type-title-" + type.id}>
|
data-testid={"event-type-title-" + type.id}>
|
||||||
{type.title}
|
{type.title}
|
||||||
</span>
|
</span>
|
||||||
{group.profile.slug ? (
|
{group.profile.slug ? (
|
||||||
<small
|
<small
|
||||||
className="hidden font-normal leading-4 text-gray-600 sm:inline"
|
className="text-muted hidden font-normal leading-4 sm:inline"
|
||||||
data-testid={"event-type-slug-" + type.id}>
|
data-testid={"event-type-slug-" + type.id}>
|
||||||
{`/${group.profile.slug}/${type.slug}`}
|
{`/${group.profile.slug}/${type.slug}`}
|
||||||
</small>
|
</small>
|
||||||
|
@ -311,18 +311,18 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||||
const firstItem = types[0];
|
const firstItem = types[0];
|
||||||
const lastItem = types[types.length - 1];
|
const lastItem = types[types.length - 1];
|
||||||
return (
|
return (
|
||||||
<div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white">
|
<div className="bg-default mb-16 flex overflow-hidden rounded-md border border-gray-200">
|
||||||
<ul ref={parent} className="!static w-full divide-y divide-gray-200" data-testid="event-types">
|
<ul ref={parent} className="!static w-full divide-y divide-gray-200" data-testid="event-types">
|
||||||
{types.map((type, index) => {
|
{types.map((type, index) => {
|
||||||
const embedLink = `${group.profile.slug}/${type.slug}`;
|
const embedLink = `${group.profile.slug}/${type.slug}`;
|
||||||
const calLink = `${CAL_URL}/${embedLink}`;
|
const calLink = `${CAL_URL}/${embedLink}`;
|
||||||
return (
|
return (
|
||||||
<li key={type.id}>
|
<li key={type.id}>
|
||||||
<div className="flex w-full items-center justify-between hover:bg-gray-50">
|
<div className="hover:bg-muted flex w-full items-center justify-between">
|
||||||
<div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
|
<div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
|
||||||
{!(firstItem && firstItem.id === type.id) && (
|
{!(firstItem && firstItem.id === type.id) && (
|
||||||
<button
|
<button
|
||||||
className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
|
className="bg-default text-muted disabled:hover:text-muted hover:text-emphasis invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
|
||||||
onClick={() => moveEventType(index, -1)}>
|
onClick={() => moveEventType(index, -1)}>
|
||||||
<FiArrowUp className="h-5 w-5" />
|
<FiArrowUp className="h-5 w-5" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -330,7 +330,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||||
|
|
||||||
{!(lastItem && lastItem.id === type.id) && (
|
{!(lastItem && lastItem.id === type.id) && (
|
||||||
<button
|
<button
|
||||||
className="invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
|
className="bg-default text-muted disabled:hover:text-muted hover:text-emphasis invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
|
||||||
onClick={() => moveEventType(index, 1)}>
|
onClick={() => moveEventType(index, 1)}>
|
||||||
<FiArrowDown className="h-5 w-5" />
|
<FiArrowDown className="h-5 w-5" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -357,7 +357,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
<Tooltip content={t("show_eventtype_on_profile")}>
|
<Tooltip content={t("show_eventtype_on_profile")}>
|
||||||
<div className="self-center rounded-md p-2 hover:bg-gray-200">
|
<div className="hover:bg-emphasis self-center rounded-md p-2">
|
||||||
<Switch
|
<Switch
|
||||||
name="Hidden"
|
name="Hidden"
|
||||||
checked={!type.hidden}
|
checked={!type.hidden}
|
||||||
|
@ -585,11 +585,11 @@ const EventTypeListHeading = ({
|
||||||
<div>
|
<div>
|
||||||
<Link
|
<Link
|
||||||
href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
|
href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
|
||||||
className="font-bold">
|
className="text-emphasis font-bold">
|
||||||
{profile?.name || ""}
|
{profile?.name || ""}
|
||||||
</Link>
|
</Link>
|
||||||
{membershipCount && teamId && (
|
{membershipCount && teamId && (
|
||||||
<span className="relative -top-px text-xs text-gray-500 ltr:ml-2 ltr:mr-2 rtl:ml-2">
|
<span className="text-subtle relative -top-px text-xs ltr:ml-2 ltr:mr-2 rtl:ml-2">
|
||||||
<Link href={`/settings/teams/${teamId}/members`}>
|
<Link href={`/settings/teams/${teamId}/members`}>
|
||||||
<Badge variant="gray">
|
<Badge variant="gray">
|
||||||
<FiUsers className="mr-1 -mt-px inline h-3 w-3" />
|
<FiUsers className="mr-1 -mt-px inline h-3 w-3" />
|
||||||
|
@ -599,7 +599,7 @@ const EventTypeListHeading = ({
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{profile?.slug && (
|
{profile?.slug && (
|
||||||
<Link href={`${CAL_URL}/${profile.slug}`} className="block text-xs text-gray-500">
|
<Link href={`${CAL_URL}/${profile.slug}`} className="text-subtle block text-xs">
|
||||||
{`${CAL_URL?.replace("https://", "")}/${profile.slug}`}
|
{`${CAL_URL?.replace("https://", "")}/${profile.slug}`}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -80,7 +80,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="dark:bg-brand dark:text-brand-contrast min-h-screen text-black"
|
className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen"
|
||||||
data-testid="onboarding"
|
data-testid="onboarding"
|
||||||
key={router.asPath}>
|
key={router.asPath}>
|
||||||
<Head>
|
<Head>
|
||||||
|
@ -100,7 +100,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{headers[currentStepIndex]?.subtitle.map((subtitle, index) => (
|
{headers[currentStepIndex]?.subtitle.map((subtitle, index) => (
|
||||||
<p className="font-sans text-sm font-normal text-gray-500" key={index}>
|
<p className="text-subtle font-sans text-sm font-normal" key={index}>
|
||||||
{subtitle}
|
{subtitle}
|
||||||
</p>
|
</p>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -8,15 +8,15 @@ export default function MaintenancePage() {
|
||||||
const { t, isLocaleReady } = useLocale();
|
const { t, isLocaleReady } = useLocale();
|
||||||
if (!isLocaleReady) return null;
|
if (!isLocaleReady) return null;
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-gray-100">
|
<div className="bg-subtle flex h-screen">
|
||||||
<Head>
|
<Head>
|
||||||
<title>
|
<title>
|
||||||
{t("under_maintenance")} | {APP_NAME}
|
{t("under_maintenance")} | {APP_NAME}
|
||||||
</title>
|
</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<div className="m-auto rounded-md bg-white p-10 text-right ltr:text-left">
|
<div className="bg-default m-auto rounded-md p-10 text-right ltr:text-left">
|
||||||
<h1 className="text-2xl font-medium text-black">{t("under_maintenance")}</h1>
|
<h1 className="text-emphasis text-2xl font-medium">{t("under_maintenance")}</h1>
|
||||||
<p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
|
<p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
|
||||||
{t("under_maintenance_description", { appName: APP_NAME })}
|
{t("under_maintenance_description", { appName: APP_NAME })}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -7,7 +7,7 @@ export default function MorePage() {
|
||||||
<Shell>
|
<Shell>
|
||||||
<div className="max-w-screen-lg">
|
<div className="max-w-screen-lg">
|
||||||
<MobileNavigationMoreItems />
|
<MobileNavigationMoreItems />
|
||||||
<p className="mt-6 text-xs leading-tight text-gray-500 md:hidden">{t("more_page_footer")}</p>
|
<p className="text-subtle mt-6 text-xs leading-tight md:hidden">{t("more_page_footer")}</p>
|
||||||
</div>
|
</div>
|
||||||
</Shell>
|
</Shell>
|
||||||
);
|
);
|
||||||
|
|
|
@ -136,7 +136,7 @@ const AppearanceView = () => {
|
||||||
defaultValue={user.brandColor}
|
defaultValue={user.brandColor}
|
||||||
render={() => (
|
render={() => (
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
|
<p className="text-emphasis mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
defaultValue={user.brandColor}
|
defaultValue={user.brandColor}
|
||||||
onChange={(value) => formMethods.setValue("brandColor", value, { shouldDirty: true })}
|
onChange={(value) => formMethods.setValue("brandColor", value, { shouldDirty: true })}
|
||||||
|
@ -150,7 +150,7 @@ const AppearanceView = () => {
|
||||||
defaultValue={user.darkBrandColor}
|
defaultValue={user.darkBrandColor}
|
||||||
render={() => (
|
render={() => (
|
||||||
<div className="mt-6 sm:mt-0">
|
<div className="mt-6 sm:mt-0">
|
||||||
<p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
|
<p className="text-emphasis mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
defaultValue={user.darkBrandColor}
|
defaultValue={user.darkBrandColor}
|
||||||
onChange={(value) => formMethods.setValue("darkBrandColor", value, { shouldDirty: true })}
|
onChange={(value) => formMethods.setValue("darkBrandColor", value, { shouldDirty: true })}
|
||||||
|
|
|
@ -84,14 +84,14 @@ const CalendarsView = () => {
|
||||||
success={({ data }) => {
|
success={({ data }) => {
|
||||||
return data.connectedCalendars.length ? (
|
return data.connectedCalendars.length ? (
|
||||||
<div>
|
<div>
|
||||||
<div className="mt-4 flex space-x-4 rounded-md border-gray-200 bg-gray-50 p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
|
<div className="bg-muted mt-4 flex space-x-4 rounded-md border-gray-200 p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
|
||||||
<div className=" flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 bg-white p-[6px]">
|
<div className=" bg-default flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 p-[6px]">
|
||||||
<FiCalendar className="h-6 w-6" />
|
<FiCalendar className="h-6 w-6" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex w-full flex-col space-y-3">
|
<div className="flex w-full flex-col space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<h4 className=" pb-2 text-base font-semibold leading-5 text-black">
|
<h4 className=" text-emphasis pb-2 text-base font-semibold leading-5">
|
||||||
{t("add_to_calendar")}
|
{t("add_to_calendar")}
|
||||||
</h4>
|
</h4>
|
||||||
<p className=" text-sm leading-5 text-gray-600">
|
<p className=" text-sm leading-5 text-gray-600">
|
||||||
|
@ -109,7 +109,7 @@ const CalendarsView = () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h4 className="mt-12 text-base font-semibold leading-5 text-black">
|
<h4 className="text-emphasis mt-12 text-base font-semibold leading-5">
|
||||||
{t("check_for_conflicts")}
|
{t("check_for_conflicts")}
|
||||||
</h4>
|
</h4>
|
||||||
<p className="pb-2 text-sm leading-5 text-gray-600">{t("select_calendars")}</p>
|
<p className="pb-2 text-sm leading-5 text-gray-600">{t("select_calendars")}</p>
|
||||||
|
@ -131,7 +131,7 @@ const CalendarsView = () => {
|
||||||
trashIcon
|
trashIcon
|
||||||
onSuccess={() => query.refetch()}
|
onSuccess={() => query.refetch()}
|
||||||
buttonProps={{
|
buttonProps={{
|
||||||
className: "border border-gray-300 py-[2px]",
|
className: "border border-default py-[2px]",
|
||||||
color: "secondary",
|
color: "secondary",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -167,12 +167,12 @@ const CalendarsView = () => {
|
||||||
<DisconnectIntegration
|
<DisconnectIntegration
|
||||||
trashIcon
|
trashIcon
|
||||||
credentialId={item.credentialId}
|
credentialId={item.credentialId}
|
||||||
buttonProps={{ className: "border border-gray-300" }}
|
buttonProps={{ className: "border border-default" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full border-t border-gray-200">
|
<div className="w-full border-t border-gray-200">
|
||||||
<p className="px-2 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
|
<p className="text-subtle px-2 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
|
||||||
<ul className="space-y-2 p-4">
|
<ul className="space-y-2 p-4">
|
||||||
{item.calendars.map((cal) => (
|
{item.calendars.map((cal) => (
|
||||||
<CalendarSwitch
|
<CalendarSwitch
|
||||||
|
|
|
@ -89,7 +89,7 @@ const ConferencingLayout = () => {
|
||||||
return <SkeletonLoader title={t("conferencing")} description={t("conferencing_description")} />;
|
return <SkeletonLoader title={t("conferencing")} description={t("conferencing_description")} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full bg-white sm:mx-0 xl:mt-0">
|
<div className="w-full bg-default sm:mx-0 xl:mt-0">
|
||||||
<Meta title={t("conferencing")} description={t("conferencing_description")} />
|
<Meta title={t("conferencing")} description={t("conferencing_description")} />
|
||||||
<List>
|
<List>
|
||||||
{apps?.items &&
|
{apps?.items &&
|
||||||
|
|
|
@ -142,7 +142,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
|
||||||
name="locale"
|
name="locale"
|
||||||
render={({ field: { value, onChange } }) => (
|
render={({ field: { value, onChange } }) => (
|
||||||
<>
|
<>
|
||||||
<Label className="text-gray-900">
|
<Label className="text-emphasis">
|
||||||
<>{t("language")}</>
|
<>{t("language")}</>
|
||||||
</Label>
|
</Label>
|
||||||
<Select<{ label: string; value: string }>
|
<Select<{ label: string; value: string }>
|
||||||
|
@ -159,7 +159,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
|
||||||
control={formMethods.control}
|
control={formMethods.control}
|
||||||
render={({ field: { value } }) => (
|
render={({ field: { value } }) => (
|
||||||
<>
|
<>
|
||||||
<Label className="mt-8 text-gray-900">
|
<Label className="text-emphasis mt-8">
|
||||||
<>{t("timezone")}</>
|
<>{t("timezone")}</>
|
||||||
</Label>
|
</Label>
|
||||||
<TimezoneSelect
|
<TimezoneSelect
|
||||||
|
@ -177,7 +177,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
|
||||||
control={formMethods.control}
|
control={formMethods.control}
|
||||||
render={({ field: { value } }) => (
|
render={({ field: { value } }) => (
|
||||||
<>
|
<>
|
||||||
<Label className="mt-8 text-gray-900">
|
<Label className="text-emphasis mt-8">
|
||||||
<>{t("time_format")}</>
|
<>{t("time_format")}</>
|
||||||
</Label>
|
</Label>
|
||||||
<Select
|
<Select
|
||||||
|
@ -190,7 +190,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<div className="text-gray mt-2 flex items-center text-sm text-gray-700">
|
<div className="text-gray text-default mt-2 flex items-center text-sm">
|
||||||
{t("timeformat_profile_hint")}
|
{t("timeformat_profile_hint")}
|
||||||
</div>
|
</div>
|
||||||
<Controller
|
<Controller
|
||||||
|
@ -198,7 +198,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
|
||||||
control={formMethods.control}
|
control={formMethods.control}
|
||||||
render={({ field: { value } }) => (
|
render={({ field: { value } }) => (
|
||||||
<>
|
<>
|
||||||
<Label className="mt-8 text-gray-900">
|
<Label className="text-emphasis mt-8">
|
||||||
<>{t("start_of_week")}</>
|
<>{t("start_of_week")}</>
|
||||||
</Label>
|
</Label>
|
||||||
<Select
|
<Select
|
||||||
|
|
|
@ -68,7 +68,7 @@ const ProfileImpersonationView = () => {
|
||||||
fitToHeight={true}
|
fitToHeight={true}
|
||||||
/>
|
/>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
|
<Skeleton as={Label} className="text-emphasis text-sm font-semibold leading-none">
|
||||||
{t("user_impersonation_heading")}
|
{t("user_impersonation_heading")}
|
||||||
</Skeleton>
|
</Skeleton>
|
||||||
<Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
|
<Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
|
||||||
|
|
|
@ -112,13 +112,13 @@ const PasswordView = () => {
|
||||||
{user && user.identityProvider !== IdentityProvider.CAL ? (
|
{user && user.identityProvider !== IdentityProvider.CAL ? (
|
||||||
<div>
|
<div>
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
|
<h2 className="font-cal text-emphasis text-lg font-medium leading-6">
|
||||||
{t("account_managed_by_identity_provider", {
|
{t("account_managed_by_identity_provider", {
|
||||||
provider: identityProviderNameMap[user.identityProvider],
|
provider: identityProviderNameMap[user.identityProvider],
|
||||||
})}
|
})}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-1 text-sm text-gray-500">
|
<p className="text-subtle mt-1 text-sm">
|
||||||
{t("account_managed_by_identity_provider_description", {
|
{t("account_managed_by_identity_provider_description", {
|
||||||
provider: identityProviderNameMap[user.identityProvider],
|
provider: identityProviderNameMap[user.identityProvider],
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -73,20 +73,20 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
|
||||||
return (
|
return (
|
||||||
<LicenseRequired>
|
<LicenseRequired>
|
||||||
<div
|
<div
|
||||||
className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8"
|
className="bg-muted flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8"
|
||||||
aria-labelledby="modal-title"
|
aria-labelledby="modal-title"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true">
|
aria-modal="true">
|
||||||
<HeadSeo title={t("sign_up")} description={t("sign_up")} />
|
<HeadSeo title={t("sign_up")} description={t("sign_up")} />
|
||||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
<h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">
|
<h2 className="font-cal text-emphasis text-center text-3xl font-extrabold">
|
||||||
{t("create_your_account")}
|
{t("create_your_account")}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
<div className="mx-2 bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
|
<div className="bg-default mx-2 px-4 py-8 shadow sm:rounded-lg sm:px-10">
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={methods.handleSubmit(signUp)} className="space-y-6 bg-white">
|
<form onSubmit={methods.handleSubmit(signUp)} className="bg-default space-y-6">
|
||||||
{errors.apiError && <Alert severity="error" message={errors.apiError?.message} />}
|
{errors.apiError && <Alert severity="error" message={errors.apiError?.message} />}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<TextField
|
<TextField
|
||||||
|
@ -97,14 +97,14 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
|
||||||
<EmailField
|
<EmailField
|
||||||
{...register("email")}
|
{...register("email")}
|
||||||
disabled={prepopulateFormValues?.email}
|
disabled={prepopulateFormValues?.email}
|
||||||
className="disabled:bg-gray-200 disabled:hover:cursor-not-allowed"
|
className="disabled:bg-emphasis disabled:hover:cursor-not-allowed"
|
||||||
/>
|
/>
|
||||||
<PasswordField
|
<PasswordField
|
||||||
labelProps={{
|
labelProps={{
|
||||||
className: "block text-sm font-medium text-gray-700",
|
className: "block text-sm font-medium text-default",
|
||||||
}}
|
}}
|
||||||
{...register("password")}
|
{...register("password")}
|
||||||
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
|
className="border-default mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
|
||||||
/>
|
/>
|
||||||
<PasswordField
|
<PasswordField
|
||||||
label={t("confirm_password")}
|
label={t("confirm_password")}
|
||||||
|
|
|
@ -45,8 +45,8 @@ function TeamPage({ team }: TeamPageProps) {
|
||||||
<li
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50",
|
"dark:bg-darkgray-100 dark:border-darkgray-300 bg-default hover:bg-muted group relative border-b border-gray-200 first:rounded-t-md last:rounded-b-md last:border-b-0",
|
||||||
!isEmbed && "bg-white"
|
!isEmbed && "bg-default"
|
||||||
)}>
|
)}>
|
||||||
<div className="px-6 py-4 ">
|
<div className="px-6 py-4 ">
|
||||||
<Link
|
<Link
|
||||||
|
@ -55,7 +55,7 @@ function TeamPage({ team }: TeamPageProps) {
|
||||||
className="flex justify-between">
|
className="flex justify-between">
|
||||||
<div className="flex-shrink">
|
<div className="flex-shrink">
|
||||||
<div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
|
<div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
|
||||||
<h2 className="dark:text-darkgray-700 text-sm font-semibold text-gray-700">{type.title}</h2>
|
<h2 className="dark:text-darkgray-700 text-default text-sm font-semibold">{type.title}</h2>
|
||||||
</div>
|
</div>
|
||||||
<EventTypeDescription className="text-sm" eventType={type} />
|
<EventTypeDescription className="text-sm" eventType={type} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -92,16 +92,16 @@ function TeamPage({ team }: TeamPageProps) {
|
||||||
profile: { name: `${team.name}`, image: getPlaceholderAvatar(team.logo, team.name) },
|
profile: { name: `${team.name}`, image: getPlaceholderAvatar(team.logo, team.name) },
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<main className="dark:bg-darkgray-50 mx-auto max-w-3xl rounded-md bg-gray-100 px-4 pt-12 pb-12">
|
<main className="dark:bg-darkgray-50 bg-subtle mx-auto max-w-3xl rounded-md px-4 pt-12 pb-12">
|
||||||
<div className="max-w-96 mx-auto mb-8 text-center">
|
<div className="max-w-96 mx-auto mb-8 text-center">
|
||||||
<Avatar alt={teamName} imageSrc={getPlaceholderAvatar(team.logo, team.name)} size="lg" />
|
<Avatar alt={teamName} imageSrc={getPlaceholderAvatar(team.logo, team.name)} size="lg" />
|
||||||
<p className="font-cal dark:text-darkgray-900 mb-2 text-2xl tracking-wider text-gray-900">
|
<p className="font-cal dark:text-darkgray-900 text-emphasis mb-2 text-2xl tracking-wider">
|
||||||
{teamName}
|
{teamName}
|
||||||
</p>
|
</p>
|
||||||
{!isBioEmpty && (
|
{!isBioEmpty && (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
|
className="dark:text-darkgray-600 text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
|
||||||
dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
|
dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
@ -119,13 +119,13 @@ function TeamPage({ team }: TeamPageProps) {
|
||||||
<div className="dark:border-darkgray-300 w-full border-t border-gray-200" />
|
<div className="dark:border-darkgray-300 w-full border-t border-gray-200" />
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex justify-center">
|
<div className="relative flex justify-center">
|
||||||
<span className="dark:bg-darkgray-50 bg-gray-100 px-2 text-sm text-gray-500 dark:text-white">
|
<span className="dark:bg-darkgray-50 bg-subtle text-subtle dark:text-inverted px-2 text-sm">
|
||||||
{t("or")}
|
{t("or")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside className="mt-8 flex justify-center text-center dark:text-white">
|
<aside className="dark:text-inverted mt-8 flex justify-center text-center">
|
||||||
<Button
|
<Button
|
||||||
color="minimal"
|
color="minimal"
|
||||||
EndIcon={FiArrowRight}
|
EndIcon={FiArrowRight}
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user