Update button styles and headings with CRUD

app/assets/javascripts/admin/statistics_panel/components/app.vue

@@ -28,10 +28,10 @@ export default {
 </script>
 
 <template>
-  <gl-card class="gl-h-full">
-    <h4 class="gl-heading-4 gl-mb-0">{{ __('Statistics') }}</h4>
-    <slot name="footer">
-      <gl-loading-icon v-if="isLoading" size="lg" class="my-3" />
+  <gl-card class="gl-h-full" footer-class="gl-h-full">
+    <h3 class="gl-self-center gl-text-base gl-m-0">{{ __('Statistics') }}</h3>
+    <template #footer>
+      <gl-loading-icon v-if="isLoading" size="md" class="my-3" />
       <template v-else>
         <p
           v-for="(statistic, index) in getStatistics(statisticsLabels)"
@@ -41,12 +41,13 @@ export default {
             'gl-py-4',
             'gl-m-0',
             { 'gl-border-b': index !== getStatistics(statisticsLabels).length - 1 },
+            { 'gl-pt-0': index === 0 }
           ]"
         >
           {{ statistic.label }}
           <span class="light gl-float-right">{{ statistic.value }}</span>
         </p>
       </template>
-    </slot>
+    </template>
   </gl-card>
 </template>

app/helpers/dashboard_helper.rb

@@ -7,19 +7,19 @@ def has_start_trial?
     false
   end
 
-  def feature_entry(title, href: nil, enabled: true, doc_href: nil, last: false)
+  def feature_entry(title, href: nil, enabled: true, doc_href: nil, last: false, css_class: nil)
     enabled_text = enabled ? 'on' : 'off'
     label = "#{title}: status #{enabled_text}"
     link_or_title = title
 
-    tag.p(aria: { label: label }, class: ['gl-py-4', 'gl-m-0', ('gl-border-b' unless last)]) do
+    tag.p(aria: { label: label }, class: ['gl-py-4', 'gl-m-0', ('gl-border-b' unless last), css_class].compact) do
       concat(link_or_title)
 
       concat(tag.span(class: %w[gl-float-right]) do
         concat(boolean_to_icon(enabled))
 
         if href.present?
-          concat(render(Pajamas::ButtonComponent.new(icon: 'settings', size: :small, href: href,
+          concat(render(Pajamas::ButtonComponent.new(icon: 'settings', category: :tertiary, size: :small, href: href,
             button_options: { title: _('Configure'), class: 'gl-ml-2 has-tooltip' })))
         end
 

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

@@ -17,21 +17,24 @@
       dismissible: true.to_s } }
       = notice[:message].html_safe
 
+%h1.gl-sr-only=page_title
+
 - if @license.present?
   .license-panel.gl-mt-5
     = render_if_exists 'admin/licenses/summary'
     = render_if_exists 'admin/licenses/breakdown'
 
 .admin-dashboard.gl-mt-3{ data: { event_tracking_load: 'true', event_tracking: 'view_admin_dashboard_pageload' } }
-  .h3.gl-mb-5.gl-mt-0= _('Instance overview')
+  %h2.gl-heading-2= _('Instance overview')
   .row
     - component_params = { card_options: { class: 'gl-h-full' }, body_options: { class: 'gl-flex gl-justify-between gl-items-start' }, footer_options: { class: 'gl-h-full' } }
     .col-md-4.gl-mb-6
       = render Pajamas::CardComponent.new(**component_params) do |c|
         - c.with_body do
-          %div
+          %h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
             - approximate_projects_count = approximate_count_with_delimiters(@counts, Project)
-            = render Pajamas::SingleStatComponent.new(title: s_('AdminArea|Projects'), stat_value: approximate_projects_count)
+            = s_('AdminArea|Projects')
+            = render Pajamas::BadgeComponent.new(approximate_projects_count, variant: :muted)
           = render Pajamas::ButtonComponent.new(href: new_project_path, size: :small) do
             = s_('AdminArea|New project')
         - c.with_footer do
@@ -49,12 +52,9 @@
     .col-md-4.gl-mb-6
       = render Pajamas::CardComponent.new(**component_params) do |c|
         - c.with_body do
-          %div
-            = render Pajamas::SingleStatComponent.new(title: s_('AdminArea|Total Users')) do |c|
-              - c.with_stat_value do
-                .gl-flex.gl-items-center.gl-gap-3
-                  %span= approximate_count_with_delimiters(@counts, User)
-              end
+          %h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
+            = s_('AdminArea|Total Users')
+            = render Pajamas::BadgeComponent.new(approximate_count_with_delimiters(@counts, User), variant: :muted)
           = render Pajamas::ButtonComponent.new(href: new_admin_user_path, size: :small) do
             = s_('AdminArea|New user')
         - c.with_footer do
@@ -67,7 +67,7 @@
                 %span.gl-whitespace-nowrap.gl-text-right
                   #{time_ago_with_tooltip(user.created_at)}
             .gl-grow
-            .gl-flex.gl-pt-4.gl-gap-2
+            .gl-flex.gl-pt-4.gl-gap-3
               = render Pajamas::ButtonComponent.new(href: admin_users_path(sort: 'created_desc'), block: true) do
                 = s_('AdminArea|View latest users')
               = render Pajamas::ButtonComponent.new(href: admin_dashboard_stats_path, block: true, button_options: { class: '!gl-mt-0'}) do
@@ -75,9 +75,10 @@
     .col-md-4.gl-mb-6
       = render Pajamas::CardComponent.new(**component_params) do |c|
         - c.with_body do
-          %div
+          %h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
             - approximate_groups_count = approximate_count_with_delimiters(@counts, Group)
-            = render Pajamas::SingleStatComponent.new(title: s_('AdminArea|Groups'), stat_value: approximate_groups_count)
+            = s_('AdminArea|Groups')
+            = render Pajamas::BadgeComponent.new(approximate_groups_count, variant: :muted)
           = render Pajamas::ButtonComponent.new(href: new_admin_group_path, size: :small) do
             = s_('AdminArea|New group')
         - c.with_footer do
@@ -97,12 +98,15 @@
     .col-md-4.gl-mb-6
       #js-admin-statistics-container
     .col-md-4.gl-mb-6
-      = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }) do |c|
+      = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }, footer_options: { class: 'gl-h-full' }) do |c|
         - c.with_body do
-          %h4.gl-heading-4.gl-mb-0= s_('AdminArea|Features')
+          %h3.gl-self-center.gl-text-base.gl-inline-flex.gl-gap-2.gl-items-center.gl-m-0
+            = s_('AdminArea|Features')
+        - c.with_footer do
           = feature_entry(_('Sign up'),
             href: general_admin_application_settings_path(anchor: 'js-signup-settings'),
-            enabled: allow_signup?)
+            enabled: allow_signup?,
+            css_class: 'gl-pt-0')
 
           = feature_entry(_('LDAP'),
             enabled: Gitlab.config.ldap.enabled,
@@ -135,17 +139,18 @@
             enabled: Gitlab.config.gitlab_ci.shared_runners_enabled,
             last: true)
     .col-md-4.gl-mb-6
-      = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }) do |c|
+      = render Pajamas::CardComponent.new(card_options: { class: 'gl-h-full' }, footer_options: { class: 'gl-h-full' }) do |c|
         - c.with_body do
-          %h4.gl-heading-4.gl-mb-0
+          %h3.gl-self-center.gl-text-base.gl-m-0
             = s_('AdminArea|Components')
           - if show_version_check?
-            .gl-py-4.gl-m-0.gl-border-b
+            .gl-pt-3.gl-m-0
               .js-gitlab-version-check-badge{ data: { "size": "lg", "actionable": "true", "version": gitlab_version_check.to_json } }
               .gl-link.gl-float-right.gl-uppercase
                 %a{ href: 'https://gitlab.com/gitlab-org/gitlab/-/blob/master/CHANGELOG.md', target: 'blank', rel: 'noopener noreferrer' }
                   = _('changelog')
-          %p.gl-py-4.gl-m-0.gl-border-b
+        - c.with_footer do
+          %p.gl-pb-4.gl-m-0.gl-border-b
             = _('GitLab Version')
             %span.gl-float-right
               = link_to_version
@@ -193,4 +198,4 @@
               = @redis_versions&.join(", ")
           %p.gl-py-4.gl-m-0
             = _("Gitaly servers")
-            = render Pajamas::ButtonComponent.new(icon: 'settings', size: :small, href: admin_gitaly_servers_path, button_options: { title: _('Configure'), class: 'gl-ml-2 has-tooltip gl-float-right' })
+            = render Pajamas::ButtonComponent.new(icon: 'settings', category: :tertiary, size: :small, href: admin_gitaly_servers_path, button_options: { title: _('Configure'), class: 'gl-ml-2 has-tooltip gl-float-right' })

ee/app/views/admin/dashboard/_geo.html.haml

@@ -4,4 +4,4 @@
   = _('Geo')
   %span.gl-float-right
     = pluralize(GeoNode.count, _('site'))
-    = render Pajamas::ButtonComponent.new(icon: 'settings', size: :small, href: admin_geo_nodes_path, button_options: { title: _('Configure'), class: 'gl-ml-2 has-tooltip' })
+    = render Pajamas::ButtonComponent.new(icon: 'settings', category: :tertiary, size: :small, href: admin_geo_nodes_path, button_options: { title: _('Configure'), class: 'gl-ml-2 has-tooltip' })

ee/app/views/admin/licenses/_summary.html.haml

-.h3.gl-mb-5= _('License overview')
+%h2.gl-heading-2= _('License overview')
 = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' },
                                     body_options: { class: 'gl-flex gl-justify-between gl-items-center' }) do |c|
   - c.with_body do