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

UX Multichain: updated border top for activity list (#19176)

Browse Source 
* updated border top for activity list

* updated border css via prop

* fixed symbol

* fixed lint errors

* fix conditions

* updated snapshot
This commit is contained in:
Nidhi Kumari 2023-05-23 22:54:17 +05:30 committed by Dan J Miller
parent d746b58c90
commit d2dba07eeb
5 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
exports[`Token Cell should match snapshot 1`] = ` exports[`Token Cell should match snapshot 1`] = `
<div> <div>
<div <div
class="list-item asset-list-item token-cell list-item--single-content-row" class="list-item asset-list-item token-cell list-item--single-content-row list-item-border"
role="button" role="button"
tabindex="0" tabindex="0"
> >

2
ui/components/app/transaction-list-item/transaction-list-item.component.js
View File

@ -168,6 +168,7 @@ function TransactionListItemInner({
]); ]);
const showCancelButton = !hasCancelled && isPending && !isUnapproved; const showCancelButton = !hasCancelled && isPending && !isUnapproved;
const showBorder = process.env.MULTICHAIN;
return ( return (
<> <>
@ -178,6 +179,7 @@ function TransactionListItemInner({
icon={ icon={
<TransactionIcon category={category} status={displayedStatusKey} /> <TransactionIcon category={category} status={displayedStatusKey} />
} }
showBorder={showBorder}
subtitle={ subtitle={
<h3> <h3>
<TransactionStatusLabel <TransactionStatusLabel

4
ui/components/ui/list-item/__snapshots__/list-item.component.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ListItem should match snapshot with no props 1`] = ` exports[`ListItem should match snapshot with no props 1`] = `
<div> <div>
<div <div
class="list-item list-item--single-content-row" class="list-item list-item--single-content-row list-item-border"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -21,7 +21,7 @@ exports[`ListItem should match snapshot with no props 1`] = `
exports[`ListItem should match snapshot with props 1`] = ` exports[`ListItem should match snapshot with props 1`] = `
<div> <div>
<div <div
class="list-item list-item-test" class="list-item list-item-test list-item-border"
data-testid="test-id" data-testid="test-id"
role="button" role="button"
tabindex="0" tabindex="0"

5
ui/components/ui/list-item/index.scss
View File

@ -7,7 +7,6 @@
@include Paragraph; @include Paragraph;
border-top: 1px solid var(--color-border-muted);
border-bottom: 1px solid var(--color-border-muted); border-bottom: 1px solid var(--color-border-muted);
color: var(--color-text-default); color: var(--color-text-default);
display: grid; display: grid;
@ -119,3 +118,7 @@
grid-template-areas: 'icon head head head head mid mid mid mid right right right'; grid-template-areas: 'icon head head head head mid mid mid mid right right right';
} }
} }
.list-item-border {
border-top: 1px solid var(--color-border-muted);
}

5
ui/components/ui/list-item/list-item.component.js
View File

@ -12,12 +12,16 @@ export default function ListItem({
rightContent, rightContent,
midContent, midContent,
className, className,
showBorder,
'data-testid': dataTestId, 'data-testid': dataTestId,
}) { }) {
const primaryClassName = classnames( const primaryClassName = classnames(
'list-item', 'list-item',
className, className,
subtitle || children ? '' : 'list-item--single-content-row', subtitle || children ? '' : 'list-item--single-content-row',
{
'list-item-border': !showBorder,
},
); );
return ( return (
@ -68,5 +72,6 @@ ListItem.propTypes = {
midContent: PropTypes.node, midContent: PropTypes.node,
className: PropTypes.string, className: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
showBorder: PropTypes.bool,
'data-testid': PropTypes.string, 'data-testid': PropTypes.string,
}; };