Skip to content

Replace native time picker with custom styled component#27

Merged
alari76 merged 1 commit intomainfrom
fix/custom-time-picker-styling
Mar 9, 2026
Merged

Replace native time picker with custom styled component#27
alari76 merged 1 commit intomainfrom
fix/custom-time-picker-styling

Conversation

@alari76
Copy link
Copy Markdown
Contributor

@alari76 alari76 commented Mar 9, 2026

Summary

  • Replace native <input type="time"> with a custom TimePicker component that uses app fonts (Inconsolata) and color scheme (accent/neutral palette)
  • SVG clock icon with proper contrast in dark mode (uses text-neutral-3 instead of CSS filter hack)
  • Remove unused themed-time-input CSS rules from index.css

Test plan

  • Open Add Workflow modal → verify time picker dropdown uses monospace font and app colors
  • Open Edit Workflow modal → same verification
  • Click outside dropdown → verify it closes
  • Press Escape → verify it closes
  • Verify selected hour/minute scroll into view on open
  • Check clock icon contrast in dark mode

🤖 Generated with Claude Code

Native browser time picker dropdowns can't be styled with CSS, causing
mismatched fonts and colors. Custom component uses app fonts (Inconsolata),
app color scheme (accent/neutral palette), and a higher-contrast clock icon.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alari76 alari76 merged commit 587a1ce into main Mar 9, 2026
2 checks passed
@alari76 alari76 deleted the fix/custom-time-picker-styling branch March 10, 2026 05:10
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.

1 participant