Add latest changes from gitlab-org/gitlab@master

2 files changed, 12 insertions, 8 deletions

diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 705bc6fa528..6a96b06dcd8 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -307,11 +307,13 @@ export default {
 
 <template>
   <div
-    class="design-detail js-design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+    class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
   >
-    <gl-loading-icon v-if="isFirstLoading" size="xl" class="align-self-center" />
+    <gl-loading-icon v-if="isFirstLoading" size="xl" class="gl-align-self-center" />
     <template v-else>
-      <div class="d-flex overflow-hidden flex-grow-1 flex-column position-relative">
+      <div
+        class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
+      >
         <design-destroyer
           :filenames="[design.filename]"
           :project-path="projectPath"
@@ -330,7 +332,7 @@ export default {
           </template>
         </design-destroyer>
 
-        <div v-if="errorMessage" class="p-3">
+        <div v-if="errorMessage" class="gl-p-5">
           <gl-alert variant="danger" @dismiss="errorMessage = null">
             {{ errorMessage }}
           </gl-alert>
@@ -347,7 +349,9 @@ export default {
           @moveNote="onMoveNote"
         />
 
-        <div class="design-scaler-wrapper position-absolute mb-4 d-flex-center">
+        <div
+          class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
+        >
           <design-scaler @scale="scale = $event" />
         </div>
       </div>
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index eab46d146da..6e71dca41e9 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -335,7 +335,7 @@ export default {
     @mouseenter="toggleOnPasteListener"
     @mouseleave="toggleOffPasteListener"
   >
-    <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
+    <header v-if="showToolbar" class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex">
       <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full">
         <div>
           <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span>
@@ -375,7 +375,7 @@ export default {
         </div>
       </div>
     </header>
-    <div class="mt-4">
+    <div class="gl-mt-6">
       <gl-loading-icon v-if="isLoading" size="md" />
       <gl-alert v-else-if="error" variant="danger" :dismissible="false">
         {{ __('An error occurred while loading designs. Please try again.') }}
@@ -385,7 +385,7 @@ export default {
         class="card"
         data-testid="design-collection-is-copying"
       >
-        <div class="card-header design-card-header border-bottom-0">
+        <div class="card-header design-card-header gl-border-b-0">
           <div class="card-title gl-display-flex gl-align-items-center gl-my-0 gl-h-7">
             {{
               s__(