From 107e160e3911674d50f105402a3ae7008df532ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maaria=20Wahlstr=C3=B6m?= <maaria.wahlstrom@csc.fi>
Date: Tue, 8 Oct 2024 12:00:10 +0300
Subject: [PATCH] MSCR-581 Make modal x-button stick to top right and
interactable while spinner visible
---
mscr-ui/src/modules/form/form.styles.tsx | 6 ++-
mscr-ui/src/modules/form/index.tsx | 50 ++++++++++--------------
2 files changed, 26 insertions(+), 30 deletions(-)
diff --git a/mscr-ui/src/modules/form/form.styles.tsx b/mscr-ui/src/modules/form/form.styles.tsx
index 46cf705f5..7a6b40d0a 100644
--- a/mscr-ui/src/modules/form/form.styles.tsx
+++ b/mscr-ui/src/modules/form/form.styles.tsx
@@ -17,8 +17,12 @@ export const WideMultiSelect = styled(MultiSelect)`
export const CloseButton = styled(Button)`
max-width: 55px;
- &&:hover {
+ position: absolute;
+ z-index: 700;
+ right: 0;
+ &&:hover, &&:focus {
background: none;
+ position: absolute;
}
`;
diff --git a/mscr-ui/src/modules/form/index.tsx b/mscr-ui/src/modules/form/index.tsx
index 17f0d9258..d168a2cf2 100644
--- a/mscr-ui/src/modules/form/index.tsx
+++ b/mscr-ui/src/modules/form/index.tsx
@@ -551,38 +551,30 @@ export default function FormModal({
variant={isSmall ? 'smallScreen' : 'default'}
style={{ position: 'relative' }}
>
+ <CloseButton
+ variant="secondaryNoBorder"
+ icon={<IconClose />}
+ aria-label="t('cancel')"
+ onClick={() => handleClose()}
+ />
<SpinnerOverlay animationVisible={submitAnimationVisible} />
<ModalContent>
<div id={'modalTop'}></div>
-
- <div className="row">
- <div className="col-8">
- <ModalTitle>
- {contentType == Type.Schema
- ? modalType == ModalType.RegisterNewFull
- ? t('content-form.title.schema-register')
- : modalType == ModalType.MscrCopy
- ? t('content-form.title.schema-mscr-copy')
- : t('content-form.title.schema-revision')
- : modalType == ModalType.RegisterNewFull
- ? t('content-form.title.crosswalk-register')
- : modalType == ModalType.RegisterNewMscr
- ? t('content-form.title.crosswalk-create')
- : modalType == ModalType.MscrCopy
- ? t('content-form.title.crosswalk-mscr-copy')
- : t('content-form.title.crosswalk-revision')}
- </ModalTitle>
- </div>
- <div className="col-4">
- <CloseButton
- style={{ float: 'right' }}
- variant="secondaryNoBorder"
- icon={<IconClose />}
- aria-label="t('cancel')"
- onClick={() => handleClose()}
- ></CloseButton>
- </div>
- </div>
+ <ModalTitle>
+ {contentType == Type.Schema
+ ? modalType == ModalType.RegisterNewFull
+ ? t('content-form.title.schema-register')
+ : modalType == ModalType.MscrCopy
+ ? t('content-form.title.schema-mscr-copy')
+ : t('content-form.title.schema-revision')
+ : modalType == ModalType.RegisterNewFull
+ ? t('content-form.title.crosswalk-register')
+ : modalType == ModalType.RegisterNewMscr
+ ? t('content-form.title.crosswalk-create')
+ : modalType == ModalType.MscrCopy
+ ? t('content-form.title.crosswalk-mscr-copy')
+ : t('content-form.title.crosswalk-revision')}
+ </ModalTitle>
{(modalType == ModalType.RegisterNewFull ||
modalType == ModalType.RevisionFull) &&