restyle oauth pages to match kernel.sh light theme

- switch from dark to light theme (beige #f2f0e7 background)
- hard corners (0px border-radius) throughout
- 0.5px solid charcoal borders instead of translucent
- lowercase text-transform on body
- clerk appearance updated for light mode with sharp corners
- org cards use collapsed borders, tag-style active badge
- continue button uses charcoal bg with hover underline
- remove rounded corners from icon, toasts, avatars

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: masnwilliams

src/app/globals.css

@@ -30,12 +30,12 @@
 }
 
 :root {
-  --radius: 0.5rem;
+  --radius: 0px;
   --background: #f2f0e7;
   --foreground: #1c2024;
-  --card: #faf9f2;
+  --card: #f2f0e7;
   --card-foreground: #1c2024;
-  --popover: #faf9f2;
+  --popover: #f2f0e7;
   --popover-foreground: #1c2024;
   --primary: #81b300;
   --primary-foreground: #1c2024;
@@ -46,17 +46,17 @@
   --accent: #f0f0f3;
   --accent-foreground: #1c2024;
   --destructive: #dc3545;
-  --border: rgba(28, 32, 36, 0.15);
-  --input: rgba(28, 32, 36, 0.15);
+  --border: #1c2024;
+  --input: #1c2024;
   --ring: #81b300;
 }
 
 .dark {
   --background: #212225;
   --foreground: #edeef0;
-  --card: #2a2b2e;
+  --card: #212225;
   --card-foreground: #edeef0;
-  --popover: #2a2b2e;
+  --popover: #212225;
   --popover-foreground: #edeef0;
   --primary: #81b300;
   --primary-foreground: #212225;
@@ -67,8 +67,8 @@
   --accent: #333437;
   --accent-foreground: #edeef0;
   --destructive: #dc3545;
-  --border: rgba(237, 238, 240, 0.1);
-  --input: rgba(237, 238, 240, 0.12);
+  --border: #edeef0;
+  --input: #edeef0;
   --ring: #81b300;
 }
 
@@ -90,13 +90,23 @@
     font-family: var(--font-sans);
     font-weight: 300;
     line-height: 1.2;
+    text-transform: lowercase;
+    font-feature-settings: 'liga' off, 'clig' off;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  input, textarea, [data-preserve-case] {
+    text-transform: none;
+  }
   h1, h2, h3, h4, h5, h6 {
     font-weight: 300;
     line-height: 1.2;
   }
+  a:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 0.5px;
+    text-underline-offset: 2px;
+  }
   ::selection {
     background-color: #81b300;
     color: #212225;
@@ -109,7 +119,7 @@
   font-family: var(--font-sans);
 }
 .toaster [data-sonner-toast] {
-  @apply border border-border rounded-lg shadow-md;
+  @apply border border-border shadow-md;
   padding: 0.875rem !important;
 }
 .toaster [data-sonner-toast][data-type="success"] [data-icon] {

src/app/layout.tsx

@@ -1,5 +1,4 @@
 import { ClerkProvider } from '@clerk/nextjs'
-import { dark } from '@clerk/themes'
 import type { Metadata } from 'next'
 import { Inter, IBM_Plex_Mono } from 'next/font/google'
 import { ThemeProvider } from 'next-themes'
@@ -39,29 +38,61 @@ export default function RootLayout({
   return (
     <ClerkProvider
       appearance={{
-        baseTheme: dark,
         variables: {
           colorPrimary: '#81b300',
-          colorText: '#edeef0',
-          colorTextSecondary: '#9b9da2',
-          colorBackground: '#212225',
-          colorInputBackground: '#2a2b2e',
-          colorInputText: '#edeef0',
+          colorText: '#1c2024',
+          colorTextSecondary: '#60646c',
+          colorBackground: '#f2f0e7',
+          colorInputBackground: '#f2f0e7',
+          colorInputText: '#1c2024',
           fontFamily: 'var(--font-inter), Inter, sans-serif',
-          borderRadius: '0.5rem',
+          borderRadius: '0px',
         },
         elements: {
           card: {
-            backgroundColor: '#2a2b2e',
-            borderColor: 'rgba(237, 238, 240, 0.1)',
+            backgroundColor: '#f2f0e7',
+            border: '0.5px solid #1c2024',
+            borderRadius: '0px',
+            boxShadow: 'none',
           },
           formButtonPrimary: {
-            backgroundColor: '#81b300',
-            color: '#212225',
-            fontWeight: '400',
+            backgroundColor: '#1c2024',
+            color: '#f2f0e7',
+            fontWeight: '300',
+            borderRadius: '0px',
+            textTransform: 'lowercase' as const,
+          },
+          formFieldInput: {
+            border: '0.5px solid #1c2024',
+            borderRadius: '0px',
+            backgroundColor: '#f2f0e7',
           },
           footerActionLink: {
-            color: '#81b300',
+            color: '#1c2024',
+          },
+          headerTitle: {
+            textTransform: 'lowercase' as const,
+            fontWeight: '300',
+          },
+          headerSubtitle: {
+            textTransform: 'lowercase' as const,
+            fontWeight: '300',
+          },
+          socialButtonsBlockButton: {
+            border: '0.5px solid #1c2024',
+            borderRadius: '0px',
+            textTransform: 'lowercase' as const,
+          },
+          dividerLine: {
+            backgroundColor: '#1c2024',
+          },
+          identityPreview: {
+            border: '0.5px solid #1c2024',
+            borderRadius: '0px',
+          },
+          organizationPreview: {
+            border: '0.5px solid #1c2024',
+            borderRadius: '0px',
           },
         },
       }}
@@ -70,7 +101,7 @@ export default function RootLayout({
         <body className={`${inter.variable} ${ibmPlexMono.variable} font-sans`}>
           <ThemeProvider
             attribute="class"
-            defaultTheme="dark"
+            defaultTheme="light"
             disableTransitionOnChange
             enableSystem
           >

src/app/select-org/page.tsx

@@ -27,7 +27,6 @@ function SelectOrgContent(): React.ReactElement {
   // Check if we just returned from org creation and reload to get fresh data
   useEffect(() => {
     if (searchParams.get('org_created') === 'true') {
-      // Remove the flag from URL and reload to get fresh organization data
       const newUrl = new URL(window.location.href);
       newUrl.searchParams.delete('org_created');
       window.location.href = newUrl.toString();
@@ -72,20 +71,15 @@ function SelectOrgContent(): React.ReactElement {
     try {
       await setActive({ organization: selectedOrgId });
 
-      // After setting active org, redirect back to authorize
       const authorizeUrl = new URL('/authorize', window.location.origin);
 
-      // Add all original OAuth parameters
       Object.entries(originalParams).forEach(([key, value]) => {
         if (value) authorizeUrl.searchParams.set(key, value);
       });
 
-      // Add the selected orgId as a parameter
       authorizeUrl.searchParams.set('org_id', selectedOrgId);
 
-      const redirectUri = authorizeUrl.toString();
-
-      router.push(redirectUri);
+      router.push(authorizeUrl.toString());
     } catch (error) {
       console.error('Failed to set active organization:', error);
       setIsSelecting(false);
@@ -103,12 +97,11 @@ function SelectOrgContent(): React.ReactElement {
     );
   }
 
-  // Check if user has any organizations (only after loaded)
+  // No organizations — show create flow
   if (isLoaded && !userMemberships?.isLoading && (!userMemberships?.data || userMemberships.data.length === 0)) {
     return (
       <Col className="min-h-screen items-center justify-center">
-        {/* User button in top-right corner */}
-        <div className="absolute top-4 right-4">
+        <div className="absolute top-6 right-6">
           <UserButton
             afterSignOutUrl={`/select-org?${searchParams.toString()}`}
           />
@@ -136,8 +129,7 @@ function SelectOrgContent(): React.ReactElement {
 
   return (
     <Col className="min-h-screen items-center justify-center">
-      {/* User button in top-right corner */}
-      <div className="absolute top-4 right-4">
+      <div className="absolute top-6 right-6">
         <UserButton
           afterSignOutUrl={`/select-org?${searchParams.toString()}`}
         />
@@ -155,11 +147,10 @@ function SelectOrgContent(): React.ReactElement {
           <div
             ref={scrollContainerRef}
             onScroll={updateScrollState}
-            className="flex flex-col gap-2 max-h-60 overflow-y-auto"
+            className="flex flex-col gap-0 max-h-64 overflow-y-auto"
           >
             {(userMemberships?.data || user?.organizationMemberships)
               ?.sort((a, b) => {
-                // Put the currently active org first
                 if (a.organization.id === orgId) return -1;
                 if (b.organization.id === orgId) return 1;
                 return 0;
@@ -172,25 +163,25 @@ function SelectOrgContent(): React.ReactElement {
                   key={membership.organization.id}
                   onClick={() => handleOrgSelect(membership.organization.id)}
                   disabled={isSelecting}
-                  className={`w-full p-4 text-left rounded-lg transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${
+                  className={`w-full p-4 text-left transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border-[0.5px] border-foreground -mt-[0.5px] first:mt-0 ${
                     isSelected
-                      ? 'bg-primary/10 border border-primary/40'
-                      : 'border border-border hover:border-primary/30 hover:bg-primary/5'
+                      ? 'bg-primary/10'
+                      : 'hover:bg-primary/5'
                   }`}
                 >
                   <Row className="gap-3">
                     {membership.organization.imageUrl && (
                       <img
                         src={membership.organization.imageUrl}
                         alt={membership.organization.name}
-                        className="w-10 h-10 rounded-lg"
+                        className="w-10 h-10"
                       />
                     )}
                     <Col className="flex-1 gap-1">
                       <Row className="justify-between items-center">
                         <span className="font-normal text-sm text-foreground">{membership.organization.name}</span>
                         {isCurrentlyActive && (
-                          <span className="text-xs bg-primary/15 text-primary px-2 py-0.5 rounded-full">
+                          <span className="text-[10px] uppercase tracking-wide border-[0.5px] border-foreground px-2 py-0.5">
                             active
                           </span>
                         )}
@@ -203,23 +194,22 @@ function SelectOrgContent(): React.ReactElement {
             })}
           </div>
 
-          {/* Fade overlays to indicate scrollability */}
           {canScrollUp && (
-            <div className="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-background to-transparent pointer-events-none" />
+            <div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-background to-transparent pointer-events-none" />
           )}
           {canScrollDown && (
-            <div className="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-background to-transparent pointer-events-none" />
+            <div className="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-background to-transparent pointer-events-none" />
           )}
         </div>
 
         <button
           onClick={handleConfirm}
           disabled={isSelecting || !selectedOrgId}
-          className="w-full bg-primary text-primary-foreground py-3 px-4 rounded-lg font-normal text-sm hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-opacity"
+          className="w-full bg-foreground text-background py-3 px-4 font-light text-sm hover:underline hover:decoration-[0.5px] hover:underline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-opacity"
         >
           {isSelecting ? (
             <Row className="items-center justify-center gap-2">
-              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-foreground"></div>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-background"></div>
               authorizing...
             </Row>
           ) : 'continue'}

src/components/icons.tsx

@@ -22,7 +22,7 @@ export const KernelIcon = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="400" height="400" rx="48" fill="#81B300" />
+      <rect width="400" height="400" fill="#81B300" />
       <path d="M136.217 99C140.703 99 144.515 100.593 147.651 103.779C150.84 106.911 152.434 110.719 152.434 115.202V123.027C152.434 124 153.671 124.413 154.256 123.637L167.922 105.481C170.571 101.917 174.112 99.8373 178.544 99.2433C182.977 98.5953 187.004 99.5944 190.626 102.24C194.194 104.941 196.274 108.505 196.869 112.933C197.518 117.361 196.491 121.359 193.788 124.923L179.697 143.717C179.158 144.437 179.158 145.426 179.696 146.146L197.761 170.287C200.464 173.851 201.492 177.848 200.843 182.276C200.248 186.704 198.167 190.268 194.599 192.969C190.977 195.615 186.95 196.614 182.517 195.966C178.085 195.372 174.544 193.293 171.895 189.729L154.255 166.378C153.669 165.603 152.434 166.017 152.434 166.988V180.008C152.434 184.49 150.84 188.325 147.651 191.511C144.515 194.643 140.703 196.209 136.217 196.209C131.73 196.209 127.892 194.643 124.703 191.511C121.567 188.325 120 184.49 120 180.008V115.202C120 110.719 121.567 106.911 124.703 103.779C127.892 100.593 131.73 99.0001 136.217 99Z" fill="#1C2024"/>
       <path fillRule="evenodd" clipRule="evenodd" d="M245.654 99.8099C254.628 99.8099 262.277 102.97 268.602 109.288C274.926 115.607 278.089 123.248 278.089 132.213C278.089 141.178 274.926 148.82 268.602 155.139C268.373 155.367 268.144 155.59 267.915 155.807C267.138 156.545 266.996 157.752 267.639 158.611L276.386 170.287C279.089 173.851 280.116 177.848 279.467 182.276C278.872 186.704 276.792 190.268 273.224 192.969C269.602 195.615 265.575 196.614 261.142 195.966C256.71 195.372 253.169 193.293 250.52 189.729L239.436 170.421C238.92 169.522 237.546 169.888 237.546 170.925V180.008C237.546 184.49 235.951 188.325 232.762 191.511C229.627 194.643 225.816 196.209 221.329 196.209C216.842 196.209 213.004 194.643 209.815 191.511C206.68 188.325 205.111 184.49 205.111 180.008V116.011C205.111 111.529 206.68 107.721 209.815 104.589C213.004 101.403 216.842 99.8099 221.329 99.8099H245.654ZM241.209 125.327C237.574 125.327 234.628 128.274 234.628 131.909C234.628 135.544 237.574 138.491 241.209 138.491C244.844 138.491 247.79 135.544 247.79 131.909C247.79 128.274 244.844 125.327 241.209 125.327Z" fill="#1C2024"/>
       <path d="M192.977 202.791C197.464 202.791 201.274 204.384 204.409 207.57C207.599 210.702 209.194 214.51 209.194 218.992V283.798C209.194 288.281 207.599 292.116 204.409 295.302C201.274 298.434 197.464 300 192.977 300C188.491 300 184.68 298.407 181.544 295.221L154.207 264.106C153.591 263.405 152.435 263.841 152.434 264.775V283.798C152.434 288.281 150.839 292.116 147.65 295.302C144.514 298.434 140.703 300 136.217 300C131.73 300 127.892 298.434 124.703 295.302C121.567 292.116 120 288.281 120 283.798V218.992C120 214.51 121.567 210.702 124.703 207.57C127.892 204.384 131.73 202.791 136.217 202.791C140.703 202.791 144.541 204.357 147.731 207.489L174.986 238.597C175.602 239.299 176.76 238.864 176.76 237.929V218.992C176.76 214.51 178.328 210.702 181.463 207.57C184.653 204.384 188.491 202.791 192.977 202.791Z" fill="#1C2024"/>