refactor(QuizzesModal): remove Chakra imports

Author: TylerAPfledderer

src/components/Quiz/QuizzesModal.tsx

@@ -1,8 +1,7 @@
-import { Center, ModalContentProps } from "@chakra-ui/react"
-
 import { QuizStatus } from "@/lib/types"
 
 import Modal from "../Modal"
+import { Center } from "../ui/flex"
 
 type QuizzesModalProps = {
   isQuizModalOpen: boolean
@@ -18,27 +17,28 @@ const QuizzesModal = ({
   onQuizModalClose,
   ...props
 }: QuizzesModalProps) => {
-  const getStatusColor = (): ModalContentProps["bg"] => {
+  // TODO: remove bang in utility class names when Modal is migrated
+  const getStatusColorClass = () => {
     if (quizStatus === "neutral") {
-      return "background.base"
+      return "!bg-background"
     }
+
     if (quizStatus === "success") {
-      return "success.neutral"
+      return "!bg-success-neutral"
     }
-    return "error.neutral"
+
+    return "!bg-error"
   }
 
   return (
     <Modal
       isOpen={isQuizModalOpen}
       onClose={onQuizModalClose}
       size={{ base: "full", md: "xl" }}
-      contentProps={{ bg: getStatusColor() }}
+      contentProps={{ className: getStatusColorClass() }}
       {...props}
     >
-      <Center m={0} bg={getStatusColor()}>
-        {children}
-      </Center>
+      <Center className={getStatusColorClass()}>{children}</Center>
     </Modal>
   )
 }