Added row hover styles to IDE file list

Closes #44293

2 files changed, 44 insertions, 42 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 769e9b79cad..00896e04e8b 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -1,49 +1,47 @@
 <script>
-  import { mapActions } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import newModal from './modal.vue';
-  import upload from './upload.vue';
+import { mapActions } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import newModal from './modal.vue';
+import upload from './upload.vue';
 
-  export default {
-    components: {
-      icon,
-      newModal,
-      upload,
+export default {
+  components: {
+    icon,
+    newModal,
+    upload,
+  },
+  props: {
+    branch: {
+      type: String,
+      required: true,
     },
-    props: {
-      branch: {
-        type: String,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: true,
-      },
+    path: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        openModal: false,
-        modalType: '',
-        dropdownOpen: false,
-      };
+  },
+  data() {
+    return {
+      openModal: false,
+      modalType: '',
+      dropdownOpen: false,
+    };
+  },
+  methods: {
+    ...mapActions(['createTempEntry']),
+    createNewItem(type) {
+      this.modalType = type;
+      this.openModal = true;
+      this.dropdownOpen = false;
     },
-    methods: {
-      ...mapActions([
-        'createTempEntry',
-      ]),
-      createNewItem(type) {
-        this.modalType = type;
-        this.openModal = true;
-        this.dropdownOpen = false;
-      },
-      hideModal() {
-        this.openModal = false;
-      },
-      openDropdown() {
-        this.dropdownOpen = !this.dropdownOpen;
-      },
+    hideModal() {
+      this.openModal = false;
     },
-  };
+    openDropdown() {
+      this.dropdownOpen = !this.dropdownOpen;
+    },
+  },
+};
 </script>
 
 <template>
@@ -59,6 +57,7 @@
         class="btn btn-sm btn-default dropdown-toggle add-to-tree"
         aria-label="Create new file or directory"
         @click.stop="openDropdown()"
+        @blur="openDropdown"
       >
         <icon
           name="plus"
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 65046f6665e..3166d0d58df 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -43,7 +43,7 @@
     cursor: pointer;
 
     &.file-open {
-      background: $white-normal;
+      background: $link-active-background;
     }
 
     .ide-file-name {
@@ -72,7 +72,10 @@
       margin-right: -8px;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
+      background: $link-active-background;
+
       .ide-new-btn {
         display: block;
       }