Merge lp:~deadlight/canonical-identity-provider/devices-list into lp:~deadlight/canonical-identity-provider/vanilla

[Karl Williams]

- Updated the devices list page to Vanilla
- Styled the left-hand user nav so that it works on small screens/mobile

QA:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000/ in your browser
- Create an account using the form
- Go to http://[CONTAINER IP]:8000/device-list and try adding some devices to see the list update

[Karl Williams (deadlight)]

Hold off on the review. I'm going to merge a few more commits into this one.

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

[Anthony Dillon (ya-bo-ng)]

Will check the further commits

[Karl Williams (deadlight)]

I've pushed up all pages in this section. Ready for full review.

[Barry McGee (barry-mcgee)]

Some comments inline.

[Anthony Dillon (ya-bo-ng)]

QA looks good but would be nice to overflow the tables. I believe they will require a wrapping div with some styles.

review: Approve

=== modified file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss	2019-08-19 08:29:07 +0000
+++ src/identityprovider/static_src/scss/styles.scss	2019-08-19 08:29:07 +0000
@@ -34,7 +34,14 @@
 
 //Side navigation for logged in users
 .p-sidebar {
-  border-right: 1px solid $color-mid-light;
+  @media only screen and (max-width: $breakpoint-medium) {
+    padding: 0 $sph-inner--small;
+    border-bottom: 1px solid $color-mid-light;
+  }
+
+  @media only screen and (min-width: $breakpoint-medium + 1) {
+    border-right: 1px solid $color-mid-light;
+  }
 
   .is-active {
     position: relative;
@@ -53,7 +60,8 @@
 
 // Fix for mixed buttons
 @media only screen and (min-width: $breakpoint-x-small + 1) {
-  [class^="p-button"] + [class^="p-button"] {
+  button[class^="p-button"] + a[class^="p-button"],
+  a[class^="p-button"] + button[class^="p-button"] {
     margin-left: $sph-inner;
   }
 }
@@ -64,3 +72,9 @@
   overflow: hidden;
   white-space: nowrap;
 }
+
+// Custom table style
+.p-table--bordered {
+  border-top: 1px solid $color-mid-light;
+  border-bottom: 1px solid $color-mid-light;
+}

=== modified file 'src/webui/templates/common/missing_backup_device_warning.html'
--- src/webui/templates/common/missing_backup_device_warning.html	2013-04-17 13:23:35 +0000
+++ src/webui/templates/common/missing_backup_device_warning.html	2019-08-19 08:29:07 +0000
@@ -2,17 +2,17 @@
 
 {% if need_backup_device_warning %}
 {% url 'device-addition' as add_device %}
-<div class="message warning" id="missing_backup_device">
-  <p>
+<div id="missing_backup_device" class="p-notification--caution">
+  <p class="p-notification__response">
+    <span class="p-notification__status">{% blocktrans %}Warning:{% endblocktrans %}</span>
     {% blocktrans %}We strongly recommend having two authentication devices,
     a <strong>primary</strong> device and a <strong>secondary</strong>
     or backup device.
-    </br>
+    <br><br>
     Having two authentication devices means you can continue to access your
     account with your secondary device should your primary device be lost or
     stolen.
-    </br>
-    </br>
+    <br><br>
     Click to <a href="{{ add_device }}">add a backup device</a>.{% endblocktrans %}
   </p>
 </div>

=== modified file 'src/webui/templates/device/addition-generic.html'
--- src/webui/templates/device/addition-generic.html	2016-12-14 11:00:33 +0000
+++ src/webui/templates/device/addition-generic.html	2019-08-19 08:29:07 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
@@ -8,81 +8,70 @@
 
 {% block html_extra %}data-qa-id="generic_device_addition"{% endblock %}
 
-{% block extra_header %}
-<style type="text/css">
-p span.key
-{
-  font-family: monospace;
-  font-size: large;
-}
-</style>
-{% endblock %}
-
-
 {% block title %}
   {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
 {% endblock %}
 
 
 {% block text_title %}
-  <h1 class="main">{% trans "Add device" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
-
-<form method="post" action="">
-  {% csrf_token %}
-
-  <p><label>
-    {% trans "Name:" %}<br>
-    {{ form.name }}
-    {% if form.name.errors %}
-      <span class="error" id="name-error">{{ form.name.errors|first }}</span>
-    {% endif %}
-  </label></p>
-
-
-  {% block device_instructions %}
-  <p>
-    {% trans "Shared OATH HOTP/TOTP key:" %}<br>
-    <span class="key">
-      {{ formatted_key }}
-    </span>
-  </p>
-  <p>{% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.
-     You can use both Time and Counter based methods. The system will recognize
-     the one you've used that will be preserved for future authentications.</p>
-  {% endblocktrans %}
-  {% endblock %}
-
-  <br/>
-  <p>{% blocktrans %}
-    Now, verify your device is configured correctly.  Use your device
-    <em>once</em> to generate a one-time password and enter it below.
-    {% endblocktrans %}</p>
-
-  <p><label>
-    {% trans "One-time password:" %}<br>
-    {{ form.otp }}
-    {% if form.otp.errors %}
-      <span class="error" id="otp-error">{{ form.otp.errors|first }}</span>
-    {% else %}
-      {% if error %}
-        <span class="error">{{ error }}</span>
-      {% endif %}
-    {% endif %}
-  </label></p>
-
-  <p>
-    <input type="hidden" name="type" value="{{ type }}">
-    <input type="hidden" name="hex_key" value="{{ hex_key }}">
-    <button class="btn" type="submit" data-qa-id="confirm_add_device">
-      <span><span>{% trans "Add device" %}</span></span>
-    </button>
-    {% trans "or" %}
-    <a data-qa-id="cancel_add_device" href="{{ device_list_path }}">{% trans "cancel" %}</a>
-  </p>
-
-</form>
-
+  <section class="p-strip">
+    <h2>{% trans "Add device" %}</h2>
+    <form method="post" action="">
+      {% csrf_token %}
+      <div class="row">
+        <div class="p-form-validation is-error col-4">
+          <label for="id_name">{% trans "Name" %}</label>
+          {{ form.name }}
+          {% if form.name.errors %}
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ form.name.errors|first }}
+            </p>
+          {% endif %}
+        </div>
+      </div>
+      {% block device_instructions %}
+        <p>
+          {% trans "Shared OATH HOTP/TOTP key:" %}<br>
+          <code>
+            {{ formatted_key }}
+          </code>
+        </p>
+        <p>
+          {% blocktrans %}Enter the shared OATH HOTP/TOTP key into your device.
+           You can use both Time and Counter based methods. The system will recognize
+           the one you've used that will be preserved for future authentications.{% endblocktrans %}
+        </p>
+      {% endblock %}
+
+      <p>{% blocktrans %}
+        Now, verify your device is configured correctly.  Use your device
+        <em>once</em> to generate a one-time password and enter it below.
+      {% endblocktrans %}</p>
+      <div class="row">
+        <div class="p-form-validation is-error col-4">
+          <label for="id_otp">{% trans "One-time password:" %}</label>
+          {{ form.otp }}
+          {% if form.otp.errors %}
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ form.otp.errors|first }}
+            </p>
+          {% else %}
+            {% if error %}
+              <p class="p-form-validation__message">
+                <strong>Error:</strong> {{ error }}
+              </p>
+            {% endif %}
+          {% endif %}
+        </div>
+      </div>
+      <input type="hidden" name="type" value="{{ type }}">
+      <input type="hidden" name="hex_key" value="{{ hex_key }}">
+      <button class="p-button--primary" type="submit" data-qa-id="confirm_add_device">{% trans "Add device" %}</button>
+      <a data-qa-id="cancel_add_device" href="{{ device_list_path }}" class="p-button--neutral">{% trans "cancel" %}</a>
+    </form>
+  </section>
 {% endblock %}

=== modified file 'src/webui/templates/device/addition-google.html'
--- src/webui/templates/device/addition-google.html	2016-12-07 11:32:39 +0000
+++ src/webui/templates/device/addition-google.html	2019-08-19 08:29:07 +0000
@@ -5,49 +5,50 @@
 
 {% load qrcode %}
 {% block device_instructions %}
-<p>{% blocktrans %}To use your smartphone as an authentication device, please
-install "Google Authenticator" on it.  Go to
-<a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>
-in your phone's browser or search for "Google Authenticator" on your phone's app
-store/market.{% endblocktrans %}</p>
-
-<p><strong>
-  {% trans "Note: If you flash your phone, you will lose your auth data!" %}
-  </strong>
-  {% trans "Be sure you have a backup auth device before flashing your phone." %}
-</b>
-
-<p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>
-    <img width="250" height="250" class="qrcode" id="id_qrcode" />
-    <p>{% trans "Or, to set up manually, please enter:" %}</p>
-    <ul>
-        <li>{% trans "Type of key" %}:
-          <select id="id_oath_type", onchange="setQRcodeUri()">
-            {% for mode, description in oath_modes.items %}
-              <option value="{{mode}}">{{description}}</option>
-            {% endfor %}
-          </select>
-
-          {% block extra_js %}
+  <p>{% blocktrans %}To use your smartphone as an authentication device, please
+  install "Google Authenticator" on it.  Go to
+  <a href="http://m.google.com/authenticator">http://m.google.com/authenticator</a>
+  in your phone's browser or search for "Google Authenticator" on your phone's app
+  store/market.{% endblocktrans %}</p>
+
+  <p>
+    <strong>{% trans "Note: If you flash your phone, you will lose your auth data!" %}</strong>
+    {% trans "Be sure you have a backup auth device before flashing your phone." %}
+  </p>
+
+  <p>{% trans 'In the "Google Authenticator" app, add a new token and scan this barcode.' %}</p>
+  <img width="250" height="250" class="qrcode" id="id_qrcode" />
+  <p>{% trans "Or, to set up manually, please enter:" %}</p>
+  <div class="row">
+    <ul class="p-list col-4">
+      <li class="p-list__item">{% trans "Type of key" %}:
+        <select id="id_oath_type", onchange="setQRcodeUri()">
+          {% for mode, description in oath_modes.items %}
+          <option value="{{mode}}">{{description}}</option>
+          {% endfor %}
+        </select>
+
+        {% block extra_js %}
           <script id="id_qrcode_script">
-          function setQRcodeUri() {
-            var QRCODE_URIS = {
-              {% for mode in oath_modes %}
+            function setQRcodeUri() {
+              var QRCODE_URIS = {
+                {% for mode in oath_modes %}
                 {{mode}}: "{% qrcode_url mode ident hex_key %}",
-              {% endfor %}
-            };
-
-            var qrcodeImg = document.getElementById('id_qrcode');
-            var oathSelector = document.getElementById('id_oath_type');
-            var oathType = oathSelector.options[oathSelector.selectedIndex].value;
-            qrcodeImg.src = QRCODE_URIS[oathType];
-          }
-
-          setQRcodeUri();
+                {% endfor %}
+              };
+
+              var qrcodeImg = document.getElementById('id_qrcode');
+              var oathSelector = document.getElementById('id_oath_type');
+              var oathType = oathSelector.options[oathSelector.selectedIndex].value;
+              qrcodeImg.src = QRCODE_URIS[oathType];
+            }
+
+            setQRcodeUri();
           </script>
-          {% endblock %}
-        </li>
-        <li>{% trans "Account" %}: {{ ident }}</li>
-        <li>{% trans "Key" %}: {{ hex_key|b32encode_hexstring }}</li>
+        {% endblock %}
+      </li>
+      <li class="p-list__item">{% trans "Account" %}: <code>{{ ident }}</code></li>
+      <li class="p-list__item">{% trans "Key" %}: <code>{{ hex_key|b32encode_hexstring }}</code></li>
     </ul>
+  </div>
 {% endblock %}

=== modified file 'src/webui/templates/device/addition-yubi.html'
--- src/webui/templates/device/addition-yubi.html	2015-06-29 18:11:04 +0000
+++ src/webui/templates/device/addition-yubi.html	2019-08-19 08:29:07 +0000
@@ -7,17 +7,15 @@
 {% block device_instructions %}
 <p>
   {% trans "Shared OATH/HOTP key:" %}<br>
-  <span class="key" id="formatted_key">
-    {{ formatted_key }}
-  </span>
-</p>
-<p>
-    {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}
-    <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.
-</p>
-<p>
-    {% blocktrans %}To program the YubiKey as an authentication device, on
-    the short press of the YubiKey, execute the following command line:{% endblocktrans %}
+  <code id="formatted_key">{{ formatted_key }}</code>
+</p>
+<p>
+  {% blocktrans %}Programming a YubiKey requires you to{% endblocktrans %}
+  <a href="apt:yubikey-personalization">{% trans "install" %} yubikey-personalization</a>.
+</p>
+<p>
+  {% blocktrans %}To program the YubiKey as an authentication device, on
+  the short press of the YubiKey, execute the following command line:{% endblocktrans %}
 </p>
 <p>
   <code id="short_press">
@@ -25,8 +23,8 @@
   </code>
 </p>
 <p>
-    {% blocktrans %}To program the long press of the YubiKey,
-    execute the following command line:{% endblocktrans %}
+  {% blocktrans %}To program the long press of the YubiKey,
+  execute the following command line:{% endblocktrans %}
 </p>
 <p>
   <code id="long_press">

=== modified file 'src/webui/templates/device/code-list.html'
--- src/webui/templates/device/code-list.html	2016-06-21 15:39:25 +0000
+++ src/webui/templates/device/code-list.html	2019-08-19 08:29:07 +0000
@@ -1,21 +1,19 @@
 {% load i18n %}
-<div id="codes" class="yui3-g-r codelist" data-qa-id="codelist">
-    <ol class="yui3-u-1-5">
+<div id="codes" data-qa-id="codelist">
+    <ol class="p-list">
     {% for code in codes %}
-      <li>{% spaceless %}
+      <li class="p-list__item">{% spaceless %}
         {% if forloop.counter0 < counter|default:0 %}
           <strike>{{ code }}</strike>
         {% else %}
           {{ code }}
         {% endif %}
       {% endspaceless %}</li>
-        {% if forloop.counter|divisibleby:"5" and not forloop.last %}
-        {%endif%}
       {% endfor %}
     </ol>
 </div>
 
 <style media="print">
-header, .menu, footer, p { display: none; }
+header, .p-sidebar, footer, p { display: none; }
 #codes ol { list-style:none; margin:0; padding:0 }
 </style>

=== modified file 'src/webui/templates/device/device-help.html'
--- src/webui/templates/device/device-help.html	2016-08-16 08:26:48 +0000
+++ src/webui/templates/device/device-help.html	2019-08-19 08:29:07 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
@@ -10,43 +10,46 @@
 {% block title %}{% blocktrans %}Authentication device help - Ubuntu One{% endblocktrans %}{% endblock %}
 
 {% block text_title %}
-  <h1 class="main">{% trans "Authentication device help" %}</h1>
+  <h1>{% trans "My account" %}</h1>
 {% endblock %}
 
 {% block content %}
-  <p>
-    {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
-    If your device is lost or stolen or you are having trouble logging in,
-    please review the
-    <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
-    for details on how to get help and the type of information you will need
-    to provide.
-    {% endblocktrans %}
-  </p>
-
-  <h2>{% trans "Device lost or stolen?" %}</h2>
-  <p>
-    {% blocktrans %}We need to remove the device from your account to prevent
-    someone using it to gain access to your account.  Please contact us
-    immediately to resolve this!  You can reach ISD in the #isd channel on
-    IRC, or IS in the #webops channel, or phone the IS emergency helpline.
-    {% endblocktrans %}
-  </p>
-
-  <h2>{% trans "Problems logging in?" %}</h2>
-  <p>
-    {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
-    We can help get a device working again or set you up with some temporary
-    tokens to enable you to continue with your work.  If it's not urgent,
-    please send email to the ISD Support address as described in the
-    <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
-    and someone will get back to you soon.
-    {% endblocktrans %}
-  </p>
-  {% if support_phone %}
-  <p>
-    {% blocktrans %}If it is urgent, please phone the IS emergency helpline at
-    <span id="support-phone">{{ support_phone }}</span>.{% endblocktrans %}
-  </p>
-  {% endif %}
+  <section class="p-strip">
+    <h3>{% trans "Authentication device help" %}</h3>
+    <p>
+      {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
+      If your device is lost or stolen or you are having trouble logging in,
+      please review the
+      <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
+      for details on how to get help and the type of information you will need
+      to provide.
+      {% endblocktrans %}
+    </p>
+
+    <h3>{% trans "Device lost or stolen?" %}</h3>
+    <p>
+      {% blocktrans %}We need to remove the device from your account to prevent
+      someone using it to gain access to your account.  Please contact us
+      immediately to resolve this!  You can reach ISD in the #isd channel on
+      IRC, or IS in the #webops channel, or phone the IS emergency helpline.
+      {% endblocktrans %}
+    </p>
+
+    <h3>{% trans "Problems logging in?" %}</h3>
+    <p>
+      {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
+      We can help get a device working again or set you up with some temporary
+      tokens to enable you to continue with your work.  If it's not urgent,
+      please send email to the ISD Support address as described in the
+      <a href="{{2FFAQ}}#Help">2-Factor Auth FAQ</a>
+      and someone will get back to you soon.
+      {% endblocktrans %}
+    </p>
+    {% if support_phone %}
+    <p>
+      {% blocktrans %}If it is urgent, please phone the IS emergency helpline at
+      <span id="support-phone">{{ support_phone }}</span>.{% endblocktrans %}
+    </p>
+    {% endif %}
+  </section>
 {% endblock %}

=== modified file 'src/webui/templates/device/list.html'
--- src/webui/templates/device/list.html	2016-07-06 02:49:14 +0000
+++ src/webui/templates/device/list.html	2019-08-19 08:29:07 +0000
@@ -1,80 +1,63 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-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="device_list"{% endblock %}
 
-{% block extra_header %}
-<style type="text/css">
-table#device-list td.command
-{
-  width: 0;
-}
-</style>
-{% endblock %}
-
-
 {% block title %}
   {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Authentication devices" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-{% include "common/missing_backup_device_warning.html" %}
-{% include "common/printed_codes_nearly_exhausted_warning.html" %}
-
-<div id="auth-devices">
-  {% if devices %}
-
-  <section class="devices-you-added">
-
-    <h3>{% trans "Authentication devices you've added" %}</h3>
-
-    <table id="device-list" data-qa-id="device_list">
-      <tbody>
-      {% for device in devices %}
-        <tr>
-          <td class="name" data-qa-id="device_name">{{ device.name }}</td>
-          <td class="actions">
-              <a class="btn-sm" href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">
-              <span>{% trans "Rename" %}</span>
-            </a>
-            <a class="btn-sm" href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">
-              <span>{% trans "Delete" %}</span>
-            </a>
-            {% if device.device_type == 'paper' %}
-            <a class="btn-sm" href="{% url 'device-print' device.id %}" data-qa-id="print_device">
-              <span>{% trans "View Codes" %}</span>
-            </a>
-            {% endif %}
-          </td>
-        </tr>
-      {% endfor %}
-      </tbody>
-    </table>
-  </section>
-
-  {% else %}
-    <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
-  {% endif %}
-
-  <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">
-    {% trans "Add a new authentication device" %}
-  </a></p>
-
-  <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
-
-  <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
-    <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
-  {% endblocktrans %}</p>
-</div>
-
+<section class="p-strip">
+  {% include "vanilla/common/missing_backup_device_warning.html" %}
+  {% include "vanilla/common/printed_codes_nearly_exhausted_warning.html" %}
+  <div id="auth-devices">
+    <h2>{% trans "Authentication devices" %}</h2>
+    {% if devices %}
+    <h3 class="p-heading--four">{% trans "Authentication devices you've added" %}</h3>
+    <div class="p-strip is-shallow">
+      <table id="device-list" data-qa-id="device_list" class="p-table--bordered">
+        <tbody>
+        {% for device in devices %}
+          <tr>
+            <td class="name" data-qa-id="device_name">{{ device.name }}</td>
+            <td class="u-align-text--right">
+              <ul class="p-inline-list u-no-margin--bottom">
+                <li class="p-inline-list__item"><a href="{% url 'device-rename' device.id %}" data-qa-id="rename_device">{% trans "Rename" %}</a></li>
+                <li class="p-inline-list__item"><a href="{% url 'device-removal' device.id %}" data-qa-id="delete_device">{% trans "Delete" %}</a></li>
+                {% if device.device_type == 'paper' %}
+                <li class="p-inline-list__item"><a href="{% url 'device-print' device.id %}" data-qa-id="print_device">{% trans "View Codes" %}</a></li>
+                {% endif %}
+              </ul>
+            </td>
+          </tr>
+        {% endfor %}
+        </tbody>
+      </table>
+    </div>
+
+    {% else %}
+      <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
+    {% endif %}
+
+    <p><a data-qa-id="add_new_device" href="{{ device_addition_path }}">
+      {% trans "Add a new authentication device" %}
+    </a></p>
+
+    <p><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></p>
+
+    <p>{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
+      <a href="{{ 2FFAQ }}">2-Factor Auth FAQ</a>
+    {% endblocktrans %}</p>
+  </div>
+</section>
 {% endblock %}

=== modified file 'src/webui/templates/device/print-codes.html'
--- src/webui/templates/device/print-codes.html	2017-04-19 15:36:34 +0000
+++ src/webui/templates/device/print-codes.html	2019-08-19 08:29:07 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n url_with_token %}
 
 {% comment %}
@@ -13,32 +13,19 @@
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Printable backup codes" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<p>{% trans "Print this list of backup codes and keep them safe." %}</p>
-
-<p class="print-new-codes">
-
-</p>
-
-
-{% include 'device/code-list.html' %}
-
-<p>
-  <button class="btn cta" id="printbtn" onclick="window.print()" data-qa-id="print_codes">
-    <span>{% trans "Print Codes" %}</span>
-  </button>
+  <h2>{% trans "Printable backup codes" %}</h2>
+  <p>{% trans "Print this list of backup codes and keep them safe." %}</p>
+  {% include 'device/code-list.html' %}
+  <button class="p-button--positive" id="printbtn" onclick="window.print()" data-qa-id="print_codes">{% trans "Print Codes" %}</button>
   {% if token and not needs_renewal %}
-  <a class="cta secondary" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>
+    <a class="p-button--neutral" href="{% url_with_token 'server-decide' %}" data-qa-id="continue_to_rp">{% trans "Continue" %}</a>
   {% else %}
-  <a class="cta secondary" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>
+    <a class="p-button--neutral" href="{% url 'device-list' %}" data-qa-id="cancel_print_codes">{% trans "Go back" %}</a>
   {% endif %}
   {% if generation_enabled %}
-  <a class="btn cta secondary print-new-codes" href="{% url_with_token 'device-generate' device_id=device_id %}" data-qa-id="generate_codes">
-    <span>{% trans "Generate new codes" %}</span>
-  </a>
+    <a class="p-button--base" href="{% url_with_token 'device-generate' device_id=device_id %}" data-qa-id="generate_codes">{% trans "Generate new codes" %}</a>
   {% endif %}
-</p>
 {% endblock %}

=== modified file 'src/webui/templates/device/removal.html'
--- src/webui/templates/device/removal.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/device/removal.html	2019-08-19 08:29:07 +0000
@@ -1,8 +1,8 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
 Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
@@ -13,23 +13,20 @@
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Delete device?" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<p>{% blocktrans %}Are you sure that you want to delete the following
-authentication device?{% endblocktrans %}</p>
-
-<p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>
-
-<form method="post" action="">
-  {% csrf_token %}
-  <p>
-    <button class="btn cta" type="submit" data-qa-id="delete_this_device">
-      <span>{% trans "Delete this device" %}</span>
-    </button>
-    <a class="cta secondary" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
-  </p>
-</form>
-
+  <section class="p-strip">
+    <h2>{% trans "Delete device?" %}</h2>
+    <p>{% blocktrans %}Are you sure that you want to delete the following
+    authentication device?{% endblocktrans %}</p>
+
+    <p class="device-name" data-qa-id="device_removal_device_name">{{ name }}</p>
+
+    <form method="post" action="">
+      {% csrf_token %}
+      <button class="p-button--negative" type="submit" data-qa-id="delete_this_device">{% trans "Delete this device" %}</button>
+      <a class="p-button--neutral" data-qa-id="cancel_deleting_this_device" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
+    </form>
+  </section>
 {% endblock %}

=== modified file 'src/webui/templates/device/rename.html'
--- src/webui/templates/device/rename.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/device/rename.html	2019-08-19 08:29:07 +0000
@@ -1,8 +1,8 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
 Affero General Public License version 3 (see the file LICENSE).
 {% endcomment %}
 
@@ -13,28 +13,26 @@
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Rename device" %}</h1>{% endblock %}
+{% block text_title %}<h1 class="u1-h-main">{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<form method="post" action="">
-  {% csrf_token %}
-
-  <p><label for="id_name">
-      {% trans "Name:" %}
-      {{ form.name }}
-      {% if form.name.errors %}
-        <span class="error" id="name-error">{{ form.name.errors|first }}</span>
-      {% endif %}
-  </label></p>
-
-  <p>
-    <button class="btn cta" type="submit" data-qa-id="rename_this_device">
-      <span>{% trans "Rename" %}</span>
-    </button>
-    <a class="cta secondary" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>
-  </p>
-
-</form>
-
+  <section class="p-strip">
+    <h2>{% trans "Rename device" %}</h2>
+    <form method="post" action="">
+      {% csrf_token %}
+      <div class="row">
+        <div class="p-form-validation is-error col-4">
+          <label for="id_name">Name</label>
+          {{ form.name }}
+          {% if form.name.errors %}
+            <p class="p-form-validation__message">
+              <strong>Error:</strong> {{ form.name.errors|first }}
+            </p>
+          {% endif %}
+        </div>
+      </div>
+      <button class="p-button--positive" type="submit" data-qa-id="rename_this_device">{% trans "Rename" %}</button>
+      <a class="p-button--neutral" href="{{ device_list_path }}" data-qa-id="cancel_renaming_this_device">{% trans "Cancel" %}</a>
+    </form>
+  </section>
 {% endblock %}

=== modified file 'src/webui/templates/device/types.html'
--- src/webui/templates/device/types.html	2016-12-06 16:53:22 +0000
+++ src/webui/templates/device/types.html	2019-08-19 08:29:07 +0000
@@ -1,75 +1,86 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 {% load gargoyle_tags %}
 
 {% comment %}
-Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
+Copyright 2012-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="device_addition"{% endblock %}
 
 {% block title %}
-  {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
+  {% trans "Add a new authentication device" %}
 {% endblock %}
 
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Add a new authentication device" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "My account" %}</h1>{% endblock %}
 
 {% block content %}
-
-<form method="post" action="">
-  {% csrf_token %}
-
-  <dl class="device-types">
-
-    <dt><label>
-      <input type="radio" name="type" value="google" id="type_google" checked="checked"> {% trans "Smartphone or Tablet" %}
-    </label></dt>
-    <dd>
-    <p><label for="type_google">{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app;
-          or Windows phone with the Auth7 app{% endblocktrans %}</label></p>
-    </dd>
-
-    <dt><label>
-      <input type="radio" name="type" value="yubi" id="type_yubi"> {% trans "YubiKey" %}
-      </label></dt>
-    <dd>
-      <p><label for="type_yubi">{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</label></p>
-    </dd>
-
-    <dt><label>
-      <input type="radio" name="type" value="generic" id="type_generic"> {% trans "Generic HOTP/TOTP device" %}
-    </label></dt>
-    <dd>
-      <p><label for="type_generic">{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</label></p>
-    </dd>
-
-    <dt><label>
-      <input type="radio" name="type" value="paper" id="type_paper"> {% trans "Printable Backup Codes" %}
-    </label></dt>
-    <dd>
-      <p><label for="type_paper">{% blocktrans %}A list of backup codes to
-      print.{% endblocktrans %}</label></p>
-    </dd>
-
-  </dl>
-
-  <p>
-    <button class="btn cta" type="submit" data-qa-id="add_device_from_type">
-      <span>{% trans "Add device" %}</span>
-    </button>
-    <a class="cta secondary" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
-  </p>
-  <p>
-    {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
-    The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
-    has details on compatible devices.
-    {% endblocktrans %}
-  </p>
-
-
-</form>
-
+  <section class="p-strip">
+    <h2>{% trans "Add a new authentication device" %}</h2>
+    <form method="post" action="">
+      {% csrf_token %}
+
+      <ul class="p-list">
+        <li class="p-list__item">
+          <div class="row">
+            <div class="col-3">
+              <input type="radio" name="type" value="google" id="type_google" checked="checked">
+              <label for="type_google">{% trans "Smartphone or Tablet" %}</label>
+            </div>
+            <div class="col-5">
+              <p>{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app; or Windows phone with the Auth7 app{% endblocktrans %}</p>
+            </div>
+          </div>
+        </li>
+        <li class="p-list__item">
+          <div class="row">
+            <div class="col-3 col-medium-3">
+              <input type="radio" name="type" value="yubi" id="type_yubi">
+              <label for="type_yubi">{% trans "YubiKey" %}</label>
+            </div>
+            <div class="col-5 col-medium-3">
+              <p>{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</p>
+            </div>
+          </div>
+        </li>
+        <li class="p-list__item">
+          <div class="row">
+            <div class="col-3 col-medium-3">
+              <input type="radio" name="type" value="generic" id="type_generic">
+              <label for="type_generic">{% trans "Generic HOTP/TOTP device" %}</label>
+            </div>
+            <div class="col-5 col-medium-3">
+              <p>{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</p>
+            </div>
+          </div>
+        </li>
+        <li class="p-list__item">
+          <div class="row">
+            <div class="col-3 col-medium-3">
+              <input type="radio" name="type" value="paper" id="type_paper">
+              <label for="type_paper">{% trans "Printable Backup Codes" %}</label>
+            </div>
+            <div class="col-5 col-medium-3">
+              <p>{% blocktrans %}A list of backup codes to
+              print.{% endblocktrans %}</p>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <button class="p-button--positive" type="submit" data-qa-id="add_device_from_type">{% trans "Add device" %}</button>
+      <a class="p-button--neutral" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
+      <p>
+        {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
+        The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
+        has details on compatible devices.
+        {% endblocktrans %}
+      </p>
+
+
+    </form>
+  </section>
 {% endblock %}

=== modified file 'src/webui/templates/vanilla/_footer.html'
--- src/webui/templates/vanilla/_footer.html	2019-08-19 08:29:07 +0000
+++ src/webui/templates/vanilla/_footer.html	2019-08-19 08:29:07 +0000
@@ -5,8 +5,8 @@
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
-<footer class="p-strip u-no-padding--top" data-qa-id="ubuntuone_footer">
-  <hr>
+<hr>
+<footer class="p-strip is-shallow" data-qa-id="ubuntuone_footer">
   <div class="row">
     <p>{% trans "Ubuntu One. One place to log in to everything on Ubuntu." %}</p>
     {% spaceless %}

=== modified file 'src/webui/templates/vanilla/base.html'
--- src/webui/templates/vanilla/base.html	2019-08-19 08:29:07 +0000
+++ src/webui/templates/vanilla/base.html	2019-08-19 08:29:07 +0000
@@ -50,34 +50,6 @@
           </div>
         </section>
 
-        {% block readonly %}
-        {% if readonly %}
-        <div class="p-notification--caution">
-          <p class="p-notification__response">
-            {% blocktrans %}We are currently in read-only mode. That means that at the moment you can't create new accounts, update your personal information, or request password reminders.{% endblocktrans %}
-          </p>
-        </div>
-        {% endif %}
-        {% endblock %}
-
-        {% block messages %}
-        {% if messages %}
-        <section class="p-strip is-shallow">
-          {% for message in messages %}
-          <div class="row">
-            <div class="col-12">
-              <div class="p-notification">
-                <p class="p-notification__response">
-                  {{ message }}
-                </p>
-              </div>
-            </div>
-          </div>
-          {% endfor %}
-        </section>
-        {% endif %}
-        {% endblock %}
-
         <div id="{% block content_id %}box{% endblock %}" class="row">
           {% block menu %}
             {% if user.is_authenticated %}
@@ -87,6 +59,32 @@
             {% endif %}
           {% endblock %}
           <div class="{% block content_class %}col-8{% endblock %}">
+            {% block readonly %}
+              {% if readonly %}
+              <div class="p-notification--caution">
+                <p class="p-notification__response">
+                  {% blocktrans %}We are currently in read-only mode. That means that at the moment you can't create new accounts, update your personal information, or request password reminders.{% endblocktrans %}
+                </p>
+              </div>
+              {% endif %}
+            {% endblock %}
+            {% block messages %}
+              {% if messages %}
+              <section class="p-strip is-shallow">
+                {% for message in messages %}
+                <div class="row">
+                  <div class="col-12">
+                    <div class="p-notification">
+                      <p class="p-notification__response">
+                        {{ message }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                {% endfor %}
+              </section>
+              {% endif %}
+            {% endblock %}
             {% block content %}{% endblock %}
           </div>
         </div>

=== modified file 'src/webui/templates/vanilla/widgets/personal-menu.html'
--- src/webui/templates/vanilla/widgets/personal-menu.html	2019-08-19 08:29:07 +0000
+++ src/webui/templates/vanilla/widgets/personal-menu.html	2019-08-19 08:29:07 +0000
@@ -9,7 +9,7 @@
 {% load menu_item %}
 {% load url_with_token %}
 <div class="p-strip">
-  <ul class="p-list">
+  <ul class="p-list u-no-margin--bottom">
   {% url_with_token 'account-index' as account_url %}
 
   {% if current_section == 'account' %}