Admin roles design and UX

app/partials/admin-roles.jade

@@ -24,9 +24,8 @@ block content
                     a.save.icon.icon-floppy(href="", title="Save")
 
                 p.total
-                    | {{ role.name }}
+                    span.role-name(title="{{ role.members_count }} members with this role") {{ role.name }}
                     a.edit-value.icon.icon-edit
-                    span ({{ role.members_count }} members with this role)
 
             div.any-computable-role(ng-hide="anyComputableRole") Be careful, no role in your project will be able to estimate the point value for user stories
 

app/styles/layout/base.scss

@@ -129,7 +129,17 @@ body {
     margin-bottom: 1rem;
     .action-buttons {
         @include flex-shrink(0);
-        padding-left: 1rem;
+    }
+    .button {
+        color: $white;
+        float: right;
+        margin-left: 10px;
+        &:first-child {
+            margin-left: 0;
+        }
+        &:hover {
+            color: $white;
+        }
     }
     h1 {
         margin-bottom: 0;

app/styles/layout/wiki.scss

@@ -1,13 +1,3 @@
 .wiki-content {
     margin-bottom: 2rem;
 }
-.action-buttons {
-    .button {
-        color: $white;
-        float: right;
-        margin-left: 10px;
-        &:hover {
-            color: $white;
-        }
-    }
-}

app/styles/modules/admin/admin-roles.scss

@@ -1,36 +1,56 @@
 .admin-roles {
+    .total {
+        background-color: $whitish;
+        padding: 1rem;
+        &:hover {
+            .edit-value {
+                @include transition(opacity .3s linear);
+                opacity: 1;
+            }
+        }
+    }
+    .role-name {
+        @extend %xlarge;
+        @extend %title;
+        color: $grayer;
+    }
     .edit-value {
+        @include transition(opacity .3s linear);
+        @extend %medium;
+        color: $gray-light;
         cursor: pointer;
         margin-left: .5rem;
+        opacity: 0;
     }
     .edit-role {
         @include table-flex(stretch, left, center, row, wrap);
+<<<<<<< HEAD
 <<<<<<< HEAD
         margin-bottom: 1rem;
         input {
 =======
+=======
+>>>>>>> Admin roles design and UX
         background-color: $whitish;
         margin-bottom: 1rem;
         padding: .5rem;
         input {
             background-color: $white;
+<<<<<<< HEAD
 >>>>>>> fix #1397 - rename role
             width: auto;
+=======
+            width: 50%;
+>>>>>>> Admin roles design and UX
         }
         .icon-floppy {
+            @include transition(color.3s linear);
+            color: $gray-light;
             margin-left: .5rem;
-        }
+            &:hover {
-    }
+                @include transition(color.3s linear);
-    .total {
+                color: $green-taiga;
-        @extend %large;
+            }
-        @extend %title;
-        background-color: $whitish;
-        color: $grayer;
-        padding: 1rem;
-        span {
-            @extend %medium;
-            @extend %text;
-            padding-left: .5rem;
         }
     }
     .any-computable-role {