From f858cb488261ee52ec60f3c8764a47e032426530 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Tue, 1 Mar 2022 14:38:40 +0000
Subject: [PATCH] fixed padding of settings and integrations page

---
 apps/web/components/Shell.tsx                 |  14 +-
 .../integrations/CalendarListContainer.tsx    |   2 -
 apps/web/pages/integrations/index.tsx         | 157 +++++++++---------
 apps/web/pages/settings/profile.tsx           |  24 +--
 4 files changed, 95 insertions(+), 102 deletions(-)

diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index 75fa88c70b..c0d468c786 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -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>
diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx
index e880ef7d94..3af983e7b0 100644
--- a/apps/web/components/integrations/CalendarListContainer.tsx
+++ b/apps/web/components/integrations/CalendarListContainer.tsx
@@ -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")} />}
         />
       )}
diff --git a/apps/web/pages/integrations/index.tsx b/apps/web/pages/integrations/index.tsx
index c90deea2ed..1e4b3879b8 100644
--- a/apps/web/pages/integrations/index.tsx
+++ b/apps/web/pages/integrations/index.tsx
@@ -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>
     </>
   );
 }
diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx
index 1a9f4b1bfc..bd21ce106a 100644
--- a/apps/web/pages/settings/profile.tsx
+++ b/apps/web/pages/settings/profile.tsx
@@ -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">