m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +01:00
Code

UX improvements around account menu with many accounts

Browse Source
This commit is contained in:
Matthias Kretschmann 2023-03-16 13:35:54 +00:00
parent 35bc7428bb
commit b8c113355d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 10 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/account-menu/account-menu.container.js
View File

@ -22,7 +22,7 @@ import AccountMenu from './account-menu.component';
/** /**
* The min amount of accounts to show search field * The min amount of accounts to show search field
*/ */
const SHOW_SEARCH_ACCOUNTS_MIN_COUNT = 5; const SHOW_SEARCH_ACCOUNTS_MIN_COUNT = 15;
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {

26
ui/components/app/account-menu/index.scss
View File

@ -139,9 +139,9 @@
// If window is smaller than extension popover height // If window is smaller than extension popover height
// reduce scrollable accounts window height // reduce scrollable accounts window height
@media screen and (max-height: 600px) { // @media screen and (max-height: 600px) {
max-height: 130px; // max-height: 130px;
} // }
.keyring-label { .keyring-label {
@include H9; @include H9;
@ -153,10 +153,9 @@
height: 15px; height: 15px;
margin-top: 5px; margin-top: 5px;
margin-right: 10px; margin-right: 10px;
background-color: var(--color-background-alternative); background-color: var(--color-text-muted);
border: 1px solid var(--color-border-default); color: var(--color-background-default);
color: var(--color-text-default); font-weight: bold;
font-weight: normal;
letter-spacing: 0.5px; letter-spacing: 0.5px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -191,15 +190,12 @@
&__account { &__account {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
padding: 16px 14px; padding: 14px;
flex: 0 0 auto; flex: 0 0 auto;
background: none; background: none;
border: 0; border: 0;
width: 100%; width: 100%;
border-bottom: 1px solid var(--color-border-muted);
@include screen-sm-max {
padding: 12px 14px;
}
.remove-account-icon { .remove-account-icon {
width: 15px; width: 15px;
@ -237,11 +233,7 @@
} }
&__name { &__name {
@include H6; @include Paragraph;
@include screen-md-min {
@include Paragraph;
}
color: var(--color-text-default); color: var(--color-text-default);
text-overflow: ellipsis; text-overflow: ellipsis;

13
ui/components/app/selected-account/selected-account.component.js
View File

@ -6,8 +6,6 @@ import { shortenAddress } from '../../../helpers/utils/util';
import Tooltip from '../../ui/tooltip'; import Tooltip from '../../ui/tooltip';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
import { SECOND } from '../../../../shared/constants/time'; import { SECOND } from '../../../../shared/constants/time';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
import { IconColor } from '../../../helpers/constants/design-system';
class SelectedAccount extends Component { class SelectedAccount extends Component {
state = { state = {
@ -64,17 +62,6 @@ class SelectedAccount extends Component {
</div> </div>
<div className="selected-account__address"> <div className="selected-account__address">
{shortenAddress(checksummedAddress)} {shortenAddress(checksummedAddress)}
<div className="selected-account__copy">
<Icon
name={
this.state.copied
? ICON_NAMES.COPY_SUCCESS
: ICON_NAMES.COPY
}
size={ICON_SIZES.SM}
color={IconColor.iconAlternative}
/>
</div>
</div> </div>
</button> </button>
</Tooltip> </Tooltip>