Merge branch '7082-billing-cards' into 'master'

Resolve "Billing page style is broken"

Closes #7082

See merge request gitlab-org/gitlab-ee!6773

ee/app/assets/stylesheets/pages/billings.scss

@@ -29,6 +29,10 @@
   justify-content: center;
   margin-top: 8px;
 
+  .card-header {
+    border-bottom: 0;
+  }
+
   .card {
     display: flex;
     flex-direction: column;
@@ -48,13 +52,13 @@
       width: 290px;
     }
 
-    .card-heading,
+    .card-header,
     .card-body {
       border-left: 1px solid $list-border;
       border-right: 1px solid $list-border;
     }
 
-    .card-heading {
+    .card-header {
       background-color: $blue-500;
       color: $white-light;
       border: 0;
@@ -138,10 +142,6 @@
     }
 
     &.current {
-      .card-heading {
-        background-color: $blue-600;
-      }
-
       .card-body {
         border-color: $blue-600;
         border-width: 2px;

ee/app/views/shared/billings/_billing_plan.html.haml

-.card.bg-info{ class: ('current' if current_plan?(plan)) }
-  .card-header
+.card{ class: ('current' if current_plan?(plan)) }
+  .card-header.bg-info.text-white
     = plan.name
 
   .card-body

ee/app/views/shared/billings/_billing_plans.html.haml

@@ -4,8 +4,8 @@
   = render 'shared/billings/billing_plan_header', namespace: namespace, plan: current_plan
 
   - unless has_plan_purchase_link?(plans_data)
-    .billing-plans-alert.card.bg-warning.prepend-top-10
-      .card-header
+    .billing-plans-alert.card.prepend-top-10
+      .card-header.bg-warning.text-white
         = s_("BillingPlans|Automatic downgrade and upgrade to some plans is currently not available.")
         - customer_support_url = 'https://support.gitlab.com/hc/en-us/requests/new?ticket_form_id=334447';
         - customer_support_link = link_to s_("BillingPlans|Customer Support"), customer_support_url