Improved style

src/pretix/control/templates/pretixcontrol/user/change_email.html

@@ -7,15 +7,22 @@
         <h1>
             {% trans "Change login email address" %}
         </h1>
-        <br>
         {% csrf_token %}
         {% bootstrap_form_errors form %}
+        <p class="text-muted">
+            {% trans "This changes the email address used to login to your account, as well as where we send email notifications." %}
+        </p>
         {% bootstrap_field form.new_email %}
-        <div class="text-right">
+        <p>
+            {% trans "We will send a confirmation code to your new email address, which you need to enter in the next step to confirm the email address is correct." %}
+        </p>
+        <div class="form-group submit-group">
+            <a href="{% url "control:user.settings" %}" class="btn btn-default btn-cancel">
+                {% trans "Cancel" %}
+            </a>
             <button type="submit" class="btn btn-primary btn-save btn-lg">
                 {% trans "Continue" %}
             </button>
-            <a href="{% url "control:user.settings" %}" class="btn btn-default btn-lg">{% trans "Cancel" %}</a>
         </div>
     </form>
 {% endblock %}

src/pretix/control/templates/pretixcontrol/user/change_password.html

@@ -14,11 +14,11 @@
         {% bootstrap_field form.old_pw %}
         {% bootstrap_field form.new_pw %}
         {% bootstrap_field form.new_pw_repeat %}
-        <div class="text-right">
+        <div class="form-group submit-group">
+            <a href="{% url "control:user.settings" %}" class="btn btn-default btn-cancel">{% trans "Cancel" %}</a>
             <button type="submit" class="btn btn-primary btn-save btn-lg">
                 {% trans "Change password" %}
             </button>
-            <a href="{% url "control:user.settings" %}" class="btn btn-default btn-lg">{% trans "Cancel" %}</a>
         </div>
     </form>
 {% endblock %}

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -941,6 +941,20 @@ details {
 @media (min-width: $screen-lg-min) {
   .centered-form {
     margin: 80px auto;
-    max-width: 500px;
+    max-width: 800px;
+    border: 1px solid #ddd;
+    padding: 20px 40px 0;
+    border-radius: 4px;
+    box-shadow: 2px 2px 2px #eee;
+  }
+
+  .form.centered-form .submit-group {
+    margin: 25px -40px 0 !important;
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+
+  .centered-form p {
+    margin: 20px 0;
   }
 }