More styling updates.

app/src/App.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { RouterLink, RouterView, useRouter } from 'vue-router'
+import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import AlertDialog from './components/AlertDialog.vue'
 import AnnouncementsBanner from './components/AnnouncementsBanner.vue'
+import { computed } from 'vue'
 
 const authStore = useAuthStore()
 const router = useRouter()
+const route = useRoute()
+
+const onLoginPage = computed(() => route.path === '/login')
 
 async function logOut() {
   authStore.logOut()
@@ -16,17 +20,19 @@ async function logOut() {
 <template>
   <header>
     <div>
-      <nav class="global-navbar">
+      <nav class="global-navbar" v-if="!onLoginPage">
         <div>
-          <RouterLink to="/">Home</RouterLink>
-          <RouterLink to="/my-account" v-if="authStore.state">My Account</RouterLink>
-          <RouterLink to="/admin-dashboard" v-if="authStore.admin">Admin</RouterLink>
+          <span style="font-weight: bold; font-size: large;">Teacher Tools</span>
+          <RouterLink class="link" to="/">Apps</RouterLink>
+          <RouterLink class="link" to="/my-account" v-if="authStore.state">My Account</RouterLink>
+          <RouterLink class="link" to="/admin-dashboard" v-if="authStore.admin">Admin</RouterLink>
         </div>
 
         <div>
-          <RouterLink to="/login" v-if="!authStore.state">Login</RouterLink>
-          <span v-if="authStore.state" style="margin-right: 0.5em">
-            Logged in as <span v-text="authStore.state.username" style="font-weight: bold;"></span>
+          <RouterLink class="link" to="/login" v-if="!authStore.state">Login</RouterLink>
+          <span v-if="authStore.state" style="margin-right: 0.25em; font-style: italic; font-size: smaller;">
+            Logged in as <span v-text="authStore.state.username"
+              style="font-weight: bold; font-style: normal; font-size: medium;"></span>
           </span>
           <button type="button" @click="logOut" v-if="authStore.state">Log out</button>
         </div>
@@ -52,7 +58,7 @@ async function logOut() {
   display: inline-block;
 }
 
-.global-navbar>div>a+a {
-  margin-left: 0.5em;
+.global-navbar>div>*+* {
+  margin-left: 1em;
 }
 </style>

app/src/alerts.ts

@@ -2,16 +2,31 @@
  * Shows a simple message dialog, with a 'close' button. It uses a pre-rendered
  * dialog element that's globally defined for the whole app.
  * @param msg The message to show.
+ * @param alertType The type of alert. "info", "warning", "error"
  * @returns A promise that resolves when the alert is closed.
  */
-export function showAlert(msg: string): Promise<void> {
+export function showAlert(msg: string, alertType: string = 'info'): Promise<void> {
   const dialog = document.getElementById('alert-dialog') as HTMLDialogElement
+  dialog.classList.remove('alert-dialog-error', 'alert-dialog-warning') // Clear old styling classes if they're present.
+  if (alertType === 'warning') {
+    dialog.classList.add('alert-dialog-warning')
+  } else if (alertType === 'error') {
+    dialog.classList.add('alert-dialog-error')
+  }
   const messageBox = document.getElementById('alert-dialog-message') as HTMLParagraphElement
   const closeButton = document.getElementById('alert-dialog-close-button') as HTMLButtonElement
-  closeButton.addEventListener('click', () => dialog.close())
+  closeButton.addEventListener('click', closeAlertDialog)
   messageBox.innerText = msg
   dialog.showModal()
   return new Promise((resolve) => {
-    dialog.addEventListener('close', () => resolve())
+    dialog.addEventListener('close', () => {
+      closeButton.removeEventListener('click', closeAlertDialog)
+      resolve()
+    })
   })
 }
+
+function closeAlertDialog() {
+  const dialog = document.getElementById('alert-dialog') as HTMLDialogElement
+  dialog.close()
+}

app/src/api/base.ts

@@ -30,12 +30,29 @@ export class APIResponse<T> {
   async handleErrorsWithAlert(): Promise<T | null> {
     const value = await this.result
     if (value instanceof APIError) {
-      await showAlert(value.message)
+      if (value instanceof BadRequestError || value instanceof AuthenticationError) {
+        await showAlert(value.message, 'warning')
+      } else {
+        await showAlert(value.message, 'error')
+      }
       return null
     }
     return value
   }
 
+  async handleErrorsWithAlertNoBody(): Promise<boolean> {
+    const value = await this.result
+    if (value instanceof APIError) {
+      if (value instanceof BadRequestError || value instanceof AuthenticationError) {
+        await showAlert(value.message, 'warning')
+      } else {
+        await showAlert(value.message, 'error')
+      }
+      return false
+    }
+    return true
+  }
+
   async getOrThrow(): Promise<T> {
     const value = await this.result
     if (value instanceof APIError) throw value

app/src/apps/classroom_compliance/ClassItem.vue

@@ -24,6 +24,8 @@ const router = useRouter()
   padding: 10px;
   cursor: pointer;
   max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .class-item:hover {

app/src/apps/classroom_compliance/ClassView.vue

@@ -78,9 +78,9 @@ async function resetStudentDesks() {
 </script>
 <template>
   <div v-if="cls">
-    <h1>Class <span v-text="cls.number"></span></h1>
-    <p>School Year: <span v-text="cls.schoolYear"></span></p>
-    <div class="button-bar" style="margin-bottom: 1em;">
+    <h1 class="align-center" style="margin-bottom: 0;">Class <span v-text="cls.number"></span></h1>
+    <p class="align-center" style="margin-top: 0; margin-bottom: 2em;">For the {{ cls.schoolYear }} school year.</p>
+    <div class="button-bar align-center" style="margin-bottom: 1em;">
       <button type="button" @click="router.push(`/classroom-compliance/classes/${cls.id}/edit-student`)">Add
         Student</button>
       <button type="button" @click="router.push(`/classroom-compliance/classes/${cls.id}/import-students`)">Import
@@ -89,16 +89,18 @@ async function resetStudentDesks() {
       <button type="button" @click="deleteThisClass">Delete this Class</button>
     </div>
 
-    <h3>Notes</h3>
-    <form @submit.prevent="submitNote">
-      <textarea style="min-height: 50px; min-width: 300px;" maxlength="2000" minlength="1"
-        v-model="noteContent"></textarea>
-      <button style="vertical-align: top; margin-left: 0.5em;" type="submit">Add Note</button>
-    </form>
-    <ClassNoteItem v-for="note in notes" :key="note.id" :note="note" @noteDeleted="refreshNotes()" />
-
     <EntriesTable :classId="cls.id" ref="entries-table" />
 
+    <div>
+      <h3 style="margin-bottom: 0.25em;">Notes</h3>
+      <form @submit.prevent="submitNote">
+        <textarea style="min-height: 50px; min-width: 300px;" maxlength="2000" minlength="1"
+          v-model="noteContent"></textarea>
+        <button style="vertical-align: top; margin-left: 0.5em;" type="submit">Add Note</button>
+      </form>
+      <ClassNoteItem v-for="note in notes" :key="note.id" :note="note" @noteDeleted="refreshNotes()" />
+    </div>
+
     <!-- Confirmation dialog used for attempts at deleting this class. -->
     <ConfirmDialog ref="deleteClassDialog">
       <p>
@@ -109,4 +111,3 @@ async function resetStudentDesks() {
     </ConfirmDialog>
   </div>
 </template>
-<style scoped></style>

app/src/apps/classroom_compliance/ClassesView.vue

@@ -11,7 +11,7 @@ const authStore = useAuthStore()
 const router = useRouter()
 const apiClient = new ClassroomComplianceAPIClient(authStore)
 
-onMounted(async () => {
+onMounted(() => {
   apiClient.getClasses().handleErrorsWithAlert().then(result => {
     if (result) classes.value = result
   })
@@ -19,7 +19,7 @@ onMounted(async () => {
 </script>
 <template>
   <div>
-    <div class="button-bar">
+    <div class="button-bar align-center">
       <button type="button" @click="router.push('/classroom-compliance/edit-class')">Add Class</button>
     </div>
     <div>

app/src/apps/classroom_compliance/EditClassView.vue

@@ -54,13 +54,16 @@ function resetForm() {
 }
 </script>
 <template>
-  <div>
-    <h2>
+  <div class="centered-content">
+    <h2 class="align-center">
       <span v-if="cls" v-text="'Edit Class ' + cls.id"></span>
       <span v-if="!cls">Add New Class</span>
     </h2>
 
     <form @submit.prevent="submitForm" @reset.prevent="resetForm">
+      <p>
+        Add a new class to your classroom compliance app.
+      </p>
       <div>
         <label for="number-input">Number</label>
         <input id="number-input" type="number" v-model="formData.number" required />

app/src/apps/classroom_compliance/EditStudentView.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { showAlert } from '@/alerts';
-import { APIError } from '@/api/base';
 import {
   ClassroomComplianceAPIClient,
   type Class,
@@ -37,24 +35,35 @@ interface StudentFormData {
 const formData: Ref<StudentFormData> = ref({ name: '', deskNumber: null, removed: false })
 
 onMounted(async () => {
+  if (!await loadClass()) return
+  await loadStudent()
+})
+
+async function loadClass(): Promise<boolean> {
   const classIdNumber = parseInt(props.classId, 10)
   cls.value = await apiClient.getClass(classIdNumber).handleErrorsWithAlert()
   if (!cls.value) {
     await router.replace('/classroom-compliance')
-    return
+    return false
   }
+  return true
+}
+
+async function loadStudent() {
+  const classId = cls.value?.id
+  if (!classId) return
   if ('studentId' in route.query && typeof route.query.studentId === 'string') {
     const studentId = parseInt(route.query.studentId, 10)
-    student.value = await apiClient.getStudent(classIdNumber, studentId).handleErrorsWithAlert()
+    student.value = await apiClient.getStudent(classId, studentId).handleErrorsWithAlert()
     if (!student.value) {
-      await router.replace(`/classroom-compliance/classes/${classIdNumber}`)
+      await router.replace(`/classroom-compliance/classes/${classId}`)
       return
     }
     formData.value.name = student.value.name
     formData.value.deskNumber = student.value.deskNumber
     formData.value.removed = student.value.removed
   }
-})
+}
 
 async function submitForm() {
   const classId = parseInt(props.classId, 10)
@@ -111,37 +120,42 @@ async function doMoveClass() {
   if (!choice) return
   const newClassId = moveClassDialogClassSelection.value.id
   const result = await apiClient.moveStudentToOtherClass(cls.value.id, student.value.id, newClassId)
-  if (result instanceof APIError) {
-    await showAlert(result.message)
-  } else {
+    .handleErrorsWithAlertNoBody()
+  if (result) {
     await router.replace(`/classroom-compliance/classes/${newClassId}/students/${student.value.id}`)
   }
 }
 </script>
 <template>
-  <div v-if="cls">
-    <h2>
+  <div v-if="cls" class="centered-content">
+    <h2 class="align-center">
       <span v-if="student" v-text="'Edit ' + student.name"></span>
       <span v-if="!student">Add New Student</span>
     </h2>
 
-    <p>In class <span v-text="cls.number + ', ' + cls.schoolYear"></span></p>
+    <p class="align-center">In class <span v-text="cls.number + ', ' + cls.schoolYear"></span></p>
 
     <form @submit.prevent="submitForm" @reset.prevent="resetForm">
       <div>
         <label for="name-input">Name</label>
         <input id="name-input" type="text" v-model="formData.name" required />
+        <p class="form-input-hint">
+          The full name of the student, which should be unique among all students in the class.
+        </p>
       </div>
       <div>
         <label for="desk-input">Desk Number</label>
         <input id="desk-input" type="number" v-model="formData.deskNumber" />
-        <p style="font-style: italic; font-size: smaller;">
+        <p class="form-input-hint">
           Set desk number to zero to remove a student's desk assignment.
         </p>
       </div>
       <div>
-        <label for="removed-checkbox" style="display: inline">Removed</label>
         <input id="removed-checkbox" type="checkbox" v-model="formData.removed" />
+        <label for="removed-checkbox" style="display: inline">Removed</label>
+        <p class="form-input-hint">
+          Check this if the student has been removed from the class.
+        </p>
       </div>
       <div class="button-bar">
         <button type="submit">Save</button>
@@ -151,19 +165,24 @@ async function doMoveClass() {
     </form>
 
     <!-- Dialog for moving the student to another class. -->
-    <dialog id="move-class-dialog" ref="move-class-dialog">
+    <dialog id="move-class-dialog" ref="move-class-dialog" style="max-width: 500px;">
       <p>
-        Select a class to move them to below:
+        Select a class to move {{ student?.name }} to:
       </p>
       <select v-model="moveClassDialogClassSelection">
         <option v-for="c in moveClassDialogClassChoices" :key="c.id" v-text="'Class ' + c.number" :value="c"></option>
       </select>
 
-      <p v-if="moveClassDialogClassSelection">
+      <p v-if="moveClassDialogClassSelection" class="form-input-hint">
         Will move {{ student?.name }} from class {{ cls.number }} to class {{ moveClassDialogClassSelection.number }}.
       </p>
 
-      <div>
+      <p>
+        Note: All current entries for {{ student?.name }} in class {{ cls.number }} will be retained; no data is lost.
+        To add new entries for {{ student?.name }}, do so via their new class.
+      </p>
+
+      <div class="button-bar">
         <button type="button" id="move-class-dialog-submit-button" @click="doMoveClass()">Submit</button>
         <button type="button" id="move-class-dialog-cancel-button" @click="moveClassDialog?.close()">Cancel</button>
       </div>

app/src/apps/classroom_compliance/EntriesTable.vue

@@ -30,6 +30,7 @@ enum TableView {
 const students: Ref<EntriesResponseStudent[]> = ref([])
 const sortingChoice: Ref<string> = ref('name')
 const selectedView: Ref<TableView> = ref(TableView.FULL)
+const hideRemovedStudents: Ref<boolean> = ref(false)
 
 const lastSaveState: Ref<string | null> = ref(null)
 const lastSaveStateTimestamp: Ref<number> = ref(0)
@@ -216,6 +217,13 @@ function getVisibleDates(): string[] {
   return []
 }
 
+function getVisibleStudents(): EntriesResponseStudent[] {
+  if (hideRemovedStudents.value === true) {
+    return students.value.filter(s => !s.removed && s.classId === props.classId)
+  }
+  return students.value
+}
+
 function getVisibleStudentEntries(student: EntriesResponseStudent): Record<string, Entry | null> {
   if (selectedView.value === TableView.FULL) return student.entries
   if (selectedView.value === TableView.TODAY) {
@@ -244,7 +252,7 @@ defineExpose({
 </script>
 <template>
   <div>
-    <div class="button-bar">
+    <div class="button-bar" style="text-align: left;">
       <button type="button" @click="showPreviousWeek" :disabled="selectedView === TableView.TODAY">Previous
         Week</button>
       <button type="button" @click="showThisWeek" :disabled="selectedView === TableView.TODAY">This Week</button>
@@ -267,6 +275,12 @@ defineExpose({
         <option :value="TableView.WHITEBOARD">Whiteboard View</option>
         <option :value="TableView.TODAY">Today View</option>
       </select>
+
+      <span>
+        <input type="checkbox" id="show-removed-students-checkbox" v-model="hideRemovedStudents" />
+        <label for="show-removed-students-checkbox" style="display: inline; font-size: small;">Hide Removed
+          Students</label>
+      </span>
     </div>
 
     <p v-if="selectedView === TableView.GRADING">
@@ -275,7 +289,7 @@ defineExpose({
 
     <table class="entries-table" :class="{ 'entries-table-reduced-view': selectedView !== TableView.FULL }">
       <thead>
-        <tr>
+        <tr class="align-center">
           <th v-if="selectedView !== TableView.WHITEBOARD">#</th>
           <th>Student</th>
           <th v-if="assignedDesks">Desk</th>
@@ -285,16 +299,13 @@ defineExpose({
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(student, idx) in students" :key="student.id" style="height: 2em;">
+        <tr v-for="(student, idx) in getVisibleStudents()" :key="student.id" style="height: 2em;">
           <td v-if="selectedView !== TableView.WHITEBOARD" style="text-align: right; padding-right: 0.5em;">{{ idx + 1
             }}.</td>
           <StudentNameCell :student="student" :class-id="classId" />
-          <!-- Desk Number: -->
           <td v-if="assignedDesks" v-text="student.deskNumber"></td>
-          <!-- A cell for each entry in the table's date range: -->
           <EntryTableCell v-for="(entry, date) in getVisibleStudentEntries(student)" :key="date"
             v-model="student.entries[date]" :date-str="date" :last-save-state-timestamp="lastSaveStateTimestamp" />
-          <!-- Score cell: -->
           <StudentScoreCell :score="student.score" v-if="selectedView !== TableView.WHITEBOARD" />
         </tr>
       </tbody>

app/src/apps/classroom_compliance/GuideView.vue

@@ -15,7 +15,7 @@ const sampleEntry: Ref<Entry | null> = ref({
 </script>
 
 <template>
-  <div class="guide-page">
+  <div class="align-left centered-content">
     <h2>Guide</h2>
     <p>
       This page provides a quick guide to using the <em>Classroom Compliance</em>
@@ -32,7 +32,9 @@ const sampleEntry: Ref<Entry | null> = ref({
       school year to identify it.
     </p>
     <p>
-      You can view all your classes with the <RouterLink to="/classroom-compliance">View My Classes</RouterLink>
+      You can view all your classes with the <RouterLink class="link link-color" to="/classroom-compliance">View My
+        Classes
+      </RouterLink>
       link at the top of this page. Click on any of the classes you see listed,
       and you'll go to that class' page.
     </p>
@@ -128,7 +130,8 @@ const sampleEntry: Ref<Entry | null> = ref({
     <hr />
     <h3>Adding / Editing Students</h3>
     <p>
-      As mentioned briefly in <a href="#the-class-page">The Class Page</a>, you can add students one-by-one, or in bulk.
+      As mentioned briefly in <a class="link link-color" href="#the-class-page">The Class Page</a>, you can add students
+      one-by-one, or in bulk.
     </p>
     <p>
       When adding a student individually, or editing an existing student, here's what you need to know:
@@ -149,10 +152,3 @@ const sampleEntry: Ref<Entry | null> = ref({
     </ul>
   </div>
 </template>
-<style scoped>
-.guide-page {
-  max-width: 50ch;
-  margin-left: auto;
-  margin-right: auto;
-}
-</style>

app/src/apps/classroom_compliance/ImportStudentsView.vue

@@ -32,8 +32,8 @@ async function doImport() {
 }
 </script>
 <template>
-  <div>
-    <h1>Import Students</h1>
+  <div class="centered-content">
+    <h1 class="align-center">Import Students</h1>
     <p>
       Import a large number of students to a class at once by pasting their names in the text box below, with one
       student per line.

app/src/apps/classroom_compliance/MainView.vue

@@ -21,16 +21,18 @@ async function downloadExport() {
 }
 </script>
 <template>
-  <main>
+  <main class="app-header">
     <h1>Classroom Compliance</h1>
 
     <div class="button-bar">
-      <RouterLink to="/classroom-compliance">View My Classes</RouterLink>
-      <RouterLink to="/classroom-compliance/guide">Guide</RouterLink>
-      <a @click.prevent="downloadExport()" href="#">Export All Data</a>
+      <RouterLink class="link" to="/classroom-compliance">View My Classes</RouterLink>
+      <RouterLink class="link" to="/classroom-compliance/guide">Guide</RouterLink>
+      <a class="link" @click.prevent="downloadExport()" href="#">Export All Data</a>
     </div>
     <hr />
 
-    <RouterView :key="$route.fullPath" />
+    <div class="align-left">
+      <RouterView :key="$route.fullPath" />
+    </div>
   </main>
 </template>

app/src/apps/classroom_compliance/StudentEntriesList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ClassroomComplianceAPIClient, type Entry, type Student } from '@/api/classroom_compliance';
+import { useAuthStore } from '@/stores/auth';
+import { onMounted, ref, type Ref } from 'vue';
+import StudentEntryItem from './StudentEntryItem.vue';
+
+
+const props = defineProps<{
+  student: Student
+}>()
+const authStore = useAuthStore()
+
+const entries: Ref<Entry[]> = ref([])
+
+const apiClient = new ClassroomComplianceAPIClient(authStore)
+
+onMounted(() => {
+  apiClient.getStudentEntries(props.student.classId, props.student.id).handleErrorsWithAlert()
+    .then(result => {
+      if (result !== null) {
+        entries.value = result
+      }
+    })
+})
+</script>
+<template>
+  <div>
+    <h3 class="align-center">Entries</h3>
+    <div>
+      <StudentEntryItem v-for="entry in entries" :key="entry.id" :entry="entry" />
+    </div>
+  </div>
+</template>

app/src/apps/classroom_compliance/StudentEntryItem.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { EMOJI_ABSENT, EMOJI_BEHAVIOR_GOOD, EMOJI_BEHAVIOR_MEDIOCRE, EMOJI_BEHAVIOR_POOR, EMOJI_PHONE_COMPLIANT, EMOJI_PHONE_NONCOMPLIANT, EMOJI_PRESENT, type Entry } from '@/api/classroom_compliance';
 
-defineProps<{
+const props = defineProps<{
   entry: Entry
 }>()
+
+function getFormattedDate() {
+  const d = new Date(props.entry.date)
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  return days[d.getDay()] + ', ' + d.toLocaleDateString()
+}
 </script>
 <template>
   <div class="student-entry-item">
-    <h6>{{ entry.date }}</h6>
+    <h6>{{ getFormattedDate() }}</h6>
     <div class="icons-container">
       <span v-if="entry.absent">{{ EMOJI_ABSENT }}</span>
       <span v-if="!entry.absent">{{ EMOJI_PRESENT }}</span>

app/src/apps/classroom_compliance/StudentView.vue

@@ -4,7 +4,7 @@ import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import { useAuthStore } from '@/stores/auth'
 import { onMounted, ref, useTemplateRef, type Ref } from 'vue'
 import { useRouter } from 'vue-router'
-import StudentEntryItem from '@/apps/classroom_compliance/StudentEntryItem.vue'
+import StudentEntriesList from './StudentEntriesList.vue'
 
 const props = defineProps<{
   classId: string
@@ -53,43 +53,54 @@ async function deleteThisStudent() {
 }
 </script>
 <template>
-  <div v-if="student">
-    <h2 v-text="student.name"></h2>
-    <p>
-      From
-      <RouterLink :to="'/classroom-compliance/classes/' + classId">
-        <span v-text="'class ' + cls?.number + ', ' + cls?.schoolYear"></span>
+  <div v-if="student" class="centered-content">
+    <h1 class="align-center" style="margin-bottom: 0;">{{ student.name }}</h1>
+    <p class="align-center" style="margin-top: 0;">
+      in
+      <RouterLink class="link link-color" :to="'/classroom-compliance/classes/' + classId">
+        <span v-text="'class ' + cls?.number"></span>
       </RouterLink>
     </p>
-    <ul>
-      <li>Internal ID: <span v-text="student.id"></span></li>
-      <li>Removed: <span v-text="student.removed"></span></li>
-      <li>Desk number: <span v-text="student.deskNumber"></span></li>
-    </ul>
 
-    <div class="button-bar">
+    <div class="button-bar align-center">
       <button type="button"
         @click="router.push(`/classroom-compliance/classes/${student.classId}/edit-student?studentId=${student.id}`)">Edit</button>
       <button type="button" @click="deleteThisStudent">Delete</button>
     </div>
 
-    <div v-if="statistics">
-      <h3>Statistics</h3>
-      <ul>
-        <li>Attendance Rate: {{ (statistics.attendanceRate * 100).toFixed(1) }}%</li>
-        <li>Phone Compliance Rate: {{ (statistics.phoneComplianceRate * 100).toFixed(1) }}%</li>
-        <li>Behavior Score: {{ (statistics.behaviorScore * 100).toFixed(1) }}%</li>
-        <li>From a total of {{ statistics.entryCount }} entries</li>
-      </ul>
-    </div>
+    <table class="student-properties-table">
+      <tbody>
+        <tr>
+          <th>Desk Number</th>
+          <td>
+            {{ student.deskNumber }}
+            <span v-if="student.deskNumber === 0" style="font-style: italic; font-size: small;">*No assigned desk</span>
+          </td>
+        </tr>
+        <tr>
+          <th>Removed</th>
+          <td>{{ student.removed ? 'True' : 'False' }}</td>
+        </tr>
+        <tr v-if="statistics">
+          <th>Attendance Rate</th>
+          <td>{{ (statistics.attendanceRate * 100).toFixed(1) }}%</td>
+        </tr>
+        <tr v-if="statistics">
+          <th>Phone Compliance Rate</th>
+          <td>{{ (statistics.phoneComplianceRate * 100).toFixed(1) }}%</td>
+        </tr>
+        <tr v-if="statistics">
+          <th>Behavior Score</th>
+          <td>{{ (statistics.behaviorScore * 100).toFixed(1) }}%</td>
+        </tr>
+        <tr v-if="statistics">
+          <th>Total Entries</th>
+          <td>{{ statistics.entryCount }}</td>
+        </tr>
+      </tbody>
+    </table>
 
-    <h3>Entries</h3>
-    <p>
-      Below is a record of all entries saved for <span>{{ student.name }}</span>.
-    </p>
-    <div>
-      <StudentEntryItem v-for="entry in entries" :key="entry.id" :entry="entry" />
-    </div>
+    <StudentEntriesList :student="student" />
 
     <ConfirmDialog ref="deleteConfirmDialog">
       <p>
@@ -100,3 +111,19 @@ async function deleteThisStudent() {
     </ConfirmDialog>
   </div>
 </template>
+<style scoped>
+.student-properties-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.student-properties-table :is(th, td) {
+  border: 1px solid gray;
+  padding: 0.25em;
+}
+
+.student-properties-table td {
+  text-align: right;
+  font-family: 'SourceCodePro', monospace;
+}
+</style>

app/src/apps/classroom_compliance/entries_table/StudentScoreCell.vue

@@ -5,9 +5,9 @@ defineProps<{
 </script>
 <template>
   <td style="text-align: right; padding-right: 0.25em;">
-    <span v-if="score !== null" style="font-family: monospace; font-size: large;">
+    <span v-if="score !== null" class="text-mono">
       {{ (score * 100).toFixed(1) }}%
     </span>
-    <span v-if="score === null" style="font-size: small; font-style: italic;">No score</span>
+    <span v-if="score === null" style="font-style: italic; color: gray;">No score</span>
   </td>
 </template>

app/src/assets/base.css

@@ -1,6 +1,28 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans.ttf');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans-Italic.ttf');
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'SourceCodePro';
+  src: url('@/assets/fonts/SourceCodePro.ttf');
+}
+
+@font-face {
+  font-family: 'SourceCodePro';
+  src: url('@/assets/fonts/SourceCodePro-Italic.ttf');
+  font-style: italic;
+}
+
 :root {
   color-scheme: light dark;
-  font-family: sans-serif;
+  font-family: 'Open Sans', sans-serif;
 }
 
 .button-bar {
@@ -12,10 +34,80 @@
   margin-left: 0.5em;
 }
 
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.centered-content {
+  max-width: 50ch;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+code {
+  font-family: 'SourceCodePro', monospace;
+  color: lime;
+}
+
+.text-mono {
+  font-family: 'SourceCodePro', monospace;
+}
+
 label {
   display: block;
 }
 
+textarea {
+  font-family: 'SourceCodePro', monospace;
+  font-size: smaller;
+}
+
+button {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+.link:hover {
+  text-decoration: underline;
+  color: lightgray;
+}
+.link-color {
+  color: rgb(165, 210, 253);
+}
+.link-color:hover {
+  color: rgb(95, 121, 190);
+}
+.link-ext {
+  color: rgb(158, 255, 134);
+}
+.link-ext:hover {
+  color: rgb(110, 179, 93);
+}
+
 form > div + div {
   margin-top: 0.5em;
 }
+
+.form-input-hint {
+  font-size: smaller;
+  font-style: italic;
+  margin-top: 0.25em;
+}
+
+.app-header {
+  text-align: center;
+}
+.app-header > h1 {
+  margin-bottom: 0.5em;
+}

app/src/components/AlertDialog.vue

@@ -7,3 +7,12 @@
     </div>
   </dialog>
 </template>
+<style>
+.alert-dialog-error {
+  border-color: red;
+}
+
+.alert-dialog-warning {
+  border-color: orange;
+}
+</style>

app/src/components/AppListItem.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  name: string,
+  route: string
+}>()
+</script>
+<template>
+  <div class="app-list-item">
+    <h3>
+      <RouterLink class="link" :to="route">{{ name }}</RouterLink>
+    </h3>
+    <p>
+      <slot></slot>
+    </p>
+  </div>
+</template>
+<style scoped>
+.app-list-item {
+  padding: 1em;
+  background-color: rgb(49, 49, 49);
+  border-radius: 20px;
+}
+
+.app-list-item>h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: x-large;
+}
+</style>

app/src/components/ConfirmDialog.vue

@@ -36,20 +36,10 @@ defineExpose({
     <form>
       <slot></slot>
 
-      <div class="confirm-dialog-buttons">
+      <div class="button-bar align-right">
         <button @click.prevent="onConfirmClicked">Confirm</button>
         <button @click.prevent="onCancelClicked">Cancel</button>
       </div>
     </form>
   </dialog>
 </template>
-<style>
-.confirm-dialog-buttons {
-  text-align: right;
-  margin-top: 0.5em;
-}
-
-.confirm-dialog-buttons>button {
-  margin-left: 0.5em;
-}
-</style>

app/src/views/HomeView.vue

@@ -1,25 +1,27 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import AppListItem from '@/components/AppListItem.vue';
+import { useAuthStore } from '@/stores/auth';
+
+const authStore = useAuthStore()
+
+</script>
 
 <template>
-  <main>
-    <h1>Home Page</h1>
-    <p>
-      Welcome to Teacher-Tools, a website with tools that help teachers to manage their classrooms.
+  <main class="centered-content">
+    <h1 class="align-center">My Applications</h1>
+
+    <div v-if="authStore.state">
+      <AppListItem name="Classroom Compliance" route="/classroom-compliance">
+        Track your students' phone usage and behavior, record notes, and automatically calculate weekly scores for each
+        student.
+      </AppListItem>
+      <p style="text-align: right; font-style: italic;">
+        ... and more apps coming soon!
+      </p>
+    </div>
+
+    <p v-if="!authStore.state" class="align-center">
+      Please <RouterLink to="/login">log in</RouterLink> to view your applications.
     </p>
-    <hr>
-    <h2>Applications</h2>
-    <p>
-      The following list of applications are available for you:
-    </p>
-    <ul>
-      <li>
-        <RouterLink to="/classroom-compliance">Classroom Compliance</RouterLink>
-        -
-        Track your students' phone usage and behavior patterns, and calculate weighted grades.
-      </li>
-      <li>
-        <em>... and more to come soon!</em>
-      </li>
-    </ul>
   </main>
 </template>

app/src/views/LoginView.vue

@@ -28,23 +28,22 @@ async function doLogin() {
 }
 </script>
 <template>
-  <main>
-    <h1>Login</h1>
+  <main class="centered-content">
+    <h1 class="align-center">Login</h1>
     <form>
-      <div>
-        <label for="username-input">Username</label>
-        <input id="username-input" name="username" type="text" v-model="credentials.username" />
+      <div class="login-input-row">
+        <input id="username-input" name="username" type="text" v-model="credentials.username" placeholder="Username" />
       </div>
-      <div>
-        <label for="password-input">Password</label>
-        <input id="password-input" name="password" type="password" v-model="credentials.password" />
+      <div class="login-input-row">
+        <input id="password-input" name="password" type="password" v-model="credentials.password"
+          placeholder="Password" />
       </div>
-      <div class="button-bar">
-        <button type="button" @click="doLogin">Login</button>
+      <div class="button-bar align-center">
+        <button type="button" @click="doLogin" style="font-size: large;">Login</button>
       </div>
       <div>
         <p>
-          If you forgot your password or would like to create an account, please contact <a
+          If you forgot your password or would like to create an account, please contact <a class="link link-ext"
             href="https://andrewlalis.com/contact">Andrew Lalis</a> for assistance.
         </p>
         <p>
@@ -54,3 +53,20 @@ async function doLogin() {
     </form>
   </main>
 </template>
+<style scoped>
+.login-input-row {
+  max-width: 30ch;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.login-input-row>input {
+  width: 100%;
+  font-size: medium;
+  padding: 0.5em;
+}
+
+.login-input-row+.login-input-row {
+  margin-top: 1em;
+}
+</style>

app/src/views/MyAccountView.vue

@@ -4,9 +4,9 @@ import { useAuthStore } from '@/stores/auth';
 const authStore = useAuthStore()
 </script>
 <template>
-  <main v-if="authStore.state">
-    <h1>My Account</h1>
-    <table>
+  <main v-if="authStore.state" class="centered-content">
+    <h1 class="align-center">My Account</h1>
+    <table class="account-properties-table">
       <tbody>
         <tr>
           <th>Internal ID</th>
@@ -33,5 +33,32 @@ const authStore = useAuthStore()
     <p>
       Please contact Andrew Lalis for help with account administration or to report any bugs you find!
     </p>
+    <p>
+      Suggestions for new features are also highly encouraged!
+    </p>
+    <p>
+      Contact Andrew at <a class="link link-ext" href="https://www.andrewlalis.com/contact"
+        target="_blank">andrewlalis.com/contact</a>.
+    </p>
   </main>
 </template>
+<style scoped>
+.account-properties-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.account-properties-table :is(th, td) {
+  border: 1px solid gray;
+  padding: 0.25em;
+}
+
+.account-properties-table th {
+  text-align: left;
+}
+
+.account-properties-table td {
+  text-align: right;
+  font-family: 'SourceCodePro', monospace;
+}
+</style>