fix: fix padding tab, should be 16px

[salimtb]

Description

Currently segmented controls on wallet view, import token view, network view have no paddings on the side. Need to match designs and have 16px paddings on each side.
On import token view and network view, copies for segments are in all caps. Should be using normal sentence case (e.g. "Custom networks" instead of "CUSTOM NETWORKS"), font "Body-MD-Medium", and color "text/default" & "primary/default".

Related issues

Fixes: #8060

Manual testing steps

1. Wallet view: open the app and you are on the default wallet view.
2. Import token view: click on "Import tokens" on the wallet view
3. Network view: click on the network picker on the top of the wallet view, then click "Add Network"

Screenshots/Recordings

Before

before.mov

After

Screen.Recording.2024-01-03.at.13.03.50.mov

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• 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.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

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]

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.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/51c1e3e1-7e22-4c00-b364-2dca8a9a9ead
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[brianacnguyen]

that looks a lot cleaner! from what I can see from the design link below, do you think you can align the vertical padding, font styles, font colors, and bottom border color of each tab item?
https://www.figma.com/file/9s1RkDrGQYNhtJrsqvfNJW/MC-(Multichain)-mobile-v0.75?type=design&node-id=9-6412&mode=design&t=bb3vLdTNM6W0VdJp-0

[wachunei]

The app currently shows the scroll view edge to edge, this solution introduces a wrapper that changes this behavior, adding a padding to the main views. I just want to point this out and make sure DS team is ok with this.

[salimtb]

that looks a lot cleaner! from what I can see from the design link below, do you think you can align the vertical padding, font styles, font colors, and bottom border color of each tab item? https://www.figma.com/file/9s1RkDrGQYNhtJrsqvfNJW/MC-(Multichain)-mobile-v0.75?type=design&node-id=9-6412&mode=design&t=bb3vLdTNM6W0VdJp-0

@brianacnguyen done

[codecov-commenter]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (445ef2b) 39.65% compared to head (f0fe050) 39.65%.

Files	Patch %	Lines
app/components/Views/AddAsset/AddAsset.tsx	50.00%	1 Missing ⚠️
...Settings/NetworksSettings/NetworkSettings/index.js	0.00%	1 Missing ⚠️
app/components/Views/Wallet/index.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8146   +/-   ##
=======================================
  Coverage   39.65%   39.65%           
=======================================
  Files        1233     1233           
  Lines       29820    29820           
  Branches     2840     2840           
=======================================
  Hits        11824    11824           
  Misses      17307    17307           
  Partials      689      689           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[brianacnguyen]

The app currently shows the scroll view edge to edge, this solution introduces a wrapper that changes this behavior, adding a padding to the main views. I just want to point this out and make sure DS team is ok with this.

Thank you for notifying me about this. Can you double check with the designer first to make sure it's what the designer want?
If it isn't what the designer want and the padding is meant to be added to the tabs only, you can move the View with the added horizontalPadding to the renderTabBar to isolate the paddings to the tab bar only

[yanrong-chen]

Hi @salimtb - Thank you for checking with me. Ideally the goal is to add paddings to tab bar only as @brianacnguyen suggested.

[salimtb]

the changes suggested after the design review are done , i also updated the recorded video
cc @brianacnguyen @yanrong-chen

[brianacnguyen]

Everything looks good! Just 1 last comment regarding text style

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
25.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud