Do same for other cards

components/AppealCard.tsx

@@ -17,13 +17,13 @@ import {
   Text,
   Textarea,
   useDisclosure,
-  useToast,
+  useToast
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
-export default function (props: AppealCardProps) {
+export default function(props: AppealCardProps) {
   const [dateString, setDateString] = useState(
-    new Date(props.created_at).toUTCString(),
+    new Date(props.created_at).toUTCString()
   );
   const [action, setAction] = useState("");
   const [feedback, setFeedback] = useState("");
@@ -46,9 +46,9 @@ export default function (props: AppealCardProps) {
     const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
       body: feedback ? JSON.stringify({ feedback }) : "{}",
       headers: {
-        "content-type": "application/json",
+        "content-type": "application/json"
       },
-      method: "POST",
+      method: "POST"
     });
 
     if (actionReq.ok) {
@@ -57,7 +57,7 @@ export default function (props: AppealCardProps) {
         description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
         duration: 5000,
         status: "success",
-        title: "Success",
+        title: "Success"
       });
 
       document.getElementById(`appeal_${props.id}`)?.remove();
@@ -74,7 +74,7 @@ export default function (props: AppealCardProps) {
         description: error,
         duration: 10000,
         status: "error",
-        title: "Oops!",
+        title: "Oops!"
       });
     }
 
@@ -130,7 +130,7 @@ export default function (props: AppealCardProps) {
         </Stack>
       </CardBody>
       <CardFooter pb="4px">
-        <Box visibility={props.open ? "visible" : "hidden"}>
+        <Box display={props.open ? undefined : "none"}>
           <Button colorScheme="red" onClick={() => showModal("Deny")}>
             Deny
           </Button>