From fe73005d492f02784eb4d07f4453435ec81326b0 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Sun, 3 May 2020 10:46:35 +0200
Subject: [PATCH 1/3] fix referral display on mobile

---
 app/dashboard/templates/dashboard/referral.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/dashboard/templates/dashboard/referral.html b/app/dashboard/templates/dashboard/referral.html
index 73eb0e5e..fe959a29 100644
--- a/app/dashboard/templates/dashboard/referral.html
+++ b/app/dashboard/templates/dashboard/referral.html
@@ -26,7 +26,7 @@
 
           <b>Name</b>
           <div class="d-flex mb-3">
-            <div class="mr-2" style="min-width: 20em">
+            <div class="mr-2">
               <input name="name" class="form-control" value="{{ referral.name or '' }}">
             </div>
             <div>
@@ -45,20 +45,20 @@
           </div>
         {% endif %}
 
-        <div>
+        <div class="mt-2">
           Please use this referral link to invite your friends trying out SimpleLogin: <br>
 
-          <div class="d-flex mb-5" style="max-width: 40em">
-            <div class="flex-grow-1 mr-1">
+          <div class="d-flex mb-5 mt-2" style="max-width: 40em">
+            <div class="flex-grow-1 mr-2">
               <input class="form-control" id="referral-{{ referral.id }}" readonly
                      value="{{ referral.link() }}">
             </div>
 
             <div>
-              <button class="clipboard btn btn-primary" data-clipboard-action="copy"
+              <button class="clipboard btn btn-outline-primary" data-clipboard-action="copy"
                       data-clipboard-text="{{ referral.link() }}"
                       data-clipboard-target="#referral-{{ referral.id }}">
-                Copy &nbsp; &nbsp; <i class="fe fe-clipboard"></i>
+                Copy <i class="fe fe-clipboard"></i>
               </button>
             </div>
           </div>

From 8a147e36a77e81b0c23cae506b2ffc699ed1a6c2 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Sun, 3 May 2020 10:47:29 +0200
Subject: [PATCH 2/3] create how-to-use section for api key, domain, directory,
 mailbox

---
 app/dashboard/templates/dashboard/api_key.html      |  9 +++++++--
 .../templates/dashboard/custom_domain.html          |  9 +++++++--
 app/dashboard/templates/dashboard/directory.html    | 13 ++++++++++---
 app/dashboard/templates/dashboard/mailbox.html      |  9 +++++++--
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/app/dashboard/templates/dashboard/api_key.html b/app/dashboard/templates/dashboard/api_key.html
index 6d93fccc..f16e22e9 100644
--- a/app/dashboard/templates/dashboard/api_key.html
+++ b/app/dashboard/templates/dashboard/api_key.html
@@ -12,9 +12,14 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> API Key </h1>
+      <h1 class="h3"> API Key
+        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
+           aria-expanded="false" aria-controls="collapseExample">
+          How to use <i class="fe fe-chevrons-down"></i>
+        </a>
+      </h1>
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         The API Key is used on the SimpleLogin Chrome/Firefox/Safari extension. <br>
         You can install the Chrome extension on
         <a href="https://chrome.google.com/webstore/detail/simplelogin-extension/dphilobhebphkdjbpfohgikllaljmgbn"
diff --git a/app/dashboard/templates/dashboard/custom_domain.html b/app/dashboard/templates/dashboard/custom_domain.html
index 702d2dee..a03047db 100644
--- a/app/dashboard/templates/dashboard/custom_domain.html
+++ b/app/dashboard/templates/dashboard/custom_domain.html
@@ -11,7 +11,12 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Custom Domains </h1>
+      <h1 class="h3"> Custom Domains
+        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
+           aria-expanded="false" aria-controls="collapseExample">
+          How to use <i class="fe fe-chevrons-down"></i>
+        </a>
+      </h1>
 
       {% if not current_user.is_premium() %}
         <div class="alert alert-danger" role="alert">
@@ -19,7 +24,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         If you own a domain, let's say <b>example.com</b>, you will be able to create aliases with this domain, for
         example
         contact@example.com, help@example.com, etc with SimpleLogin. <br>
diff --git a/app/dashboard/templates/dashboard/directory.html b/app/dashboard/templates/dashboard/directory.html
index 02ba129e..8f7ed8fe 100644
--- a/app/dashboard/templates/dashboard/directory.html
+++ b/app/dashboard/templates/dashboard/directory.html
@@ -8,7 +8,13 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Directories </h1>
+      <h1 class="h3"> Directories
+        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
+           aria-expanded="false" aria-controls="collapseExample">
+          How to use <i class="fe fe-chevrons-down"></i>
+        </a>
+      </h1>
+
 
       {% if not current_user.is_premium() %}
         <div class="alert alert-danger" role="alert">
@@ -16,14 +22,15 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         <div>
           Directory allows you to create aliases <b>on the fly</b>.
         </div>
         <div class="mt-2 pb-2">
           1️⃣ Pick a name for your directory, says <em>my_dir</em> <br>
 
-          2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias beforehand</b>
+          2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias
+          beforehand</b>
         </div>
         <div class="pl-3 py-2 bg-white">
           <em>my_dir/<b>anything</b>@{{ FIRST_ALIAS_DOMAIN }}</em> or <br>
diff --git a/app/dashboard/templates/dashboard/mailbox.html b/app/dashboard/templates/dashboard/mailbox.html
index 67850458..99075f25 100644
--- a/app/dashboard/templates/dashboard/mailbox.html
+++ b/app/dashboard/templates/dashboard/mailbox.html
@@ -8,7 +8,12 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Mailboxes </h1>
+      <h1 class="h3"> Mailboxes
+        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
+           aria-expanded="false" aria-controls="collapseExample">
+          How to use <i class="fe fe-chevrons-down"></i>
+        </a>
+      </h1>
 
       {% if not current_user.is_premium() %}
         <div class="alert alert-danger" role="alert">
@@ -16,7 +21,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         A <em>mailbox</em> is just another personal email address. When creating a new alias, you could choose the
         mailbox that <em>owns</em> this alias, i.e: <br>
         - all emails sent to this alias will be forwarded to this mailbox <br>

From 625def2367c1f6b566e2a11cbea441e72b74d485 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Sun, 3 May 2020 10:48:21 +0200
Subject: [PATCH 3/3] use 2-column layout for api key, domain, directory,
 mailbox

---
 .../templates/dashboard/api_key.html          |  82 ++++++------
 .../templates/dashboard/custom_domain.html    |  47 +++----
 .../templates/dashboard/directory.html        |  71 +++++-----
 .../templates/dashboard/mailbox.html          | 123 +++++++++---------
 4 files changed, 165 insertions(+), 158 deletions(-)

diff --git a/app/dashboard/templates/dashboard/api_key.html b/app/dashboard/templates/dashboard/api_key.html
index f16e22e9..c9a03995 100644
--- a/app/dashboard/templates/dashboard/api_key.html
+++ b/app/dashboard/templates/dashboard/api_key.html
@@ -37,66 +37,68 @@
         </span>
       </div>
 
-      {% for api_key in api_keys %}
-        <div class="card">
-          <div class="card-body">
-            <h5 class="card-title">{{ api_key.name }}</h5>
-            <h6 class="card-subtitle mb-2 text-muted">
-              {% if api_key.last_used %}
-                Last used: {{ api_key.last_used | dt }} <br>
-                Used: {{ api_key.times }} times.
-              {% else %}
-                Never used
-              {% endif %}
-            </h6>
+      <div class="row">
+        {% for api_key in api_keys %}
+          <div class="col-12 col-lg-6">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="card-title">{{ api_key.name }}</h5>
+                <h6 class="card-subtitle mb-2 text-muted">
+                  {% if api_key.last_used %}
+                    Last used: {{ api_key.last_used | dt }} <br>
+                    Used: {{ api_key.times }} times.
+                  {% else %}
+                    Never used
+                  {% endif %}
+                </h6>
 
-            <div class="input-group">
-              <input class="form-control" id="apikey-{{ api_key.id }}" readonly value="**********">
-              <div class="input-group-append">
+                <div class="input-group">
+                  <input class="form-control" id="apikey-{{ api_key.id }}" readonly value="**********">
+                  <div class="input-group-append">
                 <span class="input-group-text">
                   <i class="fe fe-eye toggle-api-key" data-show="off" data-secret="{{ api_key.code }}"
                   ></i>
                 </span>
-              </div>
-            </div>
+                  </div>
+                </div>
 
-            <br>
+                <br>
 
-            <div class="row">
-              <div class="col">
-                <button class="clipboard btn btn-primary" data-clipboard-action="copy"
-                        data-clipboard-text="{{ api_key.code }}"
-                        data-clipboard-target="#apikey-{{ api_key.id }}">
-                  Copy &nbsp; &nbsp; <i class="fe fe-clipboard"></i>
-                </button>
-              </div>
+                <div class="row">
+                  <div class="col">
+                    <button class="clipboard btn btn-primary" data-clipboard-action="copy"
+                            data-clipboard-text="{{ api_key.code }}"
+                            data-clipboard-target="#apikey-{{ api_key.id }}">
+                      Copy &nbsp; &nbsp; <i class="fe fe-clipboard"></i>
+                    </button>
+                  </div>
 
-              <div class="col">
-                <form method="post">
-                  <input type="hidden" name="form-name" value="delete">
-                  <input type="hidden" name="api-key-id" value="{{ api_key.id }}">
-                  <span class="card-link btn btn-link float-right text-danger delete-api-key">
+                  <div class="col">
+                    <form method="post">
+                      <input type="hidden" name="form-name" value="delete">
+                      <input type="hidden" name="api-key-id" value="{{ api_key.id }}">
+                      <span class="card-link btn btn-link float-right text-danger delete-api-key">
                     Delete
                   </span>
-                </form>
+                    </form>
+                  </div>
+                </div>
+
               </div>
             </div>
-
           </div>
-        </div>
-      {% endfor %}
-
-      <hr>
+        {% endfor %}
+      </div>
 
       <form method="post">
         {{ new_api_key_form.csrf_token }}
         <input type="hidden" name="form-name" value="create">
-
-        <label class="form-label">Api Key Name</label>
-        <small>Name of the api key, e.g. where it will be used.</small>
+        <h2 class="h4">New Api Key</h2>
 
         {{ new_api_key_form.name(class="form-control", placeholder="Chrome, Firefox") }}
         {{ render_field_errors(new_api_key_form.name) }}
+        <div class="small-text">Name of the api key, e.g. where it will be used.</div>
+
         <button class="btn btn-lg btn-success mt-2">Create</button>
       </form>
 
diff --git a/app/dashboard/templates/dashboard/custom_domain.html b/app/dashboard/templates/dashboard/custom_domain.html
index a03047db..edab5c1d 100644
--- a/app/dashboard/templates/dashboard/custom_domain.html
+++ b/app/dashboard/templates/dashboard/custom_domain.html
@@ -31,42 +31,45 @@
         You could also enable <b>catch-all</b> feature that allows you to create aliases on-the-fly.
       </div>
 
-      {% for custom_domain in custom_domains %}
-        <div class="card" style="">
-          <div class="card-body">
-            <h5 class="card-title">
-              <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
-              {% if custom_domain.verified %}
-                <span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span>
-              {% else %}
-                <span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed">
+      <div class="row">
+        {% for custom_domain in custom_domains %}
+          <div class="col-12 col-lg-6">
+            <div class="card" style="">
+              <div class="card-body">
+                <h5 class="card-title">
+                  <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
+                  {% if custom_domain.verified %}
+                    <span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span>
+                  {% else %}
+                    <span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed">
                   <a href="{{ url_for('dashboard.domain_detail_dns', custom_domain_id=custom_domain.id) }}"
                      class="text-decoration-none">🚫
                   </a>
                 </span>
-              {% endif %}
-            </h5>
-            <h6 class="card-subtitle mb-2 text-muted">
-              Created {{ custom_domain.created_at | dt }} <br>
-              <span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases.
-            </h6>
+                  {% endif %}
+                </h5>
+                <h6 class="card-subtitle mb-2 text-muted">
+                  Created {{ custom_domain.created_at | dt }} <br>
+                  <span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases.
+                </h6>
 
-            <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">Details ➡</a>
+                <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">Details ➡</a>
+              </div>
+            </div>
           </div>
-        </div>
-      {% endfor %}
-
-      <hr>
+        {% endfor %}
+      </div>
 
       <form method="post">
         {{ new_custom_domain_form.csrf_token }}
         <input type="hidden" name="form-name" value="create">
 
-        <label class="form-label">Domain</label>
-        <small>Please use full path domain, for ex <em>my-subdomain.my-domain.com</em></small>
+        <h2 class="h4">New Domain</h2>
 
         {{ new_custom_domain_form.domain(class="form-control", placeholder="my-domain.com") }}
         {{ render_field_errors(new_custom_domain_form.domain) }}
+        <div class="small-text">Please use full path domain, for ex <em>my-subdomain.my-domain.com</em></div>
+
         <button class="btn btn-lg btn-success mt-2">Create</button>
       </form>
 
diff --git a/app/dashboard/templates/dashboard/directory.html b/app/dashboard/templates/dashboard/directory.html
index 8f7ed8fe..f5d353d4 100644
--- a/app/dashboard/templates/dashboard/directory.html
+++ b/app/dashboard/templates/dashboard/directory.html
@@ -53,55 +53,56 @@
 
       </div>
 
-      {% for dir in dirs %}
-        <div class="card" style="">
-          <div class="card-body">
-            <h5 class="card-title">
-              {{ dir.name }}
-            </h5>
-            <h6 class="card-subtitle mb-2 text-muted">
-              Created {{ dir.created_at | dt }} <br>
-              <span class="font-weight-bold">{{ dir.nb_alias() }}</span> aliases.
-            </h6>
-          </div>
+      <div class="row">
+        {% for dir in dirs %}
+          <div class="col-12 col-lg-6">
+            <div class="card" style="">
+              <div class="card-body">
+                <h5 class="card-title">
+                  {{ dir.name }}
+                </h5>
+                <h6 class="card-subtitle mb-2 text-muted">
+                  Created {{ dir.created_at | dt }} <br>
+                  <span class="font-weight-bold">{{ dir.nb_alias() }}</span> aliases.
+                </h6>
+              </div>
 
-          <div class="card-footer p-0">
-            <div class="row">
-              <div class="col">
-                <form method="post">
-                  <input type="hidden" name="form-name" value="delete">
-                  <input type="hidden" class="dir-name" value="{{ dir.name }}">
-                  <input type="hidden" name="dir-id" value="{{ dir.id }}">
-                  <span class="card-link btn btn-link float-right text-danger delete-dir">
+              <div class="card-footer p-0">
+                <div class="row">
+                  <div class="col">
+                    <form method="post">
+                      <input type="hidden" name="form-name" value="delete">
+                      <input type="hidden" class="dir-name" value="{{ dir.name }}">
+                      <input type="hidden" name="dir-id" value="{{ dir.id }}">
+                      <span class="card-link btn btn-link float-right text-danger delete-dir">
                     Delete
                   </span>
-                </form>
+                    </form>
+                  </div>
+                </div>
+
               </div>
+
             </div>
-
           </div>
+        {% endfor %}
+      </div>
 
-        </div>
-      {% endfor %}
-
-      {% if dirs|length > 0 %}
-        <hr>
-      {% endif %}
-
-      <form method="post" class="mt-6">
+      <form method="post" class="mt-2">
         {{ new_dir_form.csrf_token }}
         <input type="hidden" name="form-name" value="create">
 
-        <div class="font-weight-bold">Directory Name</div>
-        <div class="small-text">
-          Directory name must be at least 3 characters.
-          Only lowercase letter, number, dash (-), underscore (_) can be used.
-        </div>
+        <h2 class="h4">New Directory</h2>
 
         {{ new_dir_form.name(class="form-control", placeholder="my-directory",
             pattern="[0-9a-z-_]{3,}",
             title="Only letter, number, dash (-), underscore (_) can be used. Directory name must be at least 3 characters.") }}
         {{ render_field_errors(new_dir_form.name) }}
+        <div class="small-text">
+          Directory name must be at least 3 characters.
+          Only lowercase letter, number, dash (-), underscore (_) can be used.
+        </div>
+
         <button class="btn btn-lg btn-success mt-2">Create</button>
       </form>
 
@@ -117,7 +118,7 @@
 
       let that = $(this);
       let message = `All aliases associated with <b>${directory}</b> directory will also be deleted, ` +
-          " please confirm.";
+        " please confirm.";
 
       bootbox.confirm({
         message: message,
diff --git a/app/dashboard/templates/dashboard/mailbox.html b/app/dashboard/templates/dashboard/mailbox.html
index 99075f25..4abb7873 100644
--- a/app/dashboard/templates/dashboard/mailbox.html
+++ b/app/dashboard/templates/dashboard/mailbox.html
@@ -34,88 +34,89 @@
         if you want to create aliases for your buddy.
       </div>
 
-      {% for mailbox in mailboxes %}
-        <div class="card">
-          <div class="card-body">
-            <h5 class="card-title">
-              {{ mailbox.email }}
-              {% if mailbox.verified %}
-                <span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Verified">✅</span>
-              {% else %}
-                <span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Not Verified">
+      <div class="row">
+        {% for mailbox in mailboxes %}
+          <div class="col-12 col-lg-6">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="card-title">
+                  {{ mailbox.email }}
+                  {% if mailbox.verified %}
+                    <span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Verified">✅</span>
+                  {% else %}
+                    <span class="cursor" data-toggle="tooltip" data-original-title="Mailbox Not Verified">
                   🚫
                 </span>
-              {% endif %}
-              {% if mailbox.pgp_finger_print %}
-                <span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
-              {% endif %}
+                  {% endif %}
+                  {% if mailbox.pgp_finger_print %}
+                    <span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
+                  {% endif %}
 
-              {% if mailbox.id == current_user.default_mailbox_id %}
-                <div class="badge badge-primary float-right" data-toggle="tooltip"
-                     title="When a new random alias is created, it belongs to the default mailbox">Default Mailbox
-                </div>
-              {% endif %}
-            </h5>
+                  {% if mailbox.id == current_user.default_mailbox_id %}
+                    <div class="badge badge-primary float-right" data-toggle="tooltip"
+                         title="When a new random alias is created, it belongs to the default mailbox">Default Mailbox
+                    </div>
+                  {% endif %}
+                </h5>
 
-            <h6 class="card-subtitle mb-2 text-muted">
-              Created {{ mailbox.created_at | dt }} <br>
-              <span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases. <br>
+                <h6 class="card-subtitle mb-2 text-muted">
+                  Created {{ mailbox.created_at | dt }} <br>
+                  <span class="font-weight-bold">{{ mailbox.nb_alias() }}</span> aliases. <br>
 
-            </h6>
+                </h6>
 
-            <a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit ➡</a>
-          </div>
+                <a href="{{ url_for('dashboard.mailbox_detail_route', mailbox_id=mailbox.id) }}">Edit ➡</a>
+              </div>
 
-          <div class="card-footer p-0">
-            <div class="row">
-              {% if mailbox.verified %}
-                <div class="col">
-                  <form method="post">
-                    <input type="hidden" name="form-name" value="set-default">
-                    <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
-                    <input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
-                    <button class="card-link btn btn-link
+              <div class="card-footer p-0">
+                <div class="row">
+                  {% if mailbox.verified %}
+                    <div class="col">
+                      <form method="post">
+                        <input type="hidden" name="form-name" value="set-default">
+                        <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
+                        <input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
+                        <button class="card-link btn btn-link
                     {% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}"
-                    >
-                      Set As Default Mailbox
-                    </button>
-                  </form>
-                </div>
-              {% endif %}
+                        >
+                          Set As Default Mailbox
+                        </button>
+                      </form>
+                    </div>
+                  {% endif %}
 
-              <div class="col">
-                <form method="post">
-                  <input type="hidden" name="form-name" value="delete">
-                  <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
-                  <input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
-                  <span class="card-link btn btn-link text-danger float-right delete-mailbox
+                  <div class="col">
+                    <form method="post">
+                      <input type="hidden" name="form-name" value="delete">
+                      <input type="hidden" class="mailbox" value="{{ mailbox.email }}">
+                      <input type="hidden" name="mailbox-id" value="{{ mailbox.id }}">
+                      <span class="card-link btn btn-link text-danger float-right delete-mailbox
                     {% if mailbox.id == current_user.default_mailbox_id %} disabled {% endif %}">
                     Delete
                   </span>
-                </form>
+                    </form>
+                  </div>
+                </div>
+
               </div>
+
             </div>
-
           </div>
+        {% endfor %}
+      </div>
 
-        </div>
-      {% endfor %}
-
-      {% if mailboxs|length > 0 %}
-        <hr>
-      {% endif %}
-
-      <form method="post" class="mt-6">
+      <form method="post" class="mt-2">
         {{ new_mailbox_form.csrf_token }}
         <input type="hidden" name="form-name" value="create">
 
-        <div class="font-weight-bold">Email</div>
-        <div class="small-text">
-          A verification email will be sent to this email to make sure you have access to this email.
-        </div>
+        <h2 class="h4">New Mailbox</h2>
 
         {{ new_mailbox_form.email(class="form-control", placeholder="email@example.com") }}
         {{ render_field_errors(new_mailbox_form.email) }}
+        <div class="small-text">
+          A verification email will be sent to this email address.
+        </div>
+
         <button class="btn btn-lg btn-success mt-2">Create</button>
       </form>
 
@@ -131,7 +132,7 @@
 
       let that = $(this);
       let message = `All aliases owned by this mailbox <b>${mailbox}</b> will be also deleted, ` +
-          " please confirm.";
+        " please confirm.";
 
       bootbox.confirm({
         message: message,