Resolve "Improve button appearance in dialog for student data export"

frontend/src/components/util/FileSelect.vue

 <template>
   <label class="file-select">
-    <div class="select-button">
+    <div id="selectButton" 
+         class="select-button">
       <span v-if="value">Selected: {{ value.name }}</span>
       <span v-else>{{ displayText }}</span>
     </div>
@@ -21,10 +22,15 @@ export default {
       default: 'Select File'
     }
   },
+  data() {
+    return {
+      hover: false,
+    }
+  },
   methods: {
     handleFileChange (e) {
       this.$emit('input', e.target.files[0])
-    }
+    },
   }
 }
 </script>
@@ -43,6 +49,12 @@ export default {
     max-width: fit-content;
   }
 
+  .select-button:hover {
+    background-color: #2f7451;
+    cursor: pointer;
+  }
+  
+
   .file-select > input[type="file"] {
     display: none;
   }