Add color dots to event cards

app/routes/events-team.tsx

@@ -24,6 +24,12 @@ import {
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
+import stylesheet from "../styles/events-team.css";
+import { type LinksFunction } from "@remix-run/cloudflare";
+
+export const links: LinksFunction = () => {
+  return [{ href: stylesheet, rel: "stylesheet" }];
+};
 
 export async function loader({ context }: { context: RequestContext }) {
   if (!context.data.current_user)
@@ -337,6 +343,13 @@ export default function () {
             (member) => member.id === event.created_by,
           )?.name;
 
+          const eventColors: { [k: string]: string } = {
+            fotd: "cyan",
+            gamenight: "blue",
+            rotw: "magenta",
+            qotd: "#9900FF",
+          };
+
           return (
             <Card w="100%">
               <CardBody>
@@ -445,6 +458,10 @@ export default function () {
                       ? "Approved"
                       : "Denied"}
                 </Text>
+                <span
+                  className="dot"
+                  style={{ backgroundColor: eventColors[event.type] }}
+                ></span>
               </CardFooter>
             </Card>
           );

app/styles/events-team.css

@@ -0,0 +1,8 @@
+.dot {
+  align-self: center;
+  border-radius: 50%;
+  height: 32px;
+  margin-left: auto;
+  margin-right: 0;
+  width: 32px;
+}