revert codemodal changes and implement custom variant in component definition

Author: pettinarip

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

@@ -23,17 +23,15 @@ export const Modal = defineMultiStyleConfig({
         boxShadow: "none",
       },
       header: {
+        flex: "1",
         padding: "0",
         fontWeight: "bold",
         fontSize: "2xl",
-        minHeight: "6",
         me: "8",
       },
       closeButton: {
-        boxSize: "8",
+        position: "static",
         color: "body.base",
-        top: "8",
-        insetInlineEnd: "8",
       },
       body: {
         padding: "0",

src/components/CodeModal.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react"
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  useColorModeValue,
+} from "@chakra-ui/react"
+
+type CodeModalProps = {
+  title: string
+  children: ReactNode
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}
+
+const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
+  const bgColor = useColorModeValue("rgb(247, 247, 247)", "rgb(25, 25, 25)")
+  const borderColor = useColorModeValue("rgb(51, 51, 51)", "rgb(242, 242, 242)")
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      scrollBehavior="inside"
+      onClose={() => setIsOpen(false)}
+    >
+      <ModalOverlay />
+      <ModalContent
+        maxW="100vw"
+        marginTop="auto"
+        marginBottom="0"
+        maxHeight="50%"
+        borderRadius="0"
+        p="0"
+        gap="0"
+      >
+        <ModalHeader
+          bg={bgColor}
+          borderColor={borderColor}
+          borderTop="1px solid"
+          borderBottom="1px solid"
+          textTransform="uppercase"
+          fontWeight="normal"
+          fontSize="md"
+          fontFamily="monospace"
+          px="6"
+          py="4"
+          me="0"
+        >
+          {title}
+        </ModalHeader>
+        <ModalCloseButton
+          position="absolute"
+          padding="0"
+          width="24px"
+          height="24px"
+          borderRadius="0"
+          color="rgb(178, 178, 178)"
+          fontSize="sm"
+          margin="0"
+          top="4"
+          insetInlineEnd="4"
+          bottom="4"
+        />
+        <ModalBody p="0">{children}</ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default CodeModal

src/components/Modal/index.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import {
   Button,
+  HStack,
   Modal as ChakraModal,
   ModalBody,
   ModalCloseButton,
@@ -31,8 +32,10 @@ const Modal = ({
       <ModalOverlay />
 
       <ModalContent {...contentProps}>
-        <ModalHeader>{title}</ModalHeader>
-        <ModalCloseButton />
+        <HStack>
+          <ModalHeader>{title}</ModalHeader>
+          <ModalCloseButton />
+        </HStack>
         <ModalBody>{children}</ModalBody>
         {actionButtonLabel && (
           <ModalFooter>

src/pages/index.tsx

@@ -25,6 +25,7 @@ import ActionCard from "@/components/ActionCard"
 import ButtonLink from "@/components/Buttons/ButtonLink"
 import CalloutBanner from "@/components/CalloutBanner"
 import Codeblock from "@/components/Codeblock"
+import CodeModal from "@/components/CodeModal"
 import CommunityEvents from "@/components/CommunityEvents"
 import HomeHero from "@/components/Hero/HomeHero"
 import { Image } from "@/components/Image"
@@ -121,8 +122,6 @@ const StyledActionCard = chakra(ActionCard, {
   },
 })
 
-const StyledCodeModal = chakra(Modal)
-
 const StyledTitleCardList = chakra(TitleCardList)
 
 const GrayContainer = (props: ChildOnlyProp) => (
@@ -535,29 +534,10 @@ const HomePage = ({
               </ButtonLink>
             </ButtonLinkRow>
           </FeatureContent>
-          <StyledCodeModal
+          <CodeModal
             isOpen={isModalOpen}
             setIsOpen={setModalOpen}
             title={codeExamples[activeCode].title}
-            sx={{
-              ".modal-component-container": {
-                padding: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                top: "50%",
-              },
-              ".modal-component": {
-                maxWidth: "100%",
-                maxHeight: "50%",
-                padding: 0,
-              },
-              ".modal-component-content": {
-                marginTop: "3rem",
-                width: "100%",
-                overflow: "auto",
-              },
-            }}
           >
             <Codeblock
               codeLanguage={codeExamples[activeCode].codeLanguage}
@@ -566,7 +546,7 @@ const HomePage = ({
             >
               {codeExamples[activeCode].code}
             </Codeblock>
-          </StyledCodeModal>
+          </CodeModal>
         </Row>
       </MainSectionContainer>
       {/* Eth Today Section */}