get rid of onboarding requirements

app/core/components/missing-twilio-credentials.tsx

@@ -0,0 +1,28 @@
+import { Routes, useRouter } from "blitz";
+import { IoSettings, IoAlertCircleOutline } from "react-icons/io5";
+
+export default function MissingTwilioCredentials() {
+	const router = useRouter();
+
+	return (
+		<div className="text-center my-auto">
+			<IoAlertCircleOutline className="mx-auto h-12 w-12 text-gray-400" aria-hidden="true" />
+			<h3 className="mt-2 text-sm font-medium text-gray-900">You haven&#39;t set up any phone number yet</h3>
+			<p className="mt-1 text-sm text-gray-500">
+				Head over to your settings
+				<br />
+				to set up your phone number.
+			</p>
+			<div className="mt-6">
+				<button
+					type="button"
+					className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
+					onClick={() => router.push(Routes.PhoneSettings())}
+				>
+					<IoSettings className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+					Set up my phone number
+				</button>
+			</div>
+		</div>
+	);
+}

app/core/components/modal.tsx

@@ -0,0 +1,61 @@
+import type { FunctionComponent, MutableRefObject } from "react";
+import { Fragment } from "react";
+import { Transition, Dialog } from "@headlessui/react";
+
+type Props = {
+	initialFocus?: MutableRefObject<HTMLElement | null> | undefined;
+	isOpen: boolean;
+	onClose: () => void;
+};
+
+const Modal: FunctionComponent<Props> = ({ children, initialFocus, isOpen, onClose }) => {
+	return (
+		<Transition.Root show={isOpen} as={Fragment}>
+			<Dialog
+				className="fixed z-30 inset-0 overflow-y-auto"
+				initialFocus={initialFocus}
+				onClose={onClose}
+				open={isOpen}
+				static
+			>
+				<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center md:block md:p-0">
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+					</Transition.Child>
+
+					{/* This element is to trick the browser into centering the modal contents. */}
+					<span className="hidden md:inline-block md:align-middle md:h-screen">&#8203;</span>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
+						enterTo="opacity-100 translate-y-0 md:scale-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100 translate-y-0 md:scale-100"
+						leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
+					>
+						<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all md:my-8 md:align-middle md:max-w-lg md:w-full md:p-6">
+							{children}
+						</div>
+					</Transition.Child>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+};
+
+export const ModalTitle: FunctionComponent = ({ children }) => (
+	<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+		{children}
+	</Dialog.Title>
+);
+
+export default Modal;

app/core/components/page-title.tsx

@@ -0,0 +1,17 @@
+import type { FunctionComponent } from "react";
+import clsx from "clsx";
+
+type Props = {
+	className?: string;
+	title: string;
+};
+
+const PageTitle: FunctionComponent<Props> = ({ className, title }) => {
+	return (
+		<div className={clsx(className, "flex flex-col space-y-6 p-3")}>
+			<h2 className="text-3xl font-bold">{title}</h2>
+		</div>
+	);
+};
+
+export default PageTitle;