1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/transaction-list-item-details/index.scss
Alaa Hadad e056c88ba7
Feature: Transaction Insights (#12881)
* integration for tx decoding confirmation and history view

* upgrading @truffle/decoder to latest release 5.1.0

* Update acorn and colors patches

* feat: remove redundant styling

* feat: basic integration for nickname components

* feat: wiring functionality of adding new nickname

* feat: wire functionality of showing nickname modal

* feat: link the nickname popover with add/update popover

* feat: moving forward with address nicknames integration

* feat: fixing a bug related to passing chainId in addressBook

* feat: populating memo prop in addressbook entry

* feat: add explorer link

* feat: bug fixing update nickname component

* feat: fix proptypes

* feat: adding tooltip for copying nickname address

* featL fix styling for tx-details page

* feat: optimize code for error handling

* feat: limiting transaction decoding to tx with data

* feat: remove tree UI component

* feat: adding request to check for tx decoding supported networks

* feat: showing data hex component

* feat: fix react warnings

* feat: remove extra margin in tx decoding

* Remove unused package @truffle/source-map-utils

* Ensure messages get translated

* feat: link tx-decoding addresses with nicknames

* Omit value for boolean attributes

* Fix props reading in CopyRawData

* fix: fixing issue with transaltion

* Fix lint errors in TransactionDecoding

- Remove unused import
- Reorder imports
- Address conflict between caught `error` and error state flag by
  renaming state flag to `hasError`
- Fix requestUrl identifier casing and use of template string
- Ensure `useEffect` gets passed the deps it needs
- Add scope braces around case statement where it's needed
- Omit literal `true` for boolean jsx attribute
- Refactor nested ternary as `if` statements

* fix: revert fetchWithCache modifications

* Fix linting for TransactionListItemDetails

- Remove unused import
- Fix import spacing
- Remove unused prop dereference
- Fix string interpolation for translated From/To

* Moving to popover pattern

* fix: sass color variable

* Omit value for boolean attribute

* Remove changes from modal.js

* fix: refactor nickname popovers

* Ensure const gets declared before it's used

* Fix linting for ConfirmTransactionBase

- Remove unused prop chainId
- Stop destructuring an unused field

* fix: refactor usage of nicknames popovers in send-content-container

* fix: remove extra prop updateAccountNicknameModal

* fix: refactor code for address.component

* fix: remove extra tooltip

* Ensure NicknamePopovers always returns component

* Fix linting for NicknamePopover component

- Fix useCallback deps
- Switch ternary to logical-or

* Fix linting for SenderToRecipient

... by fixing import order

* Remove unused addressCopied state

* Delete empty file

* fix: remove sender-to-recipient.container

* fix: refactor usage of nickname popovers in confirm-page-container

* fix: bug related to state variable

* Stylelint fix

* Lint fix

* Change "Total Amount" to "Total"

* Lint fix locales

* Update address-book.spec.js

* e2e test update

* Update e2e tests

* Fix issue where absence of function params in data hex tab would result in rendering a  string

* Fix border radius, and width and height in small notification windows, of the update-nickname-popover

* Remove fake await

* Clean up

* Clean up

Co-authored-by: Alaa Hadad <alaahd@Alaas-MacBook-M1-Pro-14-inch.local>
Co-authored-by: Dan Miller <danjm.com@gmail.com>
Co-authored-by: g. nicholas d'andrea <gnidan@trufflesuite.com>
2021-12-01 13:52:08 -03:30

146 lines
2.4 KiB
SCSS

.transaction-list-item-details {
div.disclosure + div.disclosure {
margin-top: 0;
}
.sender-to-recipient--flat .sender-to-recipient__party.sender-to-recipient__party--sender {
padding: 0;
justify-content: flex-start;
}
.sender-to-recipient--flat .sender-to-recipient__party.sender-to-recipient__party--recipient {
padding: 0;
justify-content: flex-end;
}
&__sender-to-recipient-header {
display: flex;
font-size: 14px;
color: $Black-100;
font-weight: bold;
padding-bottom: 7px;
& > div:first-child {
flex: 1;
}
}
&__tx-status {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 44px;
justify-content: space-between;
& > div:first-child {
font-size: 14px;
color: $Black-100;
font-weight: bold;
}
& > div:last-child {
font-weight: bold;
}
}
&__tx-hash {
display: flex;
flex-direction: column;
align-items: flex-end;
.btn-link {
font-size: 12px;
line-height: 100%;
padding: 0;
}
& > div:first-child {
padding-bottom: 16px;
}
}
&__operations {
margin: 0 0 16px 16px;
display: flex;
justify-content: end;
}
&__header {
font-size: 12px;
margin: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
&__body {
padding: 8px 16px;
}
&__header-buttons {
display: flex;
flex-direction: row;
}
& &__header-button {
&-rounded-button {
@include H8;
padding: 0 16px;
margin-right: 8px;
}
&-tooltip-container {
display: flex !important;
height: 100%;
}
&:not(:last-child) {
margin-right: 8px;
}
}
&__sender-to-recipient-container {
margin-bottom: 8px;
.sender-to-recipient {
.sender-to-recipient__party {
border: none;
&--sender {
padding-left: 0;
}
&--recipient {
padding-right: 0;
}
}
}
}
&__cards-container {
display: flex;
flex-direction: column;
}
&__transaction-breakdown {
flex: 1;
margin-right: 8px;
min-width: 0;
margin: 0 0 8px 0;
}
&__transaction-activity-log {
flex: 2;
min-width: 0;
.transaction-activity-log__activities-container {
padding-top: 0;
}
.transaction-activity-log__title {
display: none;
}
}
}