refactor: refactor: popup, popup-styles

healthy-food-and-dietary-products · Nov 19, 2023 · c8fd67f · c8fd67f
1 parent 0e2db5a
commit c8fd67f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
 	</head>
 	<body>
 		<div id="root"></div>
+		<div id="popup"></div>
 		<script type="module" src="/src/main.tsx"></script>
 	</body>
 </html>
diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import styles from './popup.module.scss';
+import { createPortal } from 'react-dom';
 
 type PopupProps = {
 	openPopup: boolean;
@@ -8,23 +9,29 @@ type PopupProps = {
 	additionalClasses?: string;
 };
 
+const popupRoot = document.querySelector('#popup');
+
 const Popup: React.FC<PopupProps> = ({
 	openPopup,
 	onClickClose,
 	children,
 	additionalClasses,
 }) => {
 	return (
-		<div className={openPopup ? styles['popup__open'] : styles['popup']}>
-			<div className={`${styles['popup__inner']} ${additionalClasses}`}>
-				<button
-					className={styles['popup__button']}
-					type="button"
-					onClick={onClickClose}
-				/>
-				{children}
-			</div>
-		</div>
+		popupRoot &&
+		createPortal(
+			<div className={openPopup ? styles['popup__open'] : styles['popup']}>
+				<div className={`${styles['popup__inner']} ${additionalClasses}`}>
+					<button
+						className={styles['popup__button']}
+						type="button"
+						onClick={onClickClose}
+					/>
+					{children}
+				</div>
+			</div>,
+			popupRoot
+		)
 	);
 };
 

diff --git a/src/components/popup/popup.module.scss b/src/components/popup/popup.module.scss
@@ -14,6 +14,8 @@
 	background: rgb(3 3 3 / 60%);
 	backdrop-filter: blur(10px);
 	z-index: 1111;
+	top: 0;
+	left: 0;
 }
 
 .popup__inner {
@@ -40,6 +42,7 @@
 	border: none;
 	transition: 0.3s;
 	cursor: pointer;
+	border-radius: 50%;
 
 	&:hover {
 		opacity: 0.7;