Skip to content

Commit

Permalink
Update Snaps list UI (#21061)
Browse files Browse the repository at this point in the history
## **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
david0xd authored Oct 2, 2023
1 parent b7ad9f6 commit 0107c2c
Show file tree
Hide file tree
Showing 17 changed files with 99 additions and 107 deletions.
6 changes: 2 additions & 4 deletions app/_locales/de/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/el/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 6 additions & 4 deletions app/_locales/en/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/es/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/fr/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/hi/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/id/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/ja/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/ko/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/pt/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/ru/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/tl/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/tr/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/vi/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions app/_locales/zh_CN/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 9 additions & 9 deletions ui/pages/settings/snaps/snaps-list-tab/index.scss
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;
}
}
94 changes: 56 additions & 38 deletions ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,19 @@ import {
AlignItems,
IconColor,
Color,
TEXT_ALIGN,
FLEX_DIRECTION,
TextAlign,
FlexDirection,
Size,
Display,
BlockSize,
FlexWrap,
TextVariant,
} from '../../../../helpers/constants/design-system';
import Box from '../../../../components/ui/box';
import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
import { getSnapsList } from '../../../../selectors';
import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
import {
Box,
BannerTip,
BannerTipLogoType,
ButtonLink,
Expand All @@ -41,8 +45,13 @@ const SnapListTab = () => {
const snapsList = useSelector((state) => getSnapsList(state));

return (
<div className="snap-list-tab" ref={settingsRef}>
{snapsList.length ? (
<Box
className="snap-list-tab"
display={Display.Flex}
flexDirection={FlexDirection.Column}
height={BlockSize.Full}
>
{snapsList.length > 0 && (
<div className="snap-list-tab__body">
<div className="snap-list-tab__wrapper">
{snapsList.map((snap) => {
Expand All @@ -61,62 +70,71 @@ const SnapListTab = () => {
})}
</div>
</div>
) : (
)}
{snapsList.length <= 5 && (
<Box
className="snap-list-tab__container--no-snaps"
width="full"
height="full"
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN}
display={Display.Flex}
height={BlockSize.Full}
flexDirection={FlexDirection.Row}
flexWrap={FlexWrap.Wrap}
justifyContent={JustifyContent.center}
className="snap-list-tab__container--snaps-info-content"
>
<Box
className="snap-list-tab__container--no-snaps_inner"
width="full"
height="full"
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
>
<Icon
name={IconName.Snaps}
color={IconColor.iconMuted}
className="snap-list-tab__no-snaps_icon"
size={IconSize.Inherit}
/>
<Text
color={Color.textMuted}
align={TEXT_ALIGN.CENTER}
marginTop={4}
{snapsList.length < 1 && (
<Box
className="snap-list-tab__container--no-snaps_inner"
display={Display.Flex}
flexDirection={FlexDirection.Column}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
>
{t('noSnaps')}
</Text>
</Box>
<Icon
name={IconName.Snaps}
color={IconColor.iconMuted}
className="snap-list-tab__no-snaps_icon"
size={IconSize.Inherit}
/>
<Text
color={Color.textMuted}
align={TextAlign.Center}
marginTop={4}
>
{t('noSnaps')}
</Text>
</Box>
)}
<Box
display={Display.Flex}
width={BlockSize.Full}
height={BlockSize.Min}
></Box>
<Box
className="snap-list-tab__container--no-snaps_banner-tip"
width="full"
justifyContent={JustifyContent.center}
alignItems={AlignItems.flexEnd}
display={Display.Flex}
flexDirection={FlexDirection.Column}
justifyContent={JustifyContent.flexEnd}
paddingLeft={4}
paddingRight={4}
paddingBottom={4}
>
<BannerTip
logoType={BannerTipLogoType.Greeting}
title={t('exploreMetaMaskSnaps')}
description={t('extendWalletWithSnaps')}
descriptionProps={{ variant: TextVariant.bodyMd }}
>
<ButtonLink
size={Size.auto}
href="https://metamask.io/snaps/"
target="_blank"
endIconName={IconName.Export}
>
{`${t('learnMoreUpperCase')}`}
{`${t('discoverSnaps')}`}
</ButtonLink>
</BannerTip>
</Box>
</Box>
)}
</div>
</Box>
);
};

Expand Down

0 comments on commit 0107c2c

Please sign in to comment.