Replace `m-2` class with `gl-m-3`

Replace the m-2 class with the
utility css class gl-m-2

Update some snapshot specs

app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue

@@ -67,7 +67,7 @@ export default {
 </script>
 <template>
   <gl-deprecated-dropdown :text="value">
-    <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
+    <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
     <gl-deprecated-dropdown-item
       v-for="environment in filteredResults"
       :key="environment"

app/assets/javascripts/clusters/components/knative_domain_editor.vue

@@ -130,7 +130,7 @@ export default {
         <gl-search-box-by-type
           v-model.trim="searchQuery"
           :placeholder="s__('ClusterIntegration|Search domains')"
-          class="m-2"
+          class="gl-m-3"
         />
         <gl-deprecated-dropdown-item
           v-for="domain in filteredDomains"

app/assets/javascripts/jira_import/components/jira_import_form.vue

@@ -278,7 +278,7 @@ export default {
             "
             @hide="resetDropdown"
           >
-            <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
+            <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
 
             <div v-if="isFetching" class="gl-text-center">
               <gl-loading-icon />

app/assets/javascripts/milestones/project_milestone_combobox.vue

@@ -184,7 +184,7 @@ export default {
 
     <gl-search-box-by-type
       v-model.trim="searchQuery"
-      class="m-2"
+      class="gl-m-3"
       :placeholder="this.$options.translations.searchMilestones"
       @input="searchMilestones"
     />

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -192,7 +192,7 @@ export default {
       >
         <div class="d-flex flex-column overflow-hidden">
           <gl-new-dropdown-header>{{ __('Environment') }}</gl-new-dropdown-header>
-          <gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" />
+          <gl-search-box-by-type class="gl-m-3" @input="debouncedEnvironmentsSearch" />
 
           <gl-loading-icon v-if="environmentsLoading" :inline="true" />
           <div v-else class="flex-fill overflow-auto">

app/assets/javascripts/monitoring/components/dashboards_dropdown.vue

@@ -83,7 +83,7 @@ export default {
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"
-        class="m-2"
+        class="gl-m-3"
       />
 
       <div class="flex-fill overflow-auto">

app/assets/javascripts/projects/commits/components/author_select.vue

@@ -119,7 +119,7 @@ export default {
       <gl-new-dropdown-divider />
       <gl-search-box-by-type
         v-model.trim="authorInput"
-        class="m-2"
+        class="gl-m-3"
         :placeholder="__('Search')"
         @input="searchAuthors"
       />

ee/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue

@@ -78,7 +78,7 @@ export default {
     </template>
     <gl-search-box-by-type
       v-model.trim="environmentSearch"
-      class="m-2"
+      class="gl-m-3"
       @input="fetchEnvironments"
     />
     <gl-loading-icon v-if="isLoading" />

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue

@@ -49,7 +49,7 @@ export default {
 
 <template>
   <gl-deprecated-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces('')">
-    <gl-search-box-by-type class="m-2" :debounce="500" @input="fetchSyncNamespaces" />
+    <gl-search-box-by-type class="gl-m-3" :debounce="500" @input="fetchSyncNamespaces" />
     <li v-for="namespace in synchronizationNamespaces" :key="namespace.id">
       <gl-deprecated-button class="d-flex align-items-center" @click="toggleNamespace(namespace)">
         <gl-icon :class="[{ invisible: !isSelected(namespace) }]" name="mobile-issue-close" />

ee/app/assets/javascripts/security_dashboard/components/filter.vue

@@ -90,7 +90,7 @@ export default {
         v-if="filter.options.length >= 20"
         ref="searchBox"
         v-model="filterTerm"
-        class="m-2"
+        class="gl-m-3"
         :placeholder="__('Filter...')"
       />
 

ee/app/assets/javascripts/security_dashboard/components/vulnerability_list.vue

@@ -369,7 +369,7 @@ export default {
         <gl-skeleton-loading
           v-for="n in $options.VULNERABILITIES_PER_PAGE"
           :key="n"
-          class="m-2 js-skeleton-loader"
+          class="gl-m-3 js-skeleton-loader"
           :lines="2"
         />
       </template>

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -214,7 +214,7 @@ export default {
           data-track-label="review_app"
           @click="ok"
         >
-          <gl-search-box-by-type v-model.trim="changesSearchTerm" class="m-2" />
+          <gl-search-box-by-type v-model.trim="changesSearchTerm" class="gl-m-3" />
           <template #button-content>
             {{ s__('VisualReviewApp|Open review app') }}
             <gl-icon class="fgray" name="external-link" />

spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap

@@ -114,7 +114,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             <!---->
              
             <div
-              class="gl-search-box-by-type m-2"
+              class="gl-search-box-by-type gl-m-3"
             >
               <svg
                 class="gl-search-box-by-type-search-icon gl-icon s16"
@@ -225,7 +225,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             <!---->
              
             <div
-              class="gl-search-box-by-type m-2"
+              class="gl-search-box-by-type gl-m-3"
             >
               <svg
                 class="gl-search-box-by-type-search-icon gl-icon s16"

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -23,12 +23,12 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         toggle-class="dropdown-menu-toggle"
       />
     </div>
-     
+
     <span
       aria-hidden="true"
       class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"
     />
-     
+
     <div
       class="mb-2 pr-2 d-flex d-sm-block"
     >
@@ -50,28 +50,28 @@ exports[`Dashboard template matches the default snapshot 1`] = `
           <gl-new-dropdown-header-stub>
             Environment
           </gl-new-dropdown-header-stub>
-           
+
           <gl-search-box-by-type-stub
-            class="m-2"
+            class="gl-m-3"
             clearbuttontitle="Clear"
             value=""
           />
-           
+
           <div
             class="flex-fill overflow-auto"
           />
-           
+
           <div
             class="text-secondary no-matches-message"
           >
-            
+
           No matching results
-        
+
           </div>
         </div>
       </gl-new-dropdown-stub>
     </div>
-     
+
     <div
       class="mb-2 pr-2 d-flex d-sm-block"
     >
@@ -83,24 +83,24 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         value="[object Object]"
       />
     </div>
-     
+
     <div
       class="mb-2 pr-2 d-flex d-sm-block"
     >
       <refresh-button-stub />
     </div>
-     
+
     <div
       class="flex-grow-1"
     />
-     
+
     <div
       class="d-sm-flex"
     >
       <!---->
-       
+
       <!---->
-       
+
       <div
         class="gl-mb-3 gl-mr-3 d-flex d-sm-block"
       >
@@ -111,11 +111,11 @@ exports[`Dashboard template matches the default snapshot 1`] = `
           validatequerypath="/monitoring/monitor-project/prometheus/metrics/validate_query"
         />
       </div>
-       
+
       <!---->
     </div>
   </div>
-   
+
   <empty-state-stub
     clusterspath="/monitoring/monitor-project/-/clusters"
     documentationpath="/help/administration/monitoring/prometheus/index.md"