diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx index 7cc1ea783c..736931db18 100644 --- a/apps/web/components/Embed.tsx +++ b/apps/web/components/Embed.tsx @@ -488,7 +488,8 @@ ${getEmbedSnippetString()} ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previewState })} ` - }> + } + />

{t( "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options." @@ -531,7 +532,8 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ /* If you are using npm */ // npm install @calcom/embed-react ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, previewState })} -`}> +`} + /> ); }), @@ -802,11 +804,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ }, }); }}> - + {embed.title} -

+
+ }} + />
+ options={FloatingPopupPositionOptions} + />
+ }} + />
+ }} + />
-
+
+ options={ThemeOptions} + /> {[ { name: "brandColor", title: "Brand Color" }, @@ -1065,7 +1072,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ embedType={embedType} calLink={calLink} previewState={previewState} - ref={refOfEmbedCodesRefs.current[tab.name]}> + ref={refOfEmbedCodesRefs.current[tab.name]} + /> ) : ( )}
-
+
{tab.type === "code" ? ( @@ -1161,8 +1169,7 @@ export const EmbedButton = ({ data-test-eventtype-id={eventTypeId} data-testid="event-type-embed" onClick={() => openEmbedModal()}> - + {t("Embed")} ); diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx index 237bb5c03b..aad0dc2603 100644 --- a/apps/web/components/Shell.tsx +++ b/apps/web/components/Shell.tsx @@ -328,8 +328,8 @@ const Layout = ({
{props.isLoading ? ( <> -
-
+
+
) : ( <> @@ -490,10 +490,10 @@ function UserDropdown({ small }: { small?: boolean }) { /> } {!user?.away && ( -
+
)} {user?.away && ( -
+
)} {!small && ( @@ -572,16 +572,20 @@ function UserDropdown({ small }: { small?: boolean }) { + fill="currentColor" + /> + fill="currentColor" + /> + fill="currentColor" + /> + fill="currentColor" + /> {t("join_our_slack")} diff --git a/apps/web/components/Swatch.tsx b/apps/web/components/Swatch.tsx index a124fe5ca6..6850454603 100644 --- a/apps/web/components/Swatch.tsx +++ b/apps/web/components/Swatch.tsx @@ -18,7 +18,8 @@ const Swatch = (props: SwatchProps) => { size === "sm" && "h-6 w-6 rounded-sm", size === "base" && "h-16 w-16 rounded-sm", size === "lg" && "h-24 w-24 rounded-sm" - )}>
+ )} + />
); }; diff --git a/apps/web/components/apps/SkeletonLoader.tsx b/apps/web/components/apps/SkeletonLoader.tsx index 65ac665ec4..aa187a9d70 100644 --- a/apps/web/components/apps/SkeletonLoader.tsx +++ b/apps/web/components/apps/SkeletonLoader.tsx @@ -7,7 +7,7 @@ import { ShellSubHeading } from "@components/Shell"; function SkeletonLoader({ className }: { className?: string }) { return ( <> -
} {...{ className }} /> + } {...{ className }} />
    @@ -24,16 +24,16 @@ function SkeletonItem() {
  • - +
    - - + +
    - +
    • diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx index d85e129401..92842a7533 100644 --- a/apps/web/components/availability/SkeletonLoader.tsx +++ b/apps/web/components/availability/SkeletonLoader.tsx @@ -19,13 +19,13 @@ function SkeletonItem() {
  • - - + +
    - +
    • @@ -37,8 +37,8 @@ export const AvailabilitySelectSkeletonLoader = () => {
  • - - + +
    • diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx index a17bbc6d45..fe5cd801bd 100644 --- a/apps/web/components/dialog/EditLocationDialog.tsx +++ b/apps/web/components/dialog/EditLocationDialog.tsx @@ -154,7 +154,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => { onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked) } - informationIconText={t("display_location_info_badge")}> + informationIconText={t("display_location_info_badge")} + /> )} />
@@ -200,7 +201,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => { : undefined } onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked)} - informationIconText={t("display_location_info_badge")}> + informationIconText={t("display_location_info_badge")} + /> )} />
@@ -272,7 +274,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => { onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked) } - informationIconText={t("display_location_info_badge")}> + informationIconText={t("display_location_info_badge")} + /> )} />
@@ -319,7 +322,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => { onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked) } - informationIconText={t("display_location_info_badge")}> + informationIconText={t("display_location_info_badge")} + /> )} /> @@ -366,7 +370,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => { onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked) } - informationIconText={t("display_location_info_badge")}> + informationIconText={t("display_location_info_badge")} + /> )} /> @@ -393,7 +398,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {

{t("this_input_will_shown_booking_this_event")}

)} -
+
{booking && ( <> diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx index 902ba7187a..7e11fbf453 100644 --- a/apps/web/components/dialog/RescheduleDialog.tsx +++ b/apps/web/components/dialog/RescheduleDialog.tsx @@ -58,7 +58,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
- +
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx index 2397c69865..128617fa9f 100644 --- a/apps/web/components/eventtype/SkeletonLoader.tsx +++ b/apps/web/components/eventtype/SkeletonLoader.tsx @@ -8,10 +8,10 @@ function SkeletonLoader() { return (
- +
- - + +
    @@ -30,17 +30,17 @@ function SkeletonItem() {
  • - +
    • - - + +
    • - - + +
    diff --git a/apps/web/components/team/SkeletonloaderTeamList.tsx b/apps/web/components/team/SkeletonloaderTeamList.tsx index ddd93620e8..137b1be84b 100644 --- a/apps/web/components/team/SkeletonloaderTeamList.tsx +++ b/apps/web/components/team/SkeletonloaderTeamList.tsx @@ -23,18 +23,18 @@ function SkeletonItem() {
  • - +
    - - + +
    - - - + + +
    • diff --git a/apps/web/components/team/TeamSettings.tsx b/apps/web/components/team/TeamSettings.tsx index 1410660d2c..153f1a9879 100644 --- a/apps/web/components/team/TeamSettings.tsx +++ b/apps/web/components/team/TeamSettings.tsx @@ -131,7 +131,8 @@ 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 shadow-sm sm:text-sm" + />

    {t("team_description")}

    } diff --git a/apps/web/components/ui/AvatarSSR.tsx b/apps/web/components/ui/AvatarSSR.tsx index 9e0599274b..d4b02e8244 100644 --- a/apps/web/components/ui/AvatarSSR.tsx +++ b/apps/web/components/ui/AvatarSSR.tsx @@ -29,5 +29,5 @@ export function AvatarSSR(props: AvatarProps) { imgSrc = defaultAvatarSrc(user.emailMd5); } // eslint-disable-next-line @next/next/no-img-element - return imgSrc ? {alt} : null; + return imgSrc ? {alt} : null; } diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx index 938b9a8f96..f46a76f7d9 100644 --- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx +++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx @@ -259,7 +259,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
    - +
    diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx index a75de8b515..2b6ac2c9f7 100644 --- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx +++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx @@ -164,7 +164,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
    - +
    diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx index 867c092bb3..f205cea300 100644 --- a/apps/web/components/ui/form/CheckboxField.tsx +++ b/apps/web/components/ui/form/CheckboxField.tsx @@ -54,7 +54,7 @@ const CheckboxField = forwardRef( {description} )} - {informationIconText && } + {informationIconText && }
    diff --git a/apps/web/components/webhook/WebhookListItem.tsx b/apps/web/components/webhook/WebhookListItem.tsx index 776f902067..cef566ea67 100644 --- a/apps/web/components/webhook/WebhookListItem.tsx +++ b/apps/web/components/webhook/WebhookListItem.tsx @@ -57,7 +57,8 @@ export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhoo color="minimal" size="icon" StartIcon={PencilAltIcon} - className="ml-4 w-full self-center p-2"> + className="ml-4 w-full self-center p-2" + /> @@ -69,7 +70,8 @@ export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhoo color="minimal" size="icon" StartIcon={TrashIcon} - className="ml-2 w-full self-center p-2"> + className="ml-2 w-full self-center p-2" + /> 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 shadow-sm sm:text-sm" + />
@@ -1396,7 +1399,7 @@ const EventTypePage = (props: inferSSRProps) => { /> {hashedLinkVisible && (
-
+
) => { formMethods={formMethods} - eventType={eventType}> + eventType={eventType} + /> {hasPaymentIntegration && ( <>
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx index 4567962b9b..2fb9b8a6f6 100644 --- a/apps/web/pages/event-types/index.tsx +++ b/apps/web/pages/event-types/index.tsx @@ -327,7 +327,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL "w-full rounded-none", type.$disabled && " pointer-events-none cursor-not-allowed opacity-30" )} - eventTypeId={type.id}> + eventTypeId={type.id} + /> diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx index 822f4a0b5d..63c364dd97 100644 --- a/apps/web/pages/getting-started.tsx +++ b/apps/web/pages/getting-started.tsx @@ -523,7 +523,7 @@ export default function Onboarding(props: inferSSRProps
; + return
; } return ( @@ -561,9 +561,10 @@ export default function Onboarding(props: inferSSRProps
+ )} + /> ) : ( -
+
); })} diff --git a/apps/web/pages/sandbox/RadioArea.tsx b/apps/web/pages/sandbox/RadioArea.tsx index c4e05fa33c..ab702e9a66 100644 --- a/apps/web/pages/sandbox/RadioArea.tsx +++ b/apps/web/pages/sandbox/RadioArea.tsx @@ -74,7 +74,8 @@ export default function RadioAreaPage() { + placeholder="Does the rabbit or the turtle win the race?" + />

RadioArea with options

@@ -85,7 +86,8 @@ export default function RadioAreaPage() { setFormData({ ...formData, turtleOrRabbitWinsTheRace }) } options={selectOptions} - placeholder="Does the rabbit or the turtle win the race?"> + placeholder="Does the rabbit or the turtle win the race?" + />
@@ -94,7 +96,8 @@ export default function RadioAreaPage() { disabled={true} className="max-w-screen-md" value="turtle" - options={selectOptions}> + options={selectOptions} + /> 
{JSON.stringify(formData)}
diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx index 824dfc3ac3..4cfedd8814 100644 --- a/apps/web/pages/settings/profile.tsx +++ b/apps/web/pages/settings/profile.tsx @@ -274,7 +274,8 @@ function SettingsView(props: ComponentProps & { 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 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm" + />
diff --git a/apps/web/pages/settings/teams/[id]/index.tsx b/apps/web/pages/settings/teams/[id]/index.tsx index 96da9b3ea4..2f1a4d417e 100644 --- a/apps/web/pages/settings/teams/[id]/index.tsx +++ b/apps/web/pages/settings/teams/[id]/index.tsx @@ -61,11 +61,11 @@ export function TeamSettingsPage() { <>
-
+
- +
-
+
@@ -182,7 +182,8 @@ export function TeamSettingsPage() { )} ); - }}> + }} + /> ); } diff --git a/apps/web/pages/settings/teams/index.tsx b/apps/web/pages/settings/teams/index.tsx index e6620b1bc3..04f4e526be 100644 --- a/apps/web/pages/settings/teams/index.tsx +++ b/apps/web/pages/settings/teams/index.tsx @@ -72,7 +72,7 @@ function Teams() { {invites.length > 0 && (

{t("open_invitations")}

- +
)} {isLoading && } @@ -83,7 +83,7 @@ function Teams() { description={t("no_teams_description")} /> )} - {teams.length > 0 && } + {teams.length > 0 && } ); diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx index ad55ee383c..23c5882010 100644 --- a/apps/web/pages/success.tsx +++ b/apps/web/pages/success.tsx @@ -274,7 +274,7 @@ export default function Success(props: SuccessProps) {
{isSuccessRedirectAvailable(eventType) && eventType.successRedirectUrl ? ( - + ) : null}{" "}