fixed padding of settings and integrations page
Peer Richelsen
parent
9851c8f526
commit
f858cb4882
|
|
@ -105,12 +105,12 @@ export function ShellSubHeading(props: {
|
|||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={classNames("mb-3 block justify-between sm:flex", props.className)}>
|
||||
<div className={classNames("mb-3 mt-10 block justify-between sm:flex", props.className)}>
|
||||
<div>
|
||||
<h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
|
||||
{props.title}
|
||||
</h2>
|
||||
{props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
|
||||
{props.subtitle && <p className="text-neutral-500 text-sm ltr:mr-4">{props.subtitle}</p>}
|
||||
</div>
|
||||
{props.actions && <div className="flex-shrink-0">{props.actions}</div>}
|
||||
</div>
|
||||
|
|
@ -228,7 +228,7 @@ export default function Shell(props: {
|
|||
className={classNames(
|
||||
item.current
|
||||
? "bg-neutral-100 text-neutral-900"
|
||||
: "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
|
||||
: "text-neutral-500 hover:text-neutral-900 hover:bg-gray-50",
|
||||
"group flex items-center rounded-sm px-2 py-2 text-sm font-medium"
|
||||
)}>
|
||||
<item.icon
|
||||
|
|
@ -262,7 +262,7 @@ export default function Shell(props: {
|
|||
<div className="flex w-0 flex-1 flex-col overflow-hidden">
|
||||
<main
|
||||
className={classNames(
|
||||
"relative z-0 max-w-[1700px] flex-1 overflow-y-auto focus:outline-none",
|
||||
"focus:outline-none relative z-0 max-w-[1700px] flex-1 overflow-y-auto",
|
||||
props.flexChildrenContainer && "flex flex-col"
|
||||
)}>
|
||||
{/* show top navigation for md and smaller (tablet and phones) */}
|
||||
|
|
@ -273,7 +273,7 @@ export default function Shell(props: {
|
|||
</a>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3 self-center">
|
||||
<button className="rounded-full bg-white p-2 text-gray-400 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
|
||||
<button className="focus:outline-none rounded-full bg-white p-2 text-gray-400 hover:bg-gray-50 hover:text-gray-500 focus:ring-2 focus:ring-black focus:ring-offset-2">
|
||||
<span className="sr-only">{t("view_notifications")}</span>
|
||||
<Link href="/settings/profile">
|
||||
<a>
|
||||
|
|
@ -306,7 +306,7 @@ export default function Shell(props: {
|
|||
<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>
|
||||
<p className="text-neutral-500 text-sm ltr:mr-4 rtl:ml-4">{props.subtitle}</p>
|
||||
</div>
|
||||
<div className="mb-4 flex-shrink-0">{props.CTA}</div>
|
||||
</div>
|
||||
|
|
@ -400,7 +400,7 @@ function UserDropdown({ small }: { small?: boolean }) {
|
|||
<span className="block truncate font-medium text-gray-900">
|
||||
{user?.username || "Nameless User"}
|
||||
</span>
|
||||
<span className="block truncate font-normal text-neutral-500">
|
||||
<span className="text-neutral-500 block truncate font-normal">
|
||||
{user?.username ? `cal.com/${user.username}` : "No public page"}
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -208,7 +208,6 @@ export function CalendarListContainer(props: { heading?: false }) {
|
|||
<>
|
||||
{heading && (
|
||||
<ShellSubHeading
|
||||
className="mt-10 mb-0"
|
||||
title={
|
||||
<SubHeadingTitleWithConnections
|
||||
title="Calendars"
|
||||
|
|
@ -230,7 +229,6 @@ export function CalendarListContainer(props: { heading?: false }) {
|
|||
<ConnectedCalendarsList onChanged={onChanged} />
|
||||
{!!query.data?.connectedCalendars.length && (
|
||||
<ShellSubHeading
|
||||
className="mt-6"
|
||||
title={<SubHeadingTitleWithConnections title={t("connect_an_additional_calendar")} />}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ function WebhookTestDisclosure() {
|
|||
return (
|
||||
<Collapsible open={open} onOpenChange={() => setOpen(!open)}>
|
||||
<CollapsibleTrigger type="button" className={"flex w-full cursor-pointer"}>
|
||||
<ChevronRightIcon className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
|
||||
<ChevronRightIcon className={`${open ? "rotate-90 transform" : ""} text-neutral-500 h-5 w-5`} />
|
||||
<span className="text-sm font-medium text-gray-700">{t("webhook_test")}</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
|
|
@ -330,7 +330,7 @@ function WebhookListContainer() {
|
|||
query={query}
|
||||
success={({ data }) => (
|
||||
<>
|
||||
<ShellSubHeading className="mt-10" title={t("Webhooks")} subtitle={t("receive_cal_meeting_data")} />
|
||||
<ShellSubHeading title={t("Webhooks")} subtitle={t("receive_cal_meeting_data")} />
|
||||
<List>
|
||||
<ListItem className={classNames("flex-col")}>
|
||||
<div
|
||||
|
|
@ -403,69 +403,67 @@ function IframeEmbedContainer() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<ShellSubHeading title={t("iframe_embed")} subtitle={t("embed_calcom")} className="mt-10" />
|
||||
<div className="lg:col-span-9 lg:pb-8">
|
||||
<List>
|
||||
<ListItem className={classNames("flex-col")}>
|
||||
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
|
||||
<Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
|
||||
<div className="flex-grow truncate pl-2">
|
||||
<ListItemTitle component="h3">{t("standard_iframe")}</ListItemTitle>
|
||||
<ListItemText component="p">{t("embed_your_calendar")}</ListItemText>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="iframe"
|
||||
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
|
||||
placeholder={t("loading")}
|
||||
defaultValue={iframeTemplate}
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(iframeTemplate);
|
||||
showToast("Copied to clipboard", "success");
|
||||
}}>
|
||||
<ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
|
||||
</button>
|
||||
</div>
|
||||
<ShellSubHeading title={t("iframe_embed")} subtitle={t("embed_calcom")} />
|
||||
<List>
|
||||
<ListItem className={classNames("flex-col")}>
|
||||
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
|
||||
<Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
|
||||
<div className="flex-grow truncate pl-2">
|
||||
<ListItemTitle component="h3">{t("standard_iframe")}</ListItemTitle>
|
||||
<ListItemText component="p">{t("embed_your_calendar")}</ListItemText>
|
||||
</div>
|
||||
</ListItem>
|
||||
<ListItem className={classNames("flex-col")}>
|
||||
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
|
||||
<Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
|
||||
<div className="flex-grow truncate pl-2">
|
||||
<ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle>
|
||||
<ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="fullscreen"
|
||||
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
|
||||
placeholder={t("loading")}
|
||||
defaultValue={htmlTemplate}
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(htmlTemplate);
|
||||
showToast("Copied to clipboard", "success");
|
||||
}}>
|
||||
<ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<input
|
||||
id="iframe"
|
||||
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
|
||||
placeholder={t("loading")}
|
||||
defaultValue={iframeTemplate}
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(iframeTemplate);
|
||||
showToast("Copied to clipboard", "success");
|
||||
}}>
|
||||
<ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
|
||||
</button>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
<div className="grid grid-cols-2 space-x-4 rtl:space-x-reverse">
|
||||
<div>
|
||||
<label htmlFor="iframe" className="block text-sm font-medium text-gray-700"></label>
|
||||
<div className="mt-1"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700"></label>
|
||||
<div className="mt-1"></div>
|
||||
</ListItem>
|
||||
<ListItem className={classNames("flex-col")}>
|
||||
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
|
||||
<Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
|
||||
<div className="flex-grow truncate pl-2">
|
||||
<ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle>
|
||||
<ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<input
|
||||
id="fullscreen"
|
||||
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
|
||||
placeholder={t("loading")}
|
||||
defaultValue={htmlTemplate}
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(htmlTemplate);
|
||||
showToast("Copied to clipboard", "success");
|
||||
}}>
|
||||
<ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
<div className="grid grid-cols-2 space-x-4 rtl:space-x-reverse">
|
||||
<div>
|
||||
<label htmlFor="iframe" className="block text-sm font-medium text-gray-700"></label>
|
||||
<div className="mt-1"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700"></label>
|
||||
<div className="mt-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -553,7 +551,6 @@ function IntegrationsContainer() {
|
|||
</List>
|
||||
|
||||
<ShellSubHeading
|
||||
className="mt-10"
|
||||
title={
|
||||
<SubHeadingTitleWithConnections title={t("payment")} numConnections={data.payment.numActive} />
|
||||
}
|
||||
|
|
@ -578,26 +575,24 @@ function Web3Container() {
|
|||
return (
|
||||
<>
|
||||
<ShellSubHeading title="Web3" subtitle={t("meet_people_with_the_same_tokens")} />
|
||||
<div className="lg:col-span-9 lg:pb-8">
|
||||
<List>
|
||||
<ListItem className={classNames("flex-col")}>
|
||||
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-3")}>
|
||||
<Image width={40} height={40} src="/integrations/metamask.svg" alt="Embed" />
|
||||
<div className="flex-grow truncate pl-2">
|
||||
<ListItemTitle component="h3">
|
||||
MetaMask (
|
||||
<a className="text-blue-500" target="_blank" href="https://cal.com/web3" rel="noreferrer">
|
||||
Read more
|
||||
</a>
|
||||
)
|
||||
</ListItemTitle>
|
||||
<ListItemText component="p">{t("only_book_people_and_allow")}</ListItemText>
|
||||
</div>
|
||||
<Web3ConnectBtn />
|
||||
<List>
|
||||
<ListItem className={classNames("flex-col")}>
|
||||
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-3")}>
|
||||
<Image width={40} height={40} src="/integrations/metamask.svg" alt="Embed" />
|
||||
<div className="flex-grow truncate pl-2">
|
||||
<ListItemTitle component="h3">
|
||||
MetaMask (
|
||||
<a className="text-blue-500" target="_blank" href="https://cal.com/web3" rel="noreferrer">
|
||||
Read more
|
||||
</a>
|
||||
)
|
||||
</ListItemTitle>
|
||||
<ListItemText component="p">{t("only_book_people_and_allow")}</ListItemText>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
<Web3ConnectBtn />
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
|
|||
ref={props.hideBrandingRef}
|
||||
defaultChecked={isBrandingHidden(props.user)}
|
||||
className={
|
||||
"h-4 w-4 rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-800 disabled:opacity-50"
|
||||
"text-neutral-900 focus:ring-neutral-800 h-4 w-4 rounded-sm border-gray-300 disabled:opacity-50"
|
||||
}
|
||||
onClick={(e) => {
|
||||
if (!e.currentTarget.checked || props.user.plan !== "FREE") {
|
||||
|
|
@ -249,7 +249,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="focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
|
||||
defaultValue={props.user.name || undefined}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -265,7 +265,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="focus:border-neutral-800 focus:ring-neutral-800 mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
|
||||
defaultValue={props.user.email}
|
||||
/>
|
||||
<p className="mt-2 text-sm text-gray-500" id="email-description">
|
||||
|
|
@ -286,7 +286,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
placeholder={t("little_something_about")}
|
||||
rows={3}
|
||||
defaultValue={props.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"></textarea>
|
||||
className="focus:border-neutral-800 focus:ring-neutral-800 mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -303,7 +303,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="focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
|
||||
defaultValue={imageSrc}
|
||||
/>
|
||||
<div className="flex items-center px-5">
|
||||
|
|
@ -339,7 +339,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
value={selectedLanguage || props.localeProp}
|
||||
onChange={(v) => v && setSelectedLanguage(v)}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
|
||||
className="react-select-container focus:border-neutral-800 focus:ring-neutral-800 mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm sm:text-sm"
|
||||
options={localeOptions}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -354,7 +354,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
value={selectedTimeZone}
|
||||
onChange={(v) => v && setSelectedTimeZone(v)}
|
||||
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 focus:border-neutral-800 focus:ring-neutral-800 mt-1 block w-full rounded-sm border border-gray-300 shadow-sm sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -368,7 +368,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
value={selectedTimeFormat || props.user.timeFormat}
|
||||
onChange={(v) => v && setSelectedTimeFormat(v)}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
|
||||
className="react-select-container focus:border-neutral-800 focus:ring-neutral-800 mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm sm:text-sm"
|
||||
options={timeFormatOptions}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -383,7 +383,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
value={selectedWeekStartDay}
|
||||
onChange={(v) => v && setSelectedWeekStartDay(v)}
|
||||
classNamePrefix="react-select"
|
||||
className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
|
||||
className="react-select-container focus:border-neutral-800 focus:ring-neutral-800 mt-1 block w-full rounded-sm border border-gray-300 capitalize shadow-sm sm:text-sm"
|
||||
options={[
|
||||
{ value: "Sunday", label: nameOfDay(props.localeProp, 0) },
|
||||
{ value: "Monday", label: nameOfDay(props.localeProp, 1) },
|
||||
|
|
@ -402,11 +402,11 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
defaultValue={selectedTheme || themeOptions[0]}
|
||||
value={selectedTheme || themeOptions[0]}
|
||||
onChange={(v) => v && setSelectedTheme(v)}
|
||||
className="| { value: string } mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
|
||||
className="| { value: string } focus:border-neutral-800 focus:ring-neutral-800 mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
|
||||
options={themeOptions}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative mt-8 flex items-start">
|
||||
<div className="relative mt-4 flex items-start">
|
||||
<div className="flex h-5 items-center">
|
||||
<input
|
||||
id="theme-adjust-os"
|
||||
|
|
@ -414,7 +414,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
type="checkbox"
|
||||
onChange={(e) => setSelectedTheme(e.target.checked ? undefined : themeOptions[0])}
|
||||
checked={!selectedTheme}
|
||||
className="h-4 w-4 rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-800"
|
||||
className="text-neutral-900 focus:ring-neutral-800 h-4 w-4 rounded-sm border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm ltr:ml-3 rtl:mr-3">
|
||||
|
|
|
|||
Loading…
Reference in New Issue