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

[Design quality]: Update white Ethereum logo for assets and networks from white SVG to purple SVG #26936

Closed
amandaye0h opened this issue Sep 5, 2024 · 1 comment
Labels
area-design Design bug (previously known as papercuts - ask Hilary for more detail) regression-prod-11.16.15 Regression bug that was found in production in release 11.16.15 Sev3-low Low severity; minimal to no impact upon users team-assets type-bug

Comments

@amandaye0h
Copy link

Describe the bug

The white logo is inconsistent with other wallet/dApps and with Mobile/Portfolio. Updating the logo to purple improves the cohesion and visuals.

Expected behavior

  1. eth_logo.svg in this folder is updated to this purple svg

ethereum

  1. Check that all tokens and network avatars in light and dark mode are now purple

Screenshots/Recordings

Screenshot 2024-09-05 at 6 43 27 AM Screenshot 2024-09-05 at 6 43 35 AM

Figma link

Steps to reproduce

  1. Open MetaMask
  2. See the front page
  3. Open networks modal

Error messages or log output

No response

Detection stage

In production (default)

Version

11.16.15

Build type

None

Browser

Brave

Operating system

MacOS

Hardware wallet

No response

Additional context

Ping @amandaye0h for context

Severity

No response

@amandaye0h amandaye0h added type-bug area-design Design bug (previously known as papercuts - ask Hilary for more detail) labels Sep 5, 2024
@metamaskbot metamaskbot added the regression-prod-11.16.15 Regression bug that was found in production in release 11.16.15 label Sep 5, 2024
@anaamolnar anaamolnar added Sev3-low Low severity; minimal to no impact upon users team-wallet-ux team-assets and removed team-wallet-ux labels Sep 6, 2024
gambinish added a commit that referenced this issue Sep 20, 2024
## **Description**

Updates ETH token and network icon to purple for better visibility on
light mode.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27295?quickstart=1)

## **Related issues**

Issue: #26936
Jira: https://consensyssoftware.atlassian.net/browse/MMASSETS-378

## **Manual testing steps**

Check to see that Ethereum token and network logos are the purple one

@amandaye0h the
[figma](https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?node-id=4602-89483&node-type=frame&m=dev)
design logo had a white border. I modified the svg to remove this
border, but can you please check that it looks alright to you?

## **Screenshots/Recordings**

### **Before**

<img width="357" alt="Screenshot 2024-09-19 at 3 37 49 PM"
src="https://github.com/user-attachments/assets/7646d086-b140-4360-999c-94f4f0d64250">
<img width="358" alt="Screenshot 2024-09-19 at 3 38 12 PM"
src="https://github.com/user-attachments/assets/08265151-7bff-46ef-8fd8-0e9c64c45e19">

### **After**

<img width="361" alt="Screenshot 2024-09-19 at 3 33 55 PM"
src="https://github.com/user-attachments/assets/5adf82a0-23eb-419e-9fb6-c8d438ab1937">
<img width="358" alt="Screenshot 2024-09-19 at 3 34 23 PM"
src="https://github.com/user-attachments/assets/7a31dc5b-ba88-4052-a643-2822f7dfa01d">

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
@amandaye0h
Copy link
Author

Resolved here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-design Design bug (previously known as papercuts - ask Hilary for more detail) regression-prod-11.16.15 Regression bug that was found in production in release 11.16.15 Sev3-low Low severity; minimal to no impact upon users team-assets type-bug
Projects
Archived in project
Development

No branches or pull requests

3 participants