m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code
8ad85e6413
metamask-extension/ui/components/app/create-new-vault/create-new-vault.scss

54 lines
698 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;
width: 360px;
}
&__srp-shown {
@include Paragraph;
padding: 8px 16px;
}
&__srp-section {
display: flex;
flex-direction: column;
}
&__srp-label {
margin-bottom: 8px;
}
&__srp-error {
margin-top: 4px;
}
&__show-srp {
margin-top: 16px;
margin-bottom: 16px;
}
&__show-srp-label {
margin-left: 8px;
}
&__terms {
margin-top: 16px;
margin-bottom: 16px;
}
&__terms-label {
margin-left: 8px;
}
&__terms-link {
color: var(--primary-1);
}
&__submit-button#{&}__submit-button {
margin-top: 16px;
width: 170px;
}
}
Copy Permalink