Use consistent "Success" green for icon backgrounds#306
Merged
Conversation
**Why**: For consistency of our colors and available icons, and to avoid mismatching colors between badges.
Contributor
Author
|
Visual regression failure is, unsurprisingly, for the badge updates:
|
aduth
added a commit
that referenced
this pull request
Mar 25, 2022
zachmargolis
approved these changes
Mar 25, 2022
src/img/alerts/unphishable.svg
Outdated
| <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 17C13.1944 17 17 13.1944 17 8.5C17 3.80557 13.1944 0 8.5 0C3.80557 0 0 3.80557 0 8.5C0 13.1944 3.80557 17 8.5 17ZM12.75 8.34821C12.75 7.84541 12.3421 7.4375 11.8393 7.4375H11.3839V6.07143C11.3839 4.48148 10.09 3.1875 8.5 3.1875C6.91005 3.1875 5.61607 4.48148 5.61607 6.07143V7.4375H5.16072C4.65793 7.4375 4.25 7.84541 4.25 8.34821V11.9911C4.25 12.4939 4.65793 12.9018 5.16072 12.9018H11.8393C12.3421 12.9018 12.75 12.4939 12.75 11.9911V8.34821ZM9.86607 6.07143V7.4375H7.13393V6.07143C7.13393 5.31819 7.74677 4.70537 8.5 4.70537C9.25323 4.70537 9.86607 5.31819 9.86607 6.07143ZM7.64999 9.6232C7.64999 9.15376 8.03056 8.77319 8.5 8.77319C8.96944 8.77319 9.35001 9.15376 9.35001 9.6232V10.5946C9.35001 11.0641 8.96944 11.4446 8.5 11.4446C8.03056 11.4446 7.64999 11.0641 7.64999 10.5946V9.6232Z" fill="#63BB60"/> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path fill-rule="evenodd" d="M8.5 17a8.5 8.5 0 1 0 0-17 8.5 8.5 0 1 0 0 17zm4.25-8.652a.91.91 0 0 0-.911-.911h-.455V6.071A2.89 2.89 0 0 0 8.5 3.188a2.89 2.89 0 0 0-2.884 2.884v1.366h-.455a.91.91 0 0 0-.911.911v3.643a.91.91 0 0 0 .911.911h6.679a.91.91 0 0 0 .911-.911V8.348zM9.866 6.071v1.366H7.134V6.071A1.37 1.37 0 0 1 8.5 4.705a1.37 1.37 0 0 1 1.366 1.366zM7.65 9.623a.85.85 0 0 1 1.7 0v.971a.85.85 0 0 1-1.7 0v-.971z" fill="#18852e"/></svg> No newline at end of file |
Contributor
There was a problem hiding this comment.
Does this new image need a viewBox?
Contributor
Author
There was a problem hiding this comment.
Ooh, great catch!
Yes, technically. We enforce it elsewhere, since it's needed for Internet Explorer support. Maybe we won't need it anymore once we can finally drop support though.
Contributor
Author
There was a problem hiding this comment.
This also reminds me: We should implement SVG optimization / validation in this project.
Contributor
Author
nickttng
approved these changes
Mar 25, 2022
Contributor
nickttng
left a comment
nickttng
left a comment
There was a problem hiding this comment.
LGTM. I've noted in LGDS Figma to update after this PR is merged.
Contributor
anniehirshman-gsa
left a comment
anniehirshman-gsa
left a comment
There was a problem hiding this comment.
LGTMx3 thank you!
Merged
aduth
added a commit
that referenced
this pull request
Aug 17, 2022
aduth
added a commit
that referenced
this pull request
Apr 3, 2023
aduth
added a commit
that referenced
this pull request
Apr 3, 2023
* Require Dart Sass * Disable mobile-lg and desktop responsive utilities by default * Remove asset-path-if-exists function * Remove image-path backwards compatibility * Remove unused gulp-replace * Fix method math.divide -> math.div fixup 2d63ae1 * Remove deprecated success-badge image Ref: #306 * Remove usa-alert__paragraph (1) the width does not match the width of a paragraph in prose anyways (2) there's already a utility to achieve this effect * Move breaking changes to correct location in CHANGELOG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why: For consistency of our colors and available icons, and to avoid mismatching colors between badges.
Previously, there were three different colors used between badge borders and icon background:
#18852e(Used for border color, also the standardsuccesscolor token)#63BB60(Used for the "Unphishable" icon background)#38bf53(Used for the "Success" badge icon background)With these changes, we use
#18852e(successtoken) consistently.Screenshots:
Live preview: