improvement(docs): updated logo, added lightbox to action media, fixed minor styling inconsistencies between themes

Author: waleedlatif1

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -185,11 +185,6 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
         tableOfContent={{
           style: 'clerk',
           enabled: true,
-          header: (
-            <div key='toc-header' className='mb-2 font-medium text-sm'>
-              On this page
-            </div>
-          ),
           footer: <TOCFooter />,
           single: false,
         }}

apps/docs/app/api/og/route.tsx

@@ -57,7 +57,7 @@ export async function GET(request: NextRequest) {
         fontFamily: 'Geist',
       }}
     >
-      {/* Base gradient layer - subtle purple tint across the entire image */}
+      {/* Base gradient layer - subtle green tint across the entire image */}
       <div
         style={{
           position: 'absolute',
@@ -66,7 +66,7 @@ export async function GET(request: NextRequest) {
           width: '100%',
           height: '100%',
           background:
-            'radial-gradient(ellipse 150% 100% at 50% 100%, rgba(88, 28, 135, 0.15) 0%, rgba(88, 28, 135, 0.08) 25%, rgba(88, 28, 135, 0.03) 50%, transparent 80%)',
+            'radial-gradient(ellipse 150% 100% at 50% 100%, rgba(51, 196, 130, 0.15) 0%, rgba(51, 196, 130, 0.08) 25%, rgba(51, 196, 130, 0.03) 50%, transparent 80%)',
           display: 'flex',
         }}
       />
@@ -80,7 +80,7 @@ export async function GET(request: NextRequest) {
           width: '100%',
           height: '100%',
           background:
-            'radial-gradient(ellipse 100% 80% at 80% 90%, rgba(112, 31, 252, 0.12) 0%, rgba(112, 31, 252, 0.04) 40%, transparent 70%)',
+            'radial-gradient(ellipse 100% 80% at 80% 90%, rgba(51, 196, 130, 0.12) 0%, rgba(51, 196, 130, 0.04) 40%, transparent 70%)',
           display: 'flex',
         }}
       />

apps/docs/app/global.css

@@ -9,11 +9,20 @@ body {
 }
 
 @theme {
-  --color-fd-primary: #802fff; /* Purple from control-bar component */
+  --color-fd-primary: #33c482; /* Green from Sim logo */
   --font-geist-sans: var(--font-geist-sans);
   --font-geist-mono: var(--font-geist-mono);
 }
 
+/* Ensure primary color is set in both light and dark modes */
+:root {
+  --color-fd-primary: #33c482;
+}
+
+.dark {
+  --color-fd-primary: #33c482;
+}
+
 /* Font family utilities */
 .font-sans {
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
@@ -34,7 +43,7 @@ body {
 :root {
   --fd-border: transparent !important;
   --fd-border-sidebar: transparent !important;
-  --fd-nav-height: 64px; /* Custom navbar height (h-16 = 4rem = 64px) */
+  --fd-nav-height: 65px; /* Custom navbar height (h-16 = 64px + 1px border) */
   /* Content container width used to center main content */
   --spacing-fd-container: 1400px;
   /* Edge gutter = leftover space on each side of centered container */
@@ -136,11 +145,11 @@ aside#nd-sidebar {
 /* On mobile, let fumadocs handle the layout natively */
 @media (min-width: 1024px) {
   :root {
-    --fd-banner-height: 64px !important;
+    --fd-banner-height: 65px !important; /* 64px navbar + 1px border */
   }
 
   #nd-docs-layout {
-    --fd-docs-height: calc(100dvh - 64px) !important;
+    --fd-docs-height: calc(100dvh - 65px) !important; /* 64px navbar + 1px border */
     --fd-sidebar-width: 300px !important;
     margin-left: var(--sidebar-offset) !important;
     margin-right: var(--toc-offset) !important;
@@ -227,19 +236,19 @@ html:not(.dark) #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*
   letter-spacing: 0.05em !important;
 }
 
-/* Override active state (NO PURPLE) */
+/* Override active state */
 #nd-sidebar a[data-active="true"],
 #nd-sidebar button[data-active="true"],
 #nd-sidebar a.bg-fd-primary\/10,
 #nd-sidebar a.text-fd-primary,
 #nd-sidebar a[class*="bg-fd-primary"],
 #nd-sidebar a[class*="text-fd-primary"],
-/* Override custom sidebar purple classes */
+/* Override custom sidebar green classes */
   #nd-sidebar
-  a.bg-purple-50\/80,
-#nd-sidebar a.text-purple-600,
-#nd-sidebar a[class*="bg-purple"],
-#nd-sidebar a[class*="text-purple"] {
+  a.bg-emerald-50\/80,
+#nd-sidebar a.text-emerald-600,
+#nd-sidebar a[class*="bg-emerald"],
+#nd-sidebar a[class*="text-emerald"] {
   background-image: none !important;
 }
 
@@ -250,10 +259,10 @@ html.dark #nd-sidebar a.bg-fd-primary\/10,
 html.dark #nd-sidebar a.text-fd-primary,
 html.dark #nd-sidebar a[class*="bg-fd-primary"],
 html.dark #nd-sidebar a[class*="text-fd-primary"],
-html.dark #nd-sidebar a.bg-purple-50\/80,
-html.dark #nd-sidebar a.text-purple-600,
-html.dark #nd-sidebar a[class*="bg-purple"],
-html.dark #nd-sidebar a[class*="text-purple"] {
+html.dark #nd-sidebar a.bg-emerald-50\/80,
+html.dark #nd-sidebar a.text-emerald-600,
+html.dark #nd-sidebar a[class*="bg-emerald"],
+html.dark #nd-sidebar a[class*="text-emerald"] {
   background-color: rgba(255, 255, 255, 0.15) !important;
   color: rgba(255, 255, 255, 1) !important;
 }
@@ -265,10 +274,10 @@ html:not(.dark) #nd-sidebar a.bg-fd-primary\/10,
 html:not(.dark) #nd-sidebar a.text-fd-primary,
 html:not(.dark) #nd-sidebar a[class*="bg-fd-primary"],
 html:not(.dark) #nd-sidebar a[class*="text-fd-primary"],
-html:not(.dark) #nd-sidebar a.bg-purple-50\/80,
-html:not(.dark) #nd-sidebar a.text-purple-600,
-html:not(.dark) #nd-sidebar a[class*="bg-purple"],
-html:not(.dark) #nd-sidebar a[class*="text-purple"] {
+html:not(.dark) #nd-sidebar a.bg-emerald-50\/80,
+html:not(.dark) #nd-sidebar a.text-emerald-600,
+html:not(.dark) #nd-sidebar a[class*="bg-emerald"],
+html:not(.dark) #nd-sidebar a[class*="text-emerald"] {
   background-color: rgba(0, 0, 0, 0.07) !important;
   color: rgba(0, 0, 0, 0.9) !important;
 }
@@ -286,17 +295,17 @@ html:not(.dark) #nd-sidebar button:hover:not([data-active="true"]) {
 }
 
 /* Dark mode - ensure active/selected items don't change on hover */
-html.dark #nd-sidebar a.bg-purple-50\/80:hover,
-html.dark #nd-sidebar a[class*="bg-purple"]:hover,
+html.dark #nd-sidebar a.bg-emerald-50\/80:hover,
+html.dark #nd-sidebar a[class*="bg-emerald"]:hover,
 html.dark #nd-sidebar a[data-active="true"]:hover,
 html.dark #nd-sidebar button[data-active="true"]:hover {
   background-color: rgba(255, 255, 255, 0.15) !important;
   color: rgba(255, 255, 255, 1) !important;
 }
 
 /* Light mode - ensure active/selected items don't change on hover */
-html:not(.dark) #nd-sidebar a.bg-purple-50\/80:hover,
-html:not(.dark) #nd-sidebar a[class*="bg-purple"]:hover,
+html:not(.dark) #nd-sidebar a.bg-emerald-50\/80:hover,
+html:not(.dark) #nd-sidebar a[class*="bg-emerald"]:hover,
 html:not(.dark) #nd-sidebar a[data-active="true"]:hover,
 html:not(.dark) #nd-sidebar button[data-active="true"]:hover {
   background-color: rgba(0, 0, 0, 0.07) !important;
@@ -515,6 +524,15 @@ pre code .line {
   color: var(--color-fd-primary);
 }
 
+/* ============================================
+   TOC (Table of Contents) Styling
+   ============================================ */
+
+/* Remove the thin border-left on nested TOC items (keeps main indicator only) */
+#nd-toc a[style*="padding-inline-start"] {
+  border-left: none !important;
+}
+
 /* Add bottom spacing to prevent abrupt page endings */
 [data-content] {
   padding-top: 1.5rem !important;

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -44,7 +44,7 @@ export function SidebarItem({ item }: { item: Item }) {
         'lg:text-gray-600 lg:dark:text-gray-400',
         !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
         active &&
-          'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+          'lg:bg-emerald-50/80 lg:font-normal lg:text-emerald-600 lg:dark:bg-emerald-900/15 lg:dark:text-emerald-400'
       )}
     >
       {item.name}
@@ -79,7 +79,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
           'lg:text-gray-600 lg:dark:text-gray-400',
           !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
           active &&
-            'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+            'lg:bg-emerald-50/80 lg:font-normal lg:text-emerald-600 lg:dark:bg-emerald-900/15 lg:dark:text-emerald-400'
         )}
       >
         {item.name}
@@ -104,7 +104,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
               'lg:text-gray-800 lg:dark:text-gray-200',
               !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
               active &&
-                'lg:bg-purple-50/80 lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+                'lg:bg-emerald-50/80 lg:text-emerald-600 lg:dark:bg-emerald-900/15 lg:dark:text-emerald-400'
             )}
           >
             {item.name}

apps/docs/components/docs-layout/toc-footer.tsx

@@ -23,7 +23,7 @@ export function TOCFooter() {
           rel='noopener noreferrer'
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
-          className='group mt-2 inline-flex h-8 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] px-3 pr-[10px] pl-[12px] font-medium text-sm text-white shadow-[inset_0_2px_4px_0_#9B77FF] outline-none transition-all hover:shadow-lg focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
+          className='group mt-2 inline-flex h-8 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-[10px] border border-[#2AAD6C] bg-gradient-to-b from-[#3ED990] to-[#2AAD6C] px-3 pr-[10px] pl-[12px] font-medium text-sm text-white shadow-[inset_0_2px_4px_0_#5EE8A8] outline-none transition-all hover:shadow-lg focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
           aria-label='Get started with Sim - Sign up for free'
         >
           <span>Get started</span>

apps/docs/components/navbar/navbar.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import Image from 'next/image'
 import Link from 'next/link'
 import { LanguageDropdown } from '@/components/ui/language-dropdown'
 import { SearchTrigger } from '@/components/ui/search-trigger'
+import { SimLogoFull } from '@/components/ui/sim-logo'
 import { ThemeToggle } from '@/components/ui/theme-toggle'
 
 export function Navbar() {
@@ -27,13 +27,7 @@ export function Navbar() {
           {/* Left cluster: logo */}
           <div className='flex items-center'>
             <Link href='/' className='flex min-w-[100px] items-center'>
-              <Image
-                src='/static/logo.png'
-                alt='Sim'
-                width={72}
-                height={28}
-                className='h-7 w-auto'
-              />
+              <SimLogoFull className='h-7 w-auto' />
             </Link>
           </div>
 

apps/docs/components/ui/action-media.tsx

@@ -1,38 +1,85 @@
 'use client'
 
+import { useState } from 'react'
 import { getAssetUrl } from '@/lib/utils'
+import { Lightbox } from './lightbox'
 
 interface ActionImageProps {
   src: string
   alt: string
+  enableLightbox?: boolean
 }
 
 interface ActionVideoProps {
   src: string
   alt: string
+  enableLightbox?: boolean
 }
 
-export function ActionImage({ src, alt }: ActionImageProps) {
+export function ActionImage({ src, alt, enableLightbox = true }: ActionImageProps) {
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+
+  const handleClick = () => {
+    if (enableLightbox) {
+      setIsLightboxOpen(true)
+    }
+  }
+
   return (
-    <img
-      src={src}
-      alt={alt}
-      className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700'
-    />
+    <>
+      <img
+        src={src}
+        alt={alt}
+        onClick={handleClick}
+        className={`inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700 ${
+          enableLightbox ? 'cursor-pointer transition-opacity hover:opacity-90' : ''
+        }`}
+      />
+      {enableLightbox && (
+        <Lightbox
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
+          src={src}
+          alt={alt}
+          type='image'
+        />
+      )}
+    </>
   )
 }
 
-export function ActionVideo({ src, alt }: ActionVideoProps) {
+export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProps) {
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
   const resolvedSrc = getAssetUrl(src)
 
+  const handleClick = () => {
+    if (enableLightbox) {
+      setIsLightboxOpen(true)
+    }
+  }
+
   return (
-    <video
-      src={resolvedSrc}
-      autoPlay
-      loop
-      muted
-      playsInline
-      className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700'
-    />
+    <>
+      <video
+        src={resolvedSrc}
+        autoPlay
+        loop
+        muted
+        playsInline
+        onClick={handleClick}
+        className={`inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700 ${
+          enableLightbox ? 'cursor-pointer transition-opacity hover:opacity-90' : ''
+        }`}
+      />
+      {enableLightbox && (
+        <Lightbox
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
+          src={src}
+          alt={alt}
+          type='video'
+        />
+      )}
+    </>
   )
 }