maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Runs prettier

This commit is contained in:
zomars 2022-02-09 15:32:31 -07:00 committed by Omar López
parent 2c2a97de73
commit 038e8a4b7d
79 changed files with 132 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -1,2 +1,2 @@
node_modules
prisma/zod
apps/web/prisma/zod

2
apps/web/components/AddToHomescreen.tsx
View File

@ -18,7 +18,7 @@ export default function AddToHomescreen() {
<div className="rounded-lg p-2 shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
<div className="flex flex-wrap items-center justify-between">
<div className="flex w-0 flex-1 items-center">
<span className="flex rounded-lg bg-brand bg-opacity-30 p-2 text-brandcontrast">
<span className="bg-brand text-brandcontrast flex rounded-lg bg-opacity-30 p-2">
<svg
className="h-7 w-7 fill-current text-indigo-500"
xmlns="http://www.w3.org/2000/svg"

2
apps/web/components/DestinationCalendarSelector.tsx
View File

@ -67,7 +67,7 @@ const DestinationCalendarSelector = ({
placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
options={options}
isSearchable={false}
className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 sm:text-sm"
onChange={(option) => {
setSelectedOption(option);
if (!option) {

2
apps/web/components/EmptyScreen.tsx
View File

@ -13,7 +13,7 @@ export default function EmptyScreen({
}) {
return (
<>
<div className="my-6 flex min-h-80 flex-col items-center justify-center rounded-sm border border-dashed">
<div className="min-h-80 my-6 flex flex-col items-center justify-center rounded-sm border border-dashed">
<div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-white">
<Icon className="inline-block h-10 w-10 bg-white" />
</div>

2
apps/web/components/Shell.tsx
View File

@ -302,7 +302,7 @@ export default function Shell(props: {
<div className="block min-h-[80px] justify-between px-4 sm:flex sm:px-6 md:px-8">
{props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
<div className="mb-8 w-full">
<h1 className="mb-1 font-cal text-xl font-bold tracking-wide text-gray-900">
<h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-gray-900">
{props.heading}
</h1>
<p className="text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{props.subtitle}</p>

2
apps/web/components/booking/AvailableTimes.tsx
View File

@ -95,7 +95,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
<Link href={bookingUrl}>
<a
className={classNames(
"mb-2 block rounded-sm border bg-white py-4 font-medium text-primary-500 hover:bg-brand hover:text-white hover:text-brandcontrast dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-brand dark:hover:text-brandcontrast",
"text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-brand dark:hover:text-brandcontrast mb-2 block rounded-sm border bg-white py-4 font-medium hover:text-white dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black",
brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
)}
data-testid="time">

2
apps/web/components/booking/BookingListItem.tsx
View File

@ -151,7 +151,7 @@ function BookingListItem(booking: BookingItem) {
)}
</div>
{booking.description && (
<div className="max-w-52 truncate text-sm text-gray-500 md:max-w-96" title={booking.description}>
<div className="max-w-52 md:max-w-96 truncate text-sm text-gray-500" title={booking.description}>
&quot;{booking.description}&quot;
</div>
)}

2
apps/web/components/booking/DatePicker.tsx
View File

@ -210,7 +210,7 @@ function DatePicker({
disabled={day.disabled}
className={classNames(
"absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center",
"hover:border hover:border-brand dark:hover:border-white",
"hover:border-brand hover:border dark:hover:border-white",
day.disabled ? "cursor-default font-light text-gray-400 hover:border-0" : "font-medium",
date && date.isSame(browsingDate.date(day.date), "day")
? "bg-brand text-brandcontrast"

4
apps/web/components/booking/TimeOptions.tsx
View File

@ -35,7 +35,7 @@ const TimeOptions: FC<Props> = (props) => {
};
return selectedTimeZone !== "" ? (
<div className="absolute z-10 w-full max-w-80 rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
<div className="max-w-80 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
<div className="mb-4 flex">
<div className="w-1/2 font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
<div className="w-1/2">
@ -69,7 +69,7 @@ const TimeOptions: FC<Props> = (props) => {
id="timeZone"
value={selectedTimeZone}
onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
className="mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
/>
</div>
) : null;

4
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -184,7 +184,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
truncateAfter={3}
/>
<h2 className="mt-3 font-medium text-gray-500 dark:text-gray-300">{profile.name}</h2>
<h1 className="mb-4 font-cal text-3xl font-semibold text-gray-800 dark:text-white">
<h1 className="font-cal mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
{eventType.title}
</h1>
<p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
@ -250,7 +250,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
function TimezoneDropdown() {
return (
<Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
<Collapsible.Trigger className="mb-1 -ml-2 min-w-32 px-2 py-1 text-left text-gray-500">
<Collapsible.Trigger className="min-w-32 mb-1 -ml-2 px-2 py-1 text-left text-gray-500">
<GlobeIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
{timeZone()}
{isTimeOptionsOpen ? (

14
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -308,7 +308,7 @@ const BookingPage = (props: BookingPageProps) => {
}))
)}
/>
<h2 className="mt-2 font-cal font-medium text-gray-500 dark:text-gray-300">
<h2 className="font-cal mt-2 font-medium text-gray-500 dark:text-gray-300">
{props.profile.name}
</h2>
<h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
@ -367,7 +367,7 @@ const BookingPage = (props: BookingPageProps) => {
name="name"
id="name"
required
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
placeholder="John Doe"
/>
</div>
@ -382,7 +382,7 @@ const BookingPage = (props: BookingPageProps) => {
<EmailInput
{...bookingForm.register("email")}
required
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
placeholder="you@example.com"
/>
</div>
@ -440,7 +440,7 @@ const BookingPage = (props: BookingPageProps) => {
})}
id={"custom_" + input.id}
rows={3}
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
placeholder={input.placeholder}
/>
)}
@ -451,7 +451,7 @@ const BookingPage = (props: BookingPageProps) => {
required: input.required,
})}
id={"custom_" + input.id}
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
placeholder={input.placeholder}
/>
)}
@ -462,7 +462,7 @@ const BookingPage = (props: BookingPageProps) => {
required: input.required,
})}
id={"custom_" + input.id}
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
placeholder=""
/>
)}
@ -544,7 +544,7 @@ const BookingPage = (props: BookingPageProps) => {
{...bookingForm.register("notes")}
id="notes"
rows={3}
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
placeholder={t("share_additional_notes")}
/>
</div>

2
apps/web/components/form/fields.tsx
View File

@ -136,7 +136,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
ref={ref}
{...props}
className={classNames(
"font-mono block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
"block w-full rounded-sm border-gray-300 font-mono shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
props.className
)}
/>

2
apps/web/components/integrations/CalendarListContainer.tsx
View File

@ -217,7 +217,7 @@ export function CalendarListContainer(props: { heading?: false }) {
}
subtitle={t("configure_how_your_event_types_interact")}
actions={
<div className="block max-w-full sm:min-w-80">
<div className="sm:min-w-80 block max-w-full">
<DestinationCalendarSelector
onChange={mutation.mutate}
isLoading={mutation.isLoading}

8
apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
View File

@ -55,7 +55,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
defaultValue={selectedInputOption}
options={inputOptions}
isSearchable={false}
className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 sm:text-sm"
onChange={(option) => option && field.onChange(option.value)}
value={selectedInputOption}
onBlur={field.onBlur}
@ -73,7 +73,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
type="text"
id="label"
required
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
defaultValue={selectedCustomInput?.label}
{...register("label", { required: true })}
/>
@ -89,7 +89,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
<input
type="text"
id="placeholder"
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
defaultValue={selectedCustomInput?.placeholder}
{...register("placeholder")}
/>
@ -100,7 +100,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
<input
id="required"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 ltr:mr-2 rtl:ml-2"
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
defaultChecked={selectedCustomInput?.required ?? true}
{...register("required")}
/>

4
apps/web/components/security/ChangePasswordSection.tsx
View File

@ -74,7 +74,7 @@ const ChangePasswordSection = () => {
name="current_password"
id="current_password"
required
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black sm:text-sm"
placeholder={t("your_old_password")}
/>
</div>
@ -91,7 +91,7 @@ const ChangePasswordSection = () => {
value={newPassword}
required
onInput={(e) => setNewPassword(e.currentTarget.value)}
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black sm:text-sm"
placeholder={t("super_secure_new_password")}
/>
</div>

2
apps/web/components/security/EnableTwoFactorModal.tsx
View File

@ -152,7 +152,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
<div className="flex justify-center">
<img src={dataUri} />
</div>
<p className="font-mono text-center text-xs">{secret}</p>
<p className="text-center font-mono text-xs">{secret}</p>
</>
</WithStep>
<WithStep step={SetupStep.EnterTotpCode} current={step}>

2
apps/web/components/security/TwoFactorModalHeader.tsx
View File

@ -4,7 +4,7 @@ import React from "react";
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return (
<div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-brand bg-opacity-5 text-brandcontrast sm:mx-0 sm:h-10 sm:w-10">
<div className="bg-brand text-brandcontrast 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">
<ShieldCheckIcon className="h-6 w-6 text-black" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">

2
apps/web/components/team/MemberChangeRoleModal.tsx
View File

@ -58,7 +58,7 @@ export default function MemberChangeRoleModal(props: {
value={role}
onChange={(e) => setRole(e.target.value as MembershipRole)}
id="role"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm">
className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm">
<option value="MEMBER">{t("member")}</option>
<option value="ADMIN">{t("admin")}</option>
{/*<option value="OWNER">{t("owner")}</option> - needs dialog to confirm change of ownership */}

8
apps/web/components/team/MemberInvitationModal.tsx
View File

@ -64,8 +64,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
<div className="inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-brand bg-opacity-5 text-brandcontrast sm:mx-0 sm:h-10 sm:w-10">
<UserIcon className="h-6 w-6 text-brandcontrast" />
<div className="bg-brand text-brandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<UserIcon className="text-brandcontrast h-6 w-6" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@ -91,7 +91,7 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
</label>
<select
id="role"
className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm">
className="focus:border-brand mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black sm:text-sm">
<option value="MEMBER">{t("member")}</option>
<option value="ADMIN">{t("admin")}</option>
</select>
@ -103,7 +103,7 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
name="sendInviteEmail"
defaultChecked
id="sendInviteEmail"
className="rounded-sm border-gray-300 text-black shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand rounded-sm border-gray-300 text-black shadow-sm focus:ring-black sm:text-sm"
/>
</div>
<div className="text-sm ltr:ml-2 rtl:mr-2">

2
apps/web/components/team/TeamListItem.tsx
View File

@ -60,7 +60,7 @@ export default function TeamListItem(props: Props) {
size={9}
imageSrc={getPlaceholderAvatar(team?.logo, team?.name as string)}
alt="Team Logo"
className="h-9 min-h-9 w-9 min-w-9 rounded-full"
className="min-h-9 min-w-9 h-9 w-9 rounded-full"
/>
<div className="ml-3 inline-block">
<span className="text-sm font-bold text-neutral-700">{team.name}</span>

2
apps/web/components/ui/AuthContainer.tsx
View File

@ -21,7 +21,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
<img className="mx-auto h-6" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
)}
{props.heading && (
<h2 className="mt-6 text-center font-cal text-3xl font-bold text-neutral-900">{props.heading}</h2>
<h2 className="font-cal mt-6 text-center text-3xl font-bold text-neutral-900">{props.heading}</h2>
)}
</div>
{props.loading && (

2
apps/web/components/ui/Avatar.tsx
View File

@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
return title ? (
<Tooltip.Tooltip delayDuration={300}>
<Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
<Tooltip.Content className="rounded-sm bg-brand p-2 text-sm text-brandcontrast shadow-sm">
<Tooltip.Content className="bg-brand text-brandcontrast rounded-sm p-2 text-sm shadow-sm">
<Tooltip.Arrow />
{title}
</Tooltip.Content>

2
apps/web/components/ui/ModalContainer.tsx
View File

@ -23,7 +23,7 @@ export default function ModalContainer(props: Props) {
</span>
<div
className={classNames(
"inline-block min-w-96 transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle",
"min-w-96 inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle",
{
"sm:w-full sm:max-w-lg ": !props.wide,
"sm:w-4xl sm:max-w-4xl": props.wide,

2
apps/web/components/ui/Scheduler.tsx
View File

@ -108,7 +108,7 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
id="timeZone"
value={timeZone}
onChange={(tz: ITimezoneOption) => setTimeZone(tz.value)}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
/>
</div>
</div>

2
apps/web/components/ui/SettingInputContainer.tsx
View File

@ -12,7 +12,7 @@ export default function SettingInputContainer({
return (
<div className="space-y-3">
<div className="block sm:flex">
<div className="mb-4 min-w-48 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-neutral-700">
<Icon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
{label}

4
apps/web/components/ui/WeekdaySelect.tsx
View File

@ -33,8 +33,8 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
toggleDay(idx);
}}
className={`
h-10 w-10
rounded bg-brand px-3 py-1 text-brandcontrast focus:outline-none
bg-brand text-brandcontrast
h-10 w-10 rounded px-3 py-1 focus:outline-none
${activeDays[idx + 1] ? "rounded-r-none" : ""}
${activeDays[idx - 1] ? "rounded-l-none" : ""}
${idx === 0 ? "rounded-l" : ""}

4
apps/web/components/ui/form/CheckboxField.tsx
View File

@ -8,7 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
return (
<div className="block items-center sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
{label}
</label>
@ -20,7 +20,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description,
{...rest}
ref={ref}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
/>
</div>
<div className="text-sm ltr:ml-3 rtl:mr-3">

2
apps/web/components/ui/form/DatePicker.tsx
View File

@ -16,7 +16,7 @@ export const DatePicker = ({ date, onDatesChange, className }: Props) => {
return (
<PrimitiveDatePicker
className={classNames(
"rounded-sm border border-gray-300 p-1 pl-2 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
"focus:border-primary-500 focus:ring-primary-500 rounded-sm border border-gray-300 p-1 pl-2 shadow-sm sm:text-sm",
className
)}
clearIcon={null}

2
apps/web/components/ui/form/DateRangePicker.tsx
View File

@ -14,7 +14,7 @@ type Props = {
export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
return (
<PrimitiveDateRangePicker
className="rounded-sm border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 rounded-sm border-gray-300 sm:text-sm"
clearIcon={null}
calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
rangeDivider={<ArrowRightIcon className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}

4
apps/web/components/ui/form/MinutesField.tsx
View File

@ -9,7 +9,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
return (
<div className="block sm:flex">
{!!label && (
<div className="mb-4 min-w-48 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-neutral-700">
{label}
</label>
@ -22,7 +22,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
ref={ref}
type="number"
className={classNames(
"block w-full rounded-sm border-gray-300 pl-2 pr-12 focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
"focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm",
rest.className
)}
/>

2
apps/web/components/ui/form/PhoneInput.tsx
View File

@ -9,7 +9,7 @@ export const PhoneInput = (props: Optional<PhoneInputProps, "onChange">) => (
<BasePhoneInput
{...props}
className={classNames(
"border-1 block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:border-brand focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
"border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
props.className
)}
onChange={() => {

2
apps/web/components/ui/form/Select.tsx
View File

@ -24,7 +24,7 @@ function Select<
...components,
IndicatorSeparator: () => null,
}}
className={classNames("text-sm shadow-sm focus:border-primary-500", className)}
className={classNames("focus:border-primary-500 text-sm shadow-sm", className)}
{...props}
/>
);

2
apps/web/components/ui/form/radio-area/Select.tsx
View File

@ -34,7 +34,7 @@ export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
type="button"
disabled={disabled}
className={classNames(
"border-1 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left shadow-sm focus:ring-primary-500 sm:text-sm",
"border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left shadow-sm sm:text-sm",
disabled && "cursor-default bg-gray-200 focus:ring-0 "
)}>
{getLabel(props.value) ?? placeholder}

8
apps/web/components/ui/modal/SetTimesModal.tsx
View File

@ -76,7 +76,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
maxLength={2}
name="hours"
id="startHours"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
placeholder="9"
defaultValue={startHours}
/>
@ -95,7 +95,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
maxLength={2}
name="minutes"
id="startMinutes"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
placeholder="30"
defaultValue={startMinutes}
/>
@ -115,7 +115,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
maxLength={2}
name="hours"
id="endHours"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
placeholder="17"
defaultValue={endHours}
/>
@ -134,7 +134,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
step="15"
name="minutes"
id="endMinutes"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
placeholder="30"
defaultValue={endMinutes}
/>

2
apps/web/ee/components/LicenseBanner.tsx
View File

@ -83,7 +83,7 @@ export default function LicenseBanner() {
</span>
variable to &apos;agreeapos;.
</Trans>
<h2 className="mt-8 mb-2 font-cal text-black">{t("terms_summary")}:</h2>
<h2 className="font-cal mt-8 mb-2 text-black">{t("terms_summary")}:</h2>
<ul className="ml-5 list-disc">
<li>{t("codebase_has_to_stay_opensource")}</li>
<li>{t("cannot_repackage_codebase")}</li>

4
apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx
View File

@ -33,7 +33,7 @@ export default function TeamAvailabilityModal(props: Props) {
return (
<div className="flex max-h-[500px] min-h-[500px] flex-row space-x-8 rtl:space-x-reverse">
<div className="w-64 min-w-64 space-y-5 p-5 pr-0">
<div className="min-w-64 w-64 space-y-5 p-5 pr-0">
<div className="flex">
<Avatar
imageSrc={getPlaceholderAvatar(props.member?.avatar, props.member?.name as string)}
@ -74,7 +74,7 @@ export default function TeamAvailabilityModal(props: Props) {
]}
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
value={{ value: frequency, label: `${frequency} minutes` }}
onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
/>

4
apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
View File

@ -47,7 +47,7 @@ export default function TeamAvailabilityScreen(props: Props) {
<Avatar
imageSrc={getPlaceholderAvatar(member?.avatar, member?.name as string)}
alt={member?.name || ""}
className="mt-1 h-10 min-h-10 w-10 min-w-10 rounded-full"
className="min-h-10 min-w-10 mt-1 h-10 w-10 rounded-full"
/>
<div className="ml-3 inline-block overflow-hidden pt-1">
<span className="truncate text-lg font-bold text-neutral-700">{member?.name}</span>
@ -93,7 +93,7 @@ export default function TeamAvailabilityScreen(props: Props) {
]}
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
value={{ value: frequency, label: `${frequency} minutes` }}
onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
/>

2
apps/web/ee/components/team/availability/TeamAvailabilityTimes.tsx
View File

@ -59,7 +59,7 @@ export default function TeamAvailabilityTimes(props: Props) {
{times.map((time) => (
<div key={time.format()} className="flex flex-row items-center">
<a
className="mb-2 mr-3 block min-w-48 flex-grow rounded-sm border border-brand bg-white py-2 text-center font-medium text-primary-500 hover:bg-brand hover:text-brandcontrast dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-black dark:hover:text-white"
className="min-w-48 border-brand text-primary-500 hover:bg-brand hover:text-brandcontrast mb-2 mr-3 block flex-grow rounded-sm border bg-white py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-black dark:hover:text-white"
data-testid="time">
{time.format("HH:mm")}
</a>

2
apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx
View File

@ -130,7 +130,7 @@ const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, re
name="url"
id="url"
placeholder="https://example.com/calendar"
className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:border-brand focus:ring-black sm:text-sm"
className="focus:border-brand block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:ring-black sm:text-sm"
/>
</div>
</div>

2
apps/web/package.json
View File

@ -152,7 +152,7 @@
"module-alias": "^2.2.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.4",
"prettier": "^2.3.2",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.6",
"prisma": "3.0.2",
"tailwindcss": "^3.0.0",

4
apps/web/pages/404.tsx
View File

@ -53,7 +53,7 @@ export default function Custom404() {
<p className="text-sm font-semibold uppercase tracking-wide text-black">
{t("missing_license")}
</p>
<h1 className="mt-2 font-cal text-3xl font-extrabold text-gray-900">
<h1 className="font-cal mt-2 text-3xl font-extrabold text-gray-900">
{t("signup_requires")}
</h1>
<p className="mt-4">{t("signup_requires_description")}</p>
@ -170,7 +170,7 @@ export default function Custom404() {
<>
<div className="text-center">
<p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
<h1 className="mt-2 font-cal text-4xl font-extrabold text-gray-900 sm:text-5xl">
<h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
{t("page_doesnt_exist")}
</h1>
{isSubpage ? (

4
apps/web/pages/[user].tsx
View File

@ -55,7 +55,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
className="mx-auto mb-4 h-24 w-24 rounded-full"
alt={nameOrUsername}
/>
<h1 className="mb-1 font-cal text-3xl font-bold text-neutral-900 dark:text-white">
<h1 className="font-cal mb-1 text-3xl font-bold text-neutral-900 dark:text-white">
{nameOrUsername}
{user.verified && (
<BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
@ -69,7 +69,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
<div
key={type.id}
style={{ display: "flex" }}
className="group relative rounded-sm border border-neutral-200 bg-white hover:border-brand hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
className="group hover:border-brand relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
<Link
href={{

8
apps/web/pages/auth/forgot-password/[id].tsx
View File

@ -58,7 +58,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
<>
<div className="space-y-6">
<div>
<h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
{t("success")}
</h2>
</div>
@ -80,7 +80,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
<>
<div className="space-y-6">
<div>
<h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">{t("whoops")}</h2>
<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>
</div>
<p>{t("request_is_expired_instructions")}</p>
@ -110,7 +110,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
{!isRequestExpired && !success && (
<>
<div className="space-y-6">
<h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
{t("reset_password")}
</h2>
<p>{t("enter_new_password")}</p>
@ -151,7 +151,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
type="password"
autoComplete="password"
required
className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-brand focus:outline-none focus:ring-black sm:text-sm"
className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-black sm:text-sm"
/>
</div>
</div>

2
apps/web/pages/auth/login.tsx
View File

@ -119,7 +119,7 @@ export default function Login({
<div className="relative">
<div className="absolute right-0 -top-[2px]">
<Link href="/auth/forgot-password">
<a tabIndex={-1} className="text-sm font-medium text-primary-600">
<a tabIndex={-1} className="text-primary-600 text-sm font-medium">
{t("forgot")}
</a>
</Link>

2
apps/web/pages/auth/signup.tsx
View File

@ -70,7 +70,7 @@ export default function Signup({ email }: Props) {
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="text-center font-cal text-3xl font-extrabold text-gray-900">
<h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">
{t("create_your_account")}
</h2>
</div>

2
apps/web/pages/availability/index.tsx
View File

@ -107,7 +107,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
<Button>{t("save")}</Button>
</div>
</Form>
<div className="col-span-3 min-w-40 ltr:ml-2 rtl:mr-2 lg:col-span-1">
<div className="min-w-40 col-span-3 ltr:ml-2 rtl:mr-2 lg:col-span-1">
<div className="rounded-sm border border-gray-200 px-4 py-5 sm:p-6 ">
<h3 className="text-base font-medium leading-6 text-gray-900">
{t("something_doesnt_look_right")}

8
apps/web/pages/availability/troubleshoot.tsx
View File

@ -64,8 +64,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
/>
<small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small>
<div className="mt-4 space-y-4">
<div className="overflow-hidden rounded-sm bg-brand">
<div className="px-4 py-2 text-brandcontrast sm:px-6">
<div className="bg-brand overflow-hidden rounded-sm">
<div className="text-brandcontrast px-4 py-2 sm:px-6">
{t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
</div>
</div>
@ -94,8 +94,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
</div>
)}
<div className="overflow-hidden rounded-sm bg-brand">
<div className="px-4 py-2 text-brandcontrast sm:px-6">
<div className="bg-brand overflow-hidden rounded-sm">
<div className="text-brandcontrast px-4 py-2 sm:px-6">
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
</div>
</div>

2
apps/web/pages/call/meeting-ended/[uid].tsx
View File

@ -52,7 +52,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
</h3>
</div>
<div className="mt-4 border-t border-b py-4">
<h2 className="mb-2 text-center font-cal text-lg font-medium text-gray-600">
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
{props.booking.title}
</h2>
<p className="text-center text-gray-500">

2
apps/web/pages/call/meeting-not-started/[uid].tsx
View File

@ -51,7 +51,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
</h3>
</div>
<div className="mt-4 border-t border-b py-4">
<h2 className="mb-2 text-center font-cal text-lg font-medium text-gray-600">
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
{props.booking.title}
</h2>
<p className="text-center text-gray-500">

2
apps/web/pages/cancel/[uid].tsx
View File

@ -78,7 +78,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
</p>
</div>
<div className="mt-4 border-t border-b py-4">
<h2 className="mb-2 font-cal text-lg font-medium text-gray-600">
<h2 className="font-cal mb-2 text-lg font-medium text-gray-600">
{props.booking?.title}
</h2>
<p className="text-gray-500">

58
apps/web/pages/event-types/[type].tsx
View File

@ -248,7 +248,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{...locationFormMethods.register("locationAddress")}
id="address"
required
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
defaultValue={
formMethods
.getValues("locations")
@ -378,7 +378,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
options={locationOptions}
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
onChange={(e) => {
if (e?.value) {
locationFormMethods.setValue("locationType", e.value);
@ -681,7 +681,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
className="space-y-6">
<div className="space-y-3">
<div className="block items-center sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="slug" className="flex text-sm font-medium text-neutral-700">
<LinkIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
{t("url")}
@ -696,7 +696,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<input
type="text"
required
className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm"
defaultValue={eventType.slug}
{...formMethods.register("slug")}
/>
@ -747,7 +747,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<hr className="border-neutral-200" />
<div className="space-y-3">
<div className="block sm:flex">
<div className="mb-4 mt-2.5 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 mt-2.5 sm:mb-0">
<label htmlFor="description" className="mt-0 flex text-sm font-medium text-neutral-700">
<DocumentIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
{t("description")}
@ -756,7 +756,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<div className="w-full">
<textarea
id="description"
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
placeholder={t("quick_video_meeting")}
{...formMethods.register("description")}
defaultValue={asStringOrUndefined(eventType.description)}></textarea>
@ -767,7 +767,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{team && (
<div className="space-y-3">
<div className="block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label
htmlFor="schedulingType"
className="mt-2 flex text-sm font-medium text-neutral-700">
@ -793,7 +793,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
<div className="block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
<UserAddIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
{t("attendees")}
@ -845,7 +845,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
*/}
{!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
<div className="block items-center sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label
htmlFor="createEventsOn"
className="flex text-sm font-medium text-neutral-700">
@ -871,7 +871,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
)}
<div className="block items-center sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
{t("event_name")} <InfoBadge content={t("event_name_tooltip")} />
</label>
@ -880,7 +880,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<div className="relative mt-1 rounded-sm shadow-sm">
<input
type="text"
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
placeholder={t("meeting_with_user")}
defaultValue={eventType.eventName || ""}
{...formMethods.register("eventName")}
@ -890,7 +890,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
{eventType.isWeb3Active && (
<div className="block items-center sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label
htmlFor="smartContractAddress"
className="flex text-sm font-medium text-neutral-700">
@ -902,7 +902,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{
<input
type="text"
className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
defaultValue={(eventType.metadata.smartContractAddress || "") as string}
{...formMethods.register("smartContractAddress")}
@ -913,7 +913,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
)}
<div className="block items-center sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label
htmlFor="additionalFields"
className="flexflex mt-2 text-sm font-medium text-neutral-700">
@ -923,7 +923,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<div className="w-full">
<ul className="mt-1">
{customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
<li key={idx} className="mb-2 border bg-secondary-50 p-2">
<li key={idx} className="bg-secondary-50 mb-2 border p-2">
<div className="flex justify-between">
<div className="w-0 flex-1">
<div className="truncate">
@ -1042,7 +1042,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/>
<div className="block items-center sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
{t("slot_interval")}
</label>
@ -1067,7 +1067,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Select
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
onChange={(val) => {
formMethods.setValue(
"slotInterval",
@ -1089,7 +1089,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div>
<div className="block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label
htmlFor="inviteesCanSchedule"
className="mt-2.5 flex text-sm font-medium text-neutral-700">
@ -1120,14 +1120,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<div className="inline-flex">
<input
type="number"
className="block w-12 rounded-sm border-gray-300 shadow-sm [appearance:textfield] focus:border-primary-500 focus:ring-primary-500 ltr:mr-2 rtl:ml-2 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-12 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
placeholder="30"
{...formMethods.register("periodDays", { valueAsNumber: true })}
defaultValue={eventType.periodDays || 30}
/>
<select
id=""
className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm"
{...formMethods.register("periodCountCalendarDays")}
defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
<option value="1">{t("calendar_days")}</option>
@ -1167,7 +1167,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="availability" className="flex text-sm font-medium text-neutral-700">
{t("availability")}
</label>
@ -1204,7 +1204,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<>
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<div className="min-w-48 mb-4 sm:mb-0">
<label
htmlFor="payment"
className="mt-2 flex text-sm font-medium text-neutral-700">
@ -1228,7 +1228,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
id="requirePayment"
name="requirePayment"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
defaultChecked={requirePayment}
/>
</div>
@ -1265,7 +1265,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
min="0.5"
type="number"
required
className="block w-full rounded-sm border-gray-300 pl-2 pr-12 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm"
placeholder="Price"
onChange={(e) => {
field.onChange(e.target.valueAsNumber * 100);
@ -1366,8 +1366,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<DialogContent asChild>
<div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
<LocationMarkerIcon className="h-6 w-6 text-primary-600" />
<div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<LocationMarkerIcon className="text-primary-600 h-6 w-6" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@ -1418,7 +1418,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
options={locationOptions}
isSearchable={false}
classNamePrefix="react-select"
className="react-select-container my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
className="react-select-container focus:border-primary-500 focus:ring-primary-500 my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
onChange={(val) => {
if (val) {
locationFormMethods.setValue("locationType", val.value);
@ -1448,8 +1448,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<DialogContent asChild>
<div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
<PlusIcon className="h-6 w-6 text-primary-600" />
<div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<PlusIcon className="text-primary-600 h-6 w-6" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">

2
apps/web/pages/getting-started.tsx
View File

@ -555,7 +555,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
}
return (
<div className="min-h-screen bg-brand" data-testid="onboarding">
<div className="bg-brand min-h-screen" data-testid="onboarding">
<Head>
<title>Cal.com - {t("getting_started")}</title>
<link rel="icon" href="/favicon.ico" />

4
apps/web/pages/integrations/index.tsx
View File

@ -390,7 +390,7 @@ function IframeEmbedContainer() {
<div>
<input
id="iframe"
className="px-2 py-1 text-sm text-gray-500 focus:border-brand focus:ring-black"
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
placeholder={t("loading")}
defaultValue={iframeTemplate}
readOnly
@ -415,7 +415,7 @@ function IframeEmbedContainer() {
<div>
<input
id="fullscreen"
className="px-2 py-1 text-sm text-gray-500 focus:border-brand focus:ring-black"
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
placeholder={t("loading")}
defaultValue={htmlTemplate}
readOnly

2
apps/web/pages/sandbox/index.tsx
View File

@ -37,7 +37,7 @@ const SandboxPage: NextPage<PageProps> = (props) => {
{props.pages.map((pathname) => (
<li key={pathname}>
<Link href={"/sandbox/" + pathname + "#main"}>
<a className="font-mono px-4">{pathname}</a>
<a className="px-4 font-mono">{pathname}</a>
</Link>
</li>
))}

2
apps/web/pages/settings/teams/[id].tsx
View File

@ -137,7 +137,7 @@ export function TeamSettingsPage() {
<MemberList team={team} members={team.members || []} />
{isAdmin && <SAMLConfiguration teamsView={true} teamId={team.id} />}
</div>
<div className="mt-8 w-full min-w-32 px-2 ltr:ml-2 rtl:mr-2 sm:mt-0 md:w-3/12">
<div className="min-w-32 mt-8 w-full px-2 ltr:ml-2 rtl:mr-2 sm:mt-0 md:w-3/12">
<TeamSettingsRightSidebar role={team.membership.role} team={team} />
</div>
</div>

2
apps/web/pages/success.tsx
View File

@ -270,7 +270,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
name="email"
id="email"
defaultValue={router.query.email}
className="block w-full border-gray-300 text-gray-600 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-brand dark:text-brandcontrast sm:text-sm"
className="focus:border-brand dark:bg-brand dark:text-brandcontrast block w-full border-gray-300 text-gray-600 shadow-sm focus:ring-black dark:border-gray-900 sm:text-sm"
placeholder="rick.astley@cal.com"
/>
<Button type="submit" className="min-w-max" color="primary">

6
apps/web/pages/team/[slug].tsx
View File

@ -32,7 +32,7 @@ function TeamPage({ team }: TeamPageProps) {
{team.eventTypes.map((type) => (
<li
key={type.id}
className="group relative rounded-sm border border-neutral-200 bg-white hover:border-brand hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
className="group hover:border-brand relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
<Link href={`${team.slug}/${type.slug}`}>
<a className="flex justify-between px-6 py-4">
@ -66,7 +66,7 @@ function TeamPage({ team }: TeamPageProps) {
<Theme />
<HeadSeo title={teamName} description={teamName} />
<div className="px-4 pt-24 pb-12">
<div className="mx-auto mb-8 max-w-96 text-center">
<div className="max-w-96 mx-auto mb-8 text-center">
<Avatar
alt={teamName}
imageSrc={getPlaceholderAvatar(team.logo, team.name)}
@ -87,7 +87,7 @@ function TeamPage({ team }: TeamPageProps) {
<div className="w-full border-t border-gray-200 dark:border-gray-900" />
</div>
<div className="relative flex justify-center">
<span className="bg-gray-100 px-2 text-sm text-gray-500 dark:bg-brand dark:text-brandcontrast">
<span className="dark:bg-brand dark:text-brandcontrast bg-gray-100 px-2 text-sm text-gray-500">
{t("or")}
</span>
</div>

1
apps/web/prisma/zod/attendee.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteBooking, BookingModel } from "./index";

1
apps/web/prisma/zod/availability.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteUser, UserModel, CompleteEventType, EventTypeModel } from "./index";

3
apps/web/prisma/zod/booking.ts
View File

@ -1,7 +1,6 @@
import { BookingStatus } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { BookingStatus } from "@prisma/client";
import {
CompleteUser,
UserModel,

1
apps/web/prisma/zod/bookingreference.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteBooking, BookingModel } from "./index";

1
apps/web/prisma/zod/credential.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteUser, UserModel } from "./index";

1
apps/web/prisma/zod/dailyeventreference.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteBooking, BookingModel } from "./index";

1
apps/web/prisma/zod/destinationcalendar.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import {
CompleteUser,

3
apps/web/prisma/zod/eventtype.ts
View File

@ -1,7 +1,6 @@
import { PeriodType, SchedulingType } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { PeriodType, SchedulingType } from "@prisma/client";
import {
CompleteUser,
UserModel,

3
apps/web/prisma/zod/eventtypecustominput.ts
View File

@ -1,7 +1,6 @@
import { EventTypeCustomInputType } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { EventTypeCustomInputType } from "@prisma/client";
import { CompleteEventType, EventTypeModel } from "./index";
export const _EventTypeCustomInputModel = z.object({

3
apps/web/prisma/zod/membership.ts
View File

@ -1,7 +1,6 @@
import { MembershipRole } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { MembershipRole } from "@prisma/client";
import { CompleteTeam, TeamModel, CompleteUser, UserModel } from "./index";
export const _MembershipModel = z.object({

3
apps/web/prisma/zod/payment.ts
View File

@ -1,7 +1,6 @@
import { PaymentType } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { PaymentType } from "@prisma/client";
import { CompleteBooking, BookingModel } from "./index";
// Helper schema for JSON fields

3
apps/web/prisma/zod/remindermail.ts
View File

@ -1,7 +1,6 @@
import { ReminderType } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { ReminderType } from "@prisma/client";
export const _ReminderMailModel = z.object({
id: z.number().int(),

1
apps/web/prisma/zod/resetpasswordrequest.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
export const _ResetPasswordRequestModel = z.object({

1
apps/web/prisma/zod/schedule.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteUser, UserModel, CompleteEventType, EventTypeModel } from "./index";

1
apps/web/prisma/zod/selectedcalendar.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteUser, UserModel } from "./index";

1
apps/web/prisma/zod/team.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
import { CompleteMembership, MembershipModel, CompleteEventType, EventTypeModel } from "./index";

3
apps/web/prisma/zod/user.ts
View File

@ -1,7 +1,6 @@
import { IdentityProvider, UserPlan } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { IdentityProvider, UserPlan } from "@prisma/client";
import {
CompleteEventType,
EventTypeModel,

1
apps/web/prisma/zod/verificationrequest.ts
View File

@ -1,5 +1,4 @@
import * as z from "zod";
import * as imports from "../zod-utils";
export const _VerificationRequestModel = z.object({

3
apps/web/prisma/zod/webhook.ts
View File

@ -1,7 +1,6 @@
import { WebhookTriggerEvents } from "@prisma/client";
import * as z from "zod";
import * as imports from "../zod-utils";
import { WebhookTriggerEvents } from "@prisma/client";
import { CompleteUser, UserModel } from "./index";
export const _WebhookModel = z.object({

6
apps/web/styles/globals.css
View File

@ -26,7 +26,7 @@
.react-daterange-picker > .react-daterange-picker__wrapper input {
/* Makes sure the on-focus behaviour is like Cal.com's */
@apply my-0.5 h-auto rounded-sm py-0.5 focus:border-primary-500 focus:ring-primary-500;
@apply focus:border-primary-500 focus:ring-primary-500 my-0.5 h-auto rounded-sm py-0.5;
}
/* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
@ -175,12 +175,12 @@
}
.react-multi-email > [type="text"] {
@apply block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
@apply focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
}
.react-multi-email [data-tag] {
box-shadow: none !important;
@apply my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:bg-brand dark:text-white;
@apply dark:bg-brand my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:text-white;
}
.react-multi-email > span[data-placeholder] {

2
package.json
View File

@ -17,7 +17,7 @@
"@trivago/prettier-plugin-sort-imports": "2.0.4",
"husky": "^7.0.1",
"lint-staged": "^11.1.2",
"prettier": "^2.3.2",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.6",
"turbo": "latest"
},

2
yarn.lock
View File

@ -9195,7 +9195,7 @@ prettier-plugin-tailwindcss@^0.1.6:
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.7.tgz#f51de7b7bbabaa0724d3aff7a62957e5aa873482"
integrity sha512-tmBr45hCLuit2Cz9Pwow0/Jl1bGivYGsfcF29O+3sKcE++ybjz9dfie565S3ZsvAeV8uYer9SRMBWDsHPly2Lg==
prettier@^2.3.2, prettier@^2.5.1:
prettier@^2.5.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==