m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-27 12:56:01 +01:00
Code
7ca9383785
metamask-extension/ui/components/app/create-new-vault/create-new-vault.scss

31 lines
438 B
SCSS
Raw Normal View History

Extract "create vault" form to separate component (#13461) The form used for creating a vault on the "Import" page of onboarding and on the "Restore vault" page is nearly identical, yet the implementation is totally separate. It has now been extracted to a separate component, consolidating the two implementations. There is a "terms of use" checkbox on the import page that isn't on the restore vault page, so that part has been made optional. The "submit" button text differs between the two uses as well, so that is customizable. There are slight styling differences between the old and new versions of this form. The fonts and spacing are all using our new standard design system guidelines, and we're using our standard checkbox now as well. The spacing and font sizes were chosen somewhat arbitrarily by me to resemble the old styles, so please feel free to suggest changes if you think they can be improved upon. There are some slight copy changes to the "Restore vault" page as well; the placeholder text and the label for the "Secret Recovery Phrase" field now matches the "Import" page copy.
2022-02-03 15:06:43 +01:00
.create-new-vault {
&__form {
display: flex;
flex-direction: column;
}
Split SRP input by word (#14016) * 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
2022-03-21 20:09:26 +01:00
&__create-password {
Extract "create vault" form to separate component (#13461) The form used for creating a vault on the "Import" page of onboarding and on the "Restore vault" page is nearly identical, yet the implementation is totally separate. It has now been extracted to a separate component, consolidating the two implementations. There is a "terms of use" checkbox on the import page that isn't on the restore vault page, so that part has been made optional. The "submit" button text differs between the two uses as well, so that is customizable. There are slight styling differences between the old and new versions of this form. The fonts and spacing are all using our new standard design system guidelines, and we're using our standard checkbox now as well. The spacing and font sizes were chosen somewhat arbitrarily by me to resemble the old styles, so please feel free to suggest changes if you think they can be improved upon. There are some slight copy changes to the "Restore vault" page as well; the placeholder text and the label for the "Secret Recovery Phrase" field now matches the "Import" page copy.
2022-02-03 15:06:43 +01:00
display: flex;
flex-direction: column;
Split SRP input by word (#14016) * 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
2022-03-21 20:09:26 +01:00
width: 360px;
Extract "create vault" form to separate component (#13461) The form used for creating a vault on the "Import" page of onboarding and on the "Restore vault" page is nearly identical, yet the implementation is totally separate. It has now been extracted to a separate component, consolidating the two implementations. There is a "terms of use" checkbox on the import page that isn't on the restore vault page, so that part has been made optional. The "submit" button text differs between the two uses as well, so that is customizable. There are slight styling differences between the old and new versions of this form. The fonts and spacing are all using our new standard design system guidelines, and we're using our standard checkbox now as well. The spacing and font sizes were chosen somewhat arbitrarily by me to resemble the old styles, so please feel free to suggest changes if you think they can be improved upon. There are some slight copy changes to the "Restore vault" page as well; the placeholder text and the label for the "Secret Recovery Phrase" field now matches the "Import" page copy.
2022-02-03 15:06:43 +01:00
}
&__terms {
margin-top: 16px;
margin-bottom: 16px;
}
&__terms-label {
margin-left: 8px;
}
&__terms-link {
Dark Mode : Onboarding flow (#14020)
2022-03-19 01:43:33 +01:00
color: var(--color-primary-default);
Extract "create vault" form to separate component (#13461) The form used for creating a vault on the "Import" page of onboarding and on the "Restore vault" page is nearly identical, yet the implementation is totally separate. It has now been extracted to a separate component, consolidating the two implementations. There is a "terms of use" checkbox on the import page that isn't on the restore vault page, so that part has been made optional. The "submit" button text differs between the two uses as well, so that is customizable. There are slight styling differences between the old and new versions of this form. The fonts and spacing are all using our new standard design system guidelines, and we're using our standard checkbox now as well. The spacing and font sizes were chosen somewhat arbitrarily by me to resemble the old styles, so please feel free to suggest changes if you think they can be improved upon. There are some slight copy changes to the "Restore vault" page as well; the placeholder text and the label for the "Secret Recovery Phrase" field now matches the "Import" page copy.
2022-02-03 15:06:43 +01:00
}
&__submit-button#{&}__submit-button {
margin-top: 16px;
width: 170px;
}
}
Copy Permalink