Remove shim classes

Removes temp CSS classes and converts usage
to Gitlab UI utilities

app/assets/stylesheets/utilities.scss

@@ -87,21 +87,5 @@
   }
 }
 
-.gl-shim-h-2 {
-  height: px-to-rem(4px);
-}
-
-.gl-shim-w-5 {
-  width: px-to-rem(16px);
-}
-
-.gl-shim-pb-3 {
-  padding-bottom: 8px;
-}
-
-.gl-shim-pt-5 {
-  padding-top: 16px;
-}
-
 .gl-text-purple { color: $purple; }
 .gl-bg-purple-light { background-color: $purple-light; }

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_progress.vue

@@ -65,22 +65,22 @@ export default {
       </template>
       <section>
         <div class="d-flex align-items-center my-1">
-          <div class="mr-2 bg-transparent gl-shim-w-5 gl-shim-h-2"></div>
+          <div class="mr-2 bg-transparent gl-w-5 gl-h-2"></div>
           <span class="flex-grow-1 mr-3">{{ __('Total') }}</span>
           <span class="font-weight-bold">{{ itemValue.totalCount.toLocaleString() }}</span>
         </div>
         <div class="d-flex align-items-center my-2">
-          <div class="mr-2 bg-success-500 gl-shim-w-5 gl-shim-h-2"></div>
+          <div class="mr-2 bg-success-500 gl-w-5 gl-h-2"></div>
           <span class="flex-grow-1 mr-3">{{ __('Synced') }}</span>
           <span class="font-weight-bold">{{ itemValue.successCount.toLocaleString() }}</span>
         </div>
         <div class="d-flex align-items-center my-2">
-          <div class="mr-2 bg-secondary-200 gl-shim-w-5 gl-shim-h-2"></div>
+          <div class="mr-2 bg-secondary-200 gl-w-5 gl-h-2"></div>
           <span class="flex-grow-1 mr-3">{{ __('Queued') }}</span>
           <span class="font-weight-bold">{{ queuedCount.toLocaleString() }}</span>
         </div>
         <div class="d-flex align-items-center my-2">
-          <div class="mr-2 bg-danger-500 gl-shim-w-5 gl-shim-h-2"></div>
+          <div class="mr-2 bg-danger-500 gl-w-5 gl-h-2"></div>
           <span class="flex-grow-1 mr-3">{{ __('Failed') }}</span>
           <span class="font-weight-bold">{{ itemValue.failureCount.toLocaleString() }}</span>
         </div>

ee/app/views/shared/_shared_runners_minutes_limit.html.haml

@@ -2,7 +2,7 @@
 - return unless notification.show?
 
 %div{ class: [(classes if defined? classes)] }
-  .shared-runner-quota-message.gl-shim-pt-5.gl-shim-pb-3
+  .shared-runner-quota-message.gl-pt-5.gl-pb-3
     .js-vue-alert{ 'v-cloak': true, data: { variant: notification.style,
       secondary_button_text: _('Buy more Pipeline minutes'),
       secondary_button_link: ::EE::SUBSCRIPTIONS_MORE_MINUTES_URL,

ee/spec/frontend/geo_nodes/components/__snapshots__/geo_node_sync_progress_spec.js.snap

@@ -5,7 +5,7 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
   class="d-flex align-items-center my-1"
 >
   <div
-    class="mr-2 bg-transparent gl-shim-w-5 gl-shim-h-2"
+    class="mr-2 bg-transparent gl-w-5 gl-h-2"
   />
    
   <span
@@ -24,7 +24,7 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
 
 exports[`GeoNodeSyncProgress template GlPopover renders each row of popover correctly 2`] = `
 <div
-  class="mr-2 bg-transparent gl-shim-w-5 gl-shim-h-2"
+  class="mr-2 bg-transparent gl-w-5 gl-h-2"
 />
 `;
 
@@ -33,7 +33,7 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
   class="d-flex align-items-center my-2"
 >
   <div
-    class="mr-2 bg-success-500 gl-shim-w-5 gl-shim-h-2"
+    class="mr-2 bg-success-500 gl-w-5 gl-h-2"
   />
    
   <span
@@ -52,7 +52,7 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
 
 exports[`GeoNodeSyncProgress template GlPopover renders each row of popover correctly 4`] = `
 <div
-  class="mr-2 bg-success-500 gl-shim-w-5 gl-shim-h-2"
+  class="mr-2 bg-success-500 gl-w-5 gl-h-2"
 />
 `;
 
@@ -61,7 +61,7 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
   class="d-flex align-items-center my-2"
 >
   <div
-    class="mr-2 bg-secondary-200 gl-shim-w-5 gl-shim-h-2"
+    class="mr-2 bg-secondary-200 gl-w-5 gl-h-2"
   />
    
   <span
@@ -80,7 +80,7 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
 
 exports[`GeoNodeSyncProgress template GlPopover renders each row of popover correctly 6`] = `
 <div
-  class="mr-2 bg-secondary-200 gl-shim-w-5 gl-shim-h-2"
+  class="mr-2 bg-secondary-200 gl-w-5 gl-h-2"
 />
 `;
 
@@ -89,7 +89,7 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
   class="d-flex align-items-center my-2"
 >
   <div
-    class="mr-2 bg-danger-500 gl-shim-w-5 gl-shim-h-2"
+    class="mr-2 bg-danger-500 gl-w-5 gl-h-2"
   />
    
   <span
@@ -108,6 +108,6 @@ exports[`GeoNodeSyncProgress template GlPopover renders each row of popover corr
 
 exports[`GeoNodeSyncProgress template GlPopover renders each row of popover correctly 8`] = `
 <div
-  class="mr-2 bg-danger-500 gl-shim-w-5 gl-shim-h-2"
+  class="mr-2 bg-danger-500 gl-w-5 gl-h-2"
 />
 `;