From b10a8445769dbf4ed1f600754ac4cf9c12bfb2cb Mon Sep 17 00:00:00 2001
From: julitork <julita.kriauciunaite@gmail.com>
Date: Mon, 4 Sep 2023 15:17:55 +0300
Subject: [PATCH] UGN-374 bugfix - add custom styling ability to modal close
 button

---
 src/components/ModalCloseButton.tsx | 9 ++++++---
 src/theme.ts                        | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ModalCloseButton.tsx b/src/components/ModalCloseButton.tsx
index fa70e2cb..19a80ca8 100644
--- a/src/components/ModalCloseButton.tsx
+++ b/src/components/ModalCloseButton.tsx
@@ -1,7 +1,8 @@
-import { IconButton } from "@chakra-ui/react"
+import { IconButton, useStyleConfig } from "@chakra-ui/react"
 import { CgClose } from "react-icons/cg"
 import { ConfirmCloseAlert } from "./Alerts/ConfirmCloseAlert"
 import { useState } from "react"
+import { themeOverrides } from "../theme"
 
 type ModalCloseButtonProps = {
   onClose: () => void
@@ -9,6 +10,7 @@ type ModalCloseButtonProps = {
 
 export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
   const [showModal, setShowModal] = useState(false)
+  const styles = useStyleConfig("Modal") as (typeof themeOverrides)["components"]["Modal"]["baseStyle"]
   return (
     <>
       <ConfirmCloseAlert
@@ -20,14 +22,15 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
         }}
       />
       <IconButton
+        right="14px"
+        top="20px"
         variant="unstyled"
+        sx={styles.closeModalButton}
         aria-label="Close modal"
         icon={<CgClose />}
         color="white"
         position="absolute"
         transform="translate(50%, -50%)"
-        right="14px"
-        top="20px"
         onClick={() => setShowModal(true)}
         zIndex="toast"
         dir="ltr"
diff --git a/src/theme.ts b/src/theme.ts
index 85dbf69f..5b32b2dc 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -312,6 +312,7 @@ export const themeOverrides = {
           fontSize: "lg",
           color: "textColor",
         },
+        closeModalButton: {},
       },
       variants: {
         rsi: {