Add latest changes from gitlab-org/gitlab@master

2022-06-08 21:08:52 +00:00 · 2022-06-08 21:08:52 +00:00 · eef3d92529
parent 33ed90457e
commit eef3d92529
174 changed files with 945 additions and 277 deletions
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1736,4 +1736,4 @@ DEPENDENCIES
  yajl-ruby (~> 1.4.1)

 BUNDLED WITH
-   2.3.6
+   2.3.15
--- a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
@ -101,7 +101,7 @@ export default {

 <template>
  <div>
-    <h1 class="page-title">
+    <h1 class="page-title gl-font-size-h-display">
      {{ $options.i18n.pageTitle }}
    </h1>
    <hr />
--- a/app/assets/javascripts/environments/components/environment_form.vue
+++ b/app/assets/javascripts/environments/components/environment_form.vue
@ -81,7 +81,7 @@ export default {
 </script>
 <template>
  <div>
-    <h1 class="page-title">
+    <h1 class="page-title gl-font-size-h-display">
      {{ title }}
    </h1>
    <div class="row col-12">
--- a/app/assets/javascripts/environments/components/environments_detail_header.vue
+++ b/app/assets/javascripts/environments/components/environments_detail_header.vue
@ -94,7 +94,7 @@ export default {
 <template>
  <header class="top-area gl-justify-content-between">
    <div class="gl-display-flex gl-flex-grow-1 gl-align-items-center">
-      <h1 class="page-title">
+      <h1 class="page-title gl-font-size-h-display">
        {{ environment.name }}
      </h1>
      <p v-if="shouldShowCancelAutoStopButton" class="gl-mb-0 gl-ml-3" data-testid="auto-stops-at">
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue
@ -184,7 +184,10 @@ export default {
        class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6"
      >
        <div class="gl-display-flex gl-align-items-center">
-          <h2 data-testid="feature-flags-tab-title" class="gl-font-size-h2 gl-my-0">
+          <h2
+            data-testid="feature-flags-tab-title"
+            class="page-title gl-font-size-h-display gl-my-0"
+          >
            {{ s__('FeatureFlags|Feature Flags') }}
          </h2>
          <gl-badge v-if="count" class="gl-ml-4">{{ count }}</gl-badge>
--- a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
@ -24,7 +24,7 @@ export default {
 </script>
 <template>
  <div>
-    <h1 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h1>
+    <h1 class="page-title gl-font-size-h-display">{{ s__('FeatureFlags|New feature flag') }}</h1>

    <gl-alert v-if="error.length" variant="warning" class="gl-mb-5" :dismissible="false">
      <p v-for="(message, index) in error" :key="index" class="gl-mb-0">{{ message }}</p>
--- a/app/assets/javascripts/groups/components/group_name_and_path.vue
+++ b/app/assets/javascripts/groups/components/group_name_and_path.vue
@ -0,0 +1,232 @@
+<script>
+import { GlFormGroup, GlFormInput, GlFormInputGroup, GlInputGroupText } from '@gitlab/ui';
+import { debounce } from 'lodash';
+
+import { s__, __ } from '~/locale';
+import { getGroupPathAvailability } from '~/rest_api';
+import { createAlert } from '~/flash';
+import { slugify } from '~/lib/utils/text_utility';
+import axios from '~/lib/utils/axios_utils';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+const DEBOUNCE_DURATION = 1000;
+
+export default {
+  i18n: {
+    inputs: {
+      name: {
+        label: s__('Groups|Group name'),
+        placeholder: __('My awesome group'),
+        description: s__(
+          'Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.',
+        ),
+        invalidFeedback: s__('Groups|Enter a descriptive name for your group.'),
+      },
+      path: {
+        label: s__('Groups|Group URL'),
+        placeholder: __('my-awesome-group'),
+        invalidFeedbackInvalidPattern: s__(
+          'GroupSettings|Choose a group path that does not start with a dash or end with a period. It can also contain alphanumeric characters and underscores.',
+        ),
+        invalidFeedbackPathUnavailable: s__(
+          'Groups|Group path is unavailable. Path has been replaced with a suggested available path.',
+        ),
+        validFeedback: s__('Groups|Group path is available.'),
+      },
+    },
+    apiLoadingMessage: s__('Groups|Checking group URL availability...'),
+    apiErrorMessage: __(
+      'An error occurred while checking group path. Please refresh and try again.',
+    ),
+  },
+  nameInputSize: { md: 'lg' },
+  changingGroupPathHelpPagePath: helpPagePath('user/group/index', {
+    anchor: 'change-a-groups-path',
+  }),
+  mattermostDataBindName: 'create_chat_team',
+  components: { GlFormGroup, GlFormInput, GlFormInputGroup, GlInputGroupText },
+  inject: ['fields', 'basePath', 'mattermostEnabled'],
+  data() {
+    return {
+      name: this.fields.name.value,
+      path: this.fields.path.value,
+      apiSuggestedPath: '',
+      apiLoading: false,
+      nameFeedbackState: null,
+      pathFeedbackState: null,
+      pathInvalidFeedback: null,
+      activeApiRequestAbortController: null,
+    };
+  },
+  computed: {
+    computedPath() {
+      return this.apiSuggestedPath || this.path;
+    },
+    pathDescription() {
+      return this.apiLoading ? this.$options.i18n.apiLoadingMessage : '';
+    },
+  },
+  watch: {
+    name: [
+      function updatePath(newName) {
+        this.nameFeedbackState = null;
+        this.pathFeedbackState = null;
+        this.apiSuggestedPath = '';
+        this.path = slugify(newName);
+      },
+      debounce(async function updatePathWithSuggestions() {
+        try {
+          const { suggests } = await this.checkPathAvailability();
+
+          const [suggestedPath] = suggests;
+
+          this.apiSuggestedPath = suggestedPath;
+        } catch (error) {
+          // Do nothing, error handled in `checkPathAvailability`
+        }
+      }, DEBOUNCE_DURATION),
+    ],
+  },
+  methods: {
+    async checkPathAvailability() {
+      if (!this.path) return Promise.reject();
+
+      this.apiLoading = true;
+
+      if (this.activeApiRequestAbortController !== null) {
+        this.activeApiRequestAbortController.abort();
+      }
+
+      this.activeApiRequestAbortController = new AbortController();
+
+      try {
+        const {
+          data: { exists, suggests },
+        } = await getGroupPathAvailability(this.path, this.fields.parentId?.value, {
+          signal: this.activeApiRequestAbortController.signal,
+        });
+
+        if (exists) {
+          if (suggests.length) {
+            return Promise.resolve({ exists, suggests });
+          }
+
+          createAlert({
+            message: this.$options.i18n.apiErrorMessage,
+          });
+
+          return Promise.reject();
+        }
+
+        return Promise.resolve({ exists, suggests });
+      } catch (error) {
+        if (!axios.isCancel(error)) {
+          createAlert({
+            message: this.$options.i18n.apiErrorMessage,
+          });
+        }
+
+        return Promise.reject();
+      } finally {
+        this.apiLoading = false;
+      }
+    },
+    handlePathInput(value) {
+      this.pathFeedbackState = null;
+      this.apiSuggestedPath = '';
+      this.path = value;
+      this.debouncedValidatePath();
+    },
+    debouncedValidatePath: debounce(async function validatePath() {
+      try {
+        const {
+          exists,
+          suggests: [suggestedPath],
+        } = await this.checkPathAvailability();
+
+        if (exists) {
+          this.apiSuggestedPath = suggestedPath;
+          this.pathInvalidFeedback = this.$options.i18n.inputs.path.invalidFeedbackPathUnavailable;
+          this.pathFeedbackState = false;
+        } else {
+          this.pathFeedbackState = true;
+        }
+      } catch (error) {
+        // Do nothing, error handled in `checkPathAvailability`
+      }
+    }, DEBOUNCE_DURATION),
+    handleInvalidName(event) {
+      event.preventDefault();
+
+      this.nameFeedbackState = false;
+    },
+    handleInvalidPath(event) {
+      event.preventDefault();
+
+      this.pathInvalidFeedback = this.$options.i18n.inputs.path.invalidFeedbackInvalidPattern;
+      this.pathFeedbackState = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <input
+      :id="fields.parentId.id"
+      type="hidden"
+      :name="fields.parentId.name"
+      :value="fields.parentId.value"
+    />
+    <gl-form-group
+      :label="$options.i18n.inputs.name.label"
+      :description="$options.i18n.inputs.name.description"
+      :label-for="fields.name.id"
+      :invalid-feedback="$options.i18n.inputs.name.invalidFeedback"
+      :state="nameFeedbackState"
+    >
+      <gl-form-input
+        :id="fields.name.id"
+        v-model="name"
+        class="gl-field-error-ignore"
+        required
+        :name="fields.name.name"
+        :placeholder="$options.i18n.inputs.name.placeholder"
+        data-qa-selector="group_name_field"
+        :size="$options.nameInputSize"
+        :state="nameFeedbackState"
+        @invalid="handleInvalidName"
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.inputs.path.label"
+      :label-for="fields.path.id"
+      :description="pathDescription"
+      :state="pathFeedbackState"
+      :valid-feedback="$options.i18n.inputs.path.validFeedback"
+      :invalid-feedback="pathInvalidFeedback"
+    >
+      <gl-form-input-group>
+        <template #prepend>
+          <gl-input-group-text class="group-root-path">{{ basePath }}</gl-input-group-text>
+        </template>
+        <gl-form-input
+          :id="fields.path.id"
+          class="gl-field-error-ignore"
+          :name="fields.path.name"
+          :value="computedPath"
+          :placeholder="$options.i18n.inputs.path.placeholder"
+          :maxlength="fields.path.maxLength"
+          :pattern="fields.path.pattern"
+          :state="pathFeedbackState"
+          :size="$options.nameInputSize"
+          required
+          data-qa-selector="group_path_field"
+          :data-bind-in="mattermostEnabled ? $options.mattermostDataBindName : null"
+          @input="handlePathInput"
+          @invalid="handleInvalidPath"
+        />
+      </gl-form-input-group>
+    </gl-form-group>
+  </div>
+</template>
--- a/app/assets/javascripts/groups/create_edit_form.js
+++ b/app/assets/javascripts/groups/create_edit_form.js
@ -0,0 +1,29 @@
+import Vue from 'vue';
+import { parseRailsFormFields } from '~/lib/utils/forms';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import GroupNameAndPath from './components/group_name_and_path.vue';
+
+export const initGroupNameAndPath = () => {
+  const elements = document.querySelectorAll('.js-group-name-and-path');
+
+  if (!elements.length) {
+    return;
+  }
+
+  elements.forEach((element) => {
+    const fields = parseRailsFormFields(element);
+    const { basePath, mattermostEnabled } = element.dataset;
+
+    return new Vue({
+      el: element,
+      provide: {
+        fields,
+        basePath,
+        mattermostEnabled: parseBoolean(mattermostEnabled),
+      },
+      render(h) {
+        return h(GroupNameAndPath);
+      },
+    });
+  });
+};
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@ -154,7 +154,7 @@ export default {
          <gl-button
            :disabled="commitButtonDisabled"
            category="primary"
-            variant="info"
+            variant="confirm"
            block
            class="qa-begin-commit-button"
            data-testid="begin-commit-button"
--- a/app/assets/javascripts/issues/show/components/title.vue
+++ b/app/assets/javascripts/issues/show/components/title.vue
@ -74,7 +74,7 @@ export default {
        'issue-realtime-pre-pulse': preAnimation,
        'issue-realtime-trigger-pulse': pulseAnimation,
      }"
-      class="title qa-title"
+      class="title qa-title gl-font-size-h-display"
      dir="auto"
    ></h1>
    <gl-button
--- a/app/assets/javascripts/jira_connect/branches/pages/index.vue
+++ b/app/assets/javascripts/jira_connect/branches/pages/index.vue
@ -46,7 +46,7 @@ export default {
 <template>
  <div>
    <div class="gl-border-1 gl-border-b-solid gl-border-gray-100 gl-mb-5 gl-mt-7">
-      <h1 data-testid="page-title" class="page-title">{{ pageTitle }}</h1>
+      <h1 data-testid="page-title" class="page-title gl-font-size-h-display">{{ pageTitle }}</h1>
    </div>

    <new-branch-form v-if="showForm" @success="onNewBranchFormSuccess" />
--- a/app/assets/javascripts/jira_import/components/jira_import_form.vue
+++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue
@ -254,7 +254,7 @@ export default {
      </gl-sprintf>
    </gl-alert>

-    <h1 class="page-title">{{ __('New Jira import') }}</h1>
+    <h1 class="page-title gl-font-size-h-display">{{ __('New Jira import') }}</h1>

    <hr />

--- a/app/assets/javascripts/lib/utils/forms.js
+++ b/app/assets/javascripts/lib/utils/forms.js
@ -119,12 +119,14 @@ export const parseRailsFormFields = (mountEl) => {
    }

    const fieldNameCamelCase = convertToCamelCase(fieldName);
-    const { id, placeholder, name, value, type, checked } = input;
+    const { id, placeholder, name, value, type, checked, maxLength, pattern } = input;
    const attributes = {
      name,
      id,
      value,
      ...(placeholder && { placeholder }),
+      ...(input.hasAttribute('maxlength') && { maxLength }),
+      ...(pattern && { pattern }),
    };

    // Store radio buttons and checkboxes as an array so they can be
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue
@ -102,7 +102,7 @@ export default {
      <template #cell(name)="{ item, toggleDetails, detailsShowing }">
        <gl-button
          v-if="hasDetails(item)"
-          :icon="detailsShowing ? 'angle-up' : 'angle-down'"
+          :icon="detailsShowing ? 'chevron-up' : 'chevron-down'"
          :aria-label="detailsShowing ? __('Collapse') : __('Expand')"
          category="tertiary"
          size="small"
--- a/app/assets/javascripts/pages/admin/groups/edit/index.js
+++ b/app/assets/javascripts/pages/admin/groups/edit/index.js
@ -1,3 +1,5 @@
 import initFilePickers from '~/file_pickers';
+import { initGroupNameAndPath } from '~/groups/create_edit_form';

 initFilePickers();
+initGroupNameAndPath();
--- a/app/assets/javascripts/pages/admin/groups/new/index.js
+++ b/app/assets/javascripts/pages/admin/groups/new/index.js
@ -1,6 +1,7 @@
 import initFilePickers from '~/file_pickers';
 import BindInOut from '~/behaviors/bind_in_out';
 import Group from '~/group';
+import { initGroupNameAndPath } from '~/groups/create_edit_form';

 (() => {
  BindInOut.initAll();
@ -8,3 +9,5 @@ import Group from '~/group';

  return new Group();
 })();
+
+initGroupNameAndPath();
--- a/app/assets/javascripts/pages/groups/new/index.js
+++ b/app/assets/javascripts/pages/groups/new/index.js
@ -2,18 +2,19 @@ import Vue from 'vue';
 import BindInOut from '~/behaviors/bind_in_out';
 import initFilePickers from '~/file_pickers';
 import Group from '~/group';
+import { initGroupNameAndPath } from '~/groups/create_edit_form';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import NewGroupCreationApp from './components/app.vue';
 import GroupPathValidator from './group_path_validator';
 import initToggleInviteMembers from './toggle_invite_members';

 new GroupPathValidator(); // eslint-disable-line no-new
+new Group(); // eslint-disable-line no-new
+initGroupNameAndPath();

 BindInOut.initAll();
 initFilePickers();

-new Group(); // eslint-disable-line no-new
-
 function initNewGroupCreation(el) {
  const { hasErrors, verificationRequired, verificationFormUrl, subscriptionsUrl } = el.dataset;

--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
@ -64,7 +64,7 @@ export default {
    <div class="title-container">
      <h1
        v-safe-html="issuable.titleHtml || issuable.title"
-        class="title qa-title"
+        class="title qa-title gl-font-size-h-display"
        dir="auto"
        data-testid="title"
      ></h1>
--- a/app/assets/stylesheets/framework/page_title.scss
+++ b/app/assets/stylesheets/framework/page_title.scss
@ -3,8 +3,6 @@

  .page-title {
    margin: $gl-padding 0;
-    font-size: 1.75em;
-    font-weight: $gl-font-weight-bold;
    color: $gl-text-color;
  }

--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@ -611,8 +611,6 @@ body {
 .page-title {
  margin: #{2 * $grid-size} 0;
  line-height: 1.3;
-  font-size: 1.25em;
-  font-weight: $gl-font-weight-bold;

  &.with-button {
    line-height: 34px;
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@ -58,7 +58,6 @@
 .detail-page-description {
  .title {
    margin: 0 0 16px;
-    font-size: 2em;
    color: $gl-text-color;
    padding: 0 0 0.3em;
    border-bottom: 1px solid $white-dark;
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@ -144,6 +144,15 @@ module GroupsHelper
    false
  end

+  def group_name_and_path_app_data(group)
+    parent = group.parent
+
+    {
+      base_path: URI.join(root_url, parent&.full_path || "").to_s,
+      mattermost_enabled: Gitlab.config.mattermost.enabled.to_s
+    }
+  end
+
  private

  def group_title_link(group, hidable: false, show_avatar: false, for_dropdown: false)
--- a/app/views/abuse_reports/new.html.haml
+++ b/app/views/abuse_reports/new.html.haml
@ -1,5 +1,5 @@
 - page_title _("Report abuse to admin")
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("Report abuse to admin")
 %p
  = _("Please use this form to report to the admin users who create spam issues, comments or behave inappropriately.")
--- a/app/views/admin/abuse_reports/index.html.haml
+++ b/app/views/admin/abuse_reports/index.html.haml
@ -1,6 +1,6 @@
 - page_title _('Abuse Reports')

-%h1.page-title= _('Abuse Reports')
+%h1.page-title.gl-font-size-h-display= _('Abuse Reports')

 .row-content-block.second-block
  = form_tag admin_abuse_reports_path, method: :get, class: 'filter-form' do
--- a/app/views/admin/applications/edit.html.haml
+++ b/app/views/admin/applications/edit.html.haml
@ -2,7 +2,7 @@
 - breadcrumb_title @application.name
 - page_title _("Edit"), @application.name, _("Applications")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Edit application')
 - @url = admin_application_path(@application)
 = render 'form', application: @application
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@ -1,6 +1,6 @@
 - page_title s_('AdminArea|Instance OAuth applications')

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = s_('AdminArea|Instance OAuth applications')
 %p.light
  - docs_link_path = help_page_path('integration/oauth_provider')
--- a/app/views/admin/applications/new.html.haml
+++ b/app/views/admin/applications/new.html.haml
@ -1,7 +1,7 @@
 - breadcrumb_title _("Add new application")
 - page_title _("Add new application")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("Add new application")
 - @url = admin_applications_path
 = render 'form', application: @application
--- a/app/views/admin/applications/show.html.haml
+++ b/app/views/admin/applications/show.html.haml
@ -1,6 +1,6 @@
 - page_title @application.name, _("Applications")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  Application: #{@application.name}

 = render 'shared/doorkeeper/applications/show',
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@ -1,6 +1,6 @@
 - page_title _("Background Jobs")

-%h1.page-title= _('Background Jobs')
+%h1.page-title.gl-font-size-h-display= _('Background Jobs')
 %p.light
  - sidekiq_link_url = 'http://sidekiq.org/'
  - sidekiq_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: sidekiq_link_url }
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@ -2,7 +2,7 @@
 - page_title _("Broadcast Messages")
 - targeted_broadcast_messages_enabled = Feature.enabled?(:role_targeted_broadcast_messages)

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Broadcast Messages')
 %p.light
  = _('Use banners and notifications to notify your users about scheduled maintenance, recent upgrades, and more.')
--- a/app/views/admin/deploy_keys/edit.html.haml
+++ b/app/views/admin/deploy_keys/edit.html.haml
@ -1,5 +1,5 @@
 - page_title _('Edit Deploy Key')
-%h1.page-title= _('Edit public deploy key')
+%h1.page-title.gl-font-size-h-display= _('Edit public deploy key')
 %hr

 %div
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@ -1,5 +1,5 @@
 - page_title _('New Deploy Key')
-%h1.page-title= _('New public deploy key')
+%h1.page-title.gl-font-size-h-display= _('New public deploy key')
 %hr

 %div
--- a/app/views/admin/gitaly_servers/index.html.haml
+++ b/app/views/admin/gitaly_servers/index.html.haml
@ -1,7 +1,7 @@
 - breadcrumb_title _("Gitaly Servers")
 - page_title _("Gitaly Servers")

-%h1.page-title= _("Gitaly Servers")
+%h1.page-title.gl-font-size-h-display= _("Gitaly Servers")
 %hr
 .gitaly_servers
  - if @gitaly_servers.any?
--- a/app/views/admin/groups/edit.html.haml
+++ b/app/views/admin/groups/edit.html.haml
@ -1,4 +1,4 @@
 - page_title _("Edit"), @group.name, _("Groups")
-%h1.page-title= _('Edit group: %{group_name}') % { group_name: @group.name }
+%h1.page-title.gl-font-size-h-display= _('Edit group: %{group_name}') % { group_name: @group.name }
 %hr
 = render 'form', visibility_level: @group.visibility_level
--- a/app/views/admin/groups/new.html.haml
+++ b/app/views/admin/groups/new.html.haml
@ -1,4 +1,4 @@
 - page_title _("New Group")
-%h1.page-title= _('New group')
+%h1.page-title.gl-font-size-h-display= _('New group')
 %hr
 = render 'form', visibility_level: default_group_visibility
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@ -4,7 +4,7 @@
 - page_title @group.name, _("Groups")
 - current_user_is_group_owner = @group && @group.has_owner?(current_user)

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Group: %{group_name}') % { group_name: @group.full_name }

  = link_to admin_group_edit_path(@group), class: "btn btn-default gl-button float-right", data: { qa_selector: 'edit_group_link' } do
--- a/app/views/admin/health_check/show.html.haml
+++ b/app/views/admin/health_check/show.html.haml
@ -1,7 +1,7 @@
 - page_title _('Health Check')
 - no_errors = @errors.blank?

-%h1.page-title= page_title
+%h1.page-title.gl-font-size-h-display= page_title
 .bs-callout.clearfix
  .float-left
    %p
--- a/app/views/admin/hook_logs/show.html.haml
+++ b/app/views/admin/hook_logs/show.html.haml
@ -1,5 +1,5 @@
 - page_title _('Request details')
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("Request details")

 %hr
--- a/app/views/admin/identities/edit.html.haml
+++ b/app/views/admin/identities/edit.html.haml
@ -2,7 +2,7 @@
 - add_to_breadcrumbs @user.name, admin_user_identities_path(@user)
 - breadcrumb_title _('Edit Identity')
 - page_title _("Edit"), @identity.provider, _("Identities"), @user.name, _("Users")
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Edit identity for %{user_name}') % { user_name: @user.name }
 %hr

--- a/app/views/admin/identities/new.html.haml
+++ b/app/views/admin/identities/new.html.haml
@ -2,6 +2,6 @@
 - add_to_breadcrumbs @user.name, admin_user_identities_path(@user)
 - breadcrumb_title _('New Identity')
 - page_title _('New Identity')
-%h1.page-title= _('New identity')
+%h1.page-title.gl-font-size-h-display= _('New identity')
 %hr
 = render 'form'
--- a/app/views/admin/labels/edit.html.haml
+++ b/app/views/admin/labels/edit.html.haml
@ -1,7 +1,7 @@
 - add_to_breadcrumbs _("Labels"), admin_labels_path
 - breadcrumb_title _("Edit Label")
 - page_title _("Edit"), @label.name, _("Labels")
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Edit Label')
 %hr
 = render 'shared/labels/form', url: admin_label_path(@label), back_path: admin_labels_path
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@ -3,7 +3,7 @@
 %div
  = link_to new_admin_label_path, class: "float-right btn gl-button btn-confirm" do
    = _('New label')
-  %h1.page-title
+  %h1.page-title.gl-font-size-h-display
    = _('Labels')
 %hr
 - if @labels.present?
--- a/app/views/admin/labels/new.html.haml
+++ b/app/views/admin/labels/new.html.haml
@ -1,5 +1,5 @@
 - page_title _("New Label")
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('New Label')
 %hr
 = render 'shared/labels/form', url: admin_labels_path, back_path: admin_labels_path
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@ -5,7 +5,7 @@
 - @content_class = "admin-projects"
 - current_user_is_group_owner = @group && @group.has_owner?(current_user)

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Project: %{name}') % { name: @project.full_name }
  = link_to edit_project_path(@project), class: "btn btn-default gl-button float-right" do
    = sprite_icon('pencil-square', css_class: 'gl-icon')
--- a/app/views/admin/spam_logs/index.html.haml
+++ b/app/views/admin/spam_logs/index.html.haml
@ -1,5 +1,5 @@
 - page_title _("Spam Logs")
-%h1.page-title= _('Spam Logs')
+%h1.page-title.gl-font-size-h-display= _('Spam Logs')
 %hr
 - if @spam_logs.present?
  .table-holder
--- a/app/views/admin/topics/edit.html.haml
+++ b/app/views/admin/topics/edit.html.haml
@ -1,4 +1,4 @@
 - page_title _("Edit"), @topic.name, _("Topics")
-%h1.page-title= _('Edit topic: %{topic_name}') % { topic_name: @topic.name }
+%h1.page-title.gl-font-size-h-display= _('Edit topic: %{topic_name}') % { topic_name: @topic.name }
 %hr
 = render 'form', url: admin_topic_path(@topic)
--- a/app/views/admin/topics/new.html.haml
+++ b/app/views/admin/topics/new.html.haml
@ -1,4 +1,4 @@
 - page_title _("New topic")
-%h1.page-title= _('New topic')
+%h1.page-title.gl-font-size-h-display= _('New topic')
 %hr
 = render 'form', url: admin_topics_path(@topic)
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@ -1,6 +1,6 @@
 .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-align-items-center.gl-py-3.gl-mb-5.gl-border-b-solid.gl-border-gray-100.gl-border-b-1
  .gl-my-3
-    %h1.page-title.gl-m-0
+    %h1.page-title.gl-font-size-h-display.gl-m-0
      = @user.name
      - if @user.blocked_pending_approval?
        %span.gl-text-red-500
--- a/app/views/admin/users/edit.html.haml
+++ b/app/views/admin/users/edit.html.haml
@ -1,4 +1,4 @@
 - page_title _("Edit"), @user.name, _("Users")
-%h1.page-title.gl-font-size-h-display.gl-mb-6
+%h1.page-title.gl-font-size-h-display
  = _("Edit user: %{user_name}") % { user_name: @user.name }
 = render 'form'
--- a/app/views/admin/users/new.html.haml
+++ b/app/views/admin/users/new.html.haml
@ -1,4 +1,4 @@
 - page_title _("New User")
-%h1.page-title.gl-font-size-h-display.gl-mb-6
+%h1.page-title.gl-font-size-h-display
  = s_('AdminUsers|New user')
 = render 'form'
--- a/app/views/dashboard/_activity_head.html.haml
+++ b/app/views/dashboard/_activity_head.html.haml
@ -1,5 +1,5 @@
 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('Activity')
+  %h1.page-title.gl-font-size-h-display= _('Activity')

 .top-area
  = gl_tabs_nav({ class: 'gl-border-b-0', data: { testid: 'dashboard-activity-tabs' } }) do
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@ -1,5 +1,5 @@
 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('Groups')
+  %h1.page-title.gl-font-size-h-display= _('Groups')

  - if current_user.can_create_group?
    .page-title-controls
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@ -5,7 +5,7 @@
  = render 'shared/project_limit'

 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('Projects')
+  %h1.page-title.gl-font-size-h-display= _('Projects')

  - if current_user.can_create_project?
    .page-title-controls
--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
@ -1,5 +1,5 @@
 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('Snippets')
+  %h1.page-title.gl-font-size-h-display= _('Snippets')

  - if current_user && current_user.snippets.any? || @snippets.any?
    .page-title-controls
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@ -7,7 +7,7 @@
 = render_dashboard_ultimate_trial(current_user)

 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('Issues')
+  %h1.page-title.gl-font-size-h-display= _('Issues')

  - if current_user
    .page-title-controls
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@ -5,7 +5,7 @@
 = render_dashboard_ultimate_trial(current_user)

 .page-title-holder.d-flex.align-items-start.flex-column.flex-sm-row.align-items-sm-center
-  %h1.page-title= _('Merge requests')
+  %h1.page-title.gl-font-size-h-display= _('Merge requests')

  - if current_user
    .page-title-controls.ml-0.mb-3.ml-sm-auto.mb-sm-0
--- a/app/views/dashboard/milestones/index.html.haml
+++ b/app/views/dashboard/milestones/index.html.haml
@ -4,7 +4,7 @@
 - add_page_specific_style 'page_bundles/milestone'

 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('Milestones')
+  %h1.page-title.gl-font-size-h-display= _('Milestones')

  - if current_user
    .page-title-controls
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@ -7,7 +7,7 @@
 - add_page_specific_style 'page_bundles/todos'

 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _("To-Do List")
+  %h1.page-title.gl-font-size-h-display= _("To-Do List")

 - if current_user.todos.any?
  .top-area
--- a/app/views/doorkeeper/applications/edit.html.haml
+++ b/app/views/doorkeeper/applications/edit.html.haml
@ -1,5 +1,5 @@
 - page_title _("Edit"), @application.name, _("Applications")
 - @content_class = "limit-container-width" unless fluid_layout

-%h1.page-title= _('Edit application')
+%h1.page-title.gl-font-size-h-display= _('Edit application')
 = render 'shared/doorkeeper/applications/form', url: doorkeeper_submit_path(@application)
--- a/app/views/doorkeeper/applications/new.html.haml
+++ b/app/views/doorkeeper/applications/new.html.haml
@ -1,6 +1,6 @@
 - page_title _("New Application")

-%h1.page-title= _("New Application")
+%h1.page-title.gl-font-size-h-display= _("New Application")

 %hr

--- a/app/views/doorkeeper/applications/show.html.haml
+++ b/app/views/doorkeeper/applications/show.html.haml
@ -3,7 +3,7 @@
 - page_title @application.name, _("Applications")
 - @content_class = "limit-container-width" unless fluid_layout

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("Application: %{name}") % { name: @application.name }

 = render 'shared/doorkeeper/applications/show',
--- a/app/views/doorkeeper/authorizations/error.html.haml
+++ b/app/views/doorkeeper/authorizations/error.html.haml
@ -1,3 +1,3 @@
-%h1.page-title= _("An error has occurred")
+%h1.page-title.gl-font-size-h-display= _("An error has occurred")
 %main{ :role => "main" }
  %pre= @pre_auth.error_response.body[:error_description]
--- a/app/views/doorkeeper/authorizations/redirect.html.haml
+++ b/app/views/doorkeeper/authorizations/redirect.html.haml
@ -1,4 +1,4 @@
-%h1.page-title= _("Redirecting")
+%h1.page-title.gl-font-size-h-display= _("Redirecting")

 %div
  %a{ :href => redirect_uri } Click here to redirect to #{redirect_uri}
--- a/app/views/doorkeeper/authorizations/show.html.haml
+++ b/app/views/doorkeeper/authorizations/show.html.haml
@ -1,3 +1,3 @@
-%h1.page-title= _("Authorization code:")
+%h1.page-title.gl-font-size-h-display= _("Authorization code:")
 %main{ :role => "main" }
  %code#authorization_code= params[:code]
--- a/app/views/explore/topics/_head.html.haml
+++ b/app/views/explore/topics/_head.html.haml
@ -1,5 +1,5 @@
 .page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('Projects')
+  %h1.page-title.gl-font-size-h-display= _('Projects')

 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
  .fade-left= sprite_icon('chevron-lg-left', size: 12)
--- a/app/views/groups/labels/edit.html.haml
+++ b/app/views/groups/labels/edit.html.haml
@ -2,7 +2,7 @@
 - breadcrumb_title _("Edit")
 - page_title _("Edit"), @label.name, _("Labels")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Edit Label')

 = render 'shared/labels/form', url: group_label_path(@group, @label), back_path: @previous_labels_path
--- a/app/views/groups/labels/new.html.haml
+++ b/app/views/groups/labels/new.html.haml
@ -2,7 +2,7 @@
 - breadcrumb_title _("New")
 - page_title _("New Label")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('New Label')

 = render 'shared/labels/form', url: group_labels_path, back_path: @previous_labels_path
--- a/app/views/groups/milestones/edit.html.haml
+++ b/app/views/groups/milestones/edit.html.haml
@ -3,7 +3,7 @@

 - render "header_title"

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Edit Milestone')
 %hr

--- a/app/views/groups/milestones/new.html.haml
+++ b/app/views/groups/milestones/new.html.haml
@ -2,7 +2,7 @@
 - breadcrumb_title _("New")
 - page_title _("Milestones"), @milestone.name, _("Milestones")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("New Milestone")

 %hr
--- a/app/views/groups/runners/edit.html.haml
+++ b/app/views/groups/runners/edit.html.haml
@ -5,7 +5,7 @@
 - add_to_breadcrumbs "#{@runner.short_sha}", group_runner_path(@group, @runner)


-%h2.page-title
+%h1.page-title.gl-font-size-h-display
  = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
  = render 'shared/runners/runner_type_badge', runner: @runner

--- a/app/views/groups/settings/applications/edit.html.haml
+++ b/app/views/groups/settings/applications/edit.html.haml
@ -1,5 +1,5 @@
 - page_title _("Edit"), @application.name, _("Group applications")
 - @content_class = "limit-container-width" unless fluid_layout

-%h1.page-title= _('Edit group application')
+%h1.page-title.gl-font-size-h-display= _('Edit group application')
 = render 'shared/doorkeeper/applications/form', url: group_settings_application_path(@group, @application)
--- a/app/views/groups/settings/applications/show.html.haml
+++ b/app/views/groups/settings/applications/show.html.haml
@ -3,7 +3,7 @@
 - page_title @application.name, _("Group applications")
 - @content_class = "limit-container-width" unless fluid_layout

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("Group application: %{name}") % { name: @application.name }

 = render 'shared/doorkeeper/applications/show',
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@ -1,7 +1,7 @@
 - page_title _('Bitbucket import')
 - header_title _('Projects'), root_path

-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('bitbucket', css_class: 'gl-mr-2')
  = _('Import projects from Bitbucket')
--- a/app/views/import/bitbucket_server/new.html.haml
+++ b/app/views/import/bitbucket_server/new.html.haml
@ -2,7 +2,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')

-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('bitbucket', css_class: 'gl-mr-2')
  = _('Import repositories from Bitbucket Server')
--- a/app/views/import/bitbucket_server/status.html.haml
+++ b/app/views/import/bitbucket_server/status.html.haml
@ -1,6 +1,6 @@
 - page_title _('Bitbucket Server import')

-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('bitbucket', css_class: 'gl-mr-2')
  = _('Import projects from Bitbucket Server')
--- a/app/views/import/fogbugz/new.html.haml
+++ b/app/views/import/fogbugz/new.html.haml
@ -2,7 +2,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')

-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('bug', css_class: 'gl-mr-2')
  = _('Import projects from FogBugz')
--- a/app/views/import/fogbugz/new_user_map.html.haml
+++ b/app/views/import/fogbugz/new_user_map.html.haml
@ -2,7 +2,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')

-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('bug', css_class: 'gl-mr-2')
  = _('Import projects from FogBugz')
--- a/app/views/import/fogbugz/status.html.haml
+++ b/app/views/import/fogbugz/status.html.haml
@ -1,5 +1,5 @@
 - page_title _("FogBugz import")
-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('bug', css_class: 'gl-mr-2')
  = _('Import projects from FogBugz')
--- a/app/views/import/gitea/new.html.haml
+++ b/app/views/import/gitea/new.html.haml
@ -2,7 +2,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = custom_icon('gitea_logo')
  = _('Import Projects from Gitea')

--- a/app/views/import/gitea/status.html.haml
+++ b/app/views/import/gitea/status.html.haml
@ -1,5 +1,5 @@
 - page_title _("Gitea Import")
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = custom_icon('gitea_logo')
  = _('Import Projects from Gitea')

--- a/app/views/import/github/new.html.haml
+++ b/app/views/import/github/new.html.haml
@ -3,7 +3,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = title

 %p
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@ -1,6 +1,6 @@
 - title = has_ci_cd_only_params? ? _('Connect repositories from GitHub') : _('GitHub import')
 - page_title title
-%h1.page-title.mb-0.gl-display-flex
+%h1.page-title.gl-font-size-h-display.mb-0.gl-display-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('github', css_class: 'gl-mr-2')
  = _('Import repositories from GitHub')
--- a/app/views/import/gitlab/status.html.haml
+++ b/app/views/import/gitlab/status.html.haml
@ -1,5 +1,5 @@
 - page_title _("GitLab.com import")
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = sprite_icon('heart', css_class: 'gl-vertical-align-middle')
  = _('Import projects from GitLab.com')

--- a/app/views/import/gitlab_projects/new.html.haml
+++ b/app/views/import/gitlab_projects/new.html.haml
@ -2,7 +2,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')

-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('tanuki', css_class: 'gl-mr-2')
  = _('Import an exported GitLab project')
--- a/app/views/import/manifest/new.html.haml
+++ b/app/views/import/manifest/new.html.haml
@ -3,7 +3,7 @@
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')


-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Manifest file import')

 = render 'import/shared/errors'
--- a/app/views/import/manifest/status.html.haml
+++ b/app/views/import/manifest/status.html.haml
@ -1,6 +1,6 @@
 - page_title _("Manifest import")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('Manifest file import')

 = render 'import/githubish_status', provider: 'manifest'
--- a/app/views/import/phabricator/new.html.haml
+++ b/app/views/import/phabricator/new.html.haml
@ -2,7 +2,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')

-%h1.page-title.d-flex
+%h1.page-title.gl-font-size-h-display.d-flex
  .gl-display-flex.gl-align-items-center.gl-justify-content-center
    = sprite_icon('issues', css_class: 'gl-mr-2')
  = _('Import tasks from Phabricator into issues')
--- a/app/views/invites/show.html.haml
+++ b/app/views/invites/show.html.haml
@ -1,5 +1,5 @@
 - page_title _("Invitation")
-%h1.page-title= _("Invitation")
+%h1.page-title.gl-font-size-h-display= _("Invitation")

 - if current_user_matches_invite?
  - if member?
--- a/app/views/profiles/chat_names/new.html.haml
+++ b/app/views/profiles/chat_names/new.html.haml
@ -1,4 +1,4 @@
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("Authorization required")
 %main{ :role => "main" }
  %p.h4
--- a/app/views/profiles/passwords/new.html.haml
+++ b/app/views/profiles/passwords/new.html.haml
@ -1,7 +1,7 @@
 - page_title _('New Password')
 - breadcrumb_title _('New Password')

-%h1.page-title= _('Set up new password')
+%h1.page-title.gl-font-size-h-display= _('Set up new password')
 %hr
 = form_for @user, url: profile_password_path, method: :post do |f|
  %p.slead
--- a/app/views/projects/_visibility_modal.html.haml
+++ b/app/views/projects/_visibility_modal.html.haml
@ -5,7 +5,7 @@
  .modal-dialog
    .modal-content
      .modal-header
-        %h1.page-title= _('Reduce this project’s visibility?')
+        %h1.page-title.gl-font-size-h-display= _('Reduce this project’s visibility?')
        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
          %span{ "aria-hidden": "true" }= sprite_icon("close")
      .modal-body
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@ -2,7 +2,7 @@
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
-        %h1.page-title= _('Create New Directory')
+        %h1.page-title.gl-font-size-h-display= _('Create New Directory')
        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
          %span{ "aria-hidden": "true" } &times;
      .modal-body
--- a/app/views/projects/blob/_remove.html.haml
+++ b/app/views/projects/blob/_remove.html.haml
@ -2,7 +2,7 @@
  .modal-dialog
    .modal-content
      .modal-header
-        %h1.page-title Delete #{@blob.name}
+        %h1.page-title.gl-font-size-h-display Delete #{@blob.name}
        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
          %span{ "aria-hidden": "true" } &times;

--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@ -2,7 +2,7 @@
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
-        %h1.page-title= title
+        %h1.page-title.gl-font-size-h-display= title
        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
          %span{ "aria-hidden": "true" } &times;
      .modal-body
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@ -15,7 +15,7 @@
      = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start, link_end: '</a>'.html_safe , icon: external_link_icon }


-%h1.page-title.blob-edit-page-title
+%h1.page-title.gl-font-size-h-display.blob-edit-page-title
  Edit file
 .file-editor
  = gl_tabs_nav({ class: 'js-edit-mode nav-links gl-border-0'}) do
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@ -1,7 +1,7 @@
 - breadcrumb_title _("Repository")
 - page_title _("New File"), @path.presence, @ref

-%h1.page-title.blob-new-page-title
+%h1.page-title.blob-new-page-title.gl-font-size-h-display
  = _('New file')
 .file-editor
  = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths(@project)) do
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@ -5,7 +5,7 @@
  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
    = c.body do
      = @error
-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _('New Branch')
 %hr

--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@ -1,7 +1,7 @@
 - breadcrumb_title _("Compare Revisions")
 - page_title _("Compare")

-%h1.page-title
+%h1.page-title.gl-font-size-h-display
  = _("Compare Git revisions")
 .sub-header-block
  - example_branch = capture do
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@ -1,5 +1,5 @@
 - page_title _('Edit Deploy Key')
-%h1.page-title= _('Edit Deploy Key')
+%h1.page-title.gl-font-size-h-display= _('Edit Deploy Key')
 %hr

 %div
--- a/app/views/projects/environments/terminal.html.haml
+++ b/app/views/projects/environments/terminal.html.haml
@ -6,7 +6,7 @@
 .top-area
  .row
    .col-sm-6
-      %h1.page-title
+      %h1.page-title.gl-font-size-h-display
        = _("Terminal for environment")
        = @environment.name

--- a/Show More
+++ b/Show More