mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 07:24:56 +01:00
0c163dd8aa
* Fix warning dialog when sending tokens to a known token contract address Fixing after rebase Covering missed cases Rebased and ran yarn setup Rebased Fix checkContractAddress condition Lint fix Applied requested changes Fix unit tests Applying requested changes Applied requested changes Refactor and update Lint fix Use V2 of ActionableMessage component Adding Learn More Link Updating warning copy Addressing review feedback Fix up copy changes Simplify validation of pasted addresses Improve detection of whether this is a token contract Refactor to leave updateRecipient unchanged, and to prevent the double calling of update recipient Update tests fix * Fix unit tests * Fix e2e tests * Ensure next button is disabled while recipient type is loading * Add optional chaining and a fallback to getRecipientWarningAcknowledgement * Fix lint * Don't reset recipient warning on asset change, because we should show recipient warnings regardless of asset * Update unit tests * Update unit tests Co-authored-by: Filip Sekulic <filip.sekulic@consensys.net>
249 lines
4.5 KiB
SCSS
249 lines
4.5 KiB
SCSS
@import './send-content/send-gas-row/send-gas-row';
|
|
|
|
.send {
|
|
&__header {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: var(--color-background-alternative);
|
|
border-bottom: none;
|
|
padding: 14px 0 3px 0;
|
|
|
|
.page-container__title {
|
|
@include H4;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.page-container__header-close-text {
|
|
@include H5;
|
|
|
|
position: absolute;
|
|
right: 1rem;
|
|
width: min-content;
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&__dialog {
|
|
margin: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__error-dialog {
|
|
margin: 1rem;
|
|
}
|
|
|
|
&__warning-container {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
|
|
&__link {
|
|
color: var(--primary-1);
|
|
}
|
|
}
|
|
|
|
&__to-row {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
flex: 0 0 auto;
|
|
background-color: var(--color-background-alternative);
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
}
|
|
|
|
&__select-recipient-wrapper {
|
|
@extend %col-nowrap;
|
|
|
|
flex: 1 1 auto;
|
|
height: 0;
|
|
|
|
&__list {
|
|
overflow-y: auto;
|
|
|
|
&__link {
|
|
@include Paragraph;
|
|
|
|
@extend %row-nowrap;
|
|
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
border-radius: 0;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&__back-caret {
|
|
@extend %bg-contain;
|
|
|
|
display: block;
|
|
margin-right: 8px;
|
|
|
|
[dir='rtl'] & {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__recent-group-wrapper {
|
|
@extend %col-nowrap;
|
|
|
|
&__load-more {
|
|
@include H7;
|
|
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
&__group {
|
|
@extend %col-nowrap;
|
|
}
|
|
|
|
&__group-label {
|
|
@include H8;
|
|
|
|
background-color: var(--color-background-alternative);
|
|
color: var(--color-text-alternative);
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
|
|
&:first-of-type {
|
|
border-top: 1px solid var(--color-border-muted);
|
|
}
|
|
}
|
|
|
|
&__group-item,
|
|
&__group-item--selected {
|
|
@extend %row-nowrap;
|
|
|
|
padding: 0.75rem 1rem;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: rgba($alto, 0.2);
|
|
}
|
|
|
|
.identicon {
|
|
margin-right: 1rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
&__content {
|
|
@extend %col-nowrap;
|
|
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
}
|
|
|
|
&__title {
|
|
@include H6;
|
|
|
|
max-width: 20em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
color: var(--color-text-default);
|
|
}
|
|
|
|
&__subtitle {
|
|
@include H8;
|
|
|
|
color: var(--color-text-muted);
|
|
}
|
|
}
|
|
|
|
&__group-item--selected {
|
|
border: 2px solid var(--color-primary-default);
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ens-input {
|
|
@extend %row-nowrap;
|
|
|
|
&__wrapper {
|
|
@extend %row-nowrap;
|
|
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
align-items: center;
|
|
background: var(--color-background-default);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 0.5rem;
|
|
border: 1px solid var(--color-border-muted);
|
|
transition: border-color 150ms ease-in-out;
|
|
|
|
&:focus-within {
|
|
border-color: var(--color-border-default);
|
|
}
|
|
|
|
&__status-icon {
|
|
margin: 4px 8px 4px 4px;
|
|
}
|
|
|
|
&__input {
|
|
@include H6;
|
|
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
border: 0;
|
|
outline: none;
|
|
color: var(--color-text-default);
|
|
background-color: var(--color-background-default);
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-muted);
|
|
}
|
|
}
|
|
|
|
&__action-icon-button {
|
|
background: none;
|
|
border: none;
|
|
padding: 0 8px;
|
|
height: 24px;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&--valid {
|
|
border-color: var(--color-primary-default);
|
|
|
|
.ens-input__wrapper {
|
|
&__input {
|
|
@extend %col-nowrap;
|
|
|
|
@include H7;
|
|
|
|
color: var(--color-primary-default);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__selected-input {
|
|
&__title {
|
|
@include H6;
|
|
|
|
@extend %ellipsify;
|
|
|
|
word-wrap: break-word;
|
|
white-space: inherit !important;
|
|
}
|
|
|
|
&__subtitle {
|
|
@include H7;
|
|
|
|
color: var(--color-text-default);
|
|
margin-top: 0.25rem;
|
|
}
|
|
}
|
|
}
|