Added row hover styles to IDE file list

Closes #44293

app/assets/javascripts/ide/components/new_dropdown/index.vue

 <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 {
+export default {
   components: {
     icon,
     newModal,
@@ -28,9 +28,7 @@
     };
   },
   methods: {
-      ...mapActions([
-        'createTempEntry',
-      ]),
+    ...mapActions(['createTempEntry']),
     createNewItem(type) {
       this.modalType = type;
       this.openModal = true;
@@ -43,7 +41,7 @@
       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"

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;
       }

changelogs/unreleased/ide-file-row-hover-style.yml

+---
+title: Added hover background color to IDE file list rows
+merge_request:
+author:
+type: changed