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

Make the accounts menu accessible (#14936)

Browse Source
This commit is contained in:
David Walsh 2022-06-15 12:49:18 -05:00 committed by GitHub
parent f5c6d0054f
commit ea49b40d33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/components/app/account-menu/account-menu.component.js
View File

@ -50,13 +50,13 @@ export function AccountMenuItem(props) {
{children} {children}
</div> </div>
) : ( ) : (
<div className={itemClassName} onClick={onClick}> <button className={itemClassName} onClick={onClick}>
{icon ? <div className="account-menu__item__icon">{icon}</div> : null} {icon ? <div className="account-menu__item__icon">{icon}</div> : null}
{text ? <div className="account-menu__item__text">{text}</div> : null} {text ? <div className="account-menu__item__text">{text}</div> : null}
{subText ? ( {subText ? (
<div className="account-menu__item__subtext">{subText}</div> <div className="account-menu__item__subtext">{subText}</div>
) : null} ) : null}
</div> </button>
); );
} }
@ -200,7 +200,7 @@ export default class AccountMenu extends Component {
const iconAndNameForOpenSubject = addressSubjects[originOfCurrentTab]; const iconAndNameForOpenSubject = addressSubjects[originOfCurrentTab];
return ( return (
<div <button
className="account-menu__account account-menu__item--clickable" className="account-menu__account account-menu__item--clickable"
onClick={() => { onClick={() => {
this.context.trackEvent({ this.context.trackEvent({
@ -239,7 +239,7 @@ export default class AccountMenu extends Component {
/> />
</div> </div>
) : null} ) : null}
</div> </button>
); );
}); });
} }

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

@ -32,6 +32,9 @@
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 201; z-index: 201;
border: 0;
background: none;
width: 100%;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding: 14px; padding: 14px;
@ -63,6 +66,8 @@
&__text { &__text {
@include Paragraph; @include Paragraph;
color: var(--color-text-default);
} }
&__subtext { &__subtext {
@ -182,6 +187,9 @@
flex-flow: row nowrap; flex-flow: row nowrap;
padding: 16px 14px; padding: 16px 14px;
flex: 0 0 auto; flex: 0 0 auto;
background: none;
border: 0;
width: 100%;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
padding: 12px 14px; padding: 12px 14px;
@ -230,6 +238,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
max-width: 200px; max-width: 200px;
text-align: start;
} }
&__balance { &__balance {

4
ui/components/app/app-header/app-header.component.js
View File

@ -76,7 +76,7 @@ export default class AppHeader extends PureComponent {
return ( return (
isUnlocked && ( isUnlocked && (
<div <button
className={classnames('account-menu__icon', { className={classnames('account-menu__icon', {
'account-menu__icon--disabled': disabled, 'account-menu__icon--disabled': disabled,
})} })}
@ -105,7 +105,7 @@ export default class AppHeader extends PureComponent {
) )
///: END:ONLY_INCLUDE_IN ///: END:ONLY_INCLUDE_IN
} }
</div> </button>
) )
); );
} }

2
ui/components/app/app-header/index.scss
View File

@ -89,6 +89,8 @@
.account-menu__icon { .account-menu__icon {
position: relative; position: relative;
border: 0;
background: none;
&__notification-count { &__notification-count {
position: absolute; position: absolute;