Change manage team layout to fit extra option

We’ve moved from three to four permissions. Four permissions don’t fit
in the exiting horizontal layout.

This commit makes the permissions stack vertically instead.

This approach has some downsides:
- makes the permissions less easy to scan vertically
- makes them take up a lot more space (and at lives services, most of
  them have somewhere around 15 team members)

But I think for now it’s better than any horizontal alternative that I
tried.

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

@@ -4,8 +4,8 @@
   display: inline-block;
   background-size: 19px 19px;
   background-repeat: no-repeat;
-  background-position: 0 0;
-  padding: 1px 0 0 25px;
+  background-position: 0 6px;
+  padding: 6px 0 5px 25px;
 
   @include ie-lte(8) {
     background-position: 0 3px;
@@ -31,6 +31,7 @@
     @extend %tick-cross;
     color: $secondary-text-colour;
     background-image: file-url('cross-grey.png');
+    box-shadow: inset 20px 0 0 0 rgba(255, 255, 255, 0.6);
 
     @include ie-lte(8) {
       background-image: file-url('cross-grey-16px.png');
@@ -42,21 +43,24 @@
 
     @extend %grid-row;
     margin-top: 5px;
+    position: relative;
 
     &-permissions {
 
       @include grid-column(3/4);
 
       li {
-        display: inline-block;
+        display: block;
         margin-right: 0.5em;
       }
 
     }
 
     &-edit-link {
-      @include grid-column(1/4);
       text-align: right;
+      position: absolute;
+      top: -1.6em;
+      right: -135px;
     }
 
   }

app/assets/stylesheets/views/users.scss

@@ -5,7 +5,7 @@
 
   &-item {
 
-    padding: $gutter-half 0;
+    padding: $gutter-half 150px $gutter-half 0;
     border-top: 1px solid $border-colour;
 
     &:last-child {

app/templates/views/manage-users.html

@@ -37,7 +37,7 @@
     {% for user in users %}
       <div class="user-list-item">
         <h3>
-          {{ user.name }}&ensp;<span class="hint">
+          <span class="heading-small">{{ user.name }}</span>&ensp;<span class="hint">
             {%- if user.email_address == current_user.email_address -%}
               (you)
             {% else %}
@@ -84,7 +84,7 @@
       {% for user in invited_users %}
         <div class="user-list-item">
           <h3>
-            {{ user.email_address }}
+            <span style="font-weight: bold">{{ user.email_address }}</span>
           </h3>
           <ul class="tick-cross-list">
             <div class="tick-cross-list-permissions">