added cancel button to team creation (#4756)

* added cancel button

* nit

* nit

apps/web/pages/v2/settings/teams/new/[[...step]].tsx

@@ -69,10 +69,9 @@ const CreateNewTeamPage = () => {
       data-testid="onboarding"
       key={router.asPath}>
       <Head>
-        <title>{t("create_new_team")}</title>
+        <title>Create a new Team</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
       <div className="mx-auto px-4 py-24">
         <div className="relative">
           <div className="sm:mx-auto sm:w-full sm:max-w-[600px]">

apps/web/public/static/locales/en/common.json

@@ -1268,5 +1268,6 @@
   "confirm_password_change_email": "Please confirm your password before changing your email address",
   "seats": "seats",
   "every_app_published": "Every app published on the Cal.com App Store is open source and thoroughly tested via peer reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are published by Cal.com. If you encounter inappropriate content or behaviour please report it.",
-  "report_app": "Report app"
+  "report_app": "Report app",
+  "team_name_required": "Team name required"
 }

packages/features/ee/teams/components/v2/CreateNewTeam.tsx

@@ -91,9 +91,15 @@ const CreateANewTeamForm = (props: { nextStep: () => void; setTeamId: (teamId: n
           )}
         />
       </div>
-      <Button type="submit" EndIcon={Icon.FiArrowRight} className="w-full justify-center">
-        {t("continue")}
-      </Button>
+      <div className="flex space-x-2">
+        <Button color="secondary" href="/settings" className="w-full justify-center">
+          {t("cancel")}
+        </Button>
+        <Button color="primary" type="submit" EndIcon={Icon.FiArrowRight} className="w-full justify-center">
+          {t("continue")}
+        </Button>
+      </div>
+
       {createTeamMutation.isError && <p className="mt-4 text-red-700">{createTeamMutation.error.message}</p>}
     </Form>
   );

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

@@ -118,14 +118,12 @@ const SettingsSidebarContainer = ({ className = "" }) => {
       aria-label="Tabs">
       <>
         <div className="desktop-only pt-4" />
-        <div onClick={() => history.back()}>
-          <VerticalTabItem
-            name="Back"
-            href="/."
-            icon={Icon.FiArrowLeft}
-            textClassNames="text-md font-medium leading-none text-black"
-          />
-        </div>
+        <VerticalTabItem
+          name="Back"
+          href="/."
+          icon={Icon.FiArrowLeft}
+          textClassNames="text-md font-medium leading-none text-black"
+        />
         {tabsWithPermissions.map((tab) => {
           return tab.name !== "teams" ? (
             <React.Fragment key={tab.href}>