[T-4933] Create Project - Mobile modal layout (#151)

* feat: create project mobile modal layout

* style: make dialog content stretch full height

packages/frontend/package.json

@@ -8,6 +8,7 @@
     "@material-tailwind/react": "^2.1.7",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-switch": "^1.0.3",

packages/frontend/src/pages/org-slug/projects/create/layout.tsx

@@ -6,6 +6,7 @@ import { WavyBorder } from 'components/shared/WavyBorder';
 import { Button } from 'components/shared/Button';
 import { CrossIcon } from 'components/shared/CustomIcon';
 import { cn } from 'utils/classnames';
+import * as Dialog from '@radix-ui/react-dialog';
 
 export interface CreateProjectLayoutProps
   extends ComponentPropsWithoutRef<'section'> {}
@@ -16,24 +17,77 @@ export const CreateProjectLayout = ({
 }: CreateProjectLayoutProps) => {
   const { orgSlug } = useParams();
 
+  const closeBtnLink = `/${orgSlug}`;
+
+  const heading = (
+    <Heading as="h2" className="flex-1 text-xl md:text-2xl font-medium">
+      Create new project
+    </Heading>
+  );
+
   return (
-    <section {...props} className={cn('h-full flex flex-col', className)}>
-      <div className="sticky top-0">
-        <div className="flex px-6 py-4 bg-base-bg items-center gap-4">
-          <Heading as="h2" className="flex-1 text-[24px] font-medium">
-            Create new project
-          </Heading>
-          <Link to={`/${orgSlug}`}>
-            <Button iconOnly variant="tertiary">
-              <CrossIcon size={18} />
-            </Button>
-          </Link>
+    <>
+      {/* Desktop */}
+      <section
+        {...props}
+        className={cn('h-full flex-col hidden md:flex', className)}
+      >
+        <div className="sticky top-0">
+          <div className="flex px-6 py-4 bg-base-bg items-center gap-4">
+            {heading}
+
+            {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
+            <Link to={closeBtnLink}>
+              <Button
+                iconOnly
+                variant="tertiary"
+                leftIcon={<CrossIcon />}
+                aria-label="close"
+              />
+            </Link>
+          </div>
+          <WavyBorder />
         </div>
-        <WavyBorder />
-      </div>
-      <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
-        <Outlet />
+
+        <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
+          <Outlet />
+        </section>
       </section>
-    </section>
+
+      {/* Mobile */}
+      {/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */}
+      <Dialog.Root modal={false} open={true}>
+        <Dialog.Portal>
+          {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
+          <div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
+            <Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
+              {/* Heading */}
+              <div className="flex px-6 py-4 h-20 items-center gap-4">
+                {heading}
+                <Dialog.Close asChild>
+                  <Link to={closeBtnLink}>
+                    <Button
+                      iconOnly
+                      variant="tertiary"
+                      leftIcon={<CrossIcon />}
+                      aria-label="close"
+                      size="sm"
+                    />
+                  </Link>
+                </Dialog.Close>
+              </div>
+
+              {/* Border */}
+              <WavyBorder />
+
+              {/* Page content */}
+              <div className="px-4 py-6">
+                <Outlet />
+              </div>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </>
   );
 };

packages/frontend/tailwind.config.js

@@ -87,6 +87,7 @@ export default withMT({
           900: '#0a3a5c',
         },
         base: {
+          canvas: '#ECF6FE',
           bg: '#ffffff',
           'bg-alternate': '#f8fafc',
           'bg-emphasized': '#f1f5f9',

yarn.lock

@@ -3786,6 +3786,27 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-dialog@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
+  integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-direction@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"