Compare commits
12 Commits
main
...
chor/text-
| Author | SHA1 | Date | |
|---|---|---|---|
|
539489e41a | ||
|
|
aeb36652df | ||
|
909b343e6b | ||
|
|
5bc848ad18 | ||
|
|
f248686642 | ||
|
|
fb85a2d6f2 | ||
|
|
e1f8bcec68 | ||
|
c5077f098f | ||
|
|
91eded9834 | ||
|
|
c8b4cbb95f | ||
|
|
2de9f41978 | ||
|
|
9825f7c206 |
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 7aebdb8c966f472383cf55e8da31e9655102e775
|
||||
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 9aac72159ef357db240ef6d4d897f7322c843b6a
|
||||
|
|
@ -3,6 +3,7 @@ const path = require("path");
|
|||
module.exports = {
|
||||
stories: [
|
||||
"../intro.stories.mdx",
|
||||
"../text.stories.mdx",
|
||||
"../../../packages/ui/components/**/*.stories.mdx",
|
||||
"../../../packages/features/**/*.stories.mdx",
|
||||
"../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const Title = ({
|
|||
}) => {
|
||||
return (
|
||||
<div className={`story-title ${offset && "offset"}`}>
|
||||
<h1>
|
||||
<h1 className="story-heading-1">
|
||||
{title}
|
||||
{suffix && <span>{suffix}</span>}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,10 @@ const base = require("@calcom/config/tailwind-preset");
|
|||
module.exports = {
|
||||
...base,
|
||||
darkMode: ["class", '[data-mode="dark"]'],
|
||||
content: [...base.content, "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}", "./stories/**/*.{js,ts,tsx,jsx}"],
|
||||
content: [
|
||||
...base.content,
|
||||
"../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./stories/**/*.{js,ts,tsx,jsx}",
|
||||
"./text.stories.mdx",
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
VariantsTable,
|
||||
VariantColumn,
|
||||
RowTitles,
|
||||
CustomArgsTable,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
<Meta title="Typography" />
|
||||
|
||||
<Title title="Typography" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
||||
|
||||
## Definition
|
||||
|
||||
Typography style guide for Cal.com applications. Please view the STORY of this to see correct styles. We override storybook headings in doc mode
|
||||
to create our template. Thus the headings in the story are not the correct styles while viewing in DOCS.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Heading Stlyes">
|
||||
<div className="flex flex-col space-y-5 p-4">
|
||||
<div>
|
||||
<h1>Heading One text</h1>
|
||||
<p className="title-1">Paragraph has heading One applied by `title-1`</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Heading Two text</h2>
|
||||
<p className="title-2">Paragraph has heading Two applied by `title-2`</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Heading Three text</h3>
|
||||
<p className="title-3">Paragraph has heading Three applied by `title-3`</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dark flex flex-col space-y-5 bg-darkgray-50 p-4">
|
||||
<div>
|
||||
<h1>Heading One text</h1>
|
||||
<p className="title-1">Paragraph has heading One applied by `title-1`</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Heading Two text</h2>
|
||||
<p className="title-2">Paragraph has heading Two applied by `title-2`</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Heading Three text</h3>
|
||||
<p className="title-3">Paragraph has heading Three applied by `title-3`</p>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
<Story name="Text Stlyes">
|
||||
<div>
|
||||
<Example title="Paragraph">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada finibus nulla nec commodo. Cras vel sem ac tortor vestibulum placerat. Maecenas et lectus quis purus gravida mollis vel et dolor. In pellentesque sapien tellus, ut semper risus maximus eu. Suspendisse at vehicula lectus, eu efficitur metus. Praesent aliquet dictum sem ac lacinia. Nulla facilisi. Vestibulum ut suscipit tortor. Fusce interdum vitae dui ut maximus.</p>
|
||||
</Example>
|
||||
<Example title="Small">
|
||||
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada finibus nulla nec commodo. Cras vel sem ac tortor vestibulum placerat. Maecenas et lectus quis purus gravida mollis vel et dolor. In pellentesque sapien tellus, ut semper risus maximus eu. Suspendisse at vehicula lectus, eu efficitur metus. Praesent aliquet dictum sem ac lacinia. Nulla facilisi. Vestibulum ut suscipit tortor. Fusce interdum vitae dui ut maximus.</small>
|
||||
</Example>
|
||||
</div>
|
||||
<div className="dark bg-darkgray-50">
|
||||
<Example title="Paragraph">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada finibus nulla nec commodo. Cras vel sem ac tortor vestibulum placerat. Maecenas et lectus quis purus gravida mollis vel et dolor. In pellentesque sapien tellus, ut semper risus maximus eu. Suspendisse at vehicula lectus, eu efficitur metus. Praesent aliquet dictum sem ac lacinia. Nulla facilisi. Vestibulum ut suscipit tortor. Fusce interdum vitae dui ut maximus.</p>
|
||||
</Example>
|
||||
<Example title="Small">
|
||||
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada finibus nulla nec commodo. Cras vel sem ac tortor vestibulum placerat. Maecenas et lectus quis purus gravida mollis vel et dolor. In pellentesque sapien tellus, ut semper risus maximus eu. Suspendisse at vehicula lectus, eu efficitur metus. Praesent aliquet dictum sem ac lacinia. Nulla facilisi. Vestibulum ut suscipit tortor. Fusce interdum vitae dui ut maximus.</small>
|
||||
</Example>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
@ -68,7 +68,7 @@ export default function AppListCard(props: AppListCardProps) {
|
|||
{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 items-center gap-x-2">
|
||||
<h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
|
||||
<h3 className="truncate">{title}</h3>
|
||||
<div className="flex items-center gap-x-2">
|
||||
{isDefault && <Badge variant="green">{t("default")}</Badge>}
|
||||
{isTemplate && <Badge variant="red">Template</Badge>}
|
||||
|
|
|
|||
|
|
@ -631,7 +631,7 @@ const ChooseEmbedTypesDialogContent = () => {
|
|||
return (
|
||||
<DialogContent type="creation" size="lg">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="leading-6" id="modal-title">
|
||||
{t("how_you_want_add_cal_site", { appName: APP_NAME })}
|
||||
</h3>
|
||||
<div>
|
||||
|
|
@ -812,7 +812,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
|||
<DialogContent size="xl" className="p-0.5" type="creation">
|
||||
<div className="flex">
|
||||
<div className="flex w-1/3 flex-col bg-gray-50 p-8">
|
||||
<h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="mb-2 flex leading-6" id="modal-title">
|
||||
<button
|
||||
onClick={() => {
|
||||
removeQueryParams(router, ["embedType", "embedTabName"]);
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ export default function ImageUploader({
|
|||
<DialogContent>
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
<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="leading-6" id="modal-title">
|
||||
{t("upload_target", { target })}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,9 +107,9 @@ const Component = ({
|
|||
<header>
|
||||
<div className="mb-4 flex items-center">
|
||||
<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="ml-4">{name}</h1>
|
||||
</div>
|
||||
<h2 className="text-sm font-medium text-gray-600">
|
||||
<h2 className="">
|
||||
<Link
|
||||
href={`categories/${categories[0]}`}
|
||||
className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
|
||||
|
|
|
|||
|
|
@ -289,7 +289,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
|
|||
/>
|
||||
</div>
|
||||
<div className="md:w-6/12">
|
||||
<h1 className="text-sm font-semibold">{t("create_events_on")}</h1>
|
||||
<h1>{t("create_events_on")}</h1>
|
||||
<p className="text-sm font-normal">{t("set_calendar")}</p>
|
||||
</div>
|
||||
<div className="justify-end md:w-6/12">
|
||||
|
|
|
|||
|
|
@ -81,12 +81,8 @@ const BookingDescription: FC<Props> = (props) => {
|
|||
size="sm"
|
||||
truncateAfter={3}
|
||||
/>
|
||||
<h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||
{profile.name}
|
||||
</h2>
|
||||
<h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
|
||||
{eventType.title}
|
||||
</h1>
|
||||
<h2 className="mt-2 break-words ">{profile.name}</h2>
|
||||
<h1 className="break-words">{eventType.title}</h1>
|
||||
<div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
|
||||
{eventType?.description && (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default function CancelBooking(props: Props) {
|
|||
<FiX className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="leading-6" id="modal-title">
|
||||
{error}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
|
|||
</div>
|
||||
<div className="w-full">
|
||||
<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="leading-6" id="modal-title">
|
||||
{t("edit_location")}
|
||||
</h3>
|
||||
{!booking && (
|
||||
|
|
|
|||
|
|
@ -83,9 +83,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{!isLoading && notInstalledApps?.length ? (
|
||||
<h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">Available Apps</h2>
|
||||
) : null}
|
||||
{!isLoading && notInstalledApps?.length ? <h2 className="mt-0 mb-2 ">Available Apps</h2> : null}
|
||||
<div className="before:border-0">
|
||||
{notInstalledApps?.map((app) => (
|
||||
<EventTypeAppCard
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const ChangePasswordSection = () => {
|
|||
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
|
||||
<div className="py-6 lg:pb-5">
|
||||
<div className="my-3">
|
||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
|
||||
<h2 className="fleading-6">{t("change_password")}</h2>
|
||||
</div>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -22,9 +22,7 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
|
|||
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
||||
<div>
|
||||
<div className="flex flex-row items-center">
|
||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
|
||||
{t("user_impersonation_heading")}
|
||||
</h2>
|
||||
<h2 className="leading-6">{t("user_impersonation_heading")}</h2>
|
||||
<Badge className="ml-2 text-xs" variant={!disableImpersonation ? "success" : "gray"}>
|
||||
{!disableImpersonation ? t("enabled") : t("disabled")}
|
||||
</Badge>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
|
|||
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
||||
<div>
|
||||
<div className="flex flex-row items-center">
|
||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
|
||||
<h2>{t("2fa")}</h2>
|
||||
<Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
|
||||
{enabled ? t("enabled") : t("disabled")}
|
||||
</Badge>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
|
|||
<FiShield className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="leading-6" id="modal-title">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400">{description}</p>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const StepDone = (props: {
|
|||
<FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
|
||||
</div>
|
||||
<div className="max-w-[420px] text-center">
|
||||
<h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
|
||||
<h2 className="mt-6 mb-1 ">{t("all_done")}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ 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")}>
|
||||
{props.heading && <h2 className="font-cal text-center text-3xl text-gray-900">{props.heading}</h2>}
|
||||
{props.heading && <h2 className="text-center">{props.heading}</h2>}
|
||||
</div>
|
||||
{props.loading && (
|
||||
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
|
||||
|
|
|
|||
|
|
@ -65,9 +65,7 @@ export default function Custom404() {
|
|||
<p className="mt-4">{t("signup_requires_description", { companyName: COMPANY_NAME })}</p>
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
|
||||
{t("next_steps")}
|
||||
</h2>
|
||||
<h2 className=" uppercase tracking-wide ">{t("next_steps")}</h2>
|
||||
<ul role="list" className="mt-4">
|
||||
<li className="border-2 border-green-500 px-4 py-2">
|
||||
<a
|
||||
|
|
@ -79,7 +77,7 @@ export default function Custom404() {
|
|||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
<h3>
|
||||
<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="absolute inset-0" aria-hidden="true" />
|
||||
|
|
@ -107,7 +105,7 @@ export default function Custom404() {
|
|||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
<h3>
|
||||
<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" />
|
||||
{t("prisma_studio_tip")}
|
||||
|
|
@ -152,7 +150,7 @@ export default function Custom404() {
|
|||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
<h3>
|
||||
<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" />
|
||||
Slack
|
||||
|
|
@ -205,9 +203,7 @@ export default function Custom404() {
|
|||
)}
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
|
||||
{t("popular_pages")}
|
||||
</h2>
|
||||
<h2 className=" uppercase ">{t("popular_pages")}</h2>
|
||||
{!isSubpage && isCalcom && (
|
||||
<ul role="list" className="mt-4">
|
||||
<li className="border-2 border-green-500 px-4 py-2">
|
||||
|
|
@ -222,7 +218,7 @@ export default function Custom404() {
|
|||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
<h3>
|
||||
<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="absolute inset-0" aria-hidden="true" />
|
||||
|
|
@ -252,7 +248,7 @@ export default function Custom404() {
|
|||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
<h3>
|
||||
<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" />
|
||||
{link.title}
|
||||
|
|
@ -298,7 +294,7 @@ export default function Custom404() {
|
|||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-medium text-gray-900">
|
||||
<h3>
|
||||
<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" />
|
||||
Slack
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default function Error500() {
|
|||
</Head>
|
||||
<div className="rtl: m-auto rounded-md bg-white p-10 text-right ltr:text-left">
|
||||
<h1 className="font-cal text-6xl text-black">500</h1>
|
||||
<h2 className="mt-6 text-2xl font-medium text-black">It's not you, it's us.</h2>
|
||||
<h2 className="mt-6 ">It's not you, it's us.</h2>
|
||||
<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
|
||||
away for you.
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
|||
<div className="space-y-6" data-testid="event-types">
|
||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">{" " + t("unavailable")}</h2>
|
||||
<h2 className="mb-2">{" " + t("unavailable")}</h2>
|
||||
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -136,7 +136,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
|||
{isSingleUser && ( // When we deal with a single user, not dynamic group
|
||||
<div className="mb-8 text-center">
|
||||
<Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
|
||||
<h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
|
||||
<h1 className="mb-1">
|
||||
{nameOrUsername}
|
||||
{user.verified && (
|
||||
<BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
|
||||
|
|
@ -161,9 +161,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
|||
{user.away ? (
|
||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
||||
😴{" " + t("user_away")}
|
||||
</h2>
|
||||
<h2 className="mb-2">😴{" " + t("user_away")}</h2>
|
||||
<p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -191,9 +189,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
|
|||
className="block w-full p-5"
|
||||
data-testid="event-type-link">
|
||||
<div className="flex flex-wrap items-center">
|
||||
<h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
|
||||
{type.title}
|
||||
</h2>
|
||||
<h2 className="pr-2 ">{type.title}</h2>
|
||||
</div>
|
||||
<EventTypeDescription eventType={type} />
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,7 @@ export default function Type(props: AvailabilityPageProps) {
|
|||
<div className="space-y-6" data-testid="event-types">
|
||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
||||
😴{" " + t("user_away")}
|
||||
</h2>
|
||||
<h2 className="t mb-2">😴{" " + t("user_away")}</h2>
|
||||
<p className="mx-auto max-w-md">{t("user_away_description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,9 +38,7 @@ export default function Type(props: AvailabilityPageProps) {
|
|||
<div className="space-y-6" data-testid="event-types">
|
||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
||||
{" " + t("unavailable")}
|
||||
</h2>
|
||||
<h2 className="mb-2 ">{" " + t("unavailable")}</h2>
|
||||
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,7 @@ export default function Book(props: BookPageProps) {
|
|||
<div className="space-y-6" data-testid="event-types">
|
||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
||||
😴{" " + t("user_away")}
|
||||
</h2>
|
||||
<h2 className=" mb-2 ">😴{" " + t("user_away")}</h2>
|
||||
<p className="mx-auto max-w-md">{t("user_away_description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,9 +52,7 @@ export default function Book(props: BookPageProps) {
|
|||
<div className="space-y-6" data-testid="event-types">
|
||||
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
|
||||
<div className="p-8 text-center text-gray-400 dark:text-white">
|
||||
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
|
||||
{" " + t("unavailable")}
|
||||
</h2>
|
||||
<h2 className="mb-2">{" " + t("unavailable")}</h2>
|
||||
<p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
|
|||
data-testid={`app-store-category-${category.name}`}
|
||||
className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
|
||||
<div className="self-center">
|
||||
<h3 className="font-medium capitalize">{category.name}</h3>
|
||||
<h3 className="capitalize">{category.name}</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{t("number_apps", { count: category.count })}{" "}
|
||||
<FiArrowRight className="inline-block h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default function Error() {
|
|||
<FiX className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="leading-6 " id="modal-title">
|
||||
{error}
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
|
|
|
|||
|
|
@ -59,9 +59,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
|||
<>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||
{t("password_updated")}
|
||||
</h2>
|
||||
<h2 className="mt-6 text-center">{t("password_updated")}</h2>
|
||||
</div>
|
||||
<Button href="/auth/login" className="w-full justify-center">
|
||||
{t("login")}
|
||||
|
|
@ -76,8 +74,8 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
|
|||
<>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">{t("whoops")}</h2>
|
||||
<h2 className="text-center text-3xl font-extrabold text-gray-900">{t("request_is_expired")}</h2>
|
||||
<h2 className="mt-6 text-center ">{t("whoops")}</h2>
|
||||
<h3 className="text-center ">{t("request_is_expired")}</h3>
|
||||
</div>
|
||||
<p>{t("request_is_expired_instructions")}</p>
|
||||
<Link href="/auth/forgot-password" passHref legacyBehavior>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default function Logout(props: Props) {
|
|||
<FiCheck className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="leading-6" id="modal-title">
|
||||
{t("youve_been_logged_out")}
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ export default function Verify() {
|
|||
<MailOpenIcon className="h-12 w-12 flex-shrink-0 p-0.5 font-extralight text-white" />
|
||||
)}
|
||||
</div>
|
||||
<h3 className="font-cal my-6 text-3xl font-normal">
|
||||
<h3 className="my-6">
|
||||
{hasPaymentFailed
|
||||
? "Your payment failed"
|
||||
: sessionId
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
|
|||
});
|
||||
const { t } = useLocale();
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h3 className="font-medium leading-6 text-gray-900">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3>
|
||||
{t("date_overrides")}{" "}
|
||||
<Tooltip content={t("date_overrides_info")}>
|
||||
<span className="inline-block">
|
||||
|
|
@ -277,9 +277,9 @@ export default function Availability() {
|
|||
}
|
||||
/>
|
||||
</div>
|
||||
<hr className="my-6 mr-8" />
|
||||
<hr className="my-8" />
|
||||
<div className="hidden rounded-md md:block">
|
||||
<h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
|
||||
<h3>{t("something_doesnt_look_right")}</h3>
|
||||
<div className="mt-3 flex">
|
||||
<Button href="/availability/troubleshoot" color="secondary">
|
||||
{t("launch_troubleshooter")}
|
||||
|
|
|
|||
|
|
@ -424,7 +424,7 @@ export default function Success(props: SuccessProps) {
|
|||
</div>
|
||||
<div className="mt-6 mb-8 text-center last:mb-0">
|
||||
<h3
|
||||
className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white"
|
||||
className="leading-6 "
|
||||
data-testid={isCancelled ? "cancelled-headline" : ""}
|
||||
id="modal-headline">
|
||||
{needsConfirmation && !isCancelled
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
|
|||
<>
|
||||
<section className={classNames("flex flex-col sm:flex-row", className)}>
|
||||
<div>
|
||||
<h2 className="font-medium">{title}</h2>
|
||||
<h2>{title}</h2>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const PasswordView = () => {
|
|||
{user && user.identityProvider !== IdentityProvider.CAL ? (
|
||||
<div>
|
||||
<div className="mt-6">
|
||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
|
||||
<h2 className="text-lg leading-6">
|
||||
{t("account_managed_by_identity_provider", {
|
||||
provider: identityProviderNameMap[user.identityProvider],
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -79,9 +79,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
|
|||
aria-modal="true">
|
||||
<HeadSeo title={t("sign_up")} description={t("sign_up")} />
|
||||
<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">
|
||||
{t("create_your_account")}
|
||||
</h2>
|
||||
<h2 className="text-center">{t("create_your_account")}</h2>
|
||||
</div>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function TeamPage({ team }: TeamPageProps) {
|
|||
data-testid="event-type-link">
|
||||
<div className="flex-shrink">
|
||||
<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="">{type.title}</h2>
|
||||
</div>
|
||||
<EventTypeDescription className="text-sm" eventType={type} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,14 +32,12 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
|
|||
<FiX className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
<h3 className="leading-6" id="modal-headline">
|
||||
This meeting is in the past.
|
||||
</h3>
|
||||
</div>
|
||||
<div className="mt-4 border-t border-b py-4">
|
||||
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<h2 className="mb-2 text-center">{props.booking.title}</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
|
||||
|
|
|
|||
|
|
@ -30,14 +30,12 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
|
|||
<FiX className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
<h3 className="leading-6" id="modal-headline">
|
||||
This meeting has not started yet
|
||||
</h3>
|
||||
</div>
|
||||
<div className="mt-4 border-t border-b py-4">
|
||||
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<h2 className="mb-2 text-center ">{props.booking.title}</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function NoMeetingFound() {
|
|||
<FiX className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
<h3 className="leading-6" id="modal-headline">
|
||||
{t("no_meeting_found")}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 8f5d66f2cc4a7ed4f8c05d37dbf0417df5a57cd9
|
||||
|
|
@ -32,7 +32,7 @@ export default function AppleCalendarSetup() {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-gray-600">{t("connect_apple_server")}</h1>
|
||||
<h1>{t("connect_apple_server")}</h1>
|
||||
|
||||
<div className="mt-1 text-sm">
|
||||
{t("apple_server_generate_password", { appName: APP_NAME })}{" "}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default function CalDavCalendarSetup() {
|
|||
/>
|
||||
</div>
|
||||
<div className="flex w-10/12 flex-col">
|
||||
<h1 className="text-gray-600">{t("connect_caldav_server")}</h1>
|
||||
<h1>{t("connect_caldav_server")}</h1>
|
||||
<div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
|
||||
<div className="my-2 mt-3">
|
||||
<Form
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export default function CloseComSetup() {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-gray-600">{t("provide_api_key")}</h1>
|
||||
<h1>{t("provide_api_key")}</h1>
|
||||
|
||||
<div className="mt-1 text-sm">
|
||||
{t("generate_api_key_description")}{" "}
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
|
|||
<Dialog name="new-form" clearQueryParamsOnClose={["target", "action"]}>
|
||||
<DialogContent className="overflow-y-auto">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="leading-6" id="modal-title">
|
||||
{t("add_new_form")}
|
||||
</h3>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -109,9 +109,7 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe
|
|||
|
||||
<form onSubmit={handleOnSubmit}>
|
||||
<div className="mb-8">
|
||||
<h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-gray-900 dark:text-white">
|
||||
{form.name}
|
||||
</h1>
|
||||
<h1 className="mb-1 tracking-wide">{form.name}</h1>
|
||||
{form.description ? (
|
||||
<p className="min-h-10 text-sm text-gray-500 ltr:mr-4 rtl:ml-4 dark:text-white">
|
||||
{form.description}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default function Exchange2013CalendarSetup() {
|
|||
/>
|
||||
</div>
|
||||
<div className="flex w-10/12 flex-col">
|
||||
<h1 className="text-gray-600">{t("add_exchange2013")}</h1>
|
||||
<h1>{t("add_exchange2013")}</h1>
|
||||
<div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
|
||||
<div className="my-2 mt-3">
|
||||
<Form
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default function Exchange2016CalendarSetup() {
|
|||
/>
|
||||
</div>
|
||||
<div className="flex w-10/12 flex-col">
|
||||
<h1 className="text-gray-600">{t("add_exchange2016")}</h1>
|
||||
<h1>{t("add_exchange2016")}</h1>
|
||||
<div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
|
||||
<div className="my-2 mt-3">
|
||||
<Form
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default function ExchangeSetup() {
|
|||
/>
|
||||
</div>
|
||||
<div className="grow">
|
||||
<h1 className="text-gray-600">{t("exchange_add")}</h1>
|
||||
<h1>{t("exchange_add")}</h1>
|
||||
<div className="text-sm">{t("credentials_stored_encrypted")}</div>
|
||||
<div className="my-2 mt-5">
|
||||
<Form
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ export const SearchDialog = (props: ISearchDialog) => {
|
|||
return (
|
||||
<Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
|
||||
<DialogContent>
|
||||
<h3 className="leading-16 font-cal text-xl text-gray-900" id="modal-title">
|
||||
<h3 className="leading-16 " id="modal-title">
|
||||
{t("add_gif_to_confirmation")}
|
||||
</h3>
|
||||
<p className="mb-3 text-sm font-light text-gray-500">{t("find_gif_spice_confirmation")}</p>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
|
|||
<div className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600">
|
||||
<div className="hover:border-brand dark:bg-darkgray-100 flex min-h-[120px] grow flex-col border-b border-neutral-200 bg-white p-6 text-center first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-white dark:border-neutral-700 dark:hover:border-neutral-600 md:flex-row md:text-left">
|
||||
<span className="mb-4 grow md:mb-0">
|
||||
<h2 className="mb-2 grow font-semibold text-gray-900 dark:text-white">Token Gate</h2>
|
||||
<h2 className="mb-2 grow ">Token Gate</h2>
|
||||
{isLoading && (
|
||||
<>
|
||||
<SkeletonText className="mb-3 h-1 w-full" />
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function SendgridSetup() {
|
|||
<img src="/api/app-store/sendgrid/logo.png" alt="Sendgrid" className="h-12 w-12 max-w-2xl" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-gray-600">{t("provide_api_key")}</h1>
|
||||
<h1>{t("provide_api_key")}</h1>
|
||||
|
||||
<div className="mt-1 text-sm">
|
||||
{t("generate_api_key_description")}{" "}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
const plugin = require("tailwindcss/plugin");
|
||||
|
||||
module.exports = plugin(function ({ addBase, theme, addComponents, addUtilities }) {
|
||||
const h1Base = {
|
||||
fontSize: "28px",
|
||||
fontWeight: theme("fontWeight.semibold"),
|
||||
lineHeight: "28px",
|
||||
};
|
||||
|
||||
const h2Base = {
|
||||
fontSize: theme("fontSize.2xl"),
|
||||
fontWeight: theme("fontWeight.semibold"),
|
||||
lineHeight: "24px",
|
||||
};
|
||||
|
||||
const h3Base = {
|
||||
fontSize: theme("fontSize.xl"),
|
||||
fontWeight: theme("fontWeight.semibold"),
|
||||
lineHeight: "20px",
|
||||
};
|
||||
|
||||
const pBase = {
|
||||
fontSize: theme("fontSize.sm"),
|
||||
leading: theme("leading.none"),
|
||||
fontWeight: theme("fontWeight.normal"),
|
||||
};
|
||||
|
||||
const smallBase = {
|
||||
fontSize: theme("fontSize.xs"),
|
||||
leading: theme("leading.none"),
|
||||
fontWeight: theme("fontWeight.normal"),
|
||||
};
|
||||
|
||||
/** Base heading styles
|
||||
* - used for all headings
|
||||
* - h1,h2,h3 are commonly used
|
||||
* - h4 is used in very few occurances and is not included in the base styles
|
||||
*/
|
||||
|
||||
addBase({
|
||||
"h1, h2, h3, h4": {
|
||||
fontFamily: theme("fontFamily.cal"),
|
||||
color: theme("colors.black"),
|
||||
},
|
||||
|
||||
"p, small": {
|
||||
fontFamily: theme("fontFamily.sans"),
|
||||
color: theme("colors.black"),
|
||||
},
|
||||
|
||||
//** Base heading styles */
|
||||
h1: h1Base,
|
||||
h2: h2Base,
|
||||
h3: h3Base,
|
||||
|
||||
//** Base paragraph & Small styles */
|
||||
p: pBase,
|
||||
small: smallBase,
|
||||
|
||||
//** Dark mode styles */
|
||||
".dark": {
|
||||
"h1, h2, h3, h4, p, small": {
|
||||
color: theme("colors.darkgray.900"),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
//** Component heading styles - used if a heading needs to look like another varient*/
|
||||
addComponents({
|
||||
".title-1": { ...h1Base },
|
||||
".title-2": { ...h2Base },
|
||||
".title-3": { ...h3Base },
|
||||
".multiline-normal": {
|
||||
fontFamily: theme("fontFamily.sans"),
|
||||
color: theme("colors.black"),
|
||||
fontSize: theme("fontSize.sm"),
|
||||
fontWeight: theme("fontWeight.normal"),
|
||||
lineHeight: theme("leading.normal"),
|
||||
},
|
||||
".multiline-medium": {
|
||||
fontFamily: theme("fontFamily.sans"),
|
||||
color: theme("colors.black"),
|
||||
fontSize: theme("fontSize.sm"),
|
||||
fontWeight: theme("fontWeight.medium"),
|
||||
lineHeight: "20px",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
@ -208,6 +208,7 @@ module.exports = {
|
|||
addVariant("windows", ".windows &");
|
||||
addVariant("ios", ".ios &");
|
||||
}),
|
||||
require("./tailwind-bases.js"),
|
||||
],
|
||||
variants: {
|
||||
scrollbar: ["rounded", "dark"],
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ const MobileNotSupported = ({ children }: { children: React.ReactNode }) => {
|
|||
return (
|
||||
<>
|
||||
<div className="flex h-full flex-col items-center justify-center sm:hidden">
|
||||
<h1 className="text-2xl font-bold">Mobile not supported yet </h1>
|
||||
<h1>Mobile not supported yet </h1>
|
||||
<p className="text-gray-500">Please use a desktop browser to view this page</p>
|
||||
</div>
|
||||
<div className="hidden sm:block">{children}</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export function SchedulerHeading() {
|
|||
|
||||
return (
|
||||
<header className="flex flex-none flex-col justify-between py-4 sm:flex-row sm:items-center">
|
||||
<h1 className="text-xl font-semibold text-gray-900">
|
||||
<h1>
|
||||
{startDate.format("MMM DD")}-{endDate.format("DD")}
|
||||
<span className="text-gray-500">,{startDate.format("YYYY")}</span>
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -52,9 +52,7 @@ export default function ApiKeyDialogForm({
|
|||
{successfulNewApiKeyModal ? (
|
||||
<>
|
||||
<div className="mb-10">
|
||||
<h2 className="font-semi-bold font-cal mb-2 text-xl tracking-wide text-gray-900">
|
||||
{t("success_api_key_created")}
|
||||
</h2>
|
||||
<h2 className="mb-2 tracking-wide">{t("success_api_key_created")}</h2>
|
||||
<div className="text-sm text-gray-900">
|
||||
<span className="font-semibold">{t("success_api_key_created_bold_tagline")}</span>{" "}
|
||||
{t("you_will_only_view_it_once")}
|
||||
|
|
@ -108,9 +106,7 @@ export default function ApiKeyDialogForm({
|
|||
}}
|
||||
className="space-y-4">
|
||||
<div className="mt-1 mb-10">
|
||||
<h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
|
||||
{defaultValues ? t("edit_api_key") : t("create_api_key")}
|
||||
</h2>
|
||||
<h2 className="tracking-wide">{defaultValues ? t("edit_api_key") : t("create_api_key")}</h2>
|
||||
<p className="mt-1 mb-5 text-sm text-gray-500">{t("api_key_modal_subtitle")}</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default function MemberChangeRoleModal(props: {
|
|||
<>
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
<div className="text-center sm:text-left">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
<h3 className="leading-6" id="modal-title">
|
||||
{t("change_member_role")}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const BillingView = () => {
|
|||
<Meta title={t("team_billing")} description={t("team_billing_description")} />
|
||||
<div className="flex flex-col text-sm sm:flex-row">
|
||||
<div>
|
||||
<h2 className="font-medium">{t("billing_manage_details_title")}</h2>
|
||||
<h2>{t("billing_manage_details_title")}</h2>
|
||||
<p>{t("billing_manage_details_description")}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default function UpgradeRecordingBanner() {
|
|||
<FiUsers className="dark:bg-gray-90 inline-block h-5 w-5" />
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-sm font-semibold">{t("upgrade_to_access_recordings_title")}</h2>
|
||||
<h2>{t("upgrade_to_access_recordings_title")}</h2>
|
||||
<p className="text-sm font-normal">{t("upgrade_to_access_recordings_description")}</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default function EmptyScreen(props: {
|
|||
<FiZap className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
|
||||
</div>
|
||||
<div className="max-w-[420px] text-center">
|
||||
<h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
|
||||
<h2 className="tmt-6 ">{t("workflows")}</h2>
|
||||
<p className="line-clamp-2 mt-3 text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
|
||||
{t("no_workflows_description")}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -756,7 +756,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
|
|||
<Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
|
||||
<DialogContent type="creation" className="sm:max-w-[610px] md:h-[570px]">
|
||||
<div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
|
||||
<h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
|
||||
<h1 className="w-full">{t("how_additional_inputs_as_variables")}</h1>
|
||||
<div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
|
||||
<p className="test-sm font-medium">{t("format")}</p>
|
||||
<ul className="mt-2 ml-5 list-disc text-gray-900">
|
||||
|
|
|
|||
|
|
@ -32,10 +32,8 @@ function EmptyPage({ name }: { name: string }) {
|
|||
<SkeletonEventType />
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
|
||||
<h3 className="text-lg font-semibold text-gray-600 dark:text-white">{t("no_event_types")} </h3>
|
||||
<h4 className="text-sm leading-normal text-gray-600 dark:text-white">
|
||||
{t("no_event_types_description", { name })}
|
||||
</h4>
|
||||
<h3 className="">{t("no_event_types")} </h3>
|
||||
<h4 className="leading-normal">{t("no_event_types_description", { name })}</h4>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const DateOverrideList = ({
|
|||
{items.sort(sortByDate).map((item, index) => (
|
||||
<li key={item.id} className="flex justify-between border-b px-5 py-4 last:border-b-0">
|
||||
<div>
|
||||
<h3 className="text-sm text-gray-900">
|
||||
<h3>
|
||||
{new Intl.DateTimeFormat("en-GB", {
|
||||
weekday: "short",
|
||||
month: "long",
|
||||
|
|
|
|||
|
|
@ -437,9 +437,7 @@ function ShellHeader() {
|
|||
)}
|
||||
<div>
|
||||
{meta.title && isLocaleReady ? (
|
||||
<h1 className="font-cal mb-1 text-xl font-bold leading-5 tracking-wide text-black">
|
||||
{t(meta.title)}
|
||||
</h1>
|
||||
<h1 className="mb-1 tracking-wide ">{t(meta.title)}</h1>
|
||||
) : (
|
||||
<div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200" />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -805,7 +805,7 @@ export function ShellMain(props: LayoutProps) {
|
|||
{props.heading && (
|
||||
<h3
|
||||
className={classNames(
|
||||
"font-cal max-w-28 sm:max-w-72 md:max-w-80 hidden truncate text-xl font-semibold tracking-wide text-black md:block xl:max-w-full",
|
||||
"\"max-w-28 sm:max-w-72 md:max-w-80 mb-1 hidden truncate tracking-wide sm:block xl:max-w-ful",
|
||||
props.smallHeading ? "text-base" : "text-xl"
|
||||
)}>
|
||||
{!isLocaleReady ? <SkeletonText invisible /> : props.heading}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export function UpgradeTip({
|
|||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
<div className="mt-3 px-8 sm:px-14">
|
||||
<h1 className={classNames("font-cal text-3xl", dark && "text-white")}>{t(title)}</h1>
|
||||
<h1 className="">{t(title)}</h1>
|
||||
<p className={classNames("my-4 max-w-sm", dark ? "text-white" : "text-gray-600")}>
|
||||
{t(description)}
|
||||
</p>
|
||||
|
|
@ -72,7 +72,7 @@ export function UpgradeTip({
|
|||
{features.map((feature) => (
|
||||
<div key={feature.title} className="mb-4 min-h-[180px] w-full rounded-md bg-gray-50 p-8 md:mb-0">
|
||||
{feature.icon}
|
||||
<h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
|
||||
<h2 className="mt-4">{feature.title}</h2>
|
||||
<p className="text-gray-700">{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import getAppKeysFromSlug from "@calcom/app-store/_utils/getAppKeysFromSlug";
|
|||
import { DailyLocationType } from "@calcom/app-store/locations";
|
||||
import { stripeDataSchema } from "@calcom/app-store/stripepayment/lib/server";
|
||||
import getApps from "@calcom/app-store/utils";
|
||||
import { updateEvent } from "@calcom/core/CalendarManager";
|
||||
import { validateBookingLimitOrder } from "@calcom/lib";
|
||||
import { CAL_URL } from "@calcom/lib/constants";
|
||||
import getEventTypeById from "@calcom/lib/getEventTypeById";
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export function Alert(props: AlertProps) {
|
|||
)}
|
||||
</div>
|
||||
<div className="ml-3 flex-grow">
|
||||
<h3 className="text-sm font-medium">{props.title}</h3>
|
||||
<h3>{props.title}</h3>
|
||||
<div className="text-sm">{props.message}</div>
|
||||
</div>
|
||||
{/* @TODO: Shouldn't be absolute. This makes it harder to give margin etc. */}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
|
|||
};
|
||||
return (
|
||||
<div className="relative mb-4 flex flex-col justify-between lg:flex-row lg:items-center">
|
||||
<h2 className="hidden text-base font-semibold leading-none text-gray-900 sm:block">
|
||||
<h2 className="hidden sm:block">
|
||||
{searchText
|
||||
? t("search")
|
||||
: t("explore_apps", {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
|
|||
<img src={app.logo} alt={app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<h3 className="font-medium">
|
||||
<h3 className="text-sm leading-none">
|
||||
{searchTextIndex != undefined && searchText ? (
|
||||
<>
|
||||
{app.name.substring(0, searchTextIndex)}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export function AppStoreCategories({
|
|||
style={{ background: "radial-gradient(farthest-side at top right, #a2abbe 0%, #E3E3E3 100%)" }}>
|
||||
<div className="w-full self-center bg-[url('/noise.svg')] bg-cover bg-center bg-no-repeat px-6 py-4">
|
||||
{isLocaleReady ? (
|
||||
<h3 className="text-sm font-semibold capitalize">{category.name}</h3>
|
||||
<h3 className="text-sm capitalize">{category.name}</h3>
|
||||
) : (
|
||||
<SkeletonText invisible />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export const Slider = <T extends string | unknown>({
|
|||
{isLocaleReady ? (
|
||||
title && (
|
||||
<div>
|
||||
<h2 className="mt-0 text-base font-semibold leading-none text-gray-900">{title}</h2>
|
||||
<h2 className="mt-0 mb-2">{title}</h2>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export function DialogHeader(props: DialogHeaderProps) {
|
|||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<h3 className="leading-20 text-semibold font-cal pb-1 text-xl text-gray-900" id="modal-title">
|
||||
<h3 className="leading-20 pb-1" id="modal-title">
|
||||
{props.title}
|
||||
</h3>
|
||||
{props.subtitle && <div className="text-sm text-gray-500">{props.subtitle}</div>}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export function EmptyScreen({
|
|||
<Icon className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
|
||||
</div>
|
||||
<div className="flex max-w-[420px] flex-col items-center">
|
||||
<h2 className="text-semibold font-cal mt-6 text-center text-xl dark:text-gray-300">{headline}</h2>
|
||||
<h2 className="mt-6 text-center">{headline}</h2>
|
||||
<div className="mt-3 mb-8 text-center text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
|
||||
{description}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ export default function ImageUploader({
|
|||
<DialogContent>
|
||||
<div className="mb-4 sm:flex sm:items-start">
|
||||
<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="leading-6" id="modal-title">
|
||||
{t("upload_target", { target })}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export function ShellSubHeading(props: {
|
|||
return (
|
||||
<header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
|
||||
<div>
|
||||
<h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
|
||||
<h2 className="flex content-center items-center space-x-2 leading-6 rtl:space-x-reverse">
|
||||
{props.title}
|
||||
</h2>
|
||||
{props.subtitle && <p className="text-sm text-gray-500 ltr:mr-4">{props.subtitle}</p>}
|
||||
|
|
|
|||
|
|
@ -86,8 +86,8 @@ export function ListLinkItem(props: ListLinkItemProps) {
|
|||
"flex-grow truncate text-sm",
|
||||
disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
|
||||
)}>
|
||||
<h1 className="text-sm font-semibold leading-none">{heading}</h1>
|
||||
<h2 className="min-h-4 mt-2 text-sm font-normal leading-none">
|
||||
<h1 className="leading-none">{heading}</h1>
|
||||
<h2 className="min-h-4 mt-2 leading-none">
|
||||
{subHeading.substring(0, 100)}
|
||||
{subHeading.length > 100 && "..."}
|
||||
</h2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user