=== modified file 'package.json'
--- package.json	2019-07-15 13:38:59 +0000
+++ package.json	2019-08-19 08:30:11 +0000
@@ -8,6 +8,6 @@
     "gulp-csslint": "~0.1.5",
     "gulp-csso": "~0.2.9",
     "gulp-sass": "4.0.2",
-    "vanilla-framework": "2.0.1"
+    "vanilla-framework": "2.2.0"
   }
 }

=== modified file 'src/webui/templates/account/emails.html'
--- src/webui/templates/account/emails.html	2017-02-26 01:28:59 +0000
+++ src/webui/templates/account/emails.html	2019-08-19 08:30:11 +0000
@@ -1,113 +1,105 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n url_with_token %}
 
 {% comment %}
-Copyright 2010 Canonical Ltd.  This software is licensed under the
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
 {% block html_extra %}data-qa-id="account_emails"{% endblock %}
 
 {% block title %}
-  {% blocktrans %}{{ account_displayname }}'s email addresses{% endblocktrans %}
+  {% blocktrans %}Your email addresses{% endblocktrans %}
 {% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Your email addresses" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<p>
-
-{% if not verified_emails and not unverified_emails %}
-  <p>{% blocktrans %}You have no email addresses associated with your account.{% endblocktrans %}</p>
-{% endif %}
-
-{% if verified_emails %}
-
-  <section class="verified-emails">
-
-    <h3>{% trans "Verified" %}</h3>
-
-    <table class="listing hover">
-      {% for email in verified_emails %}
-        <tr>
-          <td class="email{% if email.is_preferred %} preferred-email{% endif %}">
-            <span class="email">{{ email }}</span>
-            {% if email.is_preferred %}
-              <span class="preferred-label">{% trans "(preferred)" %}</span>
-            {% endif %}
-          </td>
-          {% if not readonly %}
-            <td class="actions">
+  <section class="p-strip">
+    <h2>{% trans "Your email addresses" %}</h2>
+    {% if not verified_emails and not unverified_emails %}
+      <p>{% blocktrans %}You have no email addresses associated with your account.{% endblocktrans %}</p>
+    {% endif %}
+    {% if verified_emails %}
+    <section class="p-strip is-shallow u-no-padding--bottom">
+      <table class="p-table">
+        <thead>
+          <tr>
+            <th>{% trans "Verified" %}</th>
+          </tr>
+        </thead>
+        <tbody>
+        {% for email in verified_emails %}
+          <tr>
+            <td class="email{% if email.is_preferred %} preferred-email{% endif %}">
+              <span class="email">{{ email }}</span>
+              {% if email.is_preferred %}
+                <span class="preferred-label">{% trans "(preferred)" %}</span>
+              {% endif %}
+            </td>
+            {% if not readonly %}
+              <td class="u-align-text--right">
                 {% if not email.is_preferred and num_emails > 1 %}
-                <a href="{% url_with_token 'delete_email' email_address=email.email %}" class="btn-sm" data-qa-id="delete_verified_{{ email }}">
-                    <span>{% trans "Delete" %}</span>
-                </a>
-              {% endif %}
-            </td>
-          {% endif %}
-        </tr>
-      {% endfor %}
-    </table>
-
-  </section>
-
-{% endif %}
-
-{% if unverified_emails %}
-
-  <section class="unverified-emails">
-
-    <h3>{% trans "Unverified" %}</h3>
-
-    <table class="listing hover">
-      {% for email in unverified_emails %}
-        <tr class="unverified-emails">
-          <td class="email">{{ email }}</td>
-          {% if not readonly %}
-            <td class="actions">
-              <a href="{% url_with_token 'verify_email' email_address=email.email %}" data-qa-id="verify_unverified_{{ email }}" class="verify-email btn-sm"><span>{% trans "Verify" %}</span></a>
-              {% if num_emails > 1 %}
-              <a href="{% url_with_token 'delete_email' email_address=email.email %}" data-qa-id="delete_unverified_{{ email }}" class="btn-sm">
-                <span>{% trans "Delete" %}</span>
-              </a>
-              {% endif %}
-            </td>
-          {% endif %}
-        </tr>
-      {% endfor %}
-    </table>
-
-  </section>
-
-{% endif %}
-
-{% if not readonly %}
-
-  <section class="add-emails">
-
-    <h3>{% trans "Add email address" %}</h3>
-
-    <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to verify it.{% endblocktrans %}</p>
-
-    <form action="{% url_with_token 'new_email' %}" method="post">
-      {% csrf_token %}
-      <div class="input-row">
-        {{ form.newemail }}
-        {% if form.newemail.errors %}
-          <span class="error">{{ form.newemail.errors|first }}</span>
-        {% endif %}
+                  <a href="{% url_with_token 'delete_email' email_address=email.email %}" class="btn-sm" data-qa-id="delete_verified_{{ email }}">{% trans "Delete" %}</a>
+                {% endif %}
+              </td>
+            {% endif %}
+          </tr>
+        {% endfor %}
+        </tbody>
+      </table>
+    </section>
+    {% endif %}
+
+    {% if unverified_emails %}
+    <section class="p-strip is-shallow">
+      <table class="listing hover">
+        <thead>
+          <tr>
+            <th>{% trans "unverified" %}</th>
+          </tr>
+        </thead>
+        <tbody>
+        {% for email in unverified_emails %}
+          <tr class="unverified-emails">
+            <td class="email">{{ email }}</td>
+            {% if not readonly %}
+              <td class="u-align-text--right">
+                <a href="{% url_with_token 'verify_email' email_address=email.email %}" data-qa-id="verify_unverified_{{ email }}"{% trans "Verify" %}</a>
+                {% if num_emails > 1 %}
+                <a href="{% url_with_token 'delete_email' email_address=email.email %}" data-qa-id="delete_unverified_{{ email }}">{% trans "Delete" %}</a>
+                {% endif %}
+              </td>
+            {% endif %}
+          </tr>
+        {% endfor %}
+      </table>
+    </section>
+    {% endif %}
+
+    {% if not readonly %}
+      <h3>{% trans "Add email address" %}</h3>
+      <p>{% blocktrans %}Enter your email address, and we will send you instructions on how to verify it.{% endblocktrans %}</p>
+      <div class="row">
+        <div class="col-6">
+          <form action="{% url_with_token 'new_email' %}" method="post">
+            {% csrf_token %}
+            <div class="p-form-validation{% if form.newemail.errors %} is-error{% endif %}">
+              <label for="id_newemail">Email address</label>
+              {{ form.newemail }}
+              {% if form.newemail.errors %}
+              <p class="p-form-validation__message">
+                <strong>Error:</strong> {{ form.newemail.errors|first }}
+              </p>
+              {% endif %}
+            </div>
+            <p class="actions">
+              <button type="submit" class="p-button--positive" name="continue" data-qa-id="add_new_email">{% trans "Add address" %}</button>
+              <a class="p-button--neutral" href="/">{% trans "Cancel" %}</a>
+            </p>
+          </form>
+        </div>
       </div>
-      <p class="actions">
-        <button type="submit" class="btn cta" name="continue" data-qa-id="add_new_email">
-          <span>{% trans "Add address" %}</span>
-        </button>
-        <a class="cta secondary" href="/">{% trans "Cancel" %}</a>
-      </p>
-    </form>
-
+    {% endif %}
   </section>
-
-{% endif %}
-
 {% endblock %}