styling for invitation pages

Author: waleedlatif1

apps/sim/app/api/workspaces/invitations/[invitationId]/route.test.ts

@@ -221,7 +221,7 @@ describe('Workspace Invitation [invitationId] API Route', () => {
 
       expect(response.status).toBe(307)
       expect(response.headers.get('location')).toBe(
-        'https://test.sim.ai/invite/token-abc123?error=expired'
+        'https://test.sim.ai/invite/invitation-789?error=expired'
       )
     })
 
@@ -245,7 +245,7 @@ describe('Workspace Invitation [invitationId] API Route', () => {
 
       expect(response.status).toBe(307)
       expect(response.headers.get('location')).toBe(
-        'https://test.sim.ai/invite/token-abc123?error=email-mismatch'
+        'https://test.sim.ai/invite/invitation-789?error=email-mismatch'
       )
     })
   })

apps/sim/app/invite/components/layout.tsx

@@ -2,6 +2,7 @@
 
 import Image from 'next/image'
 import { useBrandConfig } from '@/lib/branding/branding'
+import { GridPattern } from '@/app/(landing)/components/grid-pattern'
 
 interface InviteLayoutProps {
   children: React.ReactNode
@@ -11,26 +12,45 @@ export function InviteLayout({ children }: InviteLayoutProps) {
   const brandConfig = useBrandConfig()
 
   return (
-    <div className='flex min-h-screen flex-col items-center justify-center bg-white px-4 dark:bg-black'>
-      <div className='mb-8'>
-        <Image
-          src={brandConfig.logoUrl || '/logo/b&w/medium.png'}
-          alt='Sim Logo'
-          width={120}
-          height={67}
-          className='dark:invert'
-          priority
-        />
-      </div>
+    <main className='dark relative flex min-h-screen flex-col bg-[var(--brand-background-hex)] font-geist-sans text-white'>
+      {/* Background pattern */}
+      <GridPattern
+        x={-5}
+        y={-5}
+        className='absolute inset-0 z-0 stroke-[#ababab]/5'
+        width={90}
+        height={90}
+        aria-hidden='true'
+      />
 
-      {children}
+      {/* Content */}
+      <div className='relative z-10 flex flex-1 items-center justify-center px-4 pb-6'>
+        <div className='w-full max-w-md'>
+          <div className='mb-8 text-center'>
+            <Image
+              src={brandConfig.logoUrl || '/logo/primary/text/medium.png'}
+              alt='Sim Logo'
+              width={140}
+              height={42}
+              priority
+              className='mx-auto'
+            />
+          </div>
+          <div className='rounded-xl border border-neutral-700/40 bg-neutral-800/50 p-6 backdrop-blur-sm'>
+            {children}
+          </div>
 
-      <footer className='mt-8 text-center text-gray-500 text-xs'>
-        Need help?{' '}
-        <a href='mailto:help@sim.ai' className='text-blue-400 hover:text-blue-300'>
-          Contact support
-        </a>
-      </footer>
-    </div>
+          <div className='mt-6 text-center text-neutral-500/80 text-xs leading-relaxed'>
+            Need help?{' '}
+            <a
+              href={`mailto:${brandConfig.supportEmail}`}
+              className='text-[var(--brand-accent-hex)] underline-offset-4 transition hover:text-[var(--brand-accent-hover-hex)] hover:underline'
+            >
+              Contact support
+            </a>
+          </div>
+        </div>
+      </div>
+    </main>
   )
 }

apps/sim/app/invite/components/status-card.tsx

@@ -29,17 +29,17 @@ const iconMap = {
 }
 
 const iconColorMap = {
-  userPlus: 'text-blue-500 dark:text-blue-400',
-  mail: 'text-blue-500 dark:text-blue-400',
-  users: 'text-blue-500 dark:text-blue-400',
+  userPlus: 'text-[#701ffc]',
+  mail: 'text-[#701ffc]',
+  users: 'text-[#701ffc]',
   error: 'text-red-500 dark:text-red-400',
   success: 'text-green-500 dark:text-green-400',
 }
 
 const iconBgMap = {
-  userPlus: 'bg-blue-50 dark:bg-blue-950/20',
-  mail: 'bg-blue-50 dark:bg-blue-950/20',
-  users: 'bg-blue-50 dark:bg-blue-950/20',
+  userPlus: 'bg-[#701ffc]/10',
+  mail: 'bg-[#701ffc]/10',
+  users: 'bg-[#701ffc]/10',
   error: 'bg-red-50 dark:bg-red-950/20',
   success: 'bg-green-50 dark:bg-green-950/20',
 }
@@ -58,7 +58,7 @@ export function InviteStatusCard({
     return (
       <div className='flex w-full max-w-md flex-col items-center'>
         <LoadingAgent size='lg' />
-        <p className='mt-4 text-gray-400 text-sm'>{description}</p>
+        <p className='mt-4 text-muted-foreground text-sm'>{description}</p>
       </div>
     )
   }
@@ -75,15 +75,15 @@ export function InviteStatusCard({
         </div>
       )}
 
-      <h1 className='mb-2 font-semibold text-black text-xl dark:text-white'>{title}</h1>
+      <h1 className='mb-2 font-semibold text-[32px] text-white tracking-tight'>{title}</h1>
 
-      <p className='mb-6 text-gray-600 text-sm leading-relaxed dark:text-gray-300'>{description}</p>
+      <p className='mb-6 text-neutral-400 text-sm leading-relaxed'>{description}</p>
 
       <div className='flex w-full flex-col gap-3'>
         {isExpiredError && (
           <Button
             variant='outline'
-            className='w-full border-brand-primary text-brand-primary hover:bg-brand-primary hover:text-white'
+            className='h-11 w-full border-[var(--brand-primary-hex)] font-medium text-[var(--brand-primary-hex)] text-base transition-colors duration-200 hover:bg-[var(--brand-primary-hex)] hover:text-white'
             onClick={() => router.push('/')}
           >
             <RotateCcw className='mr-2 h-4 w-4' />
@@ -96,16 +96,11 @@ export function InviteStatusCard({
             key={index}
             variant={action.variant || 'default'}
             className={
-              action.variant === 'default'
-                ? 'w-full'
+              (action.variant || 'default') === 'default'
+                ? 'h-11 w-full bg-brand-primary font-medium text-base text-white shadow-[var(--brand-primary-hex)]/20 shadow-lg transition-colors duration-200 hover:bg-brand-primary-hover'
                 : action.variant === 'outline'
-                  ? 'w-full border-brand-primary text-brand-primary hover:bg-brand-primary hover:text-white'
-                  : 'w-full text-gray-600 hover:bg-gray-200 hover:text-black dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'
-            }
-            style={
-              action.variant === 'default'
-                ? { backgroundColor: 'var(--brand-primary-hex)', color: 'white' }
-                : undefined
+                  ? 'h-11 w-full border-[var(--brand-primary-hex)] font-medium text-[var(--brand-primary-hex)] text-base transition-colors duration-200 hover:bg-[var(--brand-primary-hex)] hover:text-white'
+                  : 'h-11 w-full text-muted-foreground hover:bg-secondary hover:text-foreground'
             }
             onClick={action.onClick}
             disabled={action.disabled || action.loading}