Fix/ux papercuts transaction details issue #12295 (#12401)

* transaction details - update ui

* update lint scss

* update sender & recipient name ui

ui/components/app/transaction-list-item-details/index.scss

@@ -6,11 +6,6 @@
     align-items: center;
   }
 
-  &__body {
-    background: #fafbfc;
-    padding: 8px 16px;
-  }
-
   &__header-buttons {
     display: flex;
     flex-direction: row;
@@ -41,6 +36,7 @@
   &__cards-container {
     display: flex;
     flex-direction: column;
+    padding: 8px 16px;
   }
 
   &__transaction-breakdown {
@@ -53,6 +49,5 @@
   &__transaction-activity-log {
     flex: 2;
     min-width: 0;
-    padding-left: 12px;
   }
 }

ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import copyToClipboard from 'copy-to-clipboard';
 import { getBlockExplorerLink } from '@metamask/etherscan-link';
 import SenderToRecipient from '../../ui/sender-to-recipient';
-import { FLAT_VARIANT } from '../../ui/sender-to-recipient/sender-to-recipient.constants';
+import { DEFAULT_VARIANT } from '../../ui/sender-to-recipient/sender-to-recipient.constants';
 import TransactionActivityLog from '../transaction-activity-log';
 import TransactionBreakdown from '../transaction-breakdown';
 import Button from '../../ui/button';
@@ -215,7 +215,7 @@ export default class TransactionListItemDetails extends PureComponent {
             <div className="transaction-list-item-details__sender-to-recipient-container">
               <SenderToRecipient
                 warnUserOnAccountMismatch={false}
-                variant={FLAT_VARIANT}
+                variant={DEFAULT_VARIANT}
                 addressOnly
                 recipientEns={recipientEns}
                 recipientAddress={recipientAddress}

ui/components/ui/popover/index.scss

@@ -22,7 +22,7 @@
 
   &-header {
     display: flex;
-    padding: 24px 24px 16px;
+    padding: 24px 16px 16px;
     flex-direction: column;
     background: white;
     position: relative;

ui/components/ui/sender-to-recipient/index.scss

@@ -7,7 +7,6 @@
   flex: 0 0 auto;
 
   &--default {
-    border-bottom: 1px solid $geyser;
     height: 42px;
 
     .sender-to-recipient {
@@ -28,6 +27,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        border: 1px solid #d8d8d8;
 
         &--sender {
           padding-right: 30px;
@@ -51,7 +51,7 @@
         align-items: center;
         justify-content: center;
 
-        [dir='rtl'] & {
+        [dir="rtl"] & {
           transform: rotate(180deg);
         }
       }
@@ -69,14 +69,14 @@
       }
 
       &__name {
-        @include H6;
+        @include H7;
 
         padding-left: 14px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
 
-        [dir='rtl'] & {
+        [dir="rtl"] & {
           /*rtl:ignore*/
           direction: ltr;
 
@@ -109,6 +109,7 @@
         cursor: pointer;
         min-width: 0;
         color: $dusty-gray;
+        border: 1px solid #d8d8d8;
       }
 
       &__tooltip-wrapper {
@@ -124,7 +125,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
 
-        [dir='rtl'] & {
+        [dir="rtl"] & {
           /*rtl:ignore*/
           direction: ltr;
 
@@ -145,7 +146,7 @@
         justify-content: center;
         align-items: center;
 
-        [dir='rtl'] & {
+        [dir="rtl"] & {
           transform: rotate(180deg);
         }
       }
@@ -164,6 +165,7 @@
         cursor: pointer;
         min-width: 0;
         color: $dusty-gray;
+        border: 1px solid #d8d8d8;
       }
 
       &__tooltip-wrapper {
@@ -180,7 +182,7 @@
         white-space: nowrap;
         margin-inline-start: 8px;
 
-        [dir='rtl'] & {
+        [dir="rtl"] & {
           /*rtl:ignore*/
           direction: ltr;
 
@@ -201,7 +203,7 @@
         justify-content: center;
         align-items: center;
 
-        [dir='rtl'] & {
+        [dir="rtl"] & {
           transform: rotate(180deg);
         }
       }

ui/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -71,9 +71,7 @@ function SenderAddress({
         <div className="sender-to-recipient__name">
           {addressOnly ? (
             <span>
-              {`${t('from')}: ${
-                senderName || shortenAddress(checksummedSenderAddress)
-              }`}
+              {`${senderName || shortenAddress(checksummedSenderAddress)}`}
             </span>
           ) : (
             senderName
@@ -144,7 +142,6 @@ function RecipientWithAddress({
         onHidden={() => setAddressCopied(false)}
       >
         <div className="sender-to-recipient__name">
-          <span>{addressOnly ? `${t('to')}: ` : ''}</span>
           {addressOnly
             ? recipientNickname ||
               recipientEns ||