Improve project members page UI

app/assets/stylesheets/pages/groups.scss

-.new-group-member-holder {
-  margin-top: 10px;
-  padding-top: 20px;
-}
-
 .member-search-form {
   float: left;
 }

app/views/groups/group_members/index.html.haml

-- @blank_container = true
 - page_title "Members"
 - header_title group_title(@group, "Members", group_group_members_path(@group))
-
-
-
+- @blank_container = true
 
 .group-members-page
   - if current_user && current_user.can?(:admin_group_member, @group)
@@ -14,8 +11,6 @@
         - if should_user_see_group_roles?(current_user, @group)
           %p.light
             Members of group have access to all group projects.
-            Read more about permissions
-            %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
         .new-group-member-holder
           = render "new_group_member"
 

app/views/projects/project_members/_group_members.html.haml

@@ -4,11 +4,11 @@
     group members
     %small
       (#{members.count})
-    .panel-head-actions
-      = link_to group_group_members_path(@group), class: 'btn btn-sm' do
-        %i.fa.fa-pencil-square-o
+    .pull-right
+      = link_to group_group_members_path(@group), class: 'btn' do
+        = icon('pencil-square-o')
         Edit group members
-  %ul.well-list
+  %ul.content-list
     - members.each do |member|
       = render 'groups/group_members/group_member', member: member, show_controls: false
     - if members.count > 20

app/views/projects/project_members/_project_member.html.haml

@@ -4,7 +4,7 @@
 %li{class: "#{dom_class(member)} js-toggle-container project_member_row access-#{member.human_access.downcase}", id: dom_id(member)}
   %span.list-item-name
     - if member.user
-      = image_tag avatar_icon(user, 16), class: "avatar s16", alt: ''
+      = image_tag avatar_icon(user, 24), class: "avatar s24", alt: ''
       %strong
         = link_to user.name, user_path(user)
       %span.cgray= user.username
@@ -14,7 +14,7 @@
         %label.label.label-danger
           %strong Blocked
     - else
-      = image_tag avatar_icon(member.invite_email, 16), class: "avatar s16", alt: ''
+      = image_tag avatar_icon(member.invite_email, 24), class: "avatar s24", alt: ''
       %strong
         = member.invite_email
       %span.cgray

app/views/projects/project_members/_team.html.haml

-.panel.panel-default.prepend-top-20
+.panel.panel-default
   .panel-heading
     %strong #{@project.name}
     project members
     %small
       (#{members.count})
-  %ul.well-list
+    .pull-right
+      = form_tag namespace_project_project_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
+        .form-group
+          = search_field_tag :search, params[:search], { placeholder: 'Find existing member by name', class: 'form-control', spellcheck: false }
+        = button_tag class: 'btn' do
+          = icon("search")
+  %ul.content-list
     - members.each do |project_member|
       = render 'project_member', member: project_member
+
+:javascript
+  $('form.member-search-form').on('submit', function (event) {
+    event.preventDefault();
+    Turbolinks.visit(this.action + '?' + $(this).serialize());
+  });

app/views/projects/project_members/index.html.haml

 - page_title "Members"
 = render "header_title"
+- @blank_container = true
 
-.gray-content-block.top-block
-  .clearfix.js-toggle-container
-    = form_tag namespace_project_project_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
-      .form-group
-        = search_field_tag :search, params[:search], { placeholder: 'Find existing member by name', class: 'form-control search-text-input', spellcheck: false }
-      = button_tag 'Search', class: 'btn'
-
-    - if can?(current_user, :admin_project_member, @project)
-      %span.pull-right
-        = button_tag class: 'btn btn-new btn-grouped js-toggle-button', type: 'button' do
-          Add members
-          %i.fa.fa-chevron-down
-        = link_to import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-grouped", title: "Import members from another project" do
-          Import members
-
-      .js-toggle-content.hide.new-group-member-holder
+.project-members-page
+  - if can?(current_user, :admin_project_member, @project)
+    .panel.panel-default
+      .panel-heading
+        Add new user to project
+        .pull-right
+          = link_to import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-grouped", title: "Import members from another project" do
+            Import members
+      .panel-body
+        %p.light
+          Users with access to this project are listed below.
         = render "new_project_member"
 
-%p.prepend-top-default.light
-  Users with access to this project are listed below.
-  Read more about project permissions
-  %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
-
-= render "team", members: @project_members
-
-- if @group
-  = render "group_members", members: @group_members
+  = render "team", members: @project_members
 
-:javascript
-  $('form.member-search-form').on('submit', function (event) {
-    event.preventDefault();
-    Turbolinks.visit(this.action + '?' + $(this).serialize());
-  });
+  - if @group
+    = render "group_members", members: @group_members