Tidy layout of team page

The team page was a bit of a mess:

- invited and active tables didn’t line up
- lots of things were wrapping onto two lines
- the empty fields for when a user didn’t have permissions looked broken

This commit splits each row of the table (not actually a table any more)
onto two lines. First line has the user’s info, second has their
permissions and any associated actions.

app/assets/stylesheets/components/tick-cross.scss

@@ -0,0 +1,46 @@
+%tick-cross {
+  @include core-16;
+  display: inline-block;
+  background-size: 19px 19px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  padding: 1px 0 0 25px;
+}
+
+.tick-cross {
+
+  &-tick {
+    @extend %tick-cross;
+    background-image: file-url('tick.png');
+  }
+
+  &-cross {
+    @extend %tick-cross;
+    background-image: file-url('cross-grey.png');
+    color: $secondary-text-colour;
+  }
+
+  &-list {
+
+    @extend %grid-row;
+    margin-top: 5px;
+
+    &-permissions {
+
+      @include grid-column(3/4);
+
+      li {
+        display: inline-block;
+        margin-right: 0.5em;
+      }
+
+    }
+
+    &-edit-link {
+      @include grid-column(1/4);
+      text-align: right;
+    }
+
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -54,11 +54,13 @@ $path: '/static/images/';
 @import 'components/message';
 @import 'components/phone';
 @import 'components/research-mode';
+@import 'components/tick-cross';
 
 @import 'views/job';
 @import 'views/edit-template';
 @import 'views/documenation';
 @import 'views/dashboard';
+@import 'views/users';
 
 // TODO: break this up
 @import 'app';

app/assets/stylesheets/views/users.scss

@@ -0,0 +1,16 @@
+.user-list {
+
+  @include core-16;
+
+  &-item {
+
+    padding: $gutter-half 0;
+    border-top: 1px solid $border-colour;
+
+    &:last-child {
+      border-bottom: 1px solid $border-colour;
+    }
+
+  }
+
+}