public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed padding of settings and integrations page

fix/padding-settings
Peer Richelsen 2022-03-01 14:38:40 +00:00
parent 9851c8f526
commit f858cb4882
4 changed files with 95 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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")} />}
/> />
)} )}

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

@ -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,8 +403,7 @@ 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")}>
@ -413,7 +412,7 @@ function IframeEmbedContainer() {
<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>
<div> <div className="text-right">
<input <input
id="iframe" id="iframe"
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black" className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
@ -438,7 +437,7 @@ function IframeEmbedContainer() {
<ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle> <ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle>
<ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText> <ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText>
</div> </div>
<div> <div className="text-right">
<input <input
id="fullscreen" id="fullscreen"
className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black" className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
@ -467,7 +466,6 @@ function IframeEmbedContainer() {
<div className="mt-1"></div> <div className="mt-1"></div>
</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,7 +575,6 @@ 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")}>
@ -597,7 +593,6 @@ function Web3Container() {
</div> </div>
</ListItem> </ListItem>
</List> </List>
</div>
</> </>
); );
} }

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

@ -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">