From 65d0dbb9b3388e03c312c1dd456feeef740289e0 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 12:49:14 -0500
Subject: Start styling and add initial dark mode support

---
 src/components/ActionBar.vue | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

(limited to 'src/components/ActionBar.vue')

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index 96dbaae..da70b8a 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="'application/json'"
+      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
+    <FileUpload
       :accept="'text/plain'"
       :multiple="true"
-      @file-changed="handlePtChange">Upload PT Schedule</file-upload>
-    <file-upload
-      :accept="'application/json'"
-      @file-changed="handleLabChange">Upload Lab Schedule</file-upload>
-    <button @click="save">Export</button>
+      @fileChanged="handlePtChange">Upload PT 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,13 @@ export default {
   },
 };
 </script>
+
+<style>
+#action-bar > * {
+  margin-left: 0.5rem;
+}
+
+#action-bar > *:first-child {
+  margin-left: 0;
+}
+</style>
-- 
cgit v1.2.3

