Merge branch '4424-improve-ui-admin-area' into 'master'

Address UI feedback for admin area

## What does this MR do?
Addresses @dzaporozhets's feedback for !4424

## Why was this MR needed?
!4424 was merged with some design issues which affected other areas of the app and broke consistency. This MR fixes that.

## What are the relevant issue numbers?
#3946 

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !5190

app/assets/stylesheets/pages/admin.scss

@@ -88,13 +88,7 @@
 
   .user-name {
     display: inline-block;
-    font-weight: bold;
-  }
-
-  .controls {
-    > .btn, > .dropdown {
-      margin-left: 5px;
-    }
+    font-weight: 600;
   }
 
   .dropdown {

app/assets/stylesheets/pages/groups.scss

@@ -38,33 +38,6 @@
       margin-right: 15px;
     }
   }
-
-  &.group-admin {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-
-    .group-avatar, .group-details, .group-controls {
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-    }
-
-    .group-details {
-      flex: 1 1 auto;
-      flex-direction: column;
-      min-width: 0;
-    }
-
-    .group-controls {
-      align-items: center;
-
-      a {
-        margin-left: 5px;
-      }
-    }
-  }
-
 }
 
 .ldap-group-links {

app/assets/stylesheets/pages/projects.scss

@@ -482,6 +482,10 @@ pre.light-well {
       a:hover {
         text-decoration: none;
       }
+
+      > span {
+        margin-left: 10px;
+      }
     }
   }
 

app/assets/stylesheets/pages/search.scss

@@ -185,7 +185,7 @@
     padding-right: $gl-padding + 15px;
   }
 
-  .btn-search {
+  .btn-search, .btn-new {
     width: 100%;
     margin-top: 5px;
 

app/views/admin/groups/_group.html.haml

-- css_class = '' unless local_assigns[:css_class]
+- css_class = 'no-description' if group.description.blank?
 
-%li.group-row.group-admin{ class: css_class }
-  .group-avatar
-    = image_tag group_icon(group), class: 'avatar hidden-xs'
-  .group-details
+%li.group-row{ class: css_class }
+  .controls
+    = link_to 'Edit', edit_admin_group_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
+    = link_to 'Delete', [:admin, group], data: { confirm: "Are you sure you want to remove #{group.name}?" }, method: :delete, class: 'btn btn-remove'
+  .stats
+    %span
+      = icon('bookmark')
+      = number_with_delimiter(group.projects.count)
+
+    %span
+      = icon('users')
+      = number_with_delimiter(group.users.count)
+
+    %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
+      = visibility_level_icon(group.visibility_level, fw: false)
+
+  = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to [:admin, group], class: 'group-name' do
       = group.name
-    .group-stats
-      %span>= pluralize(number_with_delimiter(group.projects.count), 'project')
-      ,
-      %span= pluralize(number_with_delimiter(group.users.count), 'member')
 
   - if group.description.present?
     .description
       = markdown(group.description, pipeline: :description)
-  .group-controls.hidden-xs
-    = link_to 'Edit', edit_admin_group_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
-    = link_to 'Delete', [:admin, group], data: { confirm: "Are you sure you want to remove #{group.name}?" }, method: :delete, class: 'btn btn-remove'

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

@@ -66,7 +66,7 @@
       %ul.projects-list.content-list
         - @projects.each_with_index do |project|
           %li.project-row
-            .controls.pull-right
+            .controls
               - if project.archived
                 %span.label.label-warning archived
               %span.label.label-gray

app/views/admin/users/_user.html.haml

@@ -14,7 +14,7 @@
       %span It's you!
     .user-email
       = mail_to user.email, user.email
-  .controls.pull-right
+  .controls
     = link_to 'Edit', edit_admin_user_path(user), id: "edit_#{dom_id(user)}", class: 'btn'
     - unless user == current_user
       .dropdown.inline