mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
00341cd3b3
* Initial implementation of new SrpInput component This new version of the SrpInput component uses a separate field for each word of the SRP. Only one field can be revealed at a time, making it less likely that it gets accidentally revealed to somebody. * Fix copy mistakes * Move container div from 'create vault' to 'srp-input', and setup grid layout * Increase size of title * Remove hard-coded width in Storybook to allow testing different viewport sizes * Improve layout * Improve margins * Update dropdown text * Expand SRP input section * Remove unused localized messages * Update dropdown option names in unit tests * Replace checkbox with show/hide toggle * Remove unused localized message * Fix 'data-testid' prop name * Fix e2e test imports using paste * Use 'ActionableMessage' component for error message * Convert error popover to actionable message * Add tip about pasting the SRP * Remove invalid prop The "info" style of `ActionableMessage` is the default, so no type is required. * Use more readable test convenience methods The method `toBeInTheDocument()` is now used over `not.toBeNull()` to improve the readability of tests. Likewise, the convenience method `.clear` is now used to clear fields rather than manually entering the key combination to clear a field. * Fix misspelled word
66 lines
1.0 KiB
SCSS
66 lines
1.0 KiB
SCSS
.import-srp {
|
|
&__container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"title dropdown"
|
|
"paste-tip paste-tip"
|
|
"input input"
|
|
"error error"
|
|
"too-many-words-error too-many-words-error";
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
&__container {
|
|
grid-template-areas: "title" "dropdown" "input" "error";
|
|
}
|
|
}
|
|
|
|
&__srp-label {
|
|
grid-area: title;
|
|
}
|
|
|
|
&__number-of-words-dropdown {
|
|
grid-area: dropdown;
|
|
}
|
|
|
|
&__paste-tip {
|
|
margin-bottom: 8px;
|
|
grid-area: paste-tip;
|
|
width: max-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
&__srp {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-area: input;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
&__srp {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
&__srp-word {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 8px;
|
|
}
|
|
|
|
&__srp-word-label {
|
|
width: 2em;
|
|
}
|
|
|
|
&__srp-error {
|
|
margin-top: 4px;
|
|
grid-area: error;
|
|
}
|
|
|
|
&__srp-too-many-words-error {
|
|
margin-top: 4px;
|
|
grid-area: too-many-words-error;
|
|
}
|
|
}
|