diff --git a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
index 5e11b8c91b..e9f21603c3 100644
--- a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
@@ -25,12 +25,11 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
import CrossIconReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
import { IconButton } from "../../icon-button";
-import { mobile } from "../../../utils";
import { Base } from "../../../themes";
import { ModalDialogCloseButtonProps } from "../ModalDialog.types";
@@ -42,54 +41,9 @@ const StyledCloseButtonWrapper = styled.div<{
width: 17px;
height: 17px;
- display: flex;
- align-items: center;
- justify-content: center;
+ margin-left: auto;
cursor: pointer;
- position: absolute;
-
- ${(props) =>
- props.currentDisplayType === "modal"
- ? css`
- top: 18px;
-
- ${props.theme.interfaceDirection === "rtl"
- ? `left: -30px;`
- : `right: -30px;`}
-
- @media ${mobile} {
- ${props.theme.interfaceDirection === "rtl"
- ? `left: 10px;`
- : `right: 10px;`}
- top: -27px;
- }
- `
- : css`
- top: 18px;
- ${props.theme.interfaceDirection === "rtl"
- ? `right: -27px;`
- : `left: -27px;`}
- @media ${mobile} {
- top: -27px;
- ${props.theme.interfaceDirection === "rtl"
- ? css`
- right: auto;
- left: 10px;
- `
- : css`
- left: auto;
- right: 10px;
- `}
- }
- `}
-
- .close-button, .close-button:hover {
- cursor: pointer;
- path {
- stroke: ${(props) => props.theme.modalDialog.closeButton.fillColor};
- }
- }
`;
StyledCloseButtonWrapper.defaultProps = { theme: Base };
diff --git a/packages/shared/components/modal-dialog/sub-components/Modal.tsx b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
index cbcd04703d..2099bcd667 100644
--- a/packages/shared/components/modal-dialog/sub-components/Modal.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
@@ -158,12 +158,6 @@ const Modal = ({
embedded={embedded}
ref={contentRef}
>
- {isCloseable && (
-
- )}
{isLoading ? (
currentDisplayType === "modal" ? (
- {header && (
-
+
{body && (