From 9e84c332c90520827ed186b33787e3d2be65fead Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Wed, 23 Oct 2024 13:10:16 +0800
Subject: [PATCH] full screen support for modals

---
 frontend/app/modals/modal.less | 10 ++++++++++
 frontend/app/modals/modal.tsx  | 23 +++++++++++++++++------
 frontend/app/modals/tos.tsx    |  2 +-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/app/modals/modal.less b/frontend/app/modals/modal.less
index 46ebe01a6..2a282614f 100644
--- a/frontend/app/modals/modal.less
+++ b/frontend/app/modals/modal.less
@@ -70,3 +70,13 @@
         }
     }
 }
+
+.full-screen {
+    background: var(--modal-bg-color);
+
+    .modal {
+        box-shadow: none;
+        background: transparent;
+        border: none;
+    }
+}
diff --git a/frontend/app/modals/modal.tsx b/frontend/app/modals/modal.tsx
index bdf14602b..e88a54c50 100644
--- a/frontend/app/modals/modal.tsx
+++ b/frontend/app/modals/modal.tsx
@@ -13,6 +13,7 @@ interface ModalProps {
     okLabel?: string;
     cancelLabel?: string;
     className?: string;
+    fullScreen?: boolean;
     onClickBackdrop?: () => void;
     onOk?: () => void;
     onCancel?: () => void;
@@ -20,15 +21,21 @@ interface ModalProps {
 }
 
 const Modal = forwardRef<HTMLDivElement, ModalProps>(
-    ({ children, className, cancelLabel, okLabel, onCancel, onOk, onClose, onClickBackdrop }: ModalProps, ref) => {
-        const renderBackdrop = (onClick) => <div className="modal-backdrop" onClick={onClick}></div>;
+    (
+        { children, className, cancelLabel, okLabel, fullScreen, onCancel, onOk, onClose, onClickBackdrop }: ModalProps,
+        ref
+    ) => {
+        const renderBackdrop = (onClick) => {
+            if (fullScreen) return null;
+            <div className="modal-backdrop" onClick={onClick}></div>;
+        };
 
         const renderFooter = () => {
             return onOk || onCancel;
         };
 
         const renderModal = () => (
-            <div className="modal-wrapper">
+            <div className={clsx("modal-wrapper", { "full-screen": fullScreen === true })}>
                 {renderBackdrop(onClickBackdrop)}
                 <div ref={ref} className={clsx(`modal`, className)}>
                     <Button className="grey ghost modal-close-btn" onClick={onClose} title="Close (ESC)">
@@ -79,6 +86,7 @@ const ModalFooter = ({ onCancel, onOk, cancelLabel = "Cancel", okLabel = "Ok" }:
 interface FlexiModalProps {
     children?: React.ReactNode;
     className?: string;
+    fullScreen?: boolean;
     onClickBackdrop?: () => void;
 }
 
@@ -89,11 +97,14 @@ interface FlexiModalComponent
 }
 
 const FlexiModal = forwardRef<HTMLDivElement, FlexiModalProps>(
-    ({ children, className, onClickBackdrop }: FlexiModalProps, ref) => {
-        const renderBackdrop = (onClick: () => void) => <div className="modal-backdrop" onClick={onClick}></div>;
+    ({ children, className, fullScreen, onClickBackdrop }: FlexiModalProps, ref) => {
+        const renderBackdrop = (onClick: () => void) => {
+            if (fullScreen) return null;
+            return <div className="modal-backdrop" onClick={onClick}></div>;
+        };
 
         const renderModal = () => (
-            <div className="modal-wrapper">
+            <div className={clsx("modal-wrapper", { "full-screen": fullScreen === true })}>
                 {renderBackdrop(onClickBackdrop)}
                 <div className={`modal ${className}`} ref={ref}>
                     {children}
diff --git a/frontend/app/modals/tos.tsx b/frontend/app/modals/tos.tsx
index da6e2afa2..a23d530c1 100644
--- a/frontend/app/modals/tos.tsx
+++ b/frontend/app/modals/tos.tsx
@@ -259,7 +259,7 @@ const TosModal = () => {
         return null;
     }
     return (
-        <FlexiModal className="tos-modal" ref={modalRef}>
+        <FlexiModal className="tos-modal" ref={modalRef} fullScreen>
             <OverlayScrollbarsComponent className="modal-inner" options={{ scrollbars: { autoHide: "leave" } }}>
                 {pageComp}
             </OverlayScrollbarsComponent>