Merge branch '32838-admin-panel-spacing' into 'master'

32838 Add wells to admin dashboard overview to fix spacing problems

Closes #32838

See merge request !12467

app/assets/stylesheets/framework/wells.scss

@@ -3,6 +3,7 @@
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+  margin-bottom: $gl-padding;
 
   .well-segment {
     padding: $gl-padding;
@@ -21,6 +22,11 @@
         font-size: 12px;
       }
     }
+
+    &.admin-well h4 {
+      border-bottom: 1px solid $border-color;
+      padding-bottom: 8px;
+    }
   }
 
   .icon-container {
@@ -53,6 +59,14 @@
   padding: 15px;
 }
 
+.dark-well {
+  background-color: $gray-normal;
+
+  .btn {
+    width: 100%;
+  }
+}
+
 .well-centered {
   h1 {
     font-weight: normal;

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

@@ -5,8 +5,9 @@
   .admin-dashboard.prepend-top-default
     .row
       .col-md-4
+        .info-well
+          .well-segment.admin-well
             %h4 Statistics
-        %hr
             %p
               Forks
               %span.light.pull-right
@@ -40,9 +41,9 @@
               %span.light.pull-right
                 = number_with_delimiter(User.active.count)
       .col-md-4
-        %h4
-          Features
-        %hr
+        .info-well
+          .well-segment.admin-well
+            %h4 Features
             - sign_up = "Sign up"
             %p{ "aria-label" => "#{sign_up}: status " + (signup_enabled? ? "on" : "off") }
               = sign_up
@@ -85,15 +86,14 @@
               = gitlab_shared_runners
               %span.light.pull-right
                 = boolean_to_icon gitlab_shared_runners_enabled
-
       .col-md-4
+        .info-well
+          .well-segment.admin-well
             %h4
               Components
               - if current_application_settings.version_check_enabled
                 .pull-right
                   = version_status_badge
-
-        %hr
             %p
               GitLab
               %span.pull-right
@@ -118,66 +118,66 @@
               Ruby
               %span.pull-right
                 #{RUBY_VERSION}p#{RUBY_PATCHLEVEL}
-
             %p
               Rails
               %span.pull-right
                 #{Rails::VERSION::STRING}
-
             %p
               = Gitlab::Database.adapter_name
               %span.pull-right
                 = Gitlab::Database.version
-    %hr
     .row
       .col-sm-4
-        .light-well.well-centered
-          %h4 Projects
-          .data
+        .info-well.dark-well
+          .well-segment.well-centered
             = link_to admin_projects_path do
-              %h1= number_with_delimiter(Project.cached_count)
+              %h3.text-center
+                Projects:
+                = number_with_delimiter(Project.cached_count)
             %hr
             = link_to('New project', new_project_path, class: "btn btn-new")
       .col-sm-4
-        .light-well.well-centered
-          %h4 Users
-          .data
+        .info-well.dark-well
+          .well-segment.well-centered
             = link_to admin_users_path do
-              %h1= number_with_delimiter(User.count)
+              %h3.text-center
+                Users:
+                = number_with_delimiter(User.count)
             %hr
             = link_to 'New user', new_admin_user_path, class: "btn btn-new"
       .col-sm-4
-        .light-well.well-centered
-          %h4 Groups
-          .data
+        .info-well.dark-well
+          .well-segment.well-centered
             = link_to admin_groups_path do
-              %h1= number_with_delimiter(Group.count)
+              %h3.text-center
+                Groups
+                = number_with_delimiter(Group.count)
             %hr
             = link_to 'New group', new_admin_group_path, class: "btn btn-new"
-
-    .row.prepend-top-10
+    .row
       .col-md-4
+        .info-well
+          .well-segment.admin-well
             %h4 Latest projects
-        %hr
             - @projects.each do |project|
               %p
                 = link_to project.name_with_namespace, [:admin, project.namespace.becomes(Namespace), project], class: 'str-truncated-60'
                 %span.light.pull-right
                   #{time_ago_with_tooltip(project.created_at)}
-
       .col-md-4
+        .info-well
+          .well-segment.admin-well
             %h4 Latest users
-        %hr
             - @users.each do |user|
               %p
                 = link_to [:admin, user], class: 'str-truncated-60' do
                   = user.name
                 %span.light.pull-right
                   #{time_ago_with_tooltip(user.created_at)}
-
       .col-md-4
+        .info-well
+          .well-segment.admin-well
             %h4 Latest groups
-        %hr
             - @groups.each do |group|
               %p
                 = link_to [:admin, group], class: 'str-truncated-60' do

changelogs/unreleased/32838-admin-panel-spacing.yml

+---
+title: Add wells to admin dashboard overview to fix spacing problems
+merge_request:
+author: