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

UX Multichain: updated enums for multichain token list item (#19575)

Browse Source 
* updated enums for multichain token list iteam

* updated snapshot
This commit is contained in:
Nidhi Kumari 2023-06-13 20:47:21 +05:30 committed by GitHub
parent 6c3f31d382
commit cc0b30776a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
View File

@ -3,11 +3,11 @@
exports[`Token Cell should match snapshot 1`] = `
<div>
<div
class="box multichain-token-list-item box--display-flex box--gap-4 box--flex-direction-column"
class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
data-testid="multichain-token-list-item"
>
<a
class="box multichain-token-list-item__container-cell box--padding-4 box--display-flex box--flex-direction-row"
class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
data-testid="multichain-token-list-button"
href="#"
>
@ -34,14 +34,14 @@ exports[`Token Cell should match snapshot 1`] = `
</div>
</div>
<div
class="box multichain-token-list-item__container-cell--text-container box--display-flex box--flex-direction-column box--width-full"
class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
style="flex-grow: 1; overflow: hidden;"
>
<div
class="box box--display-flex box--gap-1 box--flex-direction-row box--justify-content-space-between"
class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
>
<div
class="box box--flex-direction-row box--width-1/3"
class="mm-box mm-box--width-1/3"
>
<div>
<div
@ -59,7 +59,7 @@ exports[`Token Cell should match snapshot 1`] = `
</div>
</div>
<p
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--color-text-default"
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
/>
</div>
<p

12
ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap
View File

@ -3,11 +3,11 @@
exports[`MultichainTokenListItem should render correctly 1`] = `
<div>
<div
class="box multichain-token-list-item box--display-flex box--gap-4 box--flex-direction-column"
class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
data-testid="multichain-token-list-item"
>
<a
class="box multichain-token-list-item__container-cell box--padding-4 box--display-flex box--flex-direction-row"
class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
data-testid="multichain-token-list-button"
href="#"
>
@ -34,14 +34,14 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
</div>
</div>
<div
class="box multichain-token-list-item__container-cell--text-container box--display-flex box--flex-direction-column box--width-full"
class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
style="flex-grow: 1; overflow: hidden;"
>
<div
class="box box--display-flex box--gap-1 box--flex-direction-row box--justify-content-space-between"
class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
>
<div
class="box box--flex-direction-row box--width-1/3"
class="mm-box mm-box--width-1/3"
>
<div>
<p
@ -50,7 +50,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
</div>
</div>
<p
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--color-text-default"
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
/>
</div>
<p

28
ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js
View File

@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import classnames from 'classnames';
import {
BLOCK_SIZES,
BlockSize,
BorderColor,
DISPLAY,
FLEX_DIRECTION,
Display,
FlexDirection,
FontWeight,
JustifyContent,
Size,
@ -19,8 +19,8 @@ import {
AvatarToken,
BadgeWrapper,
Text,
Box,
} from '../../component-library';
import Box from '../../ui/box/box';
import { getCurrentChainId, getNativeCurrencyImage } from '../../../selectors';
import Tooltip from '../../ui/tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext';
@ -48,15 +48,15 @@ export const MultichainTokenListItem = ({
return (
<Box
className={classnames('multichain-token-list-item', className)}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={4}
data-testid="multichain-token-list-item"
>
<Box
className="multichain-token-list-item__container-cell"
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
display={Display.Flex}
flexDirection={FlexDirection.Row}
padding={4}
as="a"
data-testid="multichain-token-list-button"
@ -101,17 +101,17 @@ export const MultichainTokenListItem = ({
</BadgeWrapper>
<Box
className="multichain-token-list-item__container-cell--text-container"
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
width={BLOCK_SIZES.FULL}
display={Display.Flex}
flexDirection={FlexDirection.Column}
width={BlockSize.Full}
style={{ flexGrow: 1, overflow: 'hidden' }}
>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
gap={1}
>
<Box width={BLOCK_SIZES.ONE_THIRD}>
<Box width={BlockSize.OneThird}>
<Tooltip
position="bottom"
interactive
@ -132,7 +132,7 @@ export const MultichainTokenListItem = ({
<Text
fontWeight={FontWeight.Medium}
variant={TextVariant.bodyMd}
width={BLOCK_SIZES.TWO_THIRD}
width={BlockSize.TwoThirds}
textAlign={TextAlign.End}
>
{secondary}