Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add color dots to event cards
  • Loading branch information
regalijan committed Mar 6, 2024
1 parent 54b05c4 commit 50e4979
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 0 deletions.
17 changes: 17 additions & 0 deletions app/routes/events-team.tsx
Expand Up @@ -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)
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -445,6 +458,10 @@ export default function () {
? "Approved"
: "Denied"}
</Text>
<span
className="dot"
style={{ backgroundColor: eventColors[event.type] }}
></span>
</CardFooter>
</Card>
);
Expand Down
8 changes: 8 additions & 0 deletions 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;
}

0 comments on commit 50e4979

Please sign in to comment.