Merge ~ya-bo-ng/maas:FUJ-improvements into maas:master

[Anthony Dillon]

LP: #1751896 - Improvements to the FUJ

## Done
Reduced the size of the headings. Added dividers between the content and the titles. Made the success text into a list and the submit button is now full width.

## QA
- Set up a new user and login
- See that the design matches the original design: https://github.com/CanonicalLtd/MAAS-design/blob/master/First%20Use%20Journey/Flat_Visuals/001-Welcome-to-MAAS.png

Fixes https://bugs.launchpad.net/maas/+bug/1751896

3a5c972... by Anthony Dillon on 2018-02-28

More improvements to the FUJ

[Andres Rodriguez (andreserl)]

lgtm!

review: Approve

diff --git a/src/maasserver/static/partials/boot-images.html b/src/maasserver/static/partials/boot-images.html
index 9fe1ad3..22603f9 100644
--- a/src/maasserver/static/partials/boot-images.html
+++ b/src/maasserver/static/partials/boot-images.html
@@ -1,15 +1,16 @@
 <form class="form">
     <div data-ng-if="!loading" data-ng-class="{'p-strip is-bordered': design === 'page', 'p-card--highlighted col-12': design === 'card'}">
         <div class="row">
-            <div class="col-8">
-                <h2 class="u-vertically-center"><span data-ng-if="design === 'card'"><i class="{$ getTitleIcon() $}"></i>&nbsp;</span>Ubuntu</h2>
+            <div class="col-12">
+                <h2 class="p-heading--four"><span data-ng-if="design === 'card'"><i class="{$ getTitleIcon() $}"></i>&nbsp;</span>Ubuntu</h2>
+                <hr />
                 <p data-ng-if="isSuperUser() && !source.tooMany">
                     Select images and architecture to be imported and kept in sync daily. Images will be available for deploying to machines managed by MAAS.
                 </p>
             </div>
         </div>
         <div class="row" data-ng-if="isSuperUser() && !source.tooMany">
-            <h3>Choose source</h3>
+            <h3 class="p-heading--five">Choose source</h3>
         </div>
         <div class="row">
             <div class="col-2">
@@ -23,7 +24,7 @@
         </div>
         <div class="row" data-ng-if="isSuperUser() && !source.tooMany && showMirrorPath()">
             <div class="col-8">
-                <h3>Mirror URL</h3>
+                <h3 class="p-heading--five">Mirror URL</h3>
                 <p>Add the URL you want to use to select your images from.</p>
             </div>
         </div>
diff --git a/src/maasserver/static/partials/intro-user.html b/src/maasserver/static/partials/intro-user.html
index 6110b93..a4050b4 100644
--- a/src/maasserver/static/partials/intro-user.html
+++ b/src/maasserver/static/partials/intro-user.html
@@ -1,12 +1,13 @@
 <div class="p-strip" data-ng-if="!loading">
     <div class="row">
         <div class="p-card--highlighted col-12">
-            <h2 class="p-card__title">
+            <h2 class="p-card__title p-heading--four">
                 <i data-ng-class="{'p-icon--success': canContinue(), 'p-icon--success-muted': !canContinue()}"></i>
                 SSH keys for {$ user.username $}
             </h2>
+            <hr />
             <div class="p-card__content">
-                <p class="u-margin--top">Add multiple keys from Launchpad and Github or enter them manually.</p>
+                <p>Add multiple keys from Launchpad and Github or enter them manually.</p>
                 <h3>Keys</h3>
                 <maas-ssh-keys></maas-ssh-keys>
             </div>
@@ -14,18 +15,21 @@
     </div>
     <div class="row">
         <div class="p-card--highlighted col-12" data-ng-if="isSuperUser()" data-ng-class="{'u-muted': !canContinue()}">
-            <h2 class="p-card__title">
+            <h2 class="p-card__title p-heading--four">
                 MAAS has been successfully set up
             </h2>
+            <hr />
             <div class="p-card__content">
-                <p class="u-margin--top"><i class="p-icon--success"></i>Once DHCP is enabled, set your machines to PXE boot and they will be automatically enlisted in the Nodes tab.</p>
-                <p class="u-margin--top"><i class="p-icon--success"></i>Discovered MAC/IP pairs in your network will be listed on your dashboard and can be added to MAAS.</p>
-                <p class="u-margin--top u-margin--bottom"><i class="p-icon--success"></i>The fabrics, VLANs and subnets in your network will be automatically added to MAAS in Networks.</p>
+                <ul class="p-list">
+                    <li class="p-list__item"><i class="p-icon--success"></i>Once DHCP is enabled, set your machines to PXE boot and they will be automatically enlisted in the Nodes tab.</p>
+                    <li class="p-list__item"><i class="p-icon--success"></i>Discovered MAC/IP pairs in your network will be listed on your dashboard and can be added to MAAS.</p>
+                    <li class="p-list__item"><i class="p-icon--success"></i>The fabrics, VLANs and subnets in your network will be automatically added to MAAS in Networks.</p>
+                </ul>
             </div>
         </div>
     </div>
     <div class="row">
-        <button class="p-button--positive"
+        <button class="p-button--positive col-12"
             data-ng-disabled="!canContinue()"
             data-ng-click="clickContinue()">Go to dashboard</button>
     </div>
diff --git a/src/maasserver/static/partials/intro.html b/src/maasserver/static/partials/intro.html
index 0729252..4d6022f 100644
--- a/src/maasserver/static/partials/intro.html
+++ b/src/maasserver/static/partials/intro.html
@@ -2,10 +2,11 @@
     <div class="row">
         <div class="col-12">
             <div class="p-card--highlighted">
-                <h2 class="p-card__title">
+                <h2 class="p-card__title p-heading--four">
                     <i data-ng-class="{ 'p-icon--success': !welcomeInError(), 'p-icon--error': welcomeInError() }"></i>
                     Welcome to MAAS
                 </h2>
+                <hr />
                 <div class="p-card__content">
                     <div class="u-margin--top">
                         <maas-obj-form obj="maasName" manager="configManager" class="p-form p-form--stacked">
@@ -21,9 +22,10 @@
     <div class="row">
         <div class="col-12">
             <div class="p-card--highlighted">
-                <h2 class="p-card__title u-vertically-center">
+                <h2 class="p-card__title p-heading--four">
                     <i data-ng-class="{ 'p-icon--success': !networkInError(), 'p-icon--error': networkInError() }"></i>&nbsp;Connectivity
                 </h2>
+                <hr />
                 <ul class="p-card__content p-list">
                     <li>
                         <maas-obj-form obj="upstreamDNS" manager="configManager" class="p-form p-form--stacked">
@@ -58,11 +60,13 @@
         </div>
     </div>
     <div class="row">
-        <maas-boot-images design="'card'"></maas-boot-images>
+        <div class="col-12">
+            <maas-boot-images design="'card'"></maas-boot-images>
+        </div>
     </div>
     <div class="row">
         <div class="col-12">
-            <button class="p-button--positive" data-ng-disabled="!canContinue()" data-ng-click="clickContinue()">Continue</button>
+            <button class="col-12 p-button--positive" data-ng-disabled="!canContinue()" data-ng-click="clickContinue()">Continue</button>
         </div>
     </div>
 </section>