Improved create new project screen with browser frame

apps/demo/src/app/layout.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { Metadata } from "next";
 import { StackProvider } from "@stackframe/stack";
 import { stackServerApp } from "src/stack";

packages/stack-server/src/app/(main)/(protected)/(outside-dashbaord)/new-project/page-client.tsx

@@ -2,8 +2,6 @@
 import { AuthPage, useUser } from "@stackframe/stack";
 import * as yup from "yup";
 import { Separator } from "@/components/ui/separator";
-import { Card } from "@/components/ui/card";
-import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Form } from "@/components/ui/form";
 import { InputField, SwitchListField } from "@/components/form-fields";
@@ -13,6 +11,8 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import Typography from "@/components/ui/typography";
 import { toSharedProvider } from "@stackframe/stack-shared/dist/interface/clientInterface";
+import { BrowserFrame } from "@/components/browser-frame";
+import { useForm } from "react-hook-form";
 
 export const projectFormSchema = yup.object({
   displayName: yup.string().min(1, "Project name is required").required(),
@@ -106,18 +106,20 @@ export default function PageClient () {
       </div>
       <Separator orientation="vertical" />
 
-      <div className="w-1/2 self-stretch p-4 bg-zinc-300 dark:bg-zinc-800 hidden md:flex">
+      <div className="w-1/2 self-stretch py-4 px-4 lg:px-20 bg-zinc-300 dark:bg-zinc-800 hidden md:flex items-center">
         {mockProject ? 
           (
-            <div className='w-full sm:max-w-sm m-auto scale-90' inert=''>
-              {/* a transparent cover that prevents the card being clicked */}
-              <div className="absolute inset-0 bg-transparent z-10"></div>
-              <Card className="p-6">
-                <AuthPage 
-                  type="sign-in" 
-                  mockProject={mockProject} 
-                />
-              </Card>
+            <div className="w-full">
+              <BrowserFrame url="your-website.com/handler/signin">
+                <div className='w-full sm:max-w-xs m-auto scale-90' inert=''>
+                  {/* a transparent cover that prevents the card being clicked */}
+                  <div className="absolute inset-0 bg-transparent z-10"></div>
+                  <AuthPage 
+                    type="sign-in" 
+                    mockProject={mockProject} 
+                  />
+                </div>
+              </BrowserFrame>
             </div>
           ): null}
       </div> 

packages/stack-server/src/app/(main)/(protected)/(outside-dashbaord)/new-project/page.tsx

@@ -1,5 +1,9 @@
 import PageClient from "./page-client";
 
+export const metadata = {
+  title: "New Project",
+};
+
 export default function Page () {
   return <PageClient />;
 }

packages/stack-server/src/app/(main)/(protected)/(outside-dashbaord)/projects/page.tsx

@@ -3,6 +3,10 @@ import Footer from "./footer";
 import { stackServerApp } from "@/stack";
 import { redirect } from "next/navigation";
 
+export const metadata = {
+  title: "Projects",
+};
+
 export default async function Page() {
   const user = await stackServerApp.getUser();
   if (!user) {
@@ -15,9 +19,7 @@ export default async function Page() {
   
   return (
     <>
-      <div className="flex-grow p-4">
-        <PageClient />
-      </div>
+      <PageClient />
       <Footer />
     </>
   );

packages/stack-server/src/components/browser-frame/LICENSE

@@ -0,0 +1,3 @@
+This folder contains code modified from react-browser-frame by liamjohnston. The original code is under the MIT license and can be found at https://github.com/liamjohnston/react-browser-frame
+
+MIT © liamjohnston

packages/stack-server/src/components/browser-frame/index.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+export type Props = {
+  url?: string,
+  padding?: string,
+  children: React.ReactNode,
+};
+
+export const BrowserFrame = ({ url, padding, children }: Props) => (
+  <div className="rounded-xl overflow-hidden shadow-2xl">
+    <div className="bg-gray-200 dark:bg-gray-800 h-10 flex items-center py-2 px-4 box-border">
+      <div className="w-3 h-3 bg-red-500 rounded-full mr-1.5 flex-shrink-0" />
+      <div className="w-3 h-3 bg-yellow-500 rounded-full mr-1.5 flex-shrink-0" />
+      <div className="w-3 h-3 bg-green-500 rounded-full mr-2 flex-shrink-0" />
+      {url && (
+        <div
+          className="text-left bg-white dark:bg-gray-700 h-6 rounded-full leading-6 text-sm text-gray-700 dark:text-gray-300 flex-grow ml-2 mr-4 px-4 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          aria-hidden
+        >
+          {url}
+        </div>
+      )}
+      <div className="w-4 h-4 ml-auto flex flex-col justify-evenly items-stretch flex-shrink-0">
+        <span className="h-0.5 bg-gray-400 dark:bg-gray-500" />
+        <span className="h-0.5 bg-gray-400 dark:bg-gray-500" />
+        <span className="h-0.5 bg-gray-400 dark:bg-gray-500" />
+      </div>
+    </div>
+    <div className={`p-4 bg-white dark:bg-black rounded-b-md ${padding ? padding : ""}`}>
+      {children}
+    </div>
+  </div>
+);