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
*/
const SHOW_SEARCH_ACCOUNTS_MIN_COUNT = 5;
const SHOW_SEARCH_ACCOUNTS_MIN_COUNT = 15;
function mapStateToProps(state) {
const {

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

@ -139,9 +139,9 @@
// If window is smaller than extension popover height
// reduce scrollable accounts window height
@media screen and (max-height: 600px) {
max-height: 130px;
}
// @media screen and (max-height: 600px) {
// max-height: 130px;
// }
.keyring-label {
@include H9;
@ -153,10 +153,9 @@
height: 15px;
margin-top: 5px;
margin-right: 10px;
background-color: var(--color-background-alternative);
border: 1px solid var(--color-border-default);
color: var(--color-text-default);
font-weight: normal;
background-color: var(--color-text-muted);
color: var(--color-background-default);
font-weight: bold;
letter-spacing: 0.5px;
display: flex;
align-items: center;
@ -191,15 +190,12 @@
&__account {
display: flex;
flex-flow: row nowrap;
padding: 16px 14px;
padding: 14px;
flex: 0 0 auto;
background: none;
border: 0;
width: 100%;
@include screen-sm-max {
padding: 12px 14px;
}
border-bottom: 1px solid var(--color-border-muted);
.remove-account-icon {
width: 15px;
@ -237,11 +233,7 @@
}
&__name {
@include H6;
@include screen-md-min {
@include Paragraph;
}
@include Paragraph;
color: var(--color-text-default);
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 { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
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 {
state = {
@ -64,17 +62,6 @@ class SelectedAccount extends Component {
</div>
<div className="selected-account__address">
{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>
</button>
</Tooltip>