Group usage quotas: Update page hierarchy

Updates page hierarchy h1-h3 and migrates some Tailwind classes.

Changelog: changed
EE: true

app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue

@@ -167,9 +167,9 @@ export default {
       :used-storage="usedStorage"
       :loading="$apollo.queries.namespace.loading"
     />
-    <h3 data-testid="breakdown-subtitle">
+    <h2 class="gl-heading-2 gl-mb-3 gl-mt-5" data-testid="breakdown-subtitle">
       {{ s__('UsageQuota|Storage usage breakdown') }}
-    </h3>
+    </h2>
     <dependency-proxy-usage
       v-if="!userNamespace"
       :dependency-proxy-total-size="dependencyProxyTotalSize"
@@ -182,7 +182,7 @@ export default {
     />
 
     <section class="gl-mt-5">
-      <div class="gl-flex gl-bg-gray-10 gl-p-5">
+      <div class="gl-flex gl-bg-subtle gl-p-5">
         <search-and-sort-bar
           :namespace="namespaceId"
           :search-input-placeholder="__('Search')"

app/assets/javascripts/usage_quotas/storage/components/project_list.vue

@@ -144,7 +144,7 @@ export default {
         :project-avatar-url="project.avatarUrl"
         :size="16"
         :alt="project.name"
-        class="gl-mr-2 gl-inline-block !gl-text-center"
+        class="gl-mr-2"
       />
 
       <gl-link

ee/app/assets/javascripts/usage_quotas/components/statistics_card.vue

@@ -93,7 +93,7 @@ export default {
 
 <template>
   <div
-    class="gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-p-6"
+    class="gl-border gl-rounded-base gl-border-section gl-bg-section gl-p-5"
     data-testid="container"
     :class="cssClass"
   >
@@ -105,9 +105,9 @@ export default {
     </div>
     <template v-else>
       <div class="gl-flex gl-justify-between">
-        <p
+        <h3
           v-if="!isNil(usageValue) && usageValue !== ''"
-          class="gl-mb-3 gl-text-size-h-display gl-font-bold"
+          class="gl-heading-2 gl-mb-3"
           :data-testid="summaryDataTestid"
         >
           {{ formatValue(usageValue) }}
@@ -121,7 +121,7 @@ export default {
               totalUnit
             }}</span>
           </span>
-        </p>
+        </h3>
 
         <div>
           <gl-button

ee/app/assets/javascripts/usage_quotas/components/usage_statistics.vue

@@ -46,7 +46,7 @@ export default {
     <section class="gl-flex gl-justify-between">
       <section>
         <slot name="description"></slot>
-        <p v-if="usageValue" class="gl-mb-3 gl-text-size-h-display gl-font-bold">
+        <h2 v-if="usageValue" class="gl-heading-2 gl-mb-3">
           <span data-testid="usage-value">{{ usageValue }}</span>
           <span v-if="usageUnit" data-testid="usage-unit" class="gl-text-lg">{{ usageUnit }}</span>
           <span v-if="totalValue">
@@ -56,7 +56,7 @@ export default {
               totalUnit
             }}</span>
           </span>
-        </p>
+        </h2>
       </section>
       <div class="gl-align-self-top">
         <slot name="actions"></slot>

ee/app/assets/javascripts/usage_quotas/pages/components/app.vue

@@ -9,8 +9,8 @@ export default {
 </script>
 
 <template>
-  <div class="gl-py-6">
-    <h2 class="gl-heading-2 gl-mb-6">{{ s__('Pages|Pages deployments') }}</h2>
+  <div class="gl-py-3">
+    <h2 class="gl-heading-2">{{ s__('Pages|Pages deployments') }}</h2>
     <div class="gl-mb-8">
       <pages-deployment-stats />
     </div>

ee/app/assets/javascripts/usage_quotas/pipelines/components/app.vue

@@ -240,8 +240,8 @@ export default {
 
 <template>
   <div>
-    <h3 data-testid="overview-subtitle">{{ __('Pipelines') }}</h3>
-    <p class="gl-mb-0" data-testid="pipelines-description">
+    <h2 class="gl-heading-2 gl-my-3" data-testid="overview-subtitle">{{ __('Pipelines') }}</h2>
+    <p class="gl-mb-0 gl-text-subtle" data-testid="pipelines-description">
       {{
         s__(
           'UsageQuota|Compute units usage is calculated based on shared runners duration with cost factors applied.',
@@ -327,7 +327,7 @@ export default {
     </div>
 
     <section class="gl-my-5">
-      <h2 class="gl-text-lg">{{ $options.USAGE_BY_MONTH_HEADER }}</h2>
+      <h3 class="gl-heading-3 gl-mb-3">{{ $options.USAGE_BY_MONTH_HEADER }}</h3>
 
       <gl-loading-icon
         v-if="isLoadingYearUsageData"
@@ -344,7 +344,7 @@ export default {
     </section>
 
     <section class="gl-my-5">
-      <h2 class="gl-text-lg">{{ $options.USAGE_BY_PROJECT_HEADER }}</h2>
+      <h3 class="gl-heading-3">{{ $options.USAGE_BY_PROJECT_HEADER }}</h3>
 
       <div class="gl-my-3 gl-flex">
         <gl-form-group :label="s__('UsageQuota|Filter projects data by month')">

ee/app/assets/javascripts/usage_quotas/seats/components/statistics_seats_card.vue

@@ -174,24 +174,18 @@ export default {
 </script>
 
 <template>
-  <div
-    class="gl-flex gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-p-5"
-  >
+  <div class="gl-border gl-flex gl-rounded-base gl-border-section gl-bg-section gl-p-5">
     <gl-skeleton-loader v-if="isLoading" :height="64">
       <rect width="140" height="30" x="5" y="0" rx="4" />
       <rect width="240" height="10" x="5" y="40" rx="4" />
       <rect width="340" height="10" x="5" y="54" rx="4" />
     </gl-skeleton-loader>
     <div v-else class="gl-grow">
-      <p
-        v-if="shouldRenderSeatsUsedBlock"
-        class="gl-mb-3 gl-text-size-h-display gl-font-bold"
-        data-testid="seats-used"
-      >
+      <h2 v-if="shouldRenderSeatsUsedBlock" class="gl-heading-2 gl-mb-3" data-testid="seats-used">
         <span class="gl-relative gl-top-1">
           {{ seatsUsed }}
         </span>
-        <span class="gl-text-lg">
+        <span class="gl-text-lg gl-font-normal">
           {{ $options.i18n.seatsUsedText }}
         </span>
         <gl-link
@@ -201,16 +195,12 @@ export default {
         >
           <help-icon />
         </gl-link>
-      </p>
-      <p
-        v-if="shouldRenderSeatsOwedBlock"
-        class="gl-mb-0 gl-text-size-h-display gl-font-bold"
-        data-testid="seats-owed"
-      >
+      </h2>
+      <h2 v-if="shouldRenderSeatsOwedBlock" class="gl-heading-2 gl-mb-0" data-testid="seats-owed">
         <span class="gl-relative gl-top-1">
           {{ seatsOwed }}
         </span>
-        <span class="gl-text-lg">
+        <span class="gl-text-lg gl-font-normal">
           {{ $options.i18n.seatsOwedText }}
         </span>
         <gl-link
@@ -220,7 +210,7 @@ export default {
         >
           <help-icon />
         </gl-link>
-      </p>
+      </h2>
     </div>
     <gl-button
       v-if="shouldShowAddSeatsButton"

ee/app/assets/javascripts/usage_quotas/seats/components/subscription_seats.vue

@@ -97,13 +97,13 @@ export default {
 
 <template>
   <section>
-    <div class="gl-bg-gray-10 gl-p-5">
+    <div class="gl-bg-subtle gl-p-5">
       <div
         v-if="isLoaderShown"
         class="gl-grid gl-gap-5 md:gl-grid-cols-2"
         data-testid="skeleton-loader-cards"
       >
-        <div class="gl-border gl-rounded-base gl-bg-white gl-p-5">
+        <div class="gl-border gl-rounded-base gl-bg-default gl-p-5">
           <gl-skeleton-loader :height="64">
             <rect width="140" height="30" x="5" y="0" rx="4" />
             <rect width="240" height="10" x="5" y="40" rx="4" />
@@ -111,7 +111,7 @@ export default {
           </gl-skeleton-loader>
         </div>
 
-        <div class="gl-border gl-rounded-base gl-bg-white gl-p-5">
+        <div class="gl-border gl-rounded-base gl-bg-default gl-p-5">
           <gl-skeleton-loader :height="64">
             <rect width="140" height="30" x="5" y="0" rx="4" />
             <rect width="240" height="10" x="5" y="40" rx="4" />

ee/app/assets/javascripts/usage_quotas/seats/components/subscription_seats_statistics_card.vue

@@ -114,7 +114,7 @@ export default {
 
 <template>
   <div
-    class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-white gl-p-6"
+    class="gl-border gl-rounded-base gl-border-section gl-bg-section gl-p-5"
     data-testid="container"
   >
     <div v-if="isDataLoading">

ee/app/assets/javascripts/usage_quotas/seats/components/subscription_user_list.vue

@@ -133,7 +133,7 @@ export default {
 
 <template>
   <section>
-    <div class="gl-flex gl-bg-gray-10 gl-p-5">
+    <div class="gl-flex gl-bg-subtle gl-p-5">
       <search-and-sort-bar
         :namespace="String(namespaceId)"
         :search-input-placeholder="$options.i18n.filterUsersPlaceholder"

ee/app/assets/javascripts/usage_quotas/storage/components/storage_usage_statistics.vue

@@ -110,7 +110,9 @@ export default {
 <template>
   <div>
     <div class="gl-flex gl-items-center gl-justify-between">
-      <h3 data-testid="overview-subtitle">{{ s__('UsageQuota|Namespace overview') }}</h3>
+      <h2 class="gl-heading-2 gl-my-3" data-testid="overview-subtitle">
+        {{ s__('UsageQuota|Namespace overview') }}
+      </h2>
       <template v-if="isPurchaseButtonShown">
         <gl-button
           v-if="!shouldShowLimitedAccessModal"

ee/spec/frontend/usage_quotas/components/__snapshots__/statistics_card_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatisticsCard denominator block renders denominator block with all elements when all props are passed 1`] = `
-<p
-  class="gl-font-bold gl-mb-3 gl-text-size-h-display"
+<h3
+  class="gl-heading-2 gl-mb-3"
   data-testid="denominator"
 >
   1,000
@@ -23,5 +23,5 @@ exports[`StatisticsCard denominator block renders denominator block with all ele
       MiB
     </span>
   </span>
-</p>
+</h3>
 `;