Update design index to use GitLab UI classes

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>

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__(

spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -8,7 +8,7 @@ exports[`Design management index page designs does not render toolbar when there
   <!---->
    
   <div
-    class="mt-4"
+    class="gl-mt-6"
   >
     <ol
       class="list-unstyled row"
@@ -92,7 +92,7 @@ exports[`Design management index page designs renders designs list and header wi
   data-testid="designs-root"
 >
   <header
-    class="row-content-block border-top-0 p-2 d-flex"
+    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"
@@ -142,7 +142,7 @@ exports[`Design management index page designs renders designs list and header wi
   </header>
    
   <div
-    class="mt-4"
+    class="gl-mt-6"
   >
     <ol
       class="list-unstyled row"
@@ -243,7 +243,7 @@ exports[`Design management index page designs renders error 1`] = `
   <!---->
    
   <div
-    class="mt-4"
+    class="gl-mt-6"
   >
     <gl-alert-stub
       dismisslabel="Dismiss"
@@ -274,7 +274,7 @@ exports[`Design management index page designs renders loading icon 1`] = `
   <!---->
    
   <div
-    class="mt-4"
+    class="gl-mt-6"
   >
     <gl-loading-icon-stub
       color="orange"
@@ -297,7 +297,7 @@ exports[`Design management index page when has no designs renders design dropzon
   <!---->
    
   <div
-    class="mt-4"
+    class="gl-mt-6"
   >
     <ol
       class="list-unstyled row"

spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Design management design index page renders design index 1`] = `
 <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"
 >
   <div
-    class="d-flex overflow-hidden flex-grow-1 flex-column position-relative"
+    class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
   >
     <design-destroyer-stub
       filenames="test.jpg"
@@ -23,7 +23,7 @@ exports[`Design management design index page renders design index 1`] = `
     />
      
     <div
-      class="design-scaler-wrapper position-absolute mb-4 d-flex-center"
+      class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
     >
       <design-scaler-stub />
     </div>
@@ -132,10 +132,10 @@ exports[`Design management design index page renders design index 1`] = `
 
 exports[`Design management design index page sets loading state 1`] = `
 <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-stub
-    class="align-self-center"
+    class="gl-align-self-center"
     color="orange"
     label="Loading"
     size="xl"
@@ -145,10 +145,10 @@ exports[`Design management design index page sets loading state 1`] = `
 
 exports[`Design management design index page with error GlAlert is rendered in correct position with correct content 1`] = `
 <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"
 >
   <div
-    class="d-flex overflow-hidden flex-grow-1 flex-column position-relative"
+    class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
   >
     <design-destroyer-stub
       filenames="test.jpg"
@@ -157,7 +157,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     />
      
     <div
-      class="p-3"
+      class="gl-p-5"
     >
       <gl-alert-stub
         dismissible="true"
@@ -183,7 +183,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     />
      
     <div
-      class="design-scaler-wrapper position-absolute mb-4 d-flex-center"
+      class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
     >
       <design-scaler-stub />
     </div>