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

The dark theme on my phone is making some buttons and text in the warning messages invisible. This doesn't affect the buttons' functionality. #11481

Closed
ZbrancaI opened this issue Sep 27, 2024 · 1 comment · Fixed by #11552
Closed

The dark theme on my phone is making some buttons and text in the warning messages invisible. This doesn't affect the buttons' functionality. #11481

ZbrancaI opened this issue Sep 27, 2024 · 1 comment · Fixed by #11552
Labels
INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. regression-RC-7.32.0 Regression bug that was found in release candidate (RC) for release 7.32.0 release-7.33.0 Issue or pull request that will be included in release 7.33.0 release-blocker This bug is blocking the next release Sev1-high An issue that may have caused fund loss or access to wallet in the past & may still be ongoing team-wallet-ux type-bug Something isn't working

Comments

@ZbrancaI
Copy link 

          The dark theme on my phone is making some buttons and text in the warning messages invisible. This doesn't affect the buttons' functionality.

Steps to reproduce:

  1. Have the device set on dark mode;
  2. Open the MetaMask wallet;
  3. Open the QR Scanner function;
  4. Scan the QR code corresponding to a Private Key;
  5. The confirmation window pops up;
  6. The 'Private key detected' text and 'cancel'/'yes' buttons are not visible.
  • Build: 1437
  • Version: 7.32.0
  • OS: Android
  • Device: Xiaomi Redmi Note 8 Pro

Link to the recording & screenshots:

https://drive.google.com/file/d/1nRe5IyuAwuQwYLXbDxThmw0iNWOBfRd7/view?usp=sharing
https://drive.google.com/file/d/1VVuNEJBwYl-rn_4DbNhgoE3wU3p7RFjF/view?usp=sharing
https://drive.google.com/file/d/1nQvZMf5C95spS_u_A1JCK06xSysRxx3B/view?usp=sharing

Expected behavior:

  • The text and the button to be visible even if you're using the dark mode of the phone.

Actual behavior:

  • When dark mode is enabled on the device, it causes the pop-up titles and buttons to become invisible. This happens because the window background remains white, while the text and buttons also turn white, blending in and making them unreadable.

Workaround:

  • Use light mode on the device

Originally posted by @ZbrancaI in https://github.com/MetaMask/mobile-planning/issues/1929#issuecomment-2378781250
@metamaskbot metamaskbot added the INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. label Sep 27, 2024
@ZbrancaI ZbrancaI added team-wallet-ux regression-RC-7.32.0 Regression bug that was found in release candidate (RC) for release 7.32.0 labels Sep 27, 2024
@Andepande Andepande added the type-bug Something isn't working label Sep 27, 2024
@github-project-automation github-project-automation bot moved this to To be fixed in Bugs by severity Sep 27, 2024
@github-project-automation github-project-automation bot moved this to To be fixed in Bugs by team Sep 27, 2024
@Andepande Andepande added the Sev2-normal An issue that may lead to users misunderstanding some limited risks they are taking label Sep 27, 2024
@jonybur jonybur self-assigned this Sep 30, 2024
@Cal-L Cal-L added Sev1-high An issue that may have caused fund loss or access to wallet in the past & may still be ongoing release-blocker This bug is blocking the next release and removed Sev2-normal An issue that may lead to users misunderstanding some limited risks they are taking labels Sep 30, 2024
@vinnyhoward
Copy link
Contributor

I've noticed that this error persists in our android alerts. The button text and title just disappear in dark mode

This was referenced Oct 1, 2024
Merged
Open
github-merge-queue bot pushed a commit that referenced this issue Oct 1, 2024
@vinnyhoward
fix(11481): android system alert respects dark mode themes (#11552)
95f9a91 
## **Description**

In android our system alerts do not respect our dark mode themes as they
should.

KNOWN BUG:
When switching from light mode to dark mode the changes to Android
system alerts do not happen. The user is forced to close the app and
reopen and the alerts will be in dark mode. However switching from dark
to light mode is fine.
Would love feedback on how to solve this issue

I've created an issue for this bug
[here](#11553)

## **Related issues**

Fixes:
[#11481](#11481)

## **Manual testing steps**

1. Make sure you're using an Android device, rebuild or reinstall a
fresh app to make sure the changes are there.
2. Goto Android system settings and select light mode
3. Goto the MetaMask wallet home page
4. Click on the QR code on the top right
5. Scan an invalid QR code
6. See that the system alert is white background with black text
7. Go to the Android settings and change it to dark mode
8. Go back to the MetaMask app and scan the invalid QR code again, you
should see a dark alert with white text. If not force close the app and
reopen and the changes will take place

## **Screenshots/Recordings**

NA

### **Before**

| Dark Mode (broken) | Light Mode (not broken)
|:---:|:---:|

|![Screenshot_1727810220](https://github.com/user-attachments/assets/c0d3dd99-6939-4199-918f-d127b1bd6dd7)|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)||

### **After**

| Dark Mode  | Light Mode |
|:---:|:---:|

|![darkmode](https://github.com/user-attachments/assets/543b0c4d-6e69-48c2-b965-2764378f6f03)]|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)|

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.
@github-project-automation github-project-automation bot moved this from To be fixed to Fixed in Bugs by severity Oct 1, 2024
@github-project-automation github-project-automation bot moved this from To be fixed to Fixed in Bugs by team Oct 1, 2024
runway-github bot added a commit that referenced this issue Oct 1, 2024
@runway-github
temp+fix(11481): android system alert respects dark mode themes (#11552)
0e22ed1 
## **Description**

In android our system alerts do not respect our dark mode themes as they
should.

KNOWN BUG:
When switching from light mode to dark mode the changes to Android
system alerts do not happen. The user is forced to close the app and
reopen and the alerts will be in dark mode. However switching from dark
to light mode is fine.
Would love feedback on how to solve this issue

I've created an issue for this bug
[here](#11553)

## **Related issues**

Fixes:
[#11481](#11481)

## **Manual testing steps**

1. Make sure you're using an Android device, rebuild or reinstall a
fresh app to make sure the changes are there.
2. Goto Android system settings and select light mode
3. Goto the MetaMask wallet home page
4. Click on the QR code on the top right
5. Scan an invalid QR code
6. See that the system alert is white background with black text
7. Go to the Android settings and change it to dark mode
8. Go back to the MetaMask app and scan the invalid QR code again, you
should see a dark alert with white text. If not force close the app and
reopen and the changes will take place

## **Screenshots/Recordings**

NA

### **Before**

| Dark Mode (broken) | Light Mode (not broken)
|:---:|:---:|

|![Screenshot_1727810220](https://github.com/user-attachments/assets/c0d3dd99-6939-4199-918f-d127b1bd6dd7)|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)||

### **After**

| Dark Mode  | Light Mode |
|:---:|:---:|

|![darkmode](https://github.com/user-attachments/assets/543b0c4d-6e69-48c2-b965-2764378f6f03)]|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)|

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.
runway-github bot added a commit that referenced this issue Oct 1, 2024
@runway-github
temp+fix(11481): android system alert respects dark mode themes (#11552)
784aa5f 
## **Description**

In android our system alerts do not respect our dark mode themes as they
should.

KNOWN BUG:
When switching from light mode to dark mode the changes to Android
system alerts do not happen. The user is forced to close the app and
reopen and the alerts will be in dark mode. However switching from dark
to light mode is fine.
Would love feedback on how to solve this issue

I've created an issue for this bug
[here](#11553)

## **Related issues**

Fixes:
[#11481](#11481)

## **Manual testing steps**

1. Make sure you're using an Android device, rebuild or reinstall a
fresh app to make sure the changes are there.
2. Goto Android system settings and select light mode
3. Goto the MetaMask wallet home page
4. Click on the QR code on the top right
5. Scan an invalid QR code
6. See that the system alert is white background with black text
7. Go to the Android settings and change it to dark mode
8. Go back to the MetaMask app and scan the invalid QR code again, you
should see a dark alert with white text. If not force close the app and
reopen and the changes will take place

## **Screenshots/Recordings**

NA

### **Before**

| Dark Mode (broken) | Light Mode (not broken)
|:---:|:---:|

|![Screenshot_1727810220](https://github.com/user-attachments/assets/c0d3dd99-6939-4199-918f-d127b1bd6dd7)|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)||

### **After**

| Dark Mode  | Light Mode |
|:---:|:---:|

|![darkmode](https://github.com/user-attachments/assets/543b0c4d-6e69-48c2-b965-2764378f6f03)]|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)|

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.
runway-github bot pushed a commit that referenced this issue Oct 1, 2024
@vinnyhoward
chore(runway): cherry-pick fix(11481): android system alert respects …
454404e 
…dark mode themes (#11552)

## **Description**

In android our system alerts do not respect our dark mode themes as they
should.

KNOWN BUG:
When switching from light mode to dark mode the changes to Android
system alerts do not happen. The user is forced to close the app and
reopen and the alerts will be in dark mode. However switching from dark
to light mode is fine.
Would love feedback on how to solve this issue

I've created an issue for this bug
[here](#11553)

## **Related issues**

Fixes:
[#11481](#11481)

## **Manual testing steps**

1. Make sure you're using an Android device, rebuild or reinstall a
fresh app to make sure the changes are there.
2. Goto Android system settings and select light mode
3. Goto the MetaMask wallet home page
4. Click on the QR code on the top right
5. Scan an invalid QR code
6. See that the system alert is white background with black text
7. Go to the Android settings and change it to dark mode
8. Go back to the MetaMask app and scan the invalid QR code again, you
should see a dark alert with white text. If not force close the app and
reopen and the changes will take place

## **Screenshots/Recordings**

NA

### **Before**

| Dark Mode (broken) | Light Mode (not broken)
|:---:|:---:|

|![Screenshot_1727810220](https://github.com/user-attachments/assets/c0d3dd99-6939-4199-918f-d127b1bd6dd7)|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)||

### **After**

| Dark Mode  | Light Mode |
|:---:|:---:|

|![darkmode](https://github.com/user-attachments/assets/543b0c4d-6e69-48c2-b965-2764378f6f03)]|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)|

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.
@runway-github runway-github bot mentioned this issue Oct 1, 2024
Merged
7 tasks
Cal-L pushed a commit that referenced this issue Oct 1, 2024
@runway-github @vinnyhoward
chore(runway): cherry-pick fix(11481): android system alert respects …
e2090a8 
…dark mode themes (#11555)

- fix(11481): android system alert respects dark mode themes (#11552)

## **Description**

In android our system alerts do not respect our dark mode themes as they
should.

KNOWN BUG:
When switching from light mode to dark mode the changes to Android
system alerts do not happen. The user is forced to close the app and
reopen and the alerts will be in dark mode. However switching from dark
to light mode is fine.
Would love feedback on how to solve this issue

I've created an issue for this bug
[here](#11553)

## **Related issues**

Fixes:
[#11481](#11481)

## **Manual testing steps**

1. Make sure you're using an Android device, rebuild or reinstall a
fresh app to make sure the changes are there.
2. Goto Android system settings and select light mode
3. Goto the MetaMask wallet home page
4. Click on the QR code on the top right
5. Scan an invalid QR code
6. See that the system alert is white background with black text
7. Go to the Android settings and change it to dark mode
8. Go back to the MetaMask app and scan the invalid QR code again, you
should see a dark alert with white text. If not force close the app and
reopen and the changes will take place

## **Screenshots/Recordings**

NA

### **Before**

| Dark Mode (broken) | Light Mode (not broken)
|:---:|:---:|


|![Screenshot_1727810220](https://github.com/user-attachments/assets/c0d3dd99-6939-4199-918f-d127b1bd6dd7)|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)||

### **After**

| Dark Mode  | Light Mode |
|:---:|:---:|


|![darkmode](https://github.com/user-attachments/assets/543b0c4d-6e69-48c2-b965-2764378f6f03)]|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)|

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.
[95f9a91](95f9a91)

Co-authored-by: Vince Howard <[email protected]>
@jonybur jonybur removed their assignment Oct 1, 2024
@gauthierpetetin gauthierpetetin added the release-7.33.0 Issue or pull request that will be included in release 7.33.0 label Oct 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. regression-RC-7.32.0 Regression bug that was found in release candidate (RC) for release 7.32.0 release-7.33.0 Issue or pull request that will be included in release 7.33.0 release-blocker This bug is blocking the next release Sev1-high An issue that may have caused fund loss or access to wallet in the past & may still be ongoing team-wallet-ux type-bug Something isn't working
Projects
Bugs by severity
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(11481): android system alert respects dark mode themes MetaMask/metamask-mobile
7 participants
@gauthierpetetin @Cal-L @jonybur @vinnyhoward @metamaskbot @ZbrancaI @Andepande