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

[waleedlatif1]

Summary

• updated logo, added lightbox to action media, fixed minor styling inconsistencies between themes

Type of Change

• New feature

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Jan 26, 2026 11:44pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR refreshes the documentation site's visual identity by updating the logo and color scheme from purple to green (#33C482), adding lightbox functionality to action media, and fixing minor styling inconsistencies.

Major Changes:

• Created new SimLogoFull and SimLogo components with SVG-based logos that adapt to light/dark themes
• Replaced all Image components displaying logo with the new SimLogoFull component
• Updated primary brand color from purple to emerald/green throughout the theme (CSS variables, sidebar, buttons, TOC footer)
• Added lightbox feature to ActionImage and ActionVideo components for fullscreen media viewing
• Redesigned OG image generation with cleaner dark layout matching Cursor docs style
• Improved language dropdown with better hover states and chevron rotation animation
• Fixed navbar height calculations (64px → 65px to account for border)
• Removed TOC header text and nested border styling for cleaner appearance

Style Guide Considerations:

• Template literal className concatenation used in action-media.tsx instead of cn() utility (2 instances)
• SVG logo duplicated in OG route due to Edge runtime limitations - could drift out of sync with main component

Confidence Score: 4/5

• This PR is safe to merge with only minor style improvements suggested
• The changes are primarily cosmetic (logo, colors, styling) with one new feature (lightbox). The code is functional and well-structured. Minor style guide deviations exist (template literals vs cn() utility, SVG duplication) but these don't affect functionality. The PR was tested manually according to the checklist.
• No files require special attention - all changes are low-risk visual updates

Important Files Changed

Filename	Overview
apps/docs/components/ui/sim-logo.tsx	New logo component with SVG-based Sim logo supporting light/dark modes
apps/docs/app/api/og/route.tsx	Redesigned OG image with simpler dark layout and inline SVG logo
apps/docs/components/ui/action-media.tsx	Added lightbox functionality to images and videos with click handlers
apps/docs/app/global.css	Updated theme from purple to green, fixed navbar height, and improved sidebar/TOC styling
apps/docs/components/ui/language-dropdown.tsx	Improved dropdown styling with cleaner design, hover states, and icon rotation

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Page
    participant SimLogo
    participant ActionMedia
    participant Lightbox
    participant OGRoute

    User->>Browser: Visit documentation page
    Browser->>Page: Load [[...slug]]/page.tsx
    Page->>SimLogo: Render SimLogoFull in navbar/sidebar
    SimLogo->>Browser: Display SVG logo (green icon + text)
    
    User->>ActionMedia: Click on action image/video
    ActionMedia->>ActionMedia: handleClick() called
    ActionMedia->>Lightbox: Open lightbox (setIsLightboxOpen(true))
    Lightbox->>Browser: Display fullscreen media overlay
    Lightbox->>Browser: Set document.body.style.overflow = 'hidden'
    
    User->>Lightbox: Press Escape or click outside
    Lightbox->>Lightbox: onClose() called
    Lightbox->>ActionMedia: Close lightbox (setIsLightboxOpen(false))
    Lightbox->>Browser: Restore document.body.style.overflow = 'unset'
    
    Note over Browser,OGRoute: Social Media Preview
    Browser->>OGRoute: Request OG image (/api/og?title=...)
    OGRoute->>OGRoute: Load Geist font from Google Fonts
    OGRoute->>OGRoute: Render SimLogoFull SVG
    OGRoute->>Browser: Return ImageResponse (1200x630 PNG)

Loading

[greptile-apps]

_{3 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}