6 files changed, 11 insertions, 11 deletions
diff --git a/app/views/ci/variables/_content.html.haml b/app/views/ci/variables/_content.html.haml
index 0b5c1a806b2..144d13565b2 100644
--- a/app/views/ci/variables/_content.html.haml
+++ b/app/views/ci/variables/_content.html.haml
@@ -1,3 +1,3 @@
 = _('Environment variables are applied to environments via the runner. They can be protected by only exposing them to protected branches or tags. Additionally, they can be masked so they are hidden in job logs, though they must match certain regexp requirements to do so. You can use environment variables for passwords, secret keys, or whatever you want.')
 = _('You may also add variables that are made available to the running application by prepending the variable key with <code>K8S_SECRET_</code>.').html_safe
-= link_to _('More information'), help_page_path('ci/variables/README', anchor: 'variables')
+= link_to _('More information'), help_page_path('ci/variables/README', anchor: 'custom-environment-variables')
diff --git a/app/views/ci/variables/_environment_scope_header.html.haml b/app/views/ci/variables/_environment_scope_header.html.haml
index 4ba4ceec16c..fc3b7f925fc 100644
--- a/app/views/ci/variables/_environment_scope_header.html.haml
+++ b/app/views/ci/variables/_environment_scope_header.html.haml
@@ -1,2 +1,2 @@
-.bold.table-section.section-15.append-right-10
+.bold.table-section.section-15.gl-mr-3
   = s_('CiVariables|Scope')
diff --git a/app/views/ci/variables/_header.html.haml b/app/views/ci/variables/_header.html.haml
index ce4dd5a4877..d0148e455de 100644
--- a/app/views/ci/variables/_header.html.haml
+++ b/app/views/ci/variables/_header.html.haml
@@ -2,7 +2,7 @@
 
 %h4
   = _('Variables')
-  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'variables'), target: '_blank', rel: 'noopener noreferrer'
+  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'custom-environment-variables'), target: '_blank', rel: 'noopener noreferrer'
 
 %button.btn.btn-default.js-settings-toggle{ type: 'button' }
   = expanded ? _('Collapse') : _('Expand')
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index fa5f2c514ae..8d379774719 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -2,7 +2,7 @@
 
 - if ci_variable_protected_by_default?
   %p.settings-message.text-center
-    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protected-variables') }
+    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protect-a-custom-variable') }
     = s_('Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
 - if Feature.enabled?(:new_variables_ui, @project || @group, default_enabled: true)
@@ -36,7 +36,7 @@
           %span.hide.js-ci-variables-save-loading-icon
             .spinner.spinner-light.mr-1
           = _('Save variables')
-        %button.btn.btn-info.btn-inverted.prepend-left-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }
+        %button.btn.btn-info.btn-inverted.gl-ml-3.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }
           - if @variables.size == 0
             = n_('Hide value', 'Hide values', @variables.size)
           - else
diff --git a/app/views/ci/variables/_variable_header.html.haml b/app/views/ci/variables/_variable_header.html.haml
index d3b7a5ae883..65cea00a0c4 100644
--- a/app/views/ci/variables/_variable_header.html.haml
+++ b/app/views/ci/variables/_variable_header.html.haml
@@ -2,11 +2,11 @@
 
 %li.ci-variable-row.m-0.d-none.d-sm-block
   .d-flex.w-100.align-items-center.pb-2
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-15.gl-mr-3
       = s_('CiVariables|Type')
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-15.gl-mr-3
       = s_('CiVariables|Key')
-    .bold.table-section.section-15.append-right-10
+    .bold.table-section.section-15.gl-mr-3
       = s_('CiVariables|Value')
     - unless only_key_value
       .bold.table-section.section-20
diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index 4244556a24a..c69a3adb0e9 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -39,10 +39,10 @@
         = value
       %p.masking-validation-error.gl-field-error.hide
         = s_("CiVariables|Cannot use Masked Variable with current value")
-        = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'masked-variables'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'mask-a-custom-variable'), target: '_blank', rel: 'noopener noreferrer'
     - unless only_key_value
       .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0
-        .append-right-default
+        .gl-mr-3
           = s_("CiVariable|Protected")
         = render "shared/buttons/project_feature_toggle", is_checked: is_protected, label: s_("CiVariable|Toggle protected") do
           %input{ type: "hidden",
@@ -51,7 +51,7 @@
             value: is_protected,
             data: { default: is_protected_default.to_s } }
       .ci-variable-body-item.ci-variable-masked-item.table-section.section-20.mr-0.border-top-0
-        .append-right-default
+        .gl-mr-3
           = s_("CiVariable|Masked")
         = render "shared/buttons/project_feature_toggle", is_checked: is_masked, label: s_("CiVariable|Toggle masked"), class_list: "js-project-feature-toggle project-feature-toggle qa-variable-masked" do
           %input{ type: "hidden",