fix: Update header style for Webview and transactions #12783

brianacnguyen · 2024-12-19T04:18:09Z

Description

This PR updates the header style for Webview and transactions tab to be using the HeaderBase component

Related issues

Fixes: #10664

Manual testing steps

Click on the "More" button for Account
Click on View on Etherscan
Toggle to Dark Mode
Observe change

Screenshots/Recordings

Before

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-02-13.at.16.48.01.mp4

After

https://github.com/user-attachments/assets/cd61ad29-565d-4566-bd82-7bb0e8b7ad0b
https://github.com/user-attachments/assets/8839ae04-a426-4ae2-9752-46c7eb0332ee

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
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 format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). 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.

github-actions · 2024-12-19T04:18:20Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

…to header/webview

github-actions · 2025-02-14T00:49:56Z

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 825bc77
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/a442a196-9a75-44bd-bd3c-a786a3fde713

Note

This comment will auto-update when build completes
You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

…-mobile into header/webview

github-actions · 2025-02-14T00:59:00Z

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 78e62a8
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/b53a3284-8c66-42ab-bc75-786fc6dc5226

Note

This comment will auto-update when build completes
You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

brianacnguyen · 2025-02-14T18:10:46Z

app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap

-                          "marginRight": 16,
-                          "marginTop": 12,
-                        }
-                      }
                      testID="navbar-account-button"


Removed persistent style and instead let each usage handle styles according to context

brianacnguyen · 2025-02-14T18:11:08Z

app/components/UI/AccountRightButton/index.tsx

-    marginBottom: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
  placeholderInput: {


Removed persistent style and instead let each usage handle styles according to context

brianacnguyen · 2025-02-14T18:11:41Z

app/components/UI/BrowserUrlBar/BrowserUrlBar.styles.ts

+      marginBottom: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
  });


Reapplied style for BrowserUrlBar since it does not use HeaderBase

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-02-14.at.10.06.47.mp4

brianacnguyen · 2025-02-14T18:13:15Z

app/components/UI/Navbar/index.js

+        }
+      >
+        <NavbarTitle title={title} />
+      </HeaderBase>


Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-02-13.at.17.28.34.mp4

brianacnguyen · 2025-02-14T18:13:47Z

app/components/UI/Navbar/index.js

-    headerTitle: () => (
-      <Text style={innerStyles.headerTitleStyle}>{title}</Text>
+    header: () => (
+      <HeaderBase


Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-02-13.at.16.46.24.mp4

…to header/webview

github-actions · 2025-02-14T18:58:36Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 8ae149c
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/29927790-895a-497f-80e1-a6bbcdbb9521

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

github-actions · 2025-02-15T02:15:13Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 5a58eb7
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/b4f28d59-c483-445f-836a-e9007011691c

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

sonarqubecloud · 2025-02-15T02:23:37Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

brianacnguyen added 4 commits December 18, 2024 09:10

Updated navbar title to remove green dot

5190de1

Updated Header in transactions

97047cc

Cleaned up transaction header style

a610af0

Updated styling for webview header

fe2b456

brianacnguyen added the team-design-system All issues relating to design system in Mobile label Dec 19, 2024

brianacnguyen self-assigned this Dec 19, 2024

brianacnguyen requested review from a team as code owners December 19, 2024 04:18

brianacnguyen marked this pull request as draft December 19, 2024 04:18

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

8ba6ed6

…to header/webview

brianacnguyen marked this pull request as ready for review February 14, 2025 00:49

Merge branch 'main' into header/webview

825bc77

brianacnguyen added the Run Smoke E2E Requires smoke E2E testing label Feb 14, 2025

brianacnguyen added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels Feb 14, 2025

brianacnguyen marked this pull request as draft February 14, 2025 00:51

brianacnguyen removed the Run Smoke E2E Requires smoke E2E testing label Feb 14, 2025

brianacnguyen added 3 commits February 13, 2025 16:55

Updated snapshots

33a02b9

Fixed error in accountrightbutton

60a3a97

Merge branch 'header/webview' of https://github.com/MetaMask/metamask…

78e62a8

…-mobile into header/webview

brianacnguyen marked this pull request as ready for review February 14, 2025 00:58

brianacnguyen added the Run Smoke E2E Requires smoke E2E testing label Feb 14, 2025

brianacnguyen added Run Smoke E2E Requires smoke E2E testing needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) and removed Run Smoke E2E Requires smoke E2E testing labels Feb 14, 2025

Updated webview styles

0a082e2

brianacnguyen changed the title ~~fix: Update header style for Webview~~ fix: Update header style for Webview and transactions Feb 14, 2025

brianacnguyen commented Feb 14, 2025

View reviewed changes

brianacnguyen added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels Feb 14, 2025

brianacnguyen added 2 commits February 14, 2025 10:54

Readded testid for webview navbar

47ff78f

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

8ae149c

…to header/webview

brianacnguyen added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels Feb 14, 2025

brianacnguyen added 3 commits February 14, 2025 18:07

Reverting unnecessary changes

b5bdfb2

Removed more unnecessary changes

55e69a2

Removing more unnecessary changes

5a58eb7

brianacnguyen added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels Feb 15, 2025

georgewrmarshall approved these changes Feb 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: Update header style for Webview and transactions #12783

fix: Update header style for Webview and transactions #12783

Uh oh!

brianacnguyen commented Dec 19, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Dec 19, 2024

Uh oh!

github-actions bot commented Feb 14, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Feb 14, 2025 •

edited

Loading

Uh oh!

brianacnguyen Feb 14, 2025

Uh oh!

brianacnguyen Feb 14, 2025

Uh oh!

brianacnguyen Feb 14, 2025

Uh oh!

brianacnguyen Feb 14, 2025

Uh oh!

brianacnguyen Feb 14, 2025

Uh oh!

brianacnguyen Feb 14, 2025

Uh oh!

github-actions bot commented Feb 14, 2025 •

edited by metamaskbot

Loading

Uh oh!

github-actions bot commented Feb 15, 2025 •

edited by metamaskbot

Loading

Uh oh!

sonarqubecloud bot commented Feb 15, 2025

Uh oh!

Uh oh!

Uh oh!

fix: Update header style for Webview and transactions #12783

Are you sure you want to change the base?

fix: Update header style for Webview and transactions #12783

Uh oh!

Conversation

brianacnguyen commented Dec 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Dec 19, 2024

Uh oh!

github-actions bot commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

github-actions bot commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

brianacnguyen Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 14, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

github-actions bot commented Feb 15, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

sonarqubecloud bot commented Feb 15, 2025

Quality Gate passed

Uh oh!

Uh oh!

brianacnguyen commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Feb 14, 2025 •

edited

Loading

github-actions bot commented Feb 14, 2025 •

edited

Loading

github-actions bot commented Feb 14, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Feb 15, 2025 •

edited by metamaskbot

Loading