-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
## **Description** This PR will address changes requested for the Snaps list UI in settings page. The following is done in this PR: - Refactored code in order to remove deprecated design system components and constants. - Reworked the whole layout of the Snaps list page to make it capable of handling the new requirements. - Implemented new logic for display state of the certain UI elements. ## **Manual testing steps** 1. Go to settings and open Snaps 2. Check the empty state messages or UI elements. 3. Install one Snap and check the UI elements. 4. Install more than 5 Snaps and check the UI elements. *UI elements should be displayed based on the number of Snaps installed as requested in the ticket.* ## **Screenshots/Recordings** ### **Before** ![Screenshot 2023-09-27 at 16 04 49](https://github.com/MetaMask/metamask-extension/assets/13301024/f580372c-c615-46f3-be06-b5b9db0ad0de) ![Screenshot 2023-09-27 at 16 05 18](https://github.com/MetaMask/metamask-extension/assets/13301024/8c6068d4-0500-4c80-b1c2-250955f20033) ### **After** ![Screenshot 2023-09-27 at 15 26 20](https://github.com/MetaMask/metamask-extension/assets/13301024/6fcb5a99-91d1-48a9-90f1-29f9e95ca3ce) ![Screenshot 2023-10-02 at 11 21 29](https://github.com/MetaMask/metamask-extension/assets/13301024/278959d1-7349-4dd7-a59d-330a6399843d) ![Screenshot 2023-10-02 at 11 26 19](https://github.com/MetaMask/metamask-extension/assets/13301024/ccfe51f5-173b-4c8a-a4fd-4d98442ec618) ## **Related issues** Fixes: MetaMask/MetaMask-planning#1338 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained: - [ ] What problem this PR is solving. - [ ] How this problem was solved. - [ ] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [ ] I’ve included tests if applicable. - [ ] I’ve documented any added code. - [ ] 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)). - [ ] 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.
- Loading branch information
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,22 @@ | ||
.snap-list-tab { | ||
width: 100%; | ||
height: 100%; | ||
|
||
&__wrapper { | ||
max-width: 475px; | ||
} | ||
|
||
&__body { | ||
@include screen-sm-min { | ||
padding: 12px; | ||
} | ||
} | ||
|
||
.snap-list-tab__container--no-snaps_inner { | ||
max-width: 164px; | ||
align-self: flex-end; | ||
} | ||
|
||
.snap-list-tab__no-snaps_icon { | ||
font-size: 48px; | ||
} | ||
|
||
&__container--no-snaps_banner-tip { | ||
max-width: 390px; | ||
} | ||
|
||
&__container--snaps-info-content { | ||
max-width: 475px; | ||
} | ||
} |