Move app to apps/web-react in pnpm workspace layout

apps/web-react/app/components/elements/Dialog.module.css

@@ -0,0 +1,100 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 20;
+	overflow: hidden;
+	background-color: rgba(0, 0, 0, 0.25);
+	display: flex;
+	min-height: 100%;
+	align-items: flex-start;
+	justify-content: center;
+	padding: 1rem;
+	text-align: center;
+	backdrop-filter: blur(10px); /* Adjust blur value as needed */
+
+	&[data-entering] {
+		animation: fade-in 300ms ease-out;
+	}
+}
+
+.fullScreenOverlay {
+	padding: 0;
+	display: initial;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.modal {
+	width: 100%;
+	max-width: 28rem;
+	max-height: min(80dvh, calc(var(--visual-viewport-height, 100dvh) - 10rem));
+	overflow-x: hidden;
+	overflow-y: auto;
+	border-radius: 1rem;
+	border: 1px solid var(--color-border);
+	background-color: var(--color-bg);
+	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);
+	margin: auto;
+
+	&[data-entering] {
+		animation: zoom-in-95 300ms ease-out;
+	}
+}
+
+:global(html[data-fuse="true"]) .modal {
+	max-height: min(72dvh, calc(var(--visual-viewport-height, 100dvh) - 10rem));
+}
+
+.fullScreenModal {
+	min-width: 100%;
+	min-height: 100%;
+	border-radius: 0;
+	padding-block-start: calc(env(safe-area-inset-top) + var(--s-6));
+	padding-block-end: var(--s-32);
+}
+
+@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: var(--border-style);
+	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(--font-lg);
+}