Revamp UI with zen woodleaf theme

[rohan-patnaik]

Summary

• refresh global styling with warm wood + leaf zen aesthetic
• update header styling and tool list cards to match new theme
• add subtle parchment textures, leaf motifs, and CTA button accents

Testing

• Not run (visual changes only)

Summary by CodeRabbit

• New Features

  • Introduced a cohesive wood and leaf-inspired design system with new decorative visual elements and enhanced layering effects

• Style

  • Updated styling across cards, buttons, and navigation components with refreshed colors, improved visual hierarchy, and enhanced visual effects

[rohan-patnaik]

@coderabbitai review

[coderabbitai]

📝 Walkthrough

Walkthrough

A comprehensive theming overhaul introduces wood, leaf, and paper-aesthetic CSS custom properties and visual assets throughout the application. Component styling is reworked with multi-layer backgrounds and gradients, navigation and button elements are updated to support the new theme, and z-index layering is expanded for proper visual hierarchy.

Changes

Cohort / File(s)	Summary
Theme and Component Styling apps/web/src/app/globals.css	Major CSS overhaul introducing wood/leaf/paper-themed custom properties, new visual assets (leaf-pattern, paper-noise, leaf-icon), multi-layer background gradients for cards and buttons, updated navigation styling with beveled wood appearance, adjusted borders and shadows, and explicit z-index handling across layers.
Theme Application apps/web/src/app/tools/page.tsx, apps/web/src/components/SiteHeader.tsx	Applied new theme classes: "tool-card" added to tool list buttons, and "wood-nav" class added to header with padding adjustment from py-6 to py-4.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Through wood and leaf the CSS now hops,
With paper textures reaching toward the tops,
A rustic theme both cozy and sublime,
The colors blend in perfect, golden time! 🍂✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Revamp UI with zen woodleaf theme' directly matches the main objective of the pull request, which is to refresh the UI with a warm wood and leaf zen aesthetic. The title accurately captures the primary change.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/zen-ui-revamp

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/src/components/SiteHeader.tsx (1)

14-25: ⚠️ Potential issue | 🟡 Minor

Consider updating brand text colors for contrast on the darker wood background.
With wood-nav now applied, the text-ink-900 / text-ink-500 palette may be too dark against the wood gradient. Switching to lighter paper tones should improve legibility.

💡 Suggested tweak

-            <div className="text-lg font-display text-ink-900">ZenPDF</div>
-            <div className="text-[0.6rem] uppercase tracking-[0.32em] text-ink-500">
+            <div className="text-lg font-display text-paper-50">ZenPDF</div>
+            <div className="text-[0.6rem] uppercase tracking-[0.32em] text-paper-50/70">