feat: design system ui updates #177
Merged
Conversation
This file contains 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
| source: require.resolve( | ||
| '@metamask/design-tokens/src/css/design-tokens.css', | ||
| ), | ||
| source: require.resolve('@metamask/design-tokens/styles.css'), |
There was a problem hiding this comment.
Updating for design tokens v4
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/@metamask/[email protected] |
| @@ -23,7 +23,7 @@ | |||
| "test": "yarn playwright test" | |||
| }, | |||
| "dependencies": { | |||
| "@metamask/design-tokens": "^1.12.0", | |||
| "@metamask/design-tokens": "^4.0.0", | |||
There was a problem hiding this comment.
Upgrading design tokens to latest. No breaking changes with CSS variables used in phishing detect https://github.com/MetaMask/design-tokens/blob/main/MIGRATION.md#from-version-300-to-400
Comment on lines
-183
to
-228
| .custom-button { | ||
| display: inline-block; | ||
| padding: 12px 24px; | ||
| border-radius: 8px; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| cursor: pointer; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| .custom-proceed-button { | ||
| display: inline-block; | ||
| padding: 12px 12px; | ||
| border-radius: 8px; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| cursor: pointer; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| .dashboard-button { | ||
| background-color: #00ff00; | ||
| color: black; | ||
| border: none; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .proceed-button { | ||
| background-color: transparent; | ||
| color: #ffffff; | ||
| border: none; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| .custom-button:hover { | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| .spacer { | ||
| height: 16px; | ||
| } | ||
|
|
||
| .spacer-larger { | ||
| height: 48px; |
There was a problem hiding this comment.
Removing unused CSS classnames
| @@ -1,5 +1,5 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <html lang="en" data-theme="dark"> | |||
There was a problem hiding this comment.
Locks phishing page to dark mode
| <button class="custom-button dashboard-button" id="portfolio-link">Back to safety</button> | ||
| <button class="custom-proceed-button proceed-button" id="unsafe-continue">Proceed anyway</button> | ||
| </div> | ||
| <button class="button-primary" id="portfolio-link" data-theme="light"> |
There was a problem hiding this comment.
Locks button to light mode to adhere to design system standards
AugmentedMode
added a commit
that referenced
this pull request
Oct 17, 2024
* feat: new ui v1 - messy code for mvp * feat: correct twitter logo * chore: cleanup code * chore: cleanup code * chore: fixing tests * chore: cleanup * chore: tests now pass * chore: cleanup comments * chore: fixed tests for Proceed anyway * rename portfolio button to back top safety * fix tests * feat: design system ui updates (#177) * fix: redirect to portfolio so that the client handles the url * fix: update ubuntu version * fix: set all ubuntu ci versions to 24.04 to fix dependancy issues * fix: bring back ubuntu-latest * fix: try ubuntu-22 packages * fix: bring back depends * fix: npx playwright install-deps * chore: remove build folder * chore: add build folder * test: tests now pass --------- Co-authored-by: George Marshall <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
This pull request introduces updates to the HTML and CSS of the phishing detection page to improve consistency with the MetaMask design system and brand guidelines. The changes include:
These updates contribute to brand integrity and trust by enhancing the visual consistency between the phishing detection page and the MetaMask extension. The page remains fully theme-enabled, with the exception of the X logo and the MetaMask phishing protection image.
Manual testing steps
Screenshots/Recordings
Before
before720.mov
After
after720.mov