Add pages to invite, edit, and delete users

This takes the original prototype version of this page, and, using the same
fake data (ie nothing is wired up):
- adds an invite users page
- adds an edit (and delete) user page

Both these pages allow the user to set another user’s permissions.

This commit adds images for the ticks and crosses, so we have control over their
appearance.

app/assets/stylesheets/components/banner.scss

@@ -16,19 +16,13 @@
 
 .banner-with-tick,
 .banner-default-with-tick {
-
   @extend %banner;
   padding: $gutter-half ($gutter + $gutter-half);
-
-  &:before {
-    @include core-24;
-    content: '✔';
-    position: absolute;
-    top: $gutter-half;
-    left: $gutter-half;
-    margin-top: -2px;
-  }
-
+  background-image: file-url('tick-white.png');
+  background-size: 19px;
+  background-repeat: no-repeat;
+  background-position: $gutter-half $gutter-half;
+  font-weight: bold;
 }
 
 .banner-dangerous {

app/assets/stylesheets/components/table.scss

@@ -7,6 +7,12 @@
   margin: 40px 0 5px 0;
 }
 
+.table-field-headings {
+  th {
+    padding: 0 0 5px 0;
+  }
+}
+
 %table-field,
 .table-field {
 
@@ -36,6 +42,23 @@
 
     }
 
+    &-yes,
+    &-no {
+      display: block;
+      text-indent: -999em;
+      background-size: 19px 19px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+    }
+
+    &-yes {
+      background-image: file-url('tick.png');
+    }
+
+    &-no {
+      background-image: file-url('cross.png');
+    }
+
     &-missing {
       color: $error-colour;
       font-weight: bold;
@@ -77,4 +100,5 @@
   margin-top: -20px;
   border-bottom: 1px solid $border-colour;
   padding-bottom: 10px;
+  text-align: center;
 }

app/assets/stylesheets/components/yes-no.scss

@@ -0,0 +1,36 @@
+.yes-no-wrapper {
+  border-bottom: 1px solid $border-colour;
+  margin: 0 0 $gutter 0;
+}
+
+.yes-no {
+
+  border-top: 1px solid $border-colour;
+  padding: 10px 0;
+
+  &-label {
+    padding-top: 19px;
+    float: left;
+  }
+
+  &-fields {
+
+    text-align: right;
+
+    .block-label {
+
+      @include media(tablet) {
+
+        margin-bottom: 0;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+      }
+
+    }
+
+  }
+
+}