New user search & dialog (#2270)

* From scrims

* wip

* wip

* wip

* wip

* WIP

* wip

* wip

* wip

* wip

* wip

* import ordering

app/components/elements/Dialog.module.css

@@ -0,0 +1,90 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 10;
+	overflow-y: auto;
+	background-color: rgba(0, 0, 0, 0.25);
+	display: flex;
+	min-height: 100%;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	text-align: center;
+	backdrop-filter: blur(10px); /* Adjust blur value as needed */
+}
+
+.fullScreenOverlay {
+	padding: 0;
+	display: initial;
+}
+
+.overlay[data-entering] {
+	animation: fade-in 300ms ease-out;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.modal {
+	width: 100%;
+	max-width: 28rem;
+	overflow: hidden;
+	border-radius: 1rem;
+	background-color: var(--bg-lighter-solid);
+	border: 2.5px solid var(--border);
+	padding: var(--s-6);
+	text-align: left;
+	vertical-align: middle;
+	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px
+		rgba(0, 0, 0, 0.05);
+}
+
+.fullScreenModal {
+	min-width: 100vw;
+	min-height: 100vh;
+	border-radius: 0;
+}
+
+.modal[data-entering] {
+	animation: zoom-in-95 300ms ease-out;
+}
+
+@keyframes zoom-in-95 {
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+.dialog {
+	outline: none;
+	position: relative;
+}
+
+.headingContainer {
+	border-bottom: 2px solid var(--border);
+	padding-block-end: var(--s-2);
+	margin-block-end: var(--s-4);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-block-start: -3px;
+}
+
+.noHeading {
+	margin-block-start: -14px;
+}
+
+.heading {
+	font-size: var(--fonts-lg);
+}