New user search & dialog (#2270)

* From scrims

* wip

* wip

* wip

* wip

* WIP

* wip

* wip

* wip

* wip

* wip

* import ordering

app/features/team/routes/t.tsx

@@ -1,21 +1,14 @@
 import type { MetaFunction } from "@remix-run/node";
-import {
-	Form,
-	Link,
-	useLoaderData,
-	useNavigate,
-	useSearchParams,
-} from "@remix-run/react";
+import { Form, Link, useLoaderData, useSearchParams } from "@remix-run/react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Alert } from "~/components/Alert";
-import { Button } from "~/components/Button";
-import { Dialog } from "~/components/Dialog";
 import { FormErrors } from "~/components/FormErrors";
 import { Input } from "~/components/Input";
 import { Main } from "~/components/Main";
 import { Pagination } from "~/components/Pagination";
 import { SubmitButton } from "~/components/SubmitButton";
+import { SendouDialog } from "~/components/elements/Dialog";
 import { SearchIcon } from "~/components/icons/Search";
 import { useUser } from "~/features/auth/core/user";
 import { usePagination } from "~/hooks/usePagination";
@@ -157,7 +150,6 @@ export default function TeamSearchPage() {
 
 function NewTeamDialog() {
 	const { t } = useTranslation(["common", "team"]);
-	const navigate = useNavigate();
 	const [searchParams] = useSearchParams();
 	const user = useUser();
 	const isSupporter = useHasRole("SUPPORTER");
@@ -165,8 +157,6 @@ function NewTeamDialog() {
 
 	const isOpen = searchParams.get("new") === "true";
 
-	const close = () => navigate(TEAM_SEARCH_PAGE);
-
 	const canAddNewTeam = () => {
 		if (!user) return false;
 		if (isSupporter) {
@@ -186,10 +176,13 @@ function NewTeamDialog() {
 	}
 
 	return (
-		<Dialog isOpen={isOpen} close={close} className="text-center">
+		<SendouDialog
+			heading={t("team:newTeam.header")}
+			isOpen={isOpen}
+			onCloseTo={TEAM_SEARCH_PAGE}
+		>
 			<Form method="post" className="stack md">
-				<h2 className="text-sm">{t("team:newTeam.header")}</h2>
-				<div className="team-search__form-input-container">
+				<div className="">
 					<label htmlFor="name">{t("common:forms.name")}</label>
 					<input
 						id="name"
@@ -201,13 +194,10 @@ function NewTeamDialog() {
 					/>
 				</div>
 				<FormErrors namespace="team" />
-				<div className="stack horizontal md justify-center mt-4">
+				<div className="mt-2">
 					<SubmitButton>{t("common:actions.create")}</SubmitButton>
-					<Button variant="destructive" onClick={close}>
-						{t("common:actions.cancel")}
-					</Button>
 				</div>
 			</Form>
-		</Dialog>
+		</SendouDialog>
 	);
 }

app/features/team/team.css

@@ -38,11 +38,6 @@
 	background-color: var(--theme-transparent);
 }
 
-.team-search__form-input-container {
-	text-align: left;
-	margin: 0 auto;
-}
-
 .team__banner {
 	background-image: linear-gradient(
 			to bottom,