Page MenuHomePhorge
Files F32566041

D11025.1767372716.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D11025.1767372716.diff
View Options

diff --git a/web/modals/unsaved-changes-modal.css b/web/modals/unsaved-changes-modal.css
--- a/web/modals/unsaved-changes-modal.css
+++ b/web/modals/unsaved-changes-modal.css
@@ -4,17 +4,7 @@
display: flex;
align-items: center;
justify-content: center;
- margin: 0 50px;
-}
-
-.unsavedChangesModalButtons {
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-self: center;
- align-items: stretch;
- margin: 16px 64px 16px 0;
+ margin-bottom: 16px;
}
.unsavedChangesCloseModalButton {
diff --git a/web/modals/unsaved-changes-modal.react.js b/web/modals/unsaved-changes-modal.react.js
--- a/web/modals/unsaved-changes-modal.react.js
+++ b/web/modals/unsaved-changes-modal.react.js
@@ -9,7 +9,6 @@
import Button, { buttonThemes } from '../components/button.react.js';
function UnsavedChangesModal(): React.Node {
- const modalName = '';
const { popModal } = useModalContext();
const onCloseModalClick = React.useCallback(() => {
@@ -18,36 +17,52 @@
popModal();
}, [popModal]);
- return (
- <Modal
- name={modalName}
- onClose={popModal}
- withCloseButton={false}
- size="large"
- >
- <div className={css.unsavedChangesModalText}>
- You have unsaved changes, are you sure you want to close the modal? You
- will lose all your progress.
- </div>
- <div className={css.unsavedChangesModalButtons}>
- <Button
- variant="outline"
- className={css.unsavedChangesBackButton}
- onClick={popModal}
- >
- Back
- </Button>
- <Button
- variant="filled"
- className={css.unsavedChangesCloseModalButton}
- buttonColor={buttonThemes.danger}
- onClick={onCloseModalClick}
- >
- Close Modal
- </Button>
- </div>
- </Modal>
+ const primaryButton = React.useMemo(
+ () => (
+ <Button
+ variant="filled"
+ className={css.unsavedChangesCloseModalButton}
+ buttonColor={buttonThemes.danger}
+ onClick={onCloseModalClick}
+ >
+ Close Modal
+ </Button>
+ ),
+ [onCloseModalClick],
);
+
+ const secondaryButton = React.useMemo(
+ () => (
+ <Button
+ variant="outline"
+ className={css.unsavedChangesBackButton}
+ onClick={popModal}
+ >
+ Back
+ </Button>
+ ),
+ [popModal],
+ );
+
+ const unsavedChangesModal = React.useMemo(
+ () => (
+ <Modal
+ onClose={popModal}
+ withCloseButton={false}
+ size="large"
+ primaryButton={primaryButton}
+ secondaryButton={secondaryButton}
+ >
+ <div className={css.unsavedChangesModalText}>
+ You have unsaved changes. Are you sure you want to close the modal?
+ You will lose all your progress.
+ </div>
+ </Modal>
+ ),
+ [popModal, primaryButton, secondaryButton],
+ );
+
+ return unsavedChangesModal;
}
export default UnsavedChangesModal;

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 2, 4:51 PM (19 h, 46 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5877365
Default Alt Text
D11025.1767372716.diff (2 KB)

Event Timeline