improve modal system

src/components/Modal.jsx

@@ -77,42 +77,47 @@ const Modal = ({
 	if (!show) return null;
 
 	return (
-		<Portal into={`body`}>
+		<Portal into={`#portal`}>
-			<div
+			<>
-				role="dialog"
+				{/* <div class="modal-overlay" /> */}
-				class={`${extraClasses || ''} modal is-modal-visible ${
+				<div
-					small ? 'modal--small' : ''
+					role="dialog"
-				}`}
+					class={`${extraClasses || ''} modal is-modal-visible ${
-				ref={overlayRef}
+						small ? 'modal--small' : ''
-				onClick={onOverlayClick}
+					}   
-			>
+					${noOverlay ? 'modal--no-overlay' : ''}
-				<div class="modal__content">
+					`}
-					{hideCloseButton ? null : (
+					ref={overlayRef}
-						<button
+					onClick={onOverlayClick}
-							type="button"
+				>
-							onClick={closeHandler}
+					<div class="modal__content">
-							aria-label="Close modal"
+						{hideCloseButton ? null : (
-							data-testid="closeModalButton"
+							<button
-							title="Close"
+								type="button"
-							class="js-modal__close-btn dialog__close-btn modal__close-btn"
+								onClick={closeHandler}
-						>
+								aria-label="Close modal"
-							<svg
+								data-testid="closeModalButton"
-								xmlns="http://www.w3.org/2000/svg"
+								title="Close"
-								viewBox="0 0 24 24"
+								class="js-modal__close-btn dialog__close-btn modal__close-btn"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth="3.5"
-								strokeLinecap="round"
-								strokeLinejoin="round"
 							>
-								<line x1="18" y1="6" x2="6" y2="18"></line>
+								<svg
-								<line x1="6" y1="6" x2="18" y2="18"></line>
+									xmlns="http://www.w3.org/2000/svg"
-							</svg>
+									viewBox="0 0 24 24"
-						</button>
+									fill="none"
-					)}
+									stroke="currentColor"
-					{children}
+									strokeWidth="3.5"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								>
+									<line x1="18" y1="6" x2="6" y2="18"></line>
+									<line x1="6" y1="6" x2="18" y2="18"></line>
+								</svg>
+							</button>
+						)}
+						{children}
+					</div>
 				</div>
-			</div>
+			</>
 		</Portal>
 	);
 };

src/components/app.jsx

@@ -73,6 +73,9 @@ import { Assets } from './Assets.jsx';
 import { LocalStorageKeys } from '../constants.js';
 import { Share } from './Share.jsx';
 import { Pro } from './Pro.jsx';
+import { VStack } from './Stack.jsx';
+import { ProBadge } from './ProBadge.jsx';
+import { Text } from './Text.jsx';
 
 if (module.hot) {
 	require('preact/debug');
@@ -124,7 +127,8 @@ export default class App extends Component {
 			isCommandPaletteOpen: false,
 			isAssetsOpen: false,
 			isShareModalOpen: false,
-			isProModalOpen: false
+			isProModalOpen: false,
+			isFilesLimitModalOpen: false
 		};
 		this.state = {
 			isSavedItemPaneOpen: false,
@@ -1497,9 +1501,11 @@ export default class App extends Component {
 				this.setState({ isCreateNewModalOpen: false });
 			} else {
 				trackEvent('ui', 'FileModeCreationLimitMessageSeen');
-				return alert(
+				// this.closeAllOverlays();
-					'"Files mode" is currently in beta and is limited to only 2 creations per user. You have already made 2 creations in Files mode.\n\nNote: You can choose to delete old ones to create new.'
+				this.setState({ isFilesLimitModalOpen: true });
-				);
+				// return alert(
+				// 	'"Files mode" is currently in beta and is limited to only 2 creations per user. You have already made 2 creations in Files mode.\n\nNote: You can choose to delete old ones to create new.'
+				// );
 			}
 		});
 	}
@@ -1828,7 +1834,7 @@ export default class App extends Component {
 								this.proBtnClickHandler();
 							}}
 							onLoginBtnClick={() => {
-								this.setState({ isAssetsOpen: false });
+								this.closeAllOverlays();
 								this.loginBtnClickHandler();
 							}}
 						/>
@@ -1848,7 +1854,7 @@ export default class App extends Component {
 								this.setState({ currentItem: item });
 							}}
 							onLoginBtnClick={() => {
-								this.setState({ isShareModalOpen: false });
+								this.closeAllOverlays();
 								this.loginBtnClickHandler();
 							}}
 						/>
@@ -1925,6 +1931,23 @@ export default class App extends Component {
 						)}
 					/>
 
+					<Modal
+						extraClasses=""
+						show={this.state.isFilesLimitModalOpen}
+						closeHandler={() => this.setState({ isFilesLimitModalOpen: false })}
+					>
+						<VStack align="stretch" gap={2}>
+							<Text tag="p">
+								You have used your quota of 2 'Files mode' creations in Free
+								plan.
+							</Text>
+							<Text tag="p">
+								You can choose to delete old ones to free quota or upgrade to{' '}
+								<ProBadge />.{' '}
+							</Text>
+						</VStack>
+					</Modal>
+
 					<CommandPalette
 						show={this.state.isCommandPaletteOpen}
 						files={linearizeFiles(this.state.currentItem.files || [])}

src/style.css

@@ -26,6 +26,10 @@
 
 	--duration-modal-show: 0.3s;
 	--duration-modal-overlay-show: 0.2s;
+
+	--zindex-modal-overlay: 5;
+	--zindex-footer: 6;
+	--zindex-modal: 2000;
 }
 
 html {
@@ -796,7 +800,7 @@ body > #demo-frame {
 	display: flex;
 	justify-content: space-between;
 	/* Because .console is 6 */
-	z-index: 6;
+	z-index: var(--zindex-footer);
 }
 
 .main-header {
@@ -1016,13 +1020,23 @@ body > #demo-frame {
 	display: flex;
 	align-items: baseline;
 	justify-content: center;
-	z-index: 2000;
+	z-index: var(--zindex-modal);
 	visibility: hidden;
-	/* background-color: rgba(102, 51, 153, 0.7); */
-	/* background-color: rgba(0, 0, 0, 0.7); */
 	/* To prevent scroll repaint inside modal */
+
+	z-index: var(--zindex-modal-overlay);
+	/* opacity: 0; */
+	will-change: opacity;
+	/* background: var(--color-overlay); */
+	backdrop-filter: blur(5px) grayscale(1);
+	transition: opacity var(--duration-modal-overlay-show);
+
 	will-change: transform;
 }
+.modal--no-overlay {
+	background: none;
+	backdrop-filter: none;
+}
 
 @keyframes anim-modal-overlay {
 	to {
@@ -1102,7 +1116,7 @@ body > #demo-frame {
 	visibility: hidden;
 	top: 0;
 	left: 0;
-	z-index: 5;
+	z-index: var(--zindex-modal-overlay);
 	opacity: 0;
 	will-change: opacity;
 	/* background: var(--color-overlay); */