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