Attempt to improve info modal

regalijan · Dec 9, 2024 · 069963c · 069963c
1 parent 71381e9
commit 069963c
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx
@@ -13,13 +13,15 @@ import {
   Box,
   Button,
   Container,
+  Heading,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Text,
   useDisclosure,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
@@ -104,20 +106,31 @@ export default function () {
           <ModalHeader>Event Info</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            Host:{" "}
-            {
-              (
-                data.memberData.find((m) => m.id === eventData.created_by) as {
-                  [k: string]: any;
-                }
-              )?.name
-            }
+            <Heading size="xs">Host</Heading>
+            <Text>
+              {
+                (
+                  data.memberData.find(
+                    (m) => m.id === eventData.created_by,
+                  ) as {
+                    [k: string]: any;
+                  }
+                )?.name
+              }
+            </Text>
             <br />
-            Event Type: {eventData?.type?.toUpperCase()}
+            <Heading size="sm">Event Type</Heading>
+            <Text>{eventData?.type?.toUpperCase()}</Text>
             <br />
-            Details: {eventData?.details}
+            <Heading size="sm">Details</Heading>
+            <Text>{eventData?.details}</Text>
             <br />
-            Answer: {eventData?.type === "rotw" ? eventData.answer : "N/A"}
+            {eventData?.type === "rotw" ? (
+              <>
+                <Heading size="sm">Answer</Heading>
+                <Text>{eventData.answer}</Text>
+              </>
+            ) : null}
           </ModalBody>
           <ModalFooter>
             <Button onClick={onClose}>Close</Button>