fix(blog): center footer, fix dark mode, fix avatar

[waleedlatif1]

Summary

center footer, fix dark mode, fix avatar

Type of Change

• Bug fix

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	Preview	Comments	Updated (UTC)
sim	Building	Preview	Comment	Oct 6, 2025 8:20pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Oct 6, 2025 8:20pm

[greptile-apps]

Greptile Overview

Summary

This PR addresses several visual and user experience issues in the blog/building section of the application. The changes focus on fixing the footer centering, dark mode display issues, and avatar rendering problems.

The main changes include:

1. Footer Centering: The Footer component in the building layout now receives a fullWidth={true} prop, which activates center alignment and standardized padding for better visual balance in blog pages.

2. Dark Mode Fix: The theme provider is updated to force the /building path to use light theme, preventing dark mode display issues that were affecting readability and styling in the blog section.

3. Avatar Component Refactoring: The blog post author avatar is refactored from a basic Image component to use the proper Avatar component system from the UI library, providing better fallback handling, accessibility improvements, and design system consistency.

4. Navigation Enhancement: A new 'Building' link is added to the footer's 'More Sim' section to provide consistent site navigation to the newly created building section.

These changes integrate well with the existing codebase patterns - the theme forcing follows the same approach used for other key pages like chat and login, the footer modification uses an existing prop-based customization system, and the avatar refactoring aligns with the established design system used throughout the application.

Important Files Changed

Changed Files

Filename	Score	Overview
apps/sim/app/(landing)/components/footer/footer.tsx	5/5	Added 'Building' navigation link to footer's 'More Sim' section
apps/sim/app/theme-provider.tsx	5/5	Added /building path to forced light theme list to fix dark mode issues
apps/sim/app/(landing)/building/layout.tsx	5/5	Added fullWidth={true} prop to Footer component to center footer content
apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/openai-n8n-sim.tsx	5/5	Refactored author avatar from Image to Avatar component with proper fallbacks

Confidence score: 5/5

• This PR is safe to merge with minimal risk as all changes are straightforward UI fixes
• Score reflects simple, well-structured changes that follow existing codebase patterns and conventions
• No files require special attention as all modifications are standard component updates

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant BuildingLayout
    participant Nav
    participant OpenAiN8nSim
    participant Footer

    User->>Browser: "Navigate to /building/openai-vs-n8n-vs-sim"
    Browser->>BuildingLayout: "Load layout component"
    BuildingLayout->>Nav: "Render navigation (hideAuthButtons=false, variant='landing')"
    Nav-->>BuildingLayout: "Navigation rendered"
    BuildingLayout->>OpenAiN8nSim: "Render blog post content"
    
    Note over OpenAiN8nSim: Load structured data for SEO
    Note over OpenAiN8nSim: Render article with images, text, and metadata
    
    OpenAiN8nSim-->>BuildingLayout: "Blog content rendered"
    BuildingLayout->>Footer: "Render footer (fullWidth=true)"
    
    Note over Footer: Apply fullWidth styling
    Note over Footer: Center footer content
    Note over Footer: Fix dark mode classes
    Note over Footer: Render avatar with proper fallback
    
    Footer-->>BuildingLayout: "Footer rendered with fixes"
    BuildingLayout-->>Browser: "Complete page rendered"
    Browser-->>User: "Display fixed blog page"

Loading

_{4 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}