Tweak style of the initial password modal, update the copy

parent 0082c4b8
......@@ -11,13 +11,20 @@
</b-field>
</form>
<!-- Buefy docs recommend adding has-modal-card property for better
mobile handling but it makes the modal very wide. Keep an eye on this -->
<b-modal :active.sync='modalIsActive' scroll='keep'>
<!-- <div class='modal-background'></div> -->
<div class='modal-card' style='width: auto'>
<header class='modal-card-head'>
<p class='modal-card-title'>Get started!</p>
<p class='modal-card-title'>Welcome to the Indienet!</p>
</header>
<section class='modal-card-body'>
<div class='instructions'>
<p>To start, please pick a strong password to protect your Indie Site.</p>
<p>Please don’t lose this. We don’t store your password to protect your privacy and we can’t recover it even if we wanted to. If possible, generate and store your password using a password manager like <a href='https://1password.com'>1Password</a> or <a href='https://keepass.info'>KeePass</a>.</p>
</div>
<b-field label='Password'>
<div id='password-field' class='control'>
<no-ssr>
......@@ -94,8 +101,21 @@
min-width: 80px;
}
.button {
/* Fix the text centering in the button. */
padding-top: 0.15em;
}
.instructions {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.instructions p:first-of-type {
font-weight: bold;
}
div.control {
/* margin-top: 1em; */
margin-bottom: 1em;
}
......@@ -103,6 +123,14 @@
padding-top: 1em;
}
.modal-card-title {
margin: 0;
}
.modal-card-body {
padding-top: 0;
}
div.VuePassword__Message {
min-height: 2rem;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment