1 files changed, 21 insertions, 15 deletions
diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index 192d6e056cd..be09052fb7e 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -1,6 +1,6 @@
 <script>
+import { GlButton, GlLoadingIcon, GlIntersectionObserver, GlModal, GlFormInput } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { GlButton, GlLoadingIcon, GlIntersectionObserver, GlModal } from '@gitlab/ui';
 import { n__, __, sprintf } from '~/locale';
 import ProviderRepoTableRow from './provider_repo_table_row.vue';
 
@@ -12,6 +12,7 @@ export default {
     GlButton,
     GlModal,
     GlIntersectionObserver,
+    GlFormInput,
   },
   props: {
     providerTitle: {
@@ -115,13 +116,13 @@ export default {
 
 <template>
   <div>
-    <p class="light text-nowrap mt-2">
+    <p class="gl-text-gray-900 gl-white-space-nowrap gl-mt-3">
       {{ s__('ImportProjects|Select the repositories you want to import') }}
     </p>
     <template v-if="hasIncompatibleRepos">
       <slot name="incompatible-repos-warning"></slot>
     </template>
-    <div class="d-flex justify-content-between align-items-end flex-wrap mb-3">
+    <div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap gl-mb-5">
       <gl-button
         variant="success"
         :loading="isImportingAnyRepo"
@@ -148,24 +149,29 @@ export default {
 
       <slot name="actions"></slot>
       <form v-if="filterable" class="gl-ml-auto" novalidate @submit.prevent>
-        <input
+        <gl-form-input
           data-qa-selector="githubish_import_filter_field"
-          class="form-control"
           name="filter"
           :placeholder="__('Filter your repositories by name')"
           autofocus
-          size="40"
+          size="lg"
           @keyup.enter="setFilter($event.target.value)"
         />
       </form>
     </div>
-    <div v-if="repositories.length" class="table-responsive">
-      <table class="table import-table">
-        <thead>
-          <th class="import-jobs-from-col">{{ fromHeaderText }}</th>
-          <th class="import-jobs-to-col">{{ __('To GitLab') }}</th>
-          <th class="import-jobs-status-col">{{ __('Status') }}</th>
-          <th class="import-jobs-cta-col"></th>
+    <div v-if="repositories.length" class="gl-w-full">
+      <table>
+        <thead class="gl-border-0 gl-border-solid gl-border-t-1 gl-border-gray-100">
+          <th class="import-jobs-from-col gl-p-4 gl-vertical-align-top gl-border-b-1">
+            {{ fromHeaderText }}
+          </th>
+          <th class="import-jobs-to-col gl-p-4 gl-vertical-align-top gl-border-b-1">
+            {{ __('To GitLab') }}
+          </th>
+          <th class="import-jobs-status-col gl-p-4 gl-vertical-align-top gl-border-b-1">
+            {{ __('Status') }}
+          </th>
+          <th class="import-jobs-cta-col gl-p-4 gl-vertical-align-top gl-border-b-1"></th>
         </thead>
         <tbody>
           <template v-for="repo in repositories">
@@ -183,9 +189,9 @@ export default {
       :key="pagePaginationStateKey"
       @appear="fetchRepos"
     />
-    <gl-loading-icon v-if="isLoading" class="import-projects-loading-icon" size="md" />
+    <gl-loading-icon v-if="isLoading" class="gl-mt-7" size="md" />
 
-    <div v-if="!isLoading && repositories.length === 0" class="text-center">
+    <div v-if="!isLoading && repositories.length === 0" class="gl-text-center">
       <strong>{{ emptyStateText }}</strong>
     </div>
   </div>