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.

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

fix: design: dark mode adjustments #1091

Merged
merged 19 commits into from
Sep 6, 2023
Merged

Conversation

shkeating
Copy link
Contributor

@shkeating shkeating commented Aug 31, 2023

SC-2314

Proposed changes

  • theme adjustments to dark mode, and linking some missed properties to themes, such as the search bar.
  • factors in input from accessibility usability around color contrast on some elements in dark mode.
    -removes aurora (light green) color from dark mode theme and replaces with light variations of ultraviolet
  • adjusts interaction patterns to follow same principles:
  • if something is hover/focused in light mode, it should get darker in color
  • if something is hover/focused in dark mode, it should get lighter in color

Reviewer notes

Setup

Start the system

yarn services:up
yarn dev
cd ../ussf-portal-cms
yarn dev

Login to the portal http://localhost:3000

Start storybook

yarn storybook

Login to storybook http://localhost:6006, though the command above should open it for you


Code review steps

As the original developer, I have

  • Met the acceptance criteria
  • Created new stories in Storybook if applicable
  • Created/modified automated unit tests in Jest
  • Created/modified automated E2E tests
  • Followed guidelines for zero-downtime deploys, if applicable
  • Use ANDI to check for basic a11y issues

As a reviewer, I have

Check out our How to review a pull request document.


Screenshots

image image image

hover

@shkeating shkeating requested a review from a team as a code owner August 31, 2023 01:06
@shortcut-integration
Copy link

This pull request has been linked to Shortcut Story #2314: dark mode styling updates.

@shkeating
Copy link
Contributor Author

updated images to reflect change of colors from $theme-ultraviolet- to $theme-ultraviolet-muted-

@shkeating shkeating requested a review from malworks August 31, 2023 20:09
Copy link
Contributor

@malworks malworks left a comment

Choose a reason for hiding this comment

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

:chef-kiss:

Copy link
Contributor

@jcbcapps jcbcapps left a comment

Choose a reason for hiding this comment

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

LGTM! Great work!

Copy link
Contributor

@gidjin gidjin left a comment

Choose a reason for hiding this comment

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

LGTM!

@jcbcapps jcbcapps merged commit 9c67a4a into main Sep 6, 2023
@jcbcapps jcbcapps deleted the sc-2314-shk-dark-mode-updates branch September 6, 2023 18:19
gidjin pushed a commit that referenced this pull request Sep 11, 2023
## [4.23.0](4.22.1...4.23.0) (2023-09-11)


### Features

* Add resolvers and mutations for managing weather widget ([#1075](#1075)) ([a652766](a652766))
* Add support for CTA to link a document ([#1082](#1082)) ([fa0a6bb](fa0a6bb))
* Change h3 from book weight to bold weight ([#1076](#1076)) ([c92ae65](c92ae65))
* Create weather widget ([#1079](#1079)) ([3e6b91d](3e6b91d))
* Load user personnel data into portal ([#1088](#1088)) ([fe0a1d8](fe0a1d8))
* new loader animation ([#1085](#1085)) ([b099904](b099904))


### Bug Fixes

* **deps:** update dependencies ([#1059](#1059)) ([441a35c](441a35c))
* design: dark mode adjustments ([#1091](#1091)) ([9c67a4a](9c67a4a))
* design: Footer styling refactor for accessibility and responsive design improvements ([#1081](#1081)) ([18dd17f](18dd17f))
* local personnel-api service targets builder stage only ([#1084](#1084)) ([94950eb](94950eb))
* storybook dark theme ([#1065](#1065)) ([c5deda3](c5deda3))
* storybook deploy ([#1072](#1072)) ([ee21044](ee21044))


### Security Improvements

* **deps:** update auto-instrumentations-web and auto-instrumentations-node ([#1087](#1087)) ([71236b8](71236b8))
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.

4 participants