♻️ refactor: create project layout and restyling it

packages/frontend/src/pages/org-slug/projects/Create.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Outlet, Link, useParams } from 'react-router-dom';
-
-import { IconButton } from '@material-tailwind/react';
-
-import HorizontalLine from '../../../components/HorizontalLine';
-
-const CreateProject = () => {
-  const { orgSlug } = useParams();
-  return (
-    <div className="h-full">
-      <div className="flex p-4 items-center">
-        <div className="grow">
-          <h3 className="text-gray-750 text-2xl">Create new project</h3>
-        </div>
-        <div>
-          <Link to={`/${orgSlug}`}>
-            <IconButton
-              className="rounded-full"
-              variant="outlined"
-              placeholder={''}
-            >
-              X
-            </IconButton>
-          </Link>
-        </div>
-      </div>
-      <HorizontalLine />
-      <Outlet />
-    </div>
-  );
-};
-
-export default CreateProject;

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

@@ -0,0 +1,39 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { Link, Outlet, useParams } from 'react-router-dom';
+
+import { Heading } from 'components/shared/Heading';
+import { WavyBorder } from 'components/shared/WavyBorder';
+import { Button } from 'components/shared/Button';
+import { CrossIcon } from 'components/shared/CustomIcon';
+import { cn } from 'utils/classnames';
+
+export interface CreateProjectLayoutProps
+  extends ComponentPropsWithoutRef<'section'> {}
+
+export const CreateProjectLayout = ({
+  className,
+  ...props
+}: CreateProjectLayoutProps) => {
+  const { orgSlug } = useParams();
+
+  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 className="flex-1 text-[24px] font-medium">
+            Create new project
+          </Heading>
+          <Link to={`/${orgSlug}`}>
+            <Button iconOnly variant="tertiary">
+              <CrossIcon />
+            </Button>
+          </Link>
+        </div>
+        <WavyBorder type="layout" />
+      </div>
+      <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
+        <Outlet />
+      </section>
+    </section>
+  );
+};

packages/frontend/src/pages/org-slug/projects/routes.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
-import CreateProject from './Create';
 import Id from './Id';
 import AddDomain from './id/settings/domains/add';
 import { createProjectRoutes } from './create/routes';
 import { projectTabRoutes } from './id/routes';
 import { addDomainRoutes } from './id/settings/domains/add/routes';
+import { CreateProjectLayout } from './create/layout';
 
 export const projectsRoutesWithoutSearch = [
   {
     path: 'create',
-    element: <CreateProject />,
+    element: <CreateProjectLayout />,
     children: createProjectRoutes,
   },
   {