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 &&
+
+
+ }
+
{
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;