Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

7 files changed, 23 insertions, 26 deletions

diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index cec53869aa8..b2844ed5ad6 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -33,7 +33,7 @@ export default {
 
 <template>
   <div class="environments-container">
-    <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" label="Loading environments" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" label="Loading environments" />
 
     <slot name="empty-state"></slot>
 
diff --git a/app/assets/javascripts/environments/components/deploy_board_wrapper.vue b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue
index d9d77088ad3..d1132bc6e24 100644
--- a/app/assets/javascripts/environments/components/deploy_board_wrapper.vue
+++ b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue
@@ -25,7 +25,7 @@ export default {
   },
   computed: {
     icon() {
-      return this.visible ? 'angle-down' : 'angle-right';
+      return this.visible ? 'chevron-lg-down' : 'chevron-lg-right';
     },
     label() {
       return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
diff --git a/app/assets/javascripts/environments/components/environment_folder.vue b/app/assets/javascripts/environments/components/environment_folder.vue
index 788c3ba6fed..881f404340d 100644
--- a/app/assets/javascripts/environments/components/environment_folder.vue
+++ b/app/assets/javascripts/environments/components/environment_folder.vue
@@ -47,8 +47,8 @@ export default {
   computed: {
     icons() {
       return this.visible
-        ? { caret: 'angle-down', folder: 'folder-open' }
-        : { caret: 'angle-right', folder: 'folder-o' };
+        ? { caret: 'chevron-lg-down', folder: 'folder-open' }
+        : { caret: 'chevron-lg-right', folder: 'folder-o' };
     },
     label() {
       return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
diff --git a/app/assets/javascripts/environments/components/environment_form.vue b/app/assets/javascripts/environments/components/environment_form.vue
index 1d1d8d61b66..1bac0ef1359 100644
--- a/app/assets/javascripts/environments/components/environment_form.vue
+++ b/app/assets/javascripts/environments/components/environment_form.vue
@@ -81,27 +81,24 @@ export default {
 </script>
 <template>
   <div>
-    <h3 class="page-title">
+    <h1 class="page-title gl-font-size-h-display">
       {{ title }}
-    </h3>
-    <hr />
-    <div class="row gl-mt-3 gl-mb-3">
-      <div class="col-lg-3">
-        <h4 class="gl-mt-0">
-          {{ $options.i18n.header }}
-        </h4>
-        <p>
-          <gl-sprintf :message="$options.i18n.helpMessage">
-            <template #link="{ content }">
-              <gl-link :href="$options.helpPagePath">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </p>
-      </div>
+    </h1>
+    <div class="row col-12">
+      <h4 class="gl-mt-0">
+        {{ $options.i18n.header }}
+      </h4>
+      <p class="gl-w-full">
+        <gl-sprintf :message="$options.i18n.helpMessage">
+          <template #link="{ content }">
+            <gl-link :href="$options.helpPagePath">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
       <gl-form
         id="new_environment"
         :aria-label="title"
-        class="col-lg-9"
+        class="gl-w-full"
         @submit.prevent="$emit('submit')"
       >
         <gl-form-group
@@ -144,7 +141,7 @@ export default {
           />
         </gl-form-group>
 
-        <div class="form-actions">
+        <div class="gl-mr-6">
           <gl-button
             :loading="loading"
             type="submit"
diff --git a/app/assets/javascripts/environments/components/environments_detail_header.vue b/app/assets/javascripts/environments/components/environments_detail_header.vue
index d71b553a878..13b9cf14f52 100644
--- a/app/assets/javascripts/environments/components/environments_detail_header.vue
+++ b/app/assets/javascripts/environments/components/environments_detail_header.vue
@@ -94,9 +94,9 @@ export default {
 <template>
   <header class="top-area gl-justify-content-between">
     <div class="gl-display-flex gl-flex-grow-1 gl-align-items-center">
-      <h3 class="page-title">
+      <h1 class="page-title gl-font-size-h-display">
         {{ environment.name }}
-      </h3>
+      </h1>
       <p v-if="shouldShowCancelAutoStopButton" class="gl-mb-0 gl-ml-3" data-testid="auto-stops-at">
         <gl-sprintf :message="$options.i18n.autoStopAtText">
           <template #autoStopAt>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 7fcd6e5fff8..895a6cf2ccb 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -177,7 +177,7 @@ export default {
 
       <template v-if="shouldRenderFolderContent(model)">
         <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
-          <gl-loading-icon size="md" class="gl-mt-5" />
+          <gl-loading-icon size="lg" class="gl-mt-5" />
         </div>
 
         <template v-else>
diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue
index f5e9d612316..75bd473497b 100644
--- a/app/assets/javascripts/environments/components/new_environment_item.vue
+++ b/app/assets/javascripts/environments/components/new_environment_item.vue
@@ -83,7 +83,7 @@ export default {
   },
   computed: {
     icon() {
-      return this.visible ? 'angle-down' : 'angle-right';
+      return this.visible ? 'chevron-lg-down' : 'chevron-lg-right';
     },
     externalUrl() {
       return this.environment.externalUrl;