Merge pull request #218 from CSCfi/CSCFC4EMSCR-581_Modal-x-button-fix

CSCFC4EMSCR-581 Fix modal close button
CSCfi · Oct 9, 2024 · 5cb5196 · 5cb5196
2 parents 6e3d4ef + ad3215f
commit 5cb5196
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git 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
@@ -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) &&
@@ -647,7 +639,7 @@ export default function FormModal({
                   : t('content-form.button.crosswalk-revision')}
         </Button>
         <Button variant="secondary" onClick={() => handleClose()}>
-          {t('cancel')}
+          {userPosted ? t('close') : t('cancel')}
         </Button>
       </ModalFooter>
     </Modal>