feat(generic): add generic resource tab, refactor home structure, and UI polish

apps/sim/app/(auth)/components/auth-button-classes.ts

@@ -0,0 +1,3 @@
+/** Shared className for primary auth form submit buttons across all auth pages. */
+export const AUTH_SUBMIT_BTN =
+  'inline-flex h-[32px] w-full items-center justify-center gap-2 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-black text-sm transition-colors hover:border-[var(--border-1)] hover:bg-[var(--border-1)] disabled:cursor-not-allowed disabled:opacity-50' as const

apps/sim/app/(auth)/components/sso-login-button.tsx

@@ -4,23 +4,18 @@ import { useRouter } from 'next/navigation'
 import { Button } from '@/components/emcn'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { cn } from '@/lib/core/utils/cn'
+import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 
 interface SSOLoginButtonProps {
   callbackURL?: string
   className?: string
-  // Visual variant for button styling and placement contexts
-  // - 'primary' matches the main auth action button style
-  // - 'outline' matches social provider buttons
   variant?: 'primary' | 'outline'
-  // Optional class used when variant is primary to match brand/gradient
-  primaryClassName?: string
 }
 
 export function SSOLoginButton({
   callbackURL,
   className,
   variant = 'outline',
-  primaryClassName,
 }: SSOLoginButtonProps) {
   const router = useRouter()
 
@@ -33,19 +28,14 @@ export function SSOLoginButton({
     router.push(ssoUrl)
   }
 
-  const primaryBtnClasses = cn(
-    primaryClassName || 'branded-button-gradient',
-    'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-base text-white transition-all duration-200'
-  )
-
   const outlineBtnClasses = cn('w-full rounded-[10px]')
 
   return (
     <Button
       type='button'
       onClick={handleSSOClick}
       variant={variant === 'outline' ? 'outline' : undefined}
-      className={cn(variant === 'outline' ? outlineBtnClasses : primaryBtnClasses, className)}
+      className={cn(variant === 'outline' ? outlineBtnClasses : AUTH_SUBMIT_BTN, className)}
     >
       Sign in with SSO
     </Button>

apps/sim/app/(auth)/login/login-form.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import {
@@ -20,10 +20,9 @@ import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
+import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 import { SocialLoginButtons } from '@/app/(auth)/components/social-login-buttons'
 import { SSOLoginButton } from '@/app/(auth)/components/sso-login-button'
-import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
 
 const logger = createLogger('LoginForm')
 
@@ -87,8 +86,6 @@ export default function LoginPage({
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
-  const buttonClass = useBrandedButtonClass()
-
   const callbackUrlParam = searchParams?.get('callbackUrl')
   const isValidCallbackUrl = callbackUrlParam ? validateCallbackUrl(callbackUrlParam) : false
   const invalidCallbackRef = useRef(false)
@@ -353,11 +350,7 @@ export default function LoginPage({
       {/* SSO Login Button (primary top-only when it is the only method) */}
       {showTopSSO && (
         <div className='mt-8'>
-          <SSOLoginButton
-            callbackURL={callbackUrl}
-            variant='primary'
-            primaryClassName={buttonClass}
-          />
+          <SSOLoginButton callbackURL={callbackUrl} variant='primary' />
         </div>
       )}
 
@@ -454,14 +447,16 @@ export default function LoginPage({
             </div>
           )}
 
-          <BrandedButton
-            type='submit'
-            disabled={isLoading}
-            loading={isLoading}
-            loadingText='Signing in'
-          >
-            Sign in
-          </BrandedButton>
+          <button type='submit' disabled={isLoading} className={AUTH_SUBMIT_BTN}>
+            {isLoading ? (
+              <span className='flex items-center gap-2'>
+                <Loader2 className='h-4 w-4 animate-spin' />
+                Signing in...
+              </span>
+            ) : (
+              'Sign in'
+            )}
+          </button>
         </form>
       )}
 
@@ -488,11 +483,7 @@ export default function LoginPage({
             callbackURL={callbackUrl}
           >
             {ssoEnabled && !hasOnlySSO && (
-              <SSOLoginButton
-                callbackURL={callbackUrl}
-                variant='outline'
-                primaryClassName={buttonClass}
-              />
+              <SSOLoginButton callbackURL={callbackUrl} variant='outline' />
             )}
           </SocialLoginButtons>
         </div>
@@ -571,14 +562,16 @@ export default function LoginPage({
                     <p>{resetStatus.message}</p>
                   </div>
                 )}
-                <BrandedButton
-                  type='submit'
-                  disabled={isSubmittingReset}
-                  loading={isSubmittingReset}
-                  loadingText='Sending'
-                >
-                  Send Reset Link
-                </BrandedButton>
+                <button type='submit' disabled={isSubmittingReset} className={AUTH_SUBMIT_BTN}>
+                  {isSubmittingReset ? (
+                    <span className='flex items-center gap-2'>
+                      <Loader2 className='h-4 w-4 animate-spin' />
+                      Sending...
+                    </span>
+                  ) : (
+                    'Send Reset Link'
+                  )}
+                </button>
               </div>
             </form>
           </ModalBody>

apps/sim/app/(auth)/oauth/consent/page.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { ArrowLeftRight } from 'lucide-react'
+import { ArrowLeftRight, Loader2 } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Button } from '@/components/emcn'
 import { signOut, useSession } from '@/lib/auth/auth-client'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
+import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 
 const SCOPE_DESCRIPTIONS: Record<string, string> = {
   openid: 'Verify your identity',
@@ -150,7 +150,9 @@ export default function OAuthConsentPage() {
           </p>
         </div>
         <div className='mt-8 w-full max-w-[410px] space-y-3'>
-          <BrandedButton onClick={() => router.push('/')}>Return to Home</BrandedButton>
+          <button onClick={() => router.push('/')} className={AUTH_SUBMIT_BTN}>
+            Return to Home
+          </button>
         </div>
       </div>
     )
@@ -230,7 +232,7 @@ export default function OAuthConsentPage() {
 
       {scopes.length > 0 && (
         <div className='mt-5 w-full max-w-[410px]'>
-          <div className='rounded-lg border p-4'>
+          <div className='rounded-lg border border-[var(--landing-bg-elevated)] p-4'>
             <p className='mb-3 font-medium text-sm'>This will allow the application to:</p>
             <ul className='space-y-2'>
               {scopes.map((s) => (
@@ -257,15 +259,20 @@ export default function OAuthConsentPage() {
         >
           Deny
         </Button>
-        <BrandedButton
-          fullWidth
-          showArrow={false}
-          loading={submitting}
-          loadingText='Authorizing'
+        <button
           onClick={() => handleConsent(true)}
+          disabled={submitting}
+          className={AUTH_SUBMIT_BTN}
         >
-          Allow
-        </BrandedButton>
+          {submitting ? (
+            <span className='flex items-center gap-2'>
+              <Loader2 className='h-4 w-4 animate-spin' />
+              Authorizing...
+            </span>
+          ) : (
+            'Allow'
+          )}
+        </button>
       </div>
     </div>
   )

apps/sim/app/(auth)/reset-password/reset-password-form.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff, Loader2 } from 'lucide-react'
 import { Input, Label } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
+import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 
 interface RequestResetFormProps {
   email: string
@@ -64,14 +64,16 @@ export function RequestResetForm({
         )}
       </div>
 
-      <BrandedButton
-        type='submit'
-        disabled={isSubmitting}
-        loading={isSubmitting}
-        loadingText='Sending'
-      >
-        Send Reset Link
-      </BrandedButton>
+      <button type='submit' disabled={isSubmitting} className={AUTH_SUBMIT_BTN}>
+        {isSubmitting ? (
+          <span className='flex items-center gap-2'>
+            <Loader2 className='h-4 w-4 animate-spin' />
+            Sending...
+          </span>
+        ) : (
+          'Send Reset Link'
+        )}
+      </button>
     </form>
   )
 }
@@ -219,14 +221,16 @@ export function SetNewPasswordForm({
         )}
       </div>
 
-      <BrandedButton
-        type='submit'
-        disabled={isSubmitting || !token}
-        loading={isSubmitting}
-        loadingText='Resetting'
-      >
-        Reset Password
-      </BrandedButton>
+      <button type='submit' disabled={isSubmitting || !token} className={AUTH_SUBMIT_BTN}>
+        {isSubmitting ? (
+          <span className='flex items-center gap-2'>
+            <Loader2 className='h-4 w-4 animate-spin' />
+            Resetting...
+          </span>
+        ) : (
+          'Reset Password'
+        )}
+      </button>
     </form>
   )
 }