From 6a152d5cf5f35bc58fc4b659fe6edcb6f94f760c Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 12:35:46 -0500
Subject: Add custom button to normalize styling with FileUpload

---
 src/components/UIButton.vue | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/UIButton.vue

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

diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue
new file mode 100644
index 0000000..59f4686
--- /dev/null
+++ b/src/components/UIButton.vue
@@ -0,0 +1,33 @@
+<template>
+  <button class="ui-button"><slot></slot></button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'UIButton',
+});
+</script>
+
+<style>
+.ui-button {
+  background-color: #500000;
+  border: none;
+  color: white;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 1em;
+  padding: 0.5em;
+}
+
+.ui-button:hover {
+  color: grey;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ui-button {
+    background-color: #81302b;
+  }
+}
+</style>
-- 
cgit v1.2.3


From 432c3d66d7d795ae913c9ee50470ad3a42ccbd58 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 21:17:35 -0500
Subject: Add headers to columns

---
 src/App.vue                    |  1 +
 src/components/EditorLists.vue | 14 ++++++++------
 src/components/FileUpload.vue  |  1 -
 src/components/UIButton.vue    |  1 -
 4 files changed, 9 insertions(+), 8 deletions(-)

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

diff --git a/src/App.vue b/src/App.vue
index 481fa7d..5a1f608 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@
 <style>
 *, *:before, *:after {
   box-sizing: inherit;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 html {
diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
index e802237..60c965c 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="editor-lists">
     <div class="column">
-      <h3>Peer Teachers</h3>
+      <h3 class="column-header">Peer Teachers</h3>
       <List :items="peerTeachers" @selection-changed="handlePtClick" #default="pt">
         <span class="list-item">
           {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">x</button>
@@ -9,7 +9,7 @@
       </List>
     </div>
     <div class="column">
-      <h3>Labs</h3>
+      <h3 class="column-header">Labs</h3>
       <List :items="compatibleLabs" #default="lab">
         <span class="list-item">
           {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button>
@@ -17,7 +17,7 @@
       </List>
     </div>
     <div class="column">
-      <h3>Assignments</h3>
+      <h3 class="column-header">{{ this.selectedPeerTeacher.name }}</h3>
       <List :items="selectedPeerTeacherAssignments" #default="lab">
         <span class="list-item">
           {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">x</button>
@@ -99,8 +99,7 @@ export default defineComponent({
   min-height: 0;
 }
 
-h3 {
-  color: white;
+.column-header {
   margin: 0;
 }
 
@@ -126,11 +125,14 @@ h3 {
   background-color: #500000;
   border: none;
   color: white;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 1em;
 }
 
 @media (prefers-color-scheme: dark) {
+  .column-header {
+    color: white;
+  }
+
   .list-item {
     background-color: #303030;
     color: white;
diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index a70e18d..9318d63 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -29,7 +29,6 @@ export default {
 .file-upload-lbl {
   background-color: #500000;
   color: white;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   padding: 0.5em;
   text-align: center;
 }
diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue
index 59f4686..57b155b 100644
--- a/src/components/UIButton.vue
+++ b/src/components/UIButton.vue
@@ -15,7 +15,6 @@ export default defineComponent({
   background-color: #500000;
   border: none;
   color: white;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 1em;
   padding: 0.5em;
 }
-- 
cgit v1.2.3