Attempt to improve info modal

app/routes/events-calendar.tsx

@@ -13,6 +13,7 @@ import {
   Box,
   Button,
   Container,
+  Heading,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -20,6 +21,7 @@ import {
   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:{" "}
+            <Heading size="xs">Host</Heading>
+            <Text>
               {
                 (
-                data.memberData.find((m) => m.id === eventData.created_by) as {
+                  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>