Port of 32838-admin-panel-spacing to EE

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/licenses/_breakdown.html.haml

@@ -13,37 +13,40 @@
 .license-panel.prepend-top-default
   .row
     .col-sm-4
-      .light-well
-        %h4 Users in License
-        .data
-          %h1.center= licensed_users
-        %hr
-        - if @license.will_expire?
-          Your license is valid from
-          %strong
-            #{@license.starts_at} to
-          %strong<>
-            #{@license.expires_at}
-          \.
-        The
-        %a{ href: 'https://about.gitlab.com/license-faq/' } true-up model
-        allows having more users, and additional users will incur a retroactive charge on renewal.
-    .col-sm-4
-      .light-well
-        %h4 Maximum Users
-        .data
-          %h1.center= number_with_delimiter historical
-        %hr
-          This is the highest peak of users on your installation since the license started, and this is the minimum
-          number you need to purchase when you renew your license.
-    .col-sm-4
-      .light-well
-        %h4 Users over License
-        .data
-          %h1.center= number_with_delimiter users_over_license
-        %hr
+      .info-well.dark-well
+        .well-segment.well-centered
+          %h3.center
+            Users in License:
+            = licensed_users
+          %hr
+          - if @license.will_expire?
+            Your license is valid from
+            %strong
+              #{@license.starts_at} to
+            %strong<>
+              #{@license.expires_at}
+            \.
           The
           %a{ href: 'https://about.gitlab.com/license-faq/' } true-up model
-          has a retroactive charge for these users at the next renewal. If you want to update your
-          license sooner to prevent this, please contact
-          #{mail_to 'sales@gitlab.com'}.
+          allows having more users, and additional users will incur a retroactive charge on renewal.
+    .col-sm-4
+      .info-well.dark-well
+        .well-segment.well-centered
+          %h3.center
+            Maximum Users:
+            = number_with_delimiter historical
+          %hr
+            This is the highest peak of users on your installation since the license started, and this is the minimum
+            number you need to purchase when you renew your license.
+    .col-sm-4
+      .info-well.dark-well
+        .well-segment.well-centered
+          %h3.center
+            Users over License:
+            = number_with_delimiter users_over_license
+          %hr
+            The
+            %a{ href: 'https://about.gitlab.com/license-faq/' } true-up model
+            has a retroactive charge for these users at the next renewal. If you want to update your
+            license sooner to prevent this, please contact
+            #{mail_to 'sales@gitlab.com'}.

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

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