Updated visuals for cross-signing bootstrap

* Use Fields rather than plain inputs
 * Update padding & alignment to match designs
 * Add Skip buttons
 * Update copy as per designs

Part of https://github.com/vector-im/riot-web/issues/11902
Based on https://github.com/matrix-org/matrix-react-sdk/pull/3897
This commit is contained in:
David Baker 2020-01-22 18:08:39 +00:00
parent e98269822c
commit 78654cc693
3 changed files with 65 additions and 61 deletions

View file

@ -1,6 +1,6 @@
/*
Copyright 2018 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -22,7 +22,7 @@ limitations under the License.
.mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px;
padding-top: 20px;
}
.mx_CreateSecretStorageDialog_primaryContainer::after {
@ -36,9 +36,13 @@ limitations under the License.
align-items: flex-start;
}
.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
margin-top: 0px;
}
.mx_CreateSecretStorageDialog_passPhraseHelp {
flex: 1;
height: 85px;
height: 64px;
margin-left: 20px;
font-size: 80%;
}
@ -47,16 +51,8 @@ limitations under the License.
width: 100%;
}
.mx_CreateSecretStorageDialog_passPhraseInput {
flex: none;
width: 250px;
border: 1px solid $accent-color;
border-radius: 5px;
padding: 10px;
margin-bottom: 1em;
}
.mx_CreateSecretStorageDialog_passPhraseMatch {
width: 200px;
margin-left: 20px;
}