From 15598f2a23d936d3c468a1b8849ec3baaccee4cd Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Tue, 23 May 2023 22:54:17 +0530
Subject: [PATCH] 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
---
 .../app/token-cell/__snapshots__/token-cell.test.js.snap     | 2 +-
 .../transaction-list-item/transaction-list-item.component.js | 2 ++
 .../list-item/__snapshots__/list-item.component.test.js.snap | 4 ++--
 ui/components/ui/list-item/index.scss                        | 5 ++++-
 ui/components/ui/list-item/list-item.component.js            | 5 +++++
 5 files changed, 14 insertions(+), 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
index 4d77ea5ee..ab99b1f5f 100644
--- 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
index dc99a7eac..f412e7fbc 100644
--- 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
index 11ce857d0..dfa61f330 100644
--- 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
index 6963ed978..6d9a60cdf 100644
--- 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
index 9a13cbaf1..d82a85b55 100644
--- 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,
 };