Skip to content

Consolidate reading styles into unified drawer - #55

Merged
jonocodes merged 4 commits into
devfrom
claude/zen-feynman-3s2yu1
Jun 20, 2026
Merged

Consolidate reading styles into unified drawer#55
jonocodes merged 4 commits into
devfrom
claude/zen-feynman-3s2yu1

Conversation

@jonocodes

Copy link
Copy Markdown
Owner

Summary

Refactored the article reading interface to consolidate font size and theme controls into a single "Reading styles" drawer, improving UX by grouping related settings together.

Key Changes

  • Replaced individual toolbar buttons with a single "Reading styles" button (FormatSizeIcon) that opens a bottom drawer
  • Removed CookieThemeToggle component from the header and integrated theme selection into the new styles drawer
  • Added theme mode selection UI with three options (Light, Dark, System) displayed as circular icon buttons with visual feedback
  • Reorganized font size controls into the drawer with decrease/increase buttons and a preview letter "A"
  • Added theme persistence by importing and using getThemeFromCookie, setThemeInCookie, and ThemeMode utilities
  • Implemented theme change event that dispatches a custom "themeChanged" event when the user selects a different theme mode
  • Added bounds checking for font size adjustments (min: 12px, max: 32px)
  • Imported additional Material-UI icons for theme modes (LightModeIcon, DarkModeIcon, SettingsBrightnessIcon)

Implementation Details

  • The styles drawer uses a bottom anchor with rounded top corners for a modern appearance
  • Theme selection displays visual feedback with a colored circular border and filled background for the selected mode
  • Font size adjustment includes a live preview with the letter "A" displayed at the current size
  • State management includes stylesDrawerOpen for drawer visibility and currentTheme for tracking the current theme mode
  • Theme changes are persisted to cookies and trigger a custom event for global theme updates

https://claude.ai/code/session_01UvzZx1E7iP1DMu22xLEY7n

Moves theme mode (light/dark/system) and font size controls out of the
toolbar into a bottom sheet triggered by a FormatSize icon button.
The drawer shows three circular theme buttons and +/- font size controls.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UvzZx1E7iP1DMu22xLEY7n
@netlify

netlify Bot commented Jun 20, 2026

Copy link
Copy Markdown

Deploy Preview for savrdev ready!

Name Link
🔨 Latest commit 2bf2eca
🔍 Latest deploy log https://app.netlify.com/projects/savrdev/deploys/6a36df8b0a8aef0008ac9b52
😎 Deploy Preview https://deploy-preview-55--savrdev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

claude added 3 commits June 20, 2026 05:14
Adds Inter (sans), Lora (serif), Lato (humanist), and Mono options via
a dropdown in the styles drawer. Fonts loaded from Google Fonts for
consistent cross-platform rendering. Selection persisted in a cookie.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UvzZx1E7iP1DMu22xLEY7n
Force font-family onto all child elements (excluding code/pre) since
injected HTML elements override inherited styles from the parent Box.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UvzZx1E7iP1DMu22xLEY7n
Instead of forcing font-family on every child element, set a
--savr-font-family CSS variable on the container and reference it in
web.css where #savr-content font-family is declared.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UvzZx1E7iP1DMu22xLEY7n
@jonocodes
jonocodes merged commit c61b2c2 into dev Jun 20, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants