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


From 21f8621395532eb1d3a6e7fde217eb67ac9374fe Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 12:58:40 -0500
Subject: Make ActionBar horizontally scroll on overflow

---
 src/components/ActionBar.vue | 6 ++++++
 1 file changed, 6 insertions(+)

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

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index da70b8a..279a885 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -76,6 +76,12 @@ export default {
 </script>
 
 <style>
+#action-bar {
+  max-width: 100vw;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
 #action-bar > * {
   margin-left: 0.5rem;
 }
-- 
cgit v1.2.3


From fdc7b50f828e76b1ccfb12cd8f4cf5d88b2a9654 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 15:30:44 -0500
Subject: Small light mode tweak

---
 src/components/ActionBar.vue   | 6 +++---
 src/components/EditorLists.vue | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

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

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index 279a885..e50c791 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="action-bar">
-    <FileUpload
-      :accept="'application/json'"
-      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
     <FileUpload
       :accept="'text/plain'"
       :multiple="true"
       @fileChanged="handlePtChange">Upload PT Schedule</FileUpload>
+    <FileUpload
+      :accept="'application/json'"
+      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
       <UIButton @click="save">Export</UIButton>
   </div>
 </template>
diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
index e70445d..e802237 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -111,6 +111,7 @@ h3 {
 
 .list-item {
   align-items: center;
+  background-color: #f0f0f0;
   display: flex;
   justify-content: space-between;
   margin: 0.5em;
-- 
cgit v1.2.3