Replace AdminLayout with SettingsLayout

apps/web/pages/v2/settings/developer/webhooks/new.tsx

@@ -0,0 +1,66 @@
+import { useRouter } from "next/router";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import Meta from "@calcom/ui/v2/core/Meta";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import showToast from "@calcom/ui/v2/core/notifications";
+
+import WebhookForm, { WebhookFormSubmitData } from "@components/v2/settings/webhook/WebhookForm";
+
+const NewWebhookView = () => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const router = useRouter();
+  //   const appId = props.app;
+  const { data: webhooks } = trpc.useQuery(["viewer.webhook.list"], {
+    suspense: true,
+    enabled: router.isReady,
+  });
+
+  const createWebhookMutation = trpc.useMutation("viewer.webhook.create", {
+    async onSuccess() {
+      await utils.invalidateQueries(["viewer.webhook.list"]);
+    },
+    onError(error) {
+      console.log(error);
+    },
+  });
+
+  const subscriberUrlReserved = (subscriberUrl: string, id: string): boolean => {
+    return !!webhooks?.find((webhook) => webhook.subscriberUrl === subscriberUrl && webhook.id !== id);
+  };
+
+  const onCreateWebhook = async (values: WebhookFormSubmitData) => {
+    if (values.id && subscriberUrlReserved(values.subscriberUrl, values.id)) {
+      showToast(t("webhook_subscriber_url_reserved"), "error");
+      return;
+    }
+
+    if (!values.payloadTemplate) {
+      values.payloadTemplate = null;
+    }
+
+    createWebhookMutation.mutate({
+      subscriberUrl: values.subscriberUrl,
+      eventTriggers: values.eventTriggers,
+      active: values.active,
+      payloadTemplate: values.payloadTemplate,
+      secret: values.secret,
+    });
+    showToast(t("webhook_created_successfully"), "success");
+    router.back();
+  };
+
+  return (
+    <>
+      <Meta title="add_webhook" description="add_webhook_description" backButton />
+
+      <WebhookForm onSubmit={onCreateWebhook} />
+    </>
+  );
+};
+
+NewWebhookView.getLayout = getLayout;
+
+export default NewWebhookView;

apps/web/pages/v2/settings/my-account/appearance.tsx

@@ -12,7 +12,7 @@ import Switch from "@calcom/ui/v2/core/Switch";
 import ColorPicker from "@calcom/ui/v2/core/colorpicker";
 import Select from "@calcom/ui/v2/core/form/Select";
 import { Form } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import { getSession } from "@lib/auth";

apps/web/pages/v2/settings/my-account/conferencing.tsx

@@ -10,7 +10,7 @@ import Dropdown, {
   DropdownMenuTrigger,
 } from "@calcom/ui/v2/core/Dropdown";
 import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
 
 import { getSession } from "@lib/auth";

apps/web/pages/v2/settings/my-account/general.tsx

@@ -12,7 +12,7 @@ import Meta from "@calcom/ui/v2/core/Meta";
 import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
 import Select from "@calcom/ui/v2/core/form/Select";
 import { Form, Label } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import { withQuery } from "@lib/QueryCell";

apps/web/pages/v2/settings/my-account/profile.tsx

@@ -17,7 +17,7 @@ import { Button } from "@calcom/ui/v2/core/Button";
 import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { Form, Label, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";

apps/web/pages/v2/settings/security/password.tsx

@@ -8,7 +8,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/v2/core/Button";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 const PasswordView = () => {

apps/web/pages/v2/settings/security/two-factor-auth.tsx

@@ -6,7 +6,7 @@ import Badge from "@calcom/ui/v2/core/Badge";
 import Loader from "@calcom/ui/v2/core/Loader";
 import Meta from "@calcom/ui/v2/core/Meta";
 import Switch from "@calcom/ui/v2/core/Switch";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
 import DisableTwoFactorModal from "@components/v2/settings/DisableTwoFactorModal";
 import EnableTwoFactorModal from "@components/v2/settings/EnableTwoFactorModal";

packages/ui/v2/core/layouts/SettingsLayout.tsx

@@ -153,11 +153,12 @@ export default function SettingsLayout({
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
       <div className="flex flex-1 [&>*]:flex-1">
-        <div className="color-black mt-8 justify-center px-4 sm:px-6 md:px-8 ">
+        <div className="color-black mx-auto mt-8 max-w-4xl justify-center px-4 sm:px-6 md:px-8">
           <ShellHeader />
           {children}
         </div>
       </div>
+      {/* </div> */}
     </Shell>
   );
 }
@@ -168,7 +169,7 @@ function ShellHeader() {
   const { meta } = useMeta();
   const { t, isLocaleReady } = useLocale();
   return (
-    <header className="mx-auto block max-w-4xl justify-between sm:flex md:px-12 md:pt-8">
+    <header className="mx-auto block max-w-4xl justify-between sm:flex md:pt-8">
       <div className="mb-8 w-full border-b border-gray-200 pb-8">
         {meta.title && isLocaleReady ? (
           <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-black">