Start styling and add initial dark mode support

4 files changed, 36 insertions, 12 deletions

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>
diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
index ae0aa22..26e0ecc 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="editor">
+  <div id="editor-lists">
     <div class="column">
       <list :items="peerTeachers" @selection-changed="handlePtClick" #default="pt">
         {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">X</button>
@@ -84,9 +84,10 @@ export default defineComponent({
 </script>
 
 <style>
-#editor {
+#editor-lists {
   display: flex;
   max-height: inherit;
+  min-height: 0;
 }
 
 .column {
diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index b2fdb14..a70e18d 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -30,7 +30,7 @@ export default {
   background-color: #500000;
   color: white;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  padding: 5px;
+  padding: 0.5em;
   text-align: center;
 }
 
@@ -38,4 +38,10 @@ export default {
   color: grey;
   cursor: pointer;
 }
+
+@media (prefers-color-scheme: dark) {
+  .file-upload-lbl {
+    background-color: #81302b;
+  }
+}
 </style>
diff --git a/src/components/List.vue b/src/components/List.vue
index 031f708..843370e 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -28,7 +28,6 @@ export default {
 }
 
 .list-item {
-  border: 1px solid grey;
   border-radius: 5px;
   margin: 5px 0;
   padding: 0.15em;
@@ -38,4 +37,11 @@ export default {
 .list-item:hover {
   background-color: rgb(182, 182, 182);
 }
+
+@media (prefers-color-scheme: dark) {
+  .list-item {
+    background-color: #303030;
+    color: white;
+  }
+}
 </style>