Merge pull request #2 from cobraguy/styling

Add styling and dark mode

1 files changed, 24 insertions, 7 deletions

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index 96dbaae..e50c791 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -1,25 +1,26 @@
 <template>
-  <div>
-    <file-upload
+  <div id="action-bar">
+    <FileUpload
       :accept="'text/plain'"
       :multiple="true"
-      @file-changed="handlePtChange">Upload PT Schedule</file-upload>
-    <file-upload
+      @fileChanged="handlePtChange">Upload PT Schedule</FileUpload>
+    <FileUpload
       :accept="'application/json'"
-      @file-changed="handleLabChange">Upload Lab Schedule</file-upload>
-    <button @click="save">Export</button>
+      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
+      <UIButton @click="save">Export</UIButton>
   </div>
 </template>
 
 <script>
 import FileUpload from '@/components/FileUpload.vue';
-
 import { parseLabFile, parsePtSchedule } from '@/features/parser';
+import UIButton from '@/components/UIButton.vue';
 
 export default {
   name: 'ActionBar',
   components: {
     FileUpload,
+    UIButton,
   },
   methods: {
     handleLabChange(files) {
@@ -73,3 +74,19 @@ export default {
   },
 };
 </script>
+
+<style>
+#action-bar {
+  max-width: 100vw;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+#action-bar > * {
+  margin-left: 0.5rem;
+}
+
+#action-bar > *:first-child {
+  margin-left: 0;
+}
+</style>