1 files changed, 13 insertions, 7 deletions

diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
index 533065b2d4d..0f145dbc170 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
@@ -1,17 +1,17 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
 import { featureAccessLevelNone } from '../constants';
 
 export default {
   components: {
+    GlIcon,
     projectFeatureToggle,
   },
-
   model: {
     prop: 'value',
     event: 'change',
   },
-
   props: {
     name: {
       type: String,
@@ -34,7 +34,6 @@ export default {
       default: false,
     },
   },
-
   computed: {
     featureEnabled() {
       return this.value !== 0;
@@ -51,7 +50,6 @@ export default {
       return this.disabledInput || !this.featureEnabled || this.displayOptions.length < 2;
     },
   },
-
   methods: {
     toggleFeature(featureEnabled) {
       if (featureEnabled === false || this.options.length < 1) {
@@ -70,14 +68,18 @@ export default {
 </script>
 
 <template>
-  <div :data-for="name" class="project-feature-controls">
+  <div
+    :data-for="name"
+    class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0"
+  >
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <project-feature-toggle
+      class="gl-flex-grow-0 gl-mr-3"
       :value="featureEnabled"
       :disabled-input="disabledInput"
       @change="toggleFeature"
     />
-    <div class="select-wrapper">
+    <div class="select-wrapper gl-flex-fill-1">
       <select
         :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"
@@ -92,7 +94,11 @@ export default {
           {{ optionName }}
         </option>
       </select>
-      <i aria-hidden="true" class="fa fa-chevron-down"> </i>
+      <gl-icon
+        name="chevron-down"
+        aria-hidden="true"
+        class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
+      />
     </div>
   </div>
 </template>