adjust modal component and theme

Author: pettinarip

src/@chakra-ui/components/Modal.ts

@@ -15,21 +15,19 @@ const {
 export const Modal = defineMultiStyleConfig({
   baseStyle: definePartsStyle((props) =>
     defineMergeStyles(defaultBaseStyle?.(props), {
-      overlay: {
-        bg: "gray.500",
-      },
       dialog: {
         bg: "background.base",
         gap: "4",
         padding: "8",
-        maxW: "464px",
-        borderRadius: "md",
+        borderRadius: "base",
         boxShadow: "none",
       },
       header: {
-        padding: 0,
+        padding: "0",
         fontWeight: "bold",
         fontSize: "2xl",
+        minHeight: "6",
+        me: "8",
       },
       closeButton: {
         boxSize: "8",
@@ -38,15 +36,15 @@ export const Modal = defineMultiStyleConfig({
         insetInlineEnd: "8",
       },
       body: {
-        padding: 0,
+        padding: "0",
         fontWeight: "normal",
         fontSize: "md",
       },
       footer: {
-        gap: "8px",
-        px: 0,
-        pt: 8,
-        pb: 0,
+        gap: "2",
+        px: "0",
+        pt: "8",
+        pb: "0",
       },
     })
   ),

src/components/Modal/index.tsx

@@ -5,48 +5,32 @@ import {
   ModalBody,
   ModalCloseButton,
   ModalContent,
-  type ModalContentProps,
+  ModalContentProps,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
   type ModalProps as ChakraModalProps,
 } from "@chakra-ui/react"
 
-export type ModalProps = ModalContentProps &
-  Pick<ChakraModalProps, "size"> & {
-    children?: React.ReactNode
-    title?: string
-    actionButtonLabel?: string
-    isOpen: boolean
-    setIsOpen: (isOpen: boolean) => void
-  }
+export type ModalProps = ChakraModalProps & {
+  children?: React.ReactNode
+  title?: string
+  actionButtonLabel?: string
+  contentProps?: ModalContentProps
+}
 
 const Modal = ({
   children,
   title,
   actionButtonLabel,
-  isOpen,
-  setIsOpen,
+  contentProps,
   ...restProps
 }: ModalProps) => {
   return (
-    <ChakraModal
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      isCentered
-      /* size={size ?? "xl"} */
-      scrollBehavior="inside"
-    >
-      <ModalOverlay bgColor="blackAlpha.700" />
+    <ChakraModal isCentered scrollBehavior="inside" {...restProps}>
+      <ModalOverlay />
 
-      <ModalContent
-        p={8}
-        shadow="md"
-        border="1px"
-        borderColor="border"
-        borderRadius="md"
-        {...restProps}
-      >
+      <ModalContent {...contentProps}>
         <ModalHeader>{title}</ModalHeader>
         <ModalCloseButton />
         <ModalBody>{children}</ModalBody>

src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

@@ -124,7 +124,7 @@ const CustomRadio = ({
   })
 
   const buttonBg = useMemo<string>(() => {
-    if (!state.isChecked) return "body.inverted"
+    if (!state.isChecked) return "background.highlight"
     if (!isAnswerVisible) return "primary.base"
     if (!isSelectedCorrect) return "error.base"
     return "success.base"

src/components/Quiz/QuizWidget/index.tsx

@@ -103,7 +103,7 @@ const QuizWidget = ({
 
   const getMainContainerBg = (): StackProps["bg"] => {
     if (!answerStatus) {
-      return "neutral"
+      return "background.base"
     }
 
     if (answerStatus === "correct") {

src/components/Quiz/QuizzesModal.tsx

@@ -20,7 +20,7 @@ const QuizzesModal = ({
 }: QuizzesModalProps) => {
   const getStatusColor = (): ModalContentProps["bg"] => {
     if (quizStatus === "neutral") {
-      return "neutral"
+      return "background.base"
     }
     if (quizStatus === "success") {
       return "success.neutral"
@@ -31,8 +31,9 @@ const QuizzesModal = ({
   return (
     <Modal
       isOpen={isQuizModalOpen}
-      setIsOpen={onQuizModalClose}
+      onClose={onQuizModalClose}
       size={{ base: "full", md: "xl" }}
+      contentProps={{ bg: getStatusColor() }}
       {...props}
     >
       <Center m={0} bg={getStatusColor()} py="16">