update modal styles and scroll behavior

Author: pettinarip

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

@@ -18,7 +18,7 @@ export const Modal = defineMultiStyleConfig({
       dialog: {
         bg: "background.base",
         gap: "4",
-        padding: "8",
+        padding: { base: "4", sm: "8", md: "16" },
         borderRadius: "base",
         boxShadow: "none",
       },
@@ -32,6 +32,7 @@ export const Modal = defineMultiStyleConfig({
       closeButton: {
         position: "static",
         color: "body.base",
+        bg: "background.base",
       },
       body: {
         padding: "0",
@@ -50,15 +51,13 @@ export const Modal = defineMultiStyleConfig({
     ...defaultSizes,
     full: {
       dialog: {
-        h: "full",
-        minH: "unset",
-        maxH: {
+        minH: {
           base: "calc(100vh - 1rem)",
-          md: "min(calc(100vh - 2rem), 792px)",
+          md: "min(calc(100vh - 1rem), 792px)",
         },
         maxW: {
           base: "calc(100vw - 1rem)",
-          md: "min(calc(100vw - 2rem), 1000px)",
+          md: "min(calc(100vw - 1rem), 1000px)",
         },
       },
     },

src/components/Quiz/QuizWidget/index.tsx

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

src/components/Quiz/QuizzesModal.tsx

@@ -36,7 +36,7 @@ const QuizzesModal = ({
       contentProps={{ bg: getStatusColor() }}
       {...props}
     >
-      <Center m={0} bg={getStatusColor()} py="16">
+      <Center m={0} bg={getStatusColor()}>
         {children}
       </Center>
     </Modal>

src/components/Simulator/SimulatorModal.tsx

@@ -27,7 +27,7 @@ export const SimulatorModal = ({
       onClose={onClose}
       isCentered
       size="full"
-      scrollBehavior="inside"
+      scrollBehavior="outside"
       contentProps={restProps}
     >
       {children}

src/components/Simulator/Template.tsx

@@ -3,8 +3,6 @@ import { Flex, type FlexProps } from "@chakra-ui/react"
 
 export const Template = (props: FlexProps) => (
   <Flex
-    pt={{ base: 0, md: 8 }}
-    px={{ base: 0, md: 16 }}
     w="full"
     justify="center"
     direction={{ base: "column", md: "row" }}