PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert pass phrase entry to flexbox

Browse source 
Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
J. Ryan Stinnett 2018-12-19 10:56:50 +00:00
parent a597ad10b0
commit 24f0123ded
2 changed files with 35 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
View file

@ -29,9 +29,13 @@ limitations under the License.
display: block;
}
.mx_CreateKeyBackupDialog_passPhraseContainer {
display: flex;
align-items: start;
}
.mx_CreateKeyBackupDialog_passPhraseHelp {
float: right;
width: 230px;
flex: 1;
height: 85px;
margin-left: 20px;
font-size: 80%;
@ -42,14 +46,16 @@ limitations under the License.
}
.mx_CreateKeyBackupDialog_passPhraseInput {
flex: none;
width: 250px;
border: 1px solid $accent-color;
border-radius: 5px;
padding: 10px;
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_passPhraseMatch {
float: right;
margin-left: 20px;
}
.mx_CreateKeyBackupDialog_recoveryKeyHeader {
@ -61,11 +67,11 @@ limitations under the License.
}
.mx_CreateKeyBackupDialog_recoveryKey {
width: 275px;
width: 262px;
padding: 20px;
color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color;
margin-right: 8px;
margin-right: 12px;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons {

44
src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
View file

@ -239,17 +239,19 @@ export default React.createClass({
<p>{_t("You'll need it if you log out or lose access to this device.")}</p>
<div className="mx_CreateKeyBackupDialog_primaryContainer">
<div className="mx_CreateKeyBackupDialog_passPhraseHelp">
{strengthMeter}
{helpText}
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
<input type="password"
onChange={this._onPassPhraseChange}
onKeyPress={this._onPassPhraseKeyPress}
value={this.state.passPhrase}
className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Enter a passphrase...")}
/>
<div className="mx_CreateKeyBackupDialog_passPhraseHelp">
{strengthMeter}
{helpText}
</div>
</div>
<input type="password"
onChange={this._onPassPhraseChange}
onKeyPress={this._onPassPhraseKeyPress}
value={this.state.passPhrase}
className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Enter a passphrase...")}
/>
</div>
<DialogButtons primaryButton={_t('Next')}
@ -317,16 +319,18 @@ export default React.createClass({
"somewhere safe.",
)}</p>
<div className="mx_CreateKeyBackupDialog_primaryContainer">
{passPhraseMatch}
<div>
<input type="password"
onChange={this._onPassPhraseConfirmChange}
onKeyPress={this._onPassPhraseConfirmKeyPress}
value={this.state.passPhraseConfirm}
className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Repeat your passphrase...")}
autoFocus={true}
/>
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
<div>
<input type="password"
onChange={this._onPassPhraseConfirmChange}
onKeyPress={this._onPassPhraseConfirmKeyPress}
value={this.state.passPhraseConfirm}
className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Repeat your passphrase...")}
autoFocus={true}
/>
</div>
{passPhraseMatch}
</div>
</div>
<DialogButtons primaryButton={_t('Next')}