Shared: Components: Modal-dialog: An icon has been added to the dialog.

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 };

packages/shared/components/modal-dialog/sub-components/Modal.tsx

@@ -158,12 +158,6 @@ const Modal = ({
             embedded={embedded}
             ref={contentRef}
           >
-            {isCloseable && (
-              <CloseButton
-                currentDisplayType={currentDisplayType}
-                onClick={onClose}
-              />
-            )}
             {isLoading ? (
               currentDisplayType === "modal" ? (
                 <DialogSkeleton
@@ -183,16 +177,16 @@ const Modal = ({
               containerComponent
             ) : (
               <FormWrapper withForm={withForm || false}>
-                {header && (
-                  <StyledHeader
-                    id="modal-header-swipe"
-                    className={
-                      classNames(["modal-header", headerProps.className]) ||
-                      "modal-header"
-                    }
-                    {...headerProps}
-                    currentDisplayType={currentDisplayType}
-                  >
+                <StyledHeader
+                  id="modal-header-swipe"
+                  className={
+                    classNames(["modal-header", headerProps.className]) ||
+                    "modal-header"
+                  }
+                  {...headerProps}
+                  currentDisplayType={currentDisplayType}
+                >
+                  {header && (
                     <Heading
                       level={1}
                       className="heading"
@@ -201,8 +195,15 @@ const Modal = ({
                     >
                       {headerComponent}
                     </Heading>
-                  </StyledHeader>
-                )}
+                  )}
+                  {isCloseable && (
+                    <CloseButton
+                      currentDisplayType={currentDisplayType}
+                      onClick={onClose}
+                    />
+                  )}
+                </StyledHeader>
+
                 {body && (
                   <StyledBody
                     className={