only show future events, fix styles for guides

components/toc.jsx

@@ -11,6 +11,8 @@ import {
 
 import { Icon, ICONS } from "vseth-canine-ui";
 
+import { getAccentColor } from "../utilities/colors";
+
 const useStyles = createStyles((theme) => ({
   link: {
     ...theme.fn.focusStyles(),
@@ -119,7 +121,7 @@ export default function TOC() {
       }}
     >
       <Group mb="md">
-        <Icon icon={ICONS.LIST} />
+        <Icon icon={ICONS.LIST} color={getAccentColor(theme)} />
         <Text>Table of contents</Text>
       </Group>
       {entries}

graphql/resolvers.js

@@ -21,8 +21,9 @@ export const resolvers = {
               lastName: hasAccess(session, true),
               email: hasAccess(session, true)
             }
-          },
-        }
+          }
+        },
+        orderBy: [{date: 'asc'}, {startTime: 'asc'}]
       });
       const futureEvents = events.filter((event) => isInFuture(event));
       return futureEvents;

styles/globals.css

@@ -4,6 +4,7 @@ p {
 
 h1 {
   font-size: 4rem !important;
+  overflow-x: auto;
 }
 
 h2 {
@@ -142,12 +143,13 @@ p {
 }
 
 .bash-guide pre {
-  background-color: #eeeeee;
   padding: 0.5rem;
+  background-color: rgba(125,125,125,0.1);
+  overflow-x: auto;
 }
 
 .bash-guide p>code {
-  color: #888888;
+  color: #f28a20;
 }
 
 .vseth-footer-dark {

utilities/dates.js

@@ -19,6 +19,6 @@ export function formatTimeFromDB(startTime, endTime) {
 }
 
 export function isInFuture(event) {
-  // TODO: implement logic
-  return true;
+  const now = new Date();
+  return event.date > now.toISOString();
 }