Reworked Stack Auth demo (#624)

![image](https://github.com/user-attachments/assets/453c4ea5-9649-4a34-94b1-15f6c8bcecde)

<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Reworked Stack Auth demo with UI enhancements and code refactoring for
improved user experience and maintainability.
> 
>   - **UI Enhancements**:
> - Updated `global.css` to change background colors for light and dark
themes.
> - Added `Image` components in `page-client.tsx` and `header.tsx` for
visual elements.
> - Refactored `page-client.tsx` to use `Card`, `CardContent`,
`CardFooter`, and `CardHeader` for user information display.
>   - **Code Refactoring**:
> - Removed `stack-scope` class from `SelectTrigger` in `select.tsx`.
> - Updated button layout and text in `page-client.tsx` for
sign-in/sign-up and user information.
> - Enhanced header layout in `header.tsx` with logo and theme toggle
improvements.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for c7a9f30371. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

examples/demo/src/app/global.css

@@ -4,12 +4,12 @@
 
 
 :root {
-  --background: white;
+  --background: rgb(240, 240, 240);
   --foreground: black;
 }
 
 html:has(head > [data-stack-theme="dark"]) {
-  --background: black;
+  --background: rgb(16, 16, 18);
   --foreground: white;
 }
 

examples/demo/src/app/page-client.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { useStackApp, useUser } from '@stackframe/stack';
-import { Button, Typography } from '@stackframe/stack-ui';
+import { UserAvatar, useStackApp, useUser } from '@stackframe/stack';
+import { Button, buttonVariants, Card, CardContent, CardFooter, CardHeader, Typography } from '@stackframe/stack-ui';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+
 export default function PageClient() {
   const user = useUser();
   const router = useRouter();
@@ -12,10 +14,11 @@ export default function PageClient() {
 
   const authButtons = (
     <div className='flex flex-col gap-5 justify-center items-center'>
+      <Image src="/images/wave.png" alt="Wave" width={100} height={100} />
       <Typography type='h3'>Welcome to the Stack demo app!</Typography>
-      <Typography>You can click on the buttons below to see the sign-in/sign-up pages you get out of the box.</Typography>
+      <Typography>Try signing in/up with the buttons below!</Typography>
       <Typography>Also feel free to check out the things on the top right corner.</Typography>
-      <div className='flex gap-5'>
+      <div className='flex gap-2'>
         <Button onClick={() => router.push(app.urls.signIn)}>Sign In</Button>
         <Button onClick={() => router.push(app.urls.signUp)}>Sign Up</Button>
       </div>
@@ -26,12 +29,45 @@ export default function PageClient() {
     <div className='flex flex-col items-center justify-center h-full w-full gap-10'>
       {user ? (
         <div className='flex flex-col gap-5 justify-center items-center'>
-          <Typography type='h3'>Logged in as: <span className='font-bold'>{user.displayName ?? user.primaryEmail}</span></Typography>
-          <Typography>Click on your user&apos;s image at the top right to see your account settings.</Typography>
-          <Typography>Like what you see? <Link href="https://app.stack-auth.com">Create your own project</Link> on our dashboard.</Typography>
-          <Link href={app.urls.signOut}>
-            Sign Out
-          </Link>
+          <Card>
+            <CardHeader>
+              <div className='flex gap-6 items-center'>
+                <UserAvatar user={user} size={100} />
+                <div>
+                  <Typography className='text-sm'>logged in as</Typography>
+                  <Typography className='text-2xl font-semibold'>{user.displayName ?? user.primaryEmail}</Typography>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <Typography>Click on your user&apos;s image at the top right to see your account settings.</Typography>
+              <div className="mt-4 space-y-2">
+                <Typography className="font-medium">User Information:</Typography>
+                <div className="flex flex-col gap-2 text-sm">
+                  <div className="flex">
+                    <div className="w-32 font-semibold">User ID:</div>
+                    <div className="font-mono">{user.id}</div>
+                  </div>
+                  {user.primaryEmail && (
+                    <div className="flex">
+                      <div className="w-32 font-semibold">Email:</div>
+                      <div>{user.primaryEmail}</div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <div className='flex gap-2'>
+                <Link href="https://app.stack-auth.com" className={buttonVariants()}>
+                  Visit Stack Auth
+                </Link>
+                <Link href={app.urls.signOut} className={buttonVariants({ variant: 'destructive' })}>
+                  Sign Out
+                </Link>
+              </div>
+            </CardFooter>
+          </Card>
         </div>
       ) : authButtons}
     </div>

examples/demo/src/components/header.tsx

@@ -2,17 +2,24 @@
 
 import { UserButton } from "@stackframe/stack";
 import { useTheme } from "next-themes";
+import Image from "next/image";
 import Link from "next/link";
 
 export default function Header() {
   const { theme, setTheme } = useTheme();
-
   return (
     <>
-      <div className="fixed w-full z-50 p-4 h-12 flex items-center py-4 border-b justify-between bg-white dark:bg-black">
+      <div className="fixed w-full z-50 p-4 h-12 flex items-center py-4 border-b justify-between bg-white dark:bg-black dark:border-gray-800">
         <div className="flex items-center gap-4">
-          <Link href="/" className="font-semibold">
-            Stack Demo
+          <Link href="/" className="font-semibold flex items-center gap-2">
+            <Image
+              src="/logo.svg"
+              alt="Stack Auth Logo"
+              width={64}
+              height={64}
+              className="dark:invert"
+            />
+            Demo
           </Link>
           <Link href="/apikey-demo" className="text-sm hover:text-gray-600 dark:hover:text-gray-300">
             API Key Demo

packages/stack-ui/src/components/ui/select.tsx

@@ -25,7 +25,7 @@ const SelectTrigger = forwardRefIfNeeded<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "stack-scope flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       loading && "cursor-wait",
       className
     )}