From ce4c66f28be7893ced63ababa4715aa96212e8c9 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Mon, 19 Feb 2024 18:58:30 +0000
Subject: [PATCH] improve modal frame content

---
 .../src/layouts/components/modals/index.jsx   | 17 ++++++++++++
 .../src/layouts/components/modals/index.less  | 27 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/packages/app/src/layouts/components/modals/index.jsx b/packages/app/src/layouts/components/modals/index.jsx
index 6459778c..69c1a021 100644
--- a/packages/app/src/layouts/components/modals/index.jsx
+++ b/packages/app/src/layouts/components/modals/index.jsx
@@ -1,6 +1,9 @@
 import React from "react"
 import { Modal as AntdModal } from "antd"
 import classnames from "classnames"
+
+import { Icons } from "components/Icons"
+
 import useLayoutInterface from "hooks/useLayoutInterface"
 import { DOMWindow } from "components/RenderWindow"
 
@@ -87,7 +90,17 @@ class Modal extends React.Component {
                 ref={this.contentRef}
                 onTouchEnd={this.handleClickOutside}
                 onMouseDown={this.handleClickOutside}
+                style={this.props.frameContentStyle}
             >
+                {
+                    this.props.includeCloseButton && <div
+                        className="app_modal_close"
+                        onClick={this.close}
+                    >
+                        <Icons.MdClose />
+                    </div>
+                }
+
                 {
                     React.cloneElement(this.props.children, {
                         close: this.close
@@ -106,6 +119,8 @@ export default () => {
         render,
         {
             framed = true,
+            frameContentStyle = null,
+            includeCloseButton = false,
 
             confirmOnOutsideClick = false,
             confirmOnClickTitle,
@@ -126,7 +141,9 @@ export default () => {
             onClose={() => {
                 win.destroy()
             }}
+            includeCloseButton={includeCloseButton}
             framed={framed}
+            frameContentStyle={frameContentStyle}
             confirmOnOutsideClick={confirmOnOutsideClick}
             confirmOnClickTitle={confirmOnClickTitle}
             confirmOnClickContent={confirmOnClickContent}
diff --git a/packages/app/src/layouts/components/modals/index.less b/packages/app/src/layouts/components/modals/index.less
index de966352..582e62c9 100644
--- a/packages/app/src/layouts/components/modals/index.less
+++ b/packages/app/src/layouts/components/modals/index.less
@@ -44,6 +44,8 @@
     }
 
     .app_modal_content {
+        position: relative;
+
         box-sizing: border-box;
 
         display: flex;
@@ -62,6 +64,31 @@
 
         transition: all 150ms ease-in-out;
 
+        .app_modal_close {
+            position: sticky;
+
+            align-self: flex-end;
+
+            top: 0;
+            right: 0;
+
+            font-size: 1.5rem;
+
+            cursor: pointer;
+
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+
+            padding: 5px;
+
+            border-radius: 12px;
+
+            svg {
+                margin: 0;
+                color: var(--text-color);
+            }
+        }
+
         // fixments
         .postCreator {
             box-shadow: @card-shadow;