Merge branch 'main' into renaming-integrations

components/Settings.tsx

@@ -35,7 +35,7 @@ export default function SettingsShell(props) {
   ];
 
   return (
-    <div className="max-w-6xl">
+    <div>
       <div className="sm:mx-auto">
         <nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
           {tabs.map((tab) => (
@@ -60,8 +60,9 @@ export default function SettingsShell(props) {
             </Link>
           ))}
         </nav>
+        <hr />
       </div>
-      <main>{props.children}</main>
+      <main className="max-w-4xl">{props.children}</main>
     </div>
   );
 }

components/Shell.tsx

@@ -20,6 +20,7 @@ import classNames from "@lib/classNames";
 
 export default function Shell(props) {
   const router = useRouter();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
   const telemetry = useTelemetry();
 
@@ -71,7 +72,7 @@ export default function Shell(props) {
       <div className="h-screen flex overflow-hidden bg-gray-100">
         {/* Static sidebar for desktop */}
         <div className="hidden md:flex md:flex-shrink-0">
-          <div className="flex flex-col w-64">
+          <div className="flex flex-col w-56">
             {/* Sidebar component, swap this element with another sidebar if you like */}
             <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
               <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
@@ -105,7 +106,7 @@ export default function Shell(props) {
                   ))}
                 </nav>
               </div>
-              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
+              <div className="flex-shrink-0 flex p-4">
                 <UserDropdown session={session} />
               </div>
             </div>
@@ -135,10 +136,10 @@ export default function Shell(props) {
                 </div>
               </div>
             </nav>
-            <div className="py-6">
+            <div className="py-8">
               <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
-                <div className="mb-6">
-                  <h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
+                <div className="mb-8">
+                  <h1 className="text-xl font-bold text-gray-900">{props.heading}</h1>
                   <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
                 </div>
                 <div className="mb-4 flex-shrink-0">{props.CTA}</div>

components/ui/Scheduler.tsx

@@ -91,7 +91,7 @@ export const Scheduler = ({
         type="button"
         onClick={() => removeScheduleAt(idx)}
         className="btn-sm bg-transparent px-2 py-1 ml-1">
-        <TrashIcon className="h-6 w-6 inline text-gray-400 -mt-1" />
+        <TrashIcon className="h-5 w-5 inline text-gray-400 -mt-1" />
       </button>
     </li>
   );