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

purged shadow-sm (#3381) 

Co-authored-by: Omar López <zomars@me.com>
This commit is contained in:
Peer Richelsen 2022-07-15 18:39:11 +02:00 committed by GitHub
parent dda5750bbc
commit ee552d8d64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 114 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -142,7 +142,7 @@ export default function ImageUploader({
</div>
)}
{result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
<label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
<label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
<input
onInput={onInputFile}
type="file"

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

@ -9,7 +9,7 @@ export type SwatchProps = {
const Swatch = (props: SwatchProps) => {
const { size, backgroundColor, onClick } = props;
return (
<div className="border-2 border-gray-200 p-1 shadow-sm">
<div className="border-2 border-gray-200 p-1">
<div
onClick={onClick}
style={{ backgroundColor }}

2
apps/web/components/availability/NewScheduleButton.tsx
View File

@ -65,7 +65,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
type="text"
id="name"
required
className="block w-full rounded-sm border-gray-300 text-sm shadow-sm"
className="block w-full rounded-sm border-gray-300 text-sm"
placeholder={t("default_schedule_name")}
{...register("name")}
/>

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

@ -53,7 +53,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
id="timeZone"
value={selectedTimeZone}
onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 focus:ring-black sm:text-sm"
/>
</div>
) : null;

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

@ -490,7 +490,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
type="number"
min="1"
max={eventType.recurringEvent.count}
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
defaultValue={eventType.recurringEvent.count}
onChange={(event) => {
setRecurringEventCount(parseInt(event?.target.value));
@ -621,7 +621,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
type="number"
min="1"
max={eventType.recurringEvent.count}
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
defaultValue={eventType.recurringEvent.count}
onChange={(event) => {
setRecurringEventCount(parseInt(event?.target.value));

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

@ -437,7 +437,7 @@ const BookingPage = ({
const disableInput = !!rescheduleUid;
const disabledExceptForOwner = disableInput && !loggedInIsOwner;
const inputClassName =
"focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
"focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
let isSmsReminderNumberNeeded = false;

2
apps/web/components/eventtype/CreateEventType.tsx
View File

@ -257,7 +257,7 @@ export default function CreateEventTypeButton(props: Props) {
<RadioArea.Group
{...register("schedulingType")}
onChange={(val) => form.setValue("schedulingType", val as SchedulingType)}
className="relative mt-1 flex space-x-6 rounded-sm shadow-sm rtl:space-x-reverse">
className="relative mt-1 flex space-x-6 rounded-sm rtl:space-x-reverse">
<RadioArea.Item
value={SchedulingType.COLLECTIVE}
defaultChecked={type === SchedulingType.COLLECTIVE}

4
apps/web/components/eventtype/RecurringEventController.tsx
View File

@ -82,7 +82,7 @@ export default function RecurringEventController({
type="number"
min="1"
max="20"
className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
defaultValue={recurringEventState.interval}
onChange={(event) => {
const newVal = {
@ -114,7 +114,7 @@ export default function RecurringEventController({
type="number"
min="1"
max="20"
className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
defaultValue={recurringEventState.count}
onChange={(event) => {
const newVal = {

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

@ -74,7 +74,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
type="text"
id="label"
required
className="block w-full rounded-sm border-gray-300 text-sm shadow-sm"
className="block w-full rounded-sm border-gray-300 text-sm"
defaultValue={selectedCustomInput?.label}
{...register("label", { required: true })}
/>
@ -90,7 +90,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
<input
type="text"
id="placeholder"
className="block w-full rounded-sm border-gray-300 text-sm shadow-sm"
className="block w-full rounded-sm border-gray-300 text-sm"
defaultValue={selectedCustomInput?.placeholder}
{...register("placeholder")}
/>

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 sm:text-sm"
className="block w-full rounded-sm border-gray-300 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 sm:text-sm"
className="block w-full rounded-sm border-gray-300 sm:text-sm"
placeholder={t("super_secure_new_password")}
/>
</div>

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

@ -70,7 +70,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
required
value={password}
onInput={(e) => setPassword(e.currentTarget.value)}
className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="block w-full rounded-sm border-gray-300 sm:text-sm"
/>
</div>

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

@ -139,7 +139,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
required
value={password}
onInput={(e) => setPassword(e.currentTarget.value)}
className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="block w-full rounded-sm border-gray-300 sm:text-sm"
/>
</div>
@ -175,7 +175,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
minLength={6}
inputMode="numeric"
onInput={(e) => setTotpCode(e.currentTarget.value)}
className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="block w-full rounded-sm border-gray-300 sm:text-sm"
autoComplete="one-time-code"
/>
</div>

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

@ -91,7 +91,7 @@ export default function MemberChangeRoleModal(props: {
value={role}
onChange={(option) => option && setRole(option)}
id="role"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
/>
</div>
{errorMessage && (

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

@ -104,7 +104,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
id="role"
name="role"
className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
/>
</div>
<div className="relative flex items-start">
@ -114,7 +114,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
name="sendInviteEmail"
defaultChecked
id="sendInviteEmail"
className="rounded-sm border-gray-300 text-black shadow-sm sm:text-sm"
className="rounded-sm border-gray-300 text-black sm:text-sm"
/>
</div>
<div className="text-sm ltr:ml-2 rtl:mr-2">

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

@ -63,7 +63,7 @@ export default function TeamCreate(props: Props) {
id="name"
placeholder="Acme Inc."
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
/>
</div>
{errorMessage && <Alert severity="error" title={errorMessage} />}

6
apps/web/components/team/TeamSettings.tsx
View File

@ -112,7 +112,7 @@ export default function TeamSettings(props: Props) {
id="name"
placeholder={t("your_team_name")}
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
defaultValue={team?.name as string}
/>
}
@ -131,7 +131,7 @@ export default function TeamSettings(props: Props) {
name="about"
rows={3}
defaultValue={team?.bio as string}
className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
/>
<p className="mt-2 text-sm text-gray-500">{t("team_description")}</p>
</>
@ -152,7 +152,7 @@ export default function TeamSettings(props: Props) {
name="avatar"
id="avatar"
placeholder="URL"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
defaultValue={team?.logo ?? undefined}
/>
<ImageUploader

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

@ -40,7 +40,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-black p-2 text-sm text-white shadow-sm">
<Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white">
<Tooltip.Arrow />
{title}
</Tooltip.Content>

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

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

2
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
View File

@ -183,7 +183,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<div style={{ display: "flex", justifyItems: "center" }}>
<Label htmlFor="username">{t("username")}</Label>
</div>
<div className="mt-1 flex rounded-md shadow-sm">
<div className="mt-1 flex rounded-md">
<span
className={classNames(
"inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"

2
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
View File

@ -109,7 +109,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
<div>
<Label htmlFor="username">{t("username")}</Label>
</div>
<div className="mt-1 flex rounded-md shadow-sm">
<div className="mt-1 flex rounded-md">
<span
className={classNames(
"inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"

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

@ -87,7 +87,7 @@ const ColorPicker = (props: ColorPickerProps) => {
</div>
)}
<HexColorInput
className="ml-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
className="ml-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
color={color}
onChange={(val) => {
setColor(val);

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

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

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

@ -16,7 +16,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
</div>
)}
<div className="w-full">
<div className="relative rounded-sm shadow-sm">
<div className="relative rounded-sm">
<input
{...rest}
ref={ref}

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

@ -19,7 +19,7 @@ function PhoneInput<FormValues>({ control, name, ...rest }: PhoneInputProps<Form
control={control}
countrySelectProps={{ className: "text-black" }}
numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }}
className="border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 shadow-sm ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
className="border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
/>
);
}

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

@ -42,7 +42,7 @@ function TimezoneSelect({ className, ...props }: SelectProps) {
IndicatorSeparator: () => null,
Input: InputComponent,
}}
className={classNames("text-sm shadow-sm", className)}
className={classNames("text-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 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",
"border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left sm:text-sm",
disabled && "cursor-default bg-gray-200 focus:ring-0 "
)}>
{getLabel(props.value) ?? placeholder}

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

@ -46,7 +46,7 @@ export default function LicenseBanner() {
<div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
<Dialog>
<DialogTrigger asChild>
<button className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 shadow-sm hover:bg-green-50">
<button className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
{t("accept_license")}
</button>
</DialogTrigger>

2
apps/web/ee/components/stripe/Payment.tsx
View File

@ -12,7 +12,7 @@ import { useLocale } from "@lib/hooks/useLocale";
const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
iconStyle: "solid" as const,
classes: {
base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black sm:text-sm",
base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black sm:text-sm",
},
style: {
base: {

4
apps/web/ee/components/support/HelpMenuItem.tsx
View File

@ -41,7 +41,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
};
return (
<div className="w-full border-gray-300 bg-white shadow-sm">
<div className="w-full border-gray-300 bg-white">
<div className="w-full py-5">
<p className="mb-1 px-5 text-neutral-500">{t("resources").toUpperCase()}</p>
<a
@ -86,7 +86,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
name="comment"
rows={3}
onChange={(event) => setComment(event.target.value)}
className="my-1 block w-full rounded-sm border-gray-300 py-2 pb-2 shadow-sm sm:text-sm"
className="my-1 block w-full rounded-sm border-gray-300 py-2 pb-2 sm:text-sm"
/>
<div className="my-3 flex justify-end">

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

@ -61,7 +61,7 @@ export default function TeamAvailabilityModal(props: Props) {
value={selectedTimeZone}
onChange={(timezone) => setSelectedTimeZone(timezone.value)}
classNamePrefix="react-select"
className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
/>
</div>
<div>

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

@ -81,7 +81,7 @@ export default function TeamAvailabilityScreen(props: Props) {
value={selectedTimeZone}
onChange={(timezone) => setSelectedTimeZone(timezone.value)}
classNamePrefix="react-select"
className="react-select-container w-full rounded-sm border border-gray-300 shadow-sm sm:text-sm"
className="react-select-container w-full rounded-sm border border-gray-300 sm:text-sm"
/>
</div>
<div className="hidden sm:block">

2
apps/web/ee/components/workflows/NewWorkflowButton.tsx
View File

@ -152,7 +152,7 @@ export function NewWorkflowButton() {
type="number"
min="1"
defaultValue={24}
className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 shadow-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm"
className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm"
{...form.register("time", { valueAsNumber: true })}
/>
<div className="w-28">

8
apps/web/ee/components/workflows/WorkflowStepContainer.tsx
View File

@ -123,7 +123,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
type="number"
min="1"
defaultValue={form.getValues("time") || 24}
className="mr-5 block w-20 rounded-sm border-gray-300 px-3 py-2 text-sm shadow-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
className="mr-5 block w-20 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
{...form.register("time", { valueAsNumber: true })}
/>
<div className="w-28">
@ -241,7 +241,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
countrySelectProps={{ className: "text-black" }}
numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }}
className={classNames(
"border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 shadow-sm ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500",
"border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500",
!editNumberMode ? "text-gray-500 dark:text-gray-500" : ""
)}
/>
@ -322,7 +322,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
type="text"
disabled={!editEmailBodyMode}
className={classNames(
"border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 px-2 font-sans text-sm shadow-sm ring-black 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 px-2 font-sans text-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
!editEmailBodyMode ? "text-gray-500 dark:text-gray-500" : ""
)}
{...form.register(`steps.${step.stepNumber - 1}.emailSubject`)}
@ -334,7 +334,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
</label>
<TextArea
className={classNames(
"border-1 focus-within:border-brand mb-2 block w-full rounded-sm border border-gray-300 p-2 text-sm shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
"border-1 focus-within:border-brand mb-2 block w-full rounded-sm border border-gray-300 p-2 text-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
!editEmailBodyMode ? "text-gray-500 dark:text-gray-500" : ""
)}
rows={5}

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

@ -152,7 +152,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
type="password"
autoComplete="password"
required
className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm 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 focus:outline-none focus:ring-black sm:text-sm"
/>
</div>
</div>
@ -161,7 +161,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
<button
type="submit"
disabled={loading}
className={`flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 ${
className={`flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 ${
loading ? "cursor-not-allowed" : ""
}`}>
{loading && (

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

@ -101,14 +101,14 @@ export default function Signup({ email }: Props) {
/>
<EmailField
{...register("email")}
className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
/>
<PasswordField
labelProps={{
className: "block text-sm font-medium text-gray-700",
}}
{...register("password")}
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
/>
<PasswordField
label={t("confirm_password")}
@ -119,7 +119,7 @@ export default function Signup({ email }: Props) {
validate: (value) =>
value === methods.watch("password") || (t("error_password_mismatch") as string),
})}
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
/>
</div>
<div className="flex space-x-2 rtl:space-x-reverse">

2
apps/web/pages/availability/[schedule].tsx
View File

@ -99,7 +99,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
render={({ field: { onChange, value } }) => (
<TimezoneSelect
value={value}
className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
onChange={(timezone) => onChange(timezone.value)}
/>
)}

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

@ -318,7 +318,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
id="token"
placeholder={t("access_token")}
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
/>
<Button type="submit" className="mt-1 ml-4 h-10">
{t("import")}
@ -349,7 +349,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
placeholder={t("your_name")}
defaultValue={props.user.name ?? enteredName}
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
/>
</fieldset>
@ -367,7 +367,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
id="timeZone"
value={selectedTimeZone}
onChange={({ value }) => setSelectedTimeZone(value)}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
className="mt-1 block w-full rounded-md border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
/>
</fieldset>
</section>
@ -473,7 +473,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
placeholder={t("your_name")}
defaultValue={props.user.name || enteredName}
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
/>
</fieldset>
<fieldset>
@ -486,7 +486,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
name="bio"
id="bio"
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
defaultValue={props.user.bio || undefined}
/>
<p className="mt-2 text-sm leading-tight text-gray-500 dark:text-white">

18
apps/web/pages/settings/profile.tsx
View File

@ -237,7 +237,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
autoComplete="given-name"
placeholder={t("your_name")}
required
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
defaultValue={user.name || undefined}
/>
</div>
@ -253,7 +253,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
name="email"
id="email"
placeholder={t("your_email")}
className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
defaultValue={user.email}
/>
<p className="mt-2 text-sm text-gray-500" id="email-description">
@ -274,7 +274,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
placeholder={t("little_something_about")}
rows={3}
defaultValue={user.bio || undefined}
className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
/>
</div>
</div>
@ -292,7 +292,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
name="avatar"
id="avatar"
placeholder="URL"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
defaultValue={imageSrc}
/>
<div className="flex items-center px-5">
@ -327,7 +327,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
id="languageSelect"
value={selectedLanguage || props.localeProp}
onChange={(v) => v && setSelectedLanguage(v)}
className="mt-1 block w-full rounded-sm capitalize shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
options={localeOptions}
/>
</div>
@ -341,7 +341,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
id="timeZone"
value={selectedTimeZone}
onChange={(v) => v && setSelectedTimeZone(v)}
className="mt-1 block w-full rounded-sm shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm sm:text-sm"
/>
</div>
</div>
@ -354,7 +354,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
id="timeFormatSelect"
value={selectedTimeFormat || user.timeFormat}
onChange={(v) => v && setSelectedTimeFormat(v)}
className="mt-1 block w-full rounded-sm capitalize shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
options={timeFormatOptions}
/>
</div>
@ -368,7 +368,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
id="weekStart"
value={selectedWeekStartDay}
onChange={(v) => v && setSelectedWeekStartDay(v)}
className="mt-1 block w-full rounded-sm capitalize shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
options={[
{ value: "Sunday", label: nameOfDay(props.localeProp, 0) },
{ value: "Monday", label: nameOfDay(props.localeProp, 1) },
@ -411,7 +411,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
defaultValue={selectedTheme || themeOptions[0]}
value={selectedTheme || themeOptions[0]}
onChange={(v) => v && setSelectedTheme(v)}
className="mt-1 block w-full rounded-sm shadow-sm sm:text-sm"
className="mt-1 block w-full rounded-sm sm:text-sm"
options={themeOptions}
/>
</div>

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

@ -113,7 +113,7 @@ function RedirectionToast({ url }: { url: string }) {
onClick={() => {
redirectToExternalUrl(urlWithSuccessParams);
}}
className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 shadow-sm hover:bg-green-50">
className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
{t("continue")}
</button>
</div>
@ -563,7 +563,7 @@ export default function Success(props: SuccessProps) {
name="email"
id="email"
defaultValue={router.query.email}
className="focus:border-brand border-bookinglightest mt-0 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"
className="focus:border-brand border-bookinglightest mt-0 block w-full rounded-sm border-gray-300 focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
placeholder="rick.astley@cal.com"
/>
<Button size="lg" type="submit" className="min-w-max" color="primary">

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

@ -22,8 +22,8 @@
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
}
@ -76,27 +76,27 @@ button[role="switch"][data-state="checked"] span {
@layer components {
/* Primary buttons */
.btn-xs.btn-primary {
@apply inline-flex items-center rounded border border-transparent bg-neutral-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded border border-transparent bg-neutral-900 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-sm.btn-primary {
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-3 py-2 text-sm font-medium leading-4 text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn.btn-primary {
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-lg.btn-primary {
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-base font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-xl.btn-primary {
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-6 py-3 text-base font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-wide.btn-primary {
@apply w-full rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-center text-sm font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply w-full rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-center text-sm font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
/* Secondary buttons */
@ -126,27 +126,27 @@ button[role="switch"][data-state="checked"] span {
/* White buttons */
.btn-xs.btn-white {
@apply inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-sm.btn-white {
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn.btn-white {
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-lg.btn-white {
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-xl.btn-white {
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
.btn-wide.btn-white {
@apply w-full rounded-sm border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
@apply w-full rounded-sm border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
}
/* btn icon */
.btn-icon {
@ -166,7 +166,7 @@ button[role="switch"][data-state="checked"] span {
}
.slider .slider-thumb {
@apply block h-3 w-3 cursor-pointer rounded-full bg-neutral-700 shadow-sm transition-all;
@apply block h-3 w-3 cursor-pointer rounded-full bg-neutral-700 transition-all;
}
.slider .slider-thumb:hover {
@ -225,7 +225,7 @@ button[role="switch"][data-state="checked"] span {
}
.react-multi-email > [type="text"] {
@apply focus:border-brand block w-full rounded-[2px] border-gray-300 shadow-sm 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-[2px] border-gray-300 focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
}
.react-multi-email [data-tag] {
@ -258,7 +258,7 @@ button[role="switch"][data-state="checked"] span {
}
.react-multi-email [data-tag] {
@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 shadow-sm 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-neutral-900 dark:text-white dark:hover:bg-neutral-700;
@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-neutral-900 dark:text-white dark:hover:bg-neutral-700;
}
.react-multi-email [data-tag] [data-tag-item] {
@ -403,50 +403,52 @@ hr {
}
/* animations */
.slideInBottom {
animation-duration: .3s;
.slideInBottom {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-name: slideInBottom
animation-name: slideInBottom;
}
@keyframes slideInBottom {
from {
opacity: 0;
transform: translateY(30%);
}
to { opacity: 1 }
from {
opacity: 0;
transform: translateY(30%);
}
to {
opacity: 1;
}
}
/* animations */
.slideInTop {
animation-duration: .3s;
.slideInTop {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-name: slideInTop
animation-name: slideInTop;
}
@keyframes slideInTop {
from {
opacity: 0;
transform: translateY(-20%);
}
to {
opacity: 1;
transform: translateY(0%);
}
from {
opacity: 0;
transform: translateY(-20%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
.fadeIn {
animation-duration: .3s;
.fadeIn {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-name: fadeIn;
animation-timing-function: ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to { opacity: 1 }
}
from {
opacity: 0;
}
to {
opacity: 1;
}
}