mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
UX: Multichain: Make MetaFox logo more accessible (#19395)
* UX: Multichain: Make MetaFox logo more accessible * Fix jest snapshots
This commit is contained in:
parent
9195057136
commit
931b126831
@ -29,8 +29,8 @@ exports[`App Header should match snapshot 1`] = `
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="app-header__logo-container app-header__logo-container--clickable"
|
||||
<button
|
||||
class="box app-header__logo-container app-header__logo-container--clickable box--flex-direction-row box--background-color-transparent"
|
||||
data-testid="app-header-logo"
|
||||
>
|
||||
<svg
|
||||
@ -220,7 +220,7 @@ exports[`App Header should match snapshot 1`] = `
|
||||
class="app-header__metafox-logo--icon"
|
||||
src="./images/logo/metamask-fox.svg"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -2,8 +2,8 @@
|
||||
|
||||
exports[`MetaFoxLogo does match snapshot with custodyImgSrc 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="app-header__logo-container"
|
||||
<button
|
||||
class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
|
||||
data-testid="app-header-logo"
|
||||
>
|
||||
<div />
|
||||
@ -21,14 +21,14 @@ exports[`MetaFoxLogo does match snapshot with custodyImgSrc 1`] = `
|
||||
src="/test"
|
||||
width="42"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is true 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="app-header__logo-container"
|
||||
<button
|
||||
class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
|
||||
data-testid="app-header-logo"
|
||||
>
|
||||
<div />
|
||||
@ -37,14 +37,14 @@ exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is
|
||||
class="app-header__metafox-logo--icon"
|
||||
src="./images/logo/metamask-fox.svg"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`MetaFoxLogo should match snapshot with img width and height default set to 42 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="app-header__logo-container"
|
||||
<button
|
||||
class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
|
||||
data-testid="app-header-logo"
|
||||
>
|
||||
<div />
|
||||
@ -55,6 +55,6 @@ exports[`MetaFoxLogo should match snapshot with img width and height default set
|
||||
src="./images/logo/metamask-fox.svg"
|
||||
width="42"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
@ -1,6 +1,8 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Box from '../box/box';
|
||||
import { BackgroundColor } from '../../../helpers/constants/design-system';
|
||||
import MetaFoxHorizontalLogo from './horizontal-logo';
|
||||
|
||||
export default class MetaFoxLogo extends PureComponent {
|
||||
@ -88,13 +90,15 @@ export default class MetaFoxLogo extends PureComponent {
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
as="button"
|
||||
onClick={onClick}
|
||||
className={classnames({
|
||||
'app-header__logo-container': !isOnboarding,
|
||||
'onboarding-app-header__logo-container': isOnboarding,
|
||||
'app-header__logo-container--clickable': Boolean(onClick),
|
||||
})}
|
||||
backgroundColor={BackgroundColor.transparent}
|
||||
data-testid="app-header-logo"
|
||||
>
|
||||
{renderHorizontalLogo()}
|
||||
@ -115,7 +119,7 @@ export default class MetaFoxLogo extends PureComponent {
|
||||
this.renderCustodyIcon(iconProps, custodyImgSrc)
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -8,8 +8,8 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
|
||||
<div
|
||||
class="onboarding-app-header__contents"
|
||||
>
|
||||
<div
|
||||
class="onboarding-app-header__logo-container"
|
||||
<button
|
||||
class="box onboarding-app-header__logo-container box--flex-direction-row box--background-color-transparent"
|
||||
data-testid="app-header-logo"
|
||||
>
|
||||
<svg
|
||||
@ -199,7 +199,7 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
|
||||
class="onboarding-app-header__metafox-logo--icon"
|
||||
src="./images/logo/metamask-fox.svg"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="dropdown"
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user