Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark mode audit style updates #2152

Merged
merged 11 commits into from
Jun 12, 2024
Merged

Dark mode audit style updates #2152

merged 11 commits into from
Jun 12, 2024

Conversation

laurakwhit
Copy link
Contributor

@laurakwhit laurakwhit commented Jun 10, 2024 •
edited
Loading

Description & motivation 💭

  • Update Menu component border color
  • Add border and make "Cancel" a ghost button by default in the Modal component
  • Update border color in DayOfMonthPicker component
  • Audit and update Badge component types and their corresponding colors
  • Add interactive-table-hover background color and update table rows to use it on hover
  • Revert green status color back to green-300 from #71D375
  • Keep off-white background and space-black text color for Timeline in dark mode

Screenshots (if applicable) 📸

Before After
Screenshot 2024-06-10 at 4 50 24 PM Screenshot 2024-06-10 at 4 50 42 PM
Screenshot 2024-06-10 at 4 50 02 PM Screenshot 2024-06-10 at 4 49 35 PM
Screenshot 2024-06-10 at 4 24 15 PM Screenshot 2024-06-10 at 4 48 40 PM

Design Considerations 🎨

Testing 🧪

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

DT-2200
DT-2202
DT-2207
DT-2208

Docs

Any docs updates needed?

@laurakwhit laurakwhit requested review from rossedfort and a team as code owners June 10, 2024 23:46
@vercel Vercel
Copy link

vercel bot commented Jun 10, 2024 •
edited
Loading

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 12, 2024 7:55pm

@Alex-Tideman
Copy link
Contributor

Alex-Tideman commented Jun 11, 2024 •
edited
Loading

One thing we could probably throw in here is the <Link inverse /> property. We should make that maybe <Link white /> instead so it's always white text instead of inverse since the background is always the same color regardless of the dark/light mode.

Screenshot 2024-06-11 at 3 53 48 PM

laurakwhit
laurakwhit commented Jun 12, 2024
View reviewed changes
src/lib/holocene/link.svelte
&.inverse {
@apply text-inverse hover:text-brand focus-visible:text-brand;
&.light {
@apply text-off-white;
Copy link
Contributor Author

@laurakwhit laurakwhit Jun 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@Alex-Tideman changed the inverse prop to light here.

@laurakwhit laurakwhit force-pushed the more-dark-mode-audit-updates branch from a20eb71 to 3ce7c07 Compare June 12, 2024 00:17
@laurakwhit laurakwhit force-pushed the more-dark-mode-audit-updates branch from 163443c to eb354c0 Compare June 12, 2024 19:54
@laurakwhit laurakwhit merged commit 729a5d5 into main Jun 12, 2024
10 checks passed
@laurakwhit laurakwhit deleted the more-dark-mode-audit-updates branch June 12, 2024 20:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Alex-Tideman Alex-Tideman Alex-Tideman approved these changes

@rossedfort rossedfort Awaiting requested review from rossedfort rossedfort is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@laurakwhit @Alex-Tideman