m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 03:12:42 +02: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 GitHub
parent ae3021c697
commit 15598f2a23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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`] = `
<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"
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 showBorder = process.env.MULTICHAIN;
return (
<>
@ -178,6 +179,7 @@ function TransactionListItemInner({
icon={
<TransactionIcon category={category} status={displayedStatusKey} />
}
showBorder={showBorder}
subtitle={
<h3>
<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`] = `
<div>
<div
class="list-item list-item--single-content-row"
class="list-item list-item--single-content-row list-item-border"
role="button"
tabindex="0"
>
@ -21,7 +21,7 @@ exports[`ListItem should match snapshot with no props 1`] = `
exports[`ListItem should match snapshot with props 1`] = `
<div>
<div
class="list-item list-item-test"
class="list-item list-item-test list-item-border"
data-testid="test-id"
role="button"
tabindex="0"

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

@ -7,7 +7,6 @@
@include Paragraph;
border-top: 1px solid var(--color-border-muted);
border-bottom: 1px solid var(--color-border-muted);
color: var(--color-text-default);
display: grid;
@ -119,3 +118,7 @@
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,
midContent,
className,
showBorder,
'data-testid': dataTestId,
}) {
const primaryClassName = classnames(
'list-item',
className,
subtitle || children ? '' : 'list-item--single-content-row',
{
'list-item-border': !showBorder,
},
);
return (
@ -68,5 +72,6 @@ ListItem.propTypes = {
midContent: PropTypes.node,
className: PropTypes.string,
onClick: PropTypes.func,
showBorder: PropTypes.bool,
'data-testid': PropTypes.string,
};