Start styling and add initial dark mode support

3 files changed, 61 insertions, 37 deletions

diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index ac2bde1..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="about">
-    <router-link to="/editor">Create new database</router-link>
-    <file-upload
-      :accept="'application/json'"
-      @file-changed="handleDatabaseChange">Use existing database</file-upload>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import FileUpload from '../components/FileUpload.vue';
-
-import { parsePtDatabase } from '../features/parser';
-
-export default defineComponent({
-  name: 'About',
-  components: {
-    FileUpload,
-  },
-  methods: {
-    handleDatabaseChange(files: File[]) {
-      parsePtDatabase(files[0]).then((result) => {
-        this.$store.commit('setLabs', result.labs);
-        this.$store.commit('setPeerTeachers', result.peerTeachers);
-        this.$router.push({ name: 'Editor' });
-      });
-    },
-  },
-});
-</script>
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index b4a2e8e..982ff90 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -1,16 +1,16 @@
 <template>
-  <div id="home">
-    <action-bar />
-    <editor-lists :peerTeachers="peerTeachers" :labs="labs" />
+  <div id="editor">
+    <ActionBar />
+    <EditorLists :peerTeachers="peerTeachers" :labs="labs" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
 import ActionBar from '@/components/ActionBar.vue';
+import { defineComponent } from 'vue';
 import EditorLists from '@/components/EditorLists.vue';
-import PeerTeacher from '@/models/PeerTeacher';
 import Lab from '@/models/Lab';
+import PeerTeacher from '@/models/PeerTeacher';
 
 export default defineComponent({
   name: 'Editor',
@@ -32,7 +32,9 @@ export default defineComponent({
 </script>
 
 <style>
-#home {
+#editor {
+  display: flex;
+  flex-direction: column;
   max-height: inherit;
 }
 </style>
diff --git a/src/views/Start.vue b/src/views/Start.vue
new file mode 100644
index 0000000..567582d
--- /dev/null
+++ b/src/views/Start.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="start">
+    <router-link to="/editor">
+      <UIButton>Create new database</UIButton>
+    </router-link>
+    <FileUpload
+      :accept="'application/json'"
+      @fileChanged="handleDatabaseChange">Use existing database</FileUpload>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FileUpload from '@/components/FileUpload.vue';
+import { parsePtDatabase } from '@/features/parser';
+import UIButton from '@/components/UIButton.vue';
+
+export default defineComponent({
+  name: 'Start',
+  components: {
+    FileUpload,
+    UIButton,
+  },
+  methods: {
+    handleDatabaseChange(files: File[]) {
+      parsePtDatabase(files[0]).then((result) => {
+        this.$store.commit('setLabs', result.labs);
+        this.$store.commit('setPeerTeachers', result.peerTeachers);
+        this.$router.push({ name: 'Editor' });
+      });
+    },
+  },
+});
+</script>
+
+<style>
+#start {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  height: 100vh;
+  justify-content: center;
+}
+
+#start > * {
+  margin-top: 1em;
+}
+
+#start > *:first-child {
+  margin-top: 0;
+}
+</style>