feat: light mode (#2457)

* feat(light): restored light theme

* feat: styling consolidation, note block upgrades

* improvement(zoom-prevention): moved downstream

* fix(notifications): mismatching workflow ID

* feat(light): button variant updates and controls consolidation

* improvement: UI consolidation

* feat: badges, usage limit; fix(note): iframe security; improvement(s-modal): sizing

* improvement: oauth modal, subscription

* improvement(team): ui/ux

* feat: emcn, subscription, tool input

* improvement(copilot): styling consolidation

* feat: colors consolidation

* improvement(ui): light styling

* fix(build): unused billing component

* improvement: addressed comments

Author: emir-karabeg

apps/sim/app/(landing)/careers/page.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Loader2, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -499,16 +499,11 @@ export default function CareersPage() {
                   className='min-w-[200px] rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all duration-300 hover:opacity-90 disabled:opacity-50'
                   size='lg'
                 >
-                  {isSubmitting ? (
-                    <>
-                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                      Submitting...
-                    </>
-                  ) : submitStatus === 'success' ? (
-                    'Submitted'
-                  ) : (
-                    'Submit Application'
-                  )}
+                  {isSubmitting
+                    ? 'Submitting...'
+                    : submitStatus === 'success'
+                      ? 'Submitted'
+                      : 'Submit Application'}
                 </Button>
               </div>
             </form>

apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ComponentType, SVGProps } from 'react'
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import type { LucideIcon } from 'lucide-react'
@@ -24,7 +25,7 @@ import {
 const logger = createLogger('LandingPricing')
 
 interface PricingFeature {
-  icon: LucideIcon
+  icon: LucideIcon | ComponentType<SVGProps<SVGSVGElement>>
   text: string
 }
 

apps/sim/app/_shell/providers/theme-provider.tsx

@@ -7,7 +7,7 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const pathname = usePathname()
 
-  // Force light mode on public/marketing pages, dark mode everywhere else
+  // Force light mode on public/marketing pages, allow user preference elsewhere
   const isLightModePage =
     pathname === '/' ||
     pathname.startsWith('/login') ||
@@ -27,10 +27,10 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     <NextThemesProvider
       attribute='class'
       defaultTheme='dark'
-      enableSystem={false}
+      enableSystem
       disableTransitionOnChange
       storageKey='sim-theme'
-      forcedTheme={isLightModePage ? 'light' : 'dark'}
+      forcedTheme={isLightModePage ? 'light' : undefined}
       {...props}
     >
       {children}