Skip to content

Conversation

@andrewzamojc
Copy link
Contributor

@andrewzamojc andrewzamojc commented Jun 2, 2025

Description & motivation 💭

This PR updates the dark mode 3-state toggle button, to be a dropdown menu. This is based on feedback from @rossnelson during team testing, and ok'ed by @bilal-karim from design. This is intended to simplify and clarify the interaction for the user, and be more like other websites with dark mode options.

  • updated integration tests to use menu instead of toggle button
  • added a playwrite custom matcher to check on local storage values, to capture the tricky syntax
  • adds a size prop to dark mode menu and time zone menu, as requested by @bilal-karim
  • deletes unused components dark-mode-icon-button and dark-mode-navigation-button

Screenshots (if applicable) 📸

Screenshot 2025-06-02 at 1 31 10 PM Screenshot 2025-06-02 at 1 30 53 PM

Design Considerations 🎨

I got the UX go-ahead from @bilal-karim to convert 3-state dark mode toggle to a dropdown menu. Bilal also requested the size change in the bottom nav usage of it.

@bilal-karim dropdown alignment seems slightly off in the bottom nav menu, this is existing. Probably easy to fix but that can be another task.

Testing 🧪

Tested manually locally.

Updated integration tests for both.

Will test in cloud-ui before release.

How was this tested 👻

  • Manual testing
  • E2E tests added
  • Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

@vercel
Copy link

vercel bot commented Jun 2, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
holocene ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 2, 2025 5:57pm

@andrewzamojc andrewzamojc marked this pull request as ready for review June 2, 2025 18:33
@andrewzamojc andrewzamojc requested review from a team, Alex-Tideman and rossedfort as code owners June 2, 2025 18:33
{#if open}
<div class="flex h-full flex-col justify-start gap-6 overflow-auto px-4 py-8">
<TimezoneSelect position="left" />
<TimezoneSelect position="left" size="sm" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annotation: requested by @bilal-karim to match other menu item sizes

});

test('user can toggle dark mode between on, off, and system default', async ({
test('user can select System Default option via dropdown menu', async ({
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annotation: Thanks AI for updating the tests for.

@andrewzamojc andrewzamojc merged commit 19470be into main Jun 2, 2025
15 checks passed
@andrewzamojc andrewzamojc deleted the DT-2854-5-dark-mode-menu branch June 2, 2025 21:20
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.

3 participants