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

* updated border top for activity list * updated border css via prop * fixed symbol * fixed lint errors * fix conditions * updated snapshot
MetaMask · May 23, 2023 · 15598f2 · 15598f2
1 parent ae3021c
commit 15598f2
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -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"
   >

diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@@ -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

diff --git a/ui/components/ui/list-item/__snapshots__/list-item.component.test.js.snap b/ui/components/ui/list-item/__snapshots__/list-item.component.test.js.snap
@@ -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"

diff --git a/ui/components/ui/list-item/index.scss b/ui/components/ui/list-item/index.scss
@@ -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);
+}
diff --git a/ui/components/ui/list-item/list-item.component.js b/ui/components/ui/list-item/list-item.component.js
@@ -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,
 };