dialog close button

src/containers/dialogs/EditorDialog/index.tsx

@@ -41,7 +41,7 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
   useCloseOnEscape(onRequestClose);
 
   return (
-    <ScrollDialog buttons={buttons} width={860}>
+    <ScrollDialog buttons={buttons} width={860} onClose={onRequestClose}>
       <div className={styles.editor}>
         <ImageEditor
           data={data}

src/containers/dialogs/ScrollDialog/index.tsx

@@ -10,12 +10,14 @@ interface IProps {
   buttons?: JSX.Element;
   size?: "medium" | "big";
   width?: number;
-  onOverlayClick?: MouseEventHandler<HTMLDivElement>;
-  onRefCapture?: (ref: any) => void;
   error?: string;
 
   top_sticky?: ReactChild;
   top_sticky_offset?: number;
+
+  onOverlayClick?: MouseEventHandler<HTMLDivElement>;
+  onRefCapture?: (ref: any) => void;
+  onClose?: () => void;
 }
 
 const ScrollDialog: FC<IProps> = ({
@@ -27,7 +29,8 @@ const ScrollDialog: FC<IProps> = ({
   top_sticky_offset,
   error,
   onOverlayClick,
-  onRefCapture
+  onRefCapture,
+  onClose,
 }) => {
   const [height, setHeight] = useState(window.innerHeight - 120);
   const [show_top_sticky, setShowTopSticky] = useState(false);
@@ -74,6 +77,8 @@ const ScrollDialog: FC<IProps> = ({
         {!!title && (
           <div className={styles.top}>
             <div className={styles.wrap} style={{ flexBasis: width }}>
+              { onClose && <div className={styles.close} onClick={onClose}/> }
+
               <div className={styles.pan}>
                 {title}
                 {show_top_sticky && top_sticky && (
@@ -87,6 +92,8 @@ const ScrollDialog: FC<IProps> = ({
         {!title && (
           <div className={styles.top}>
             <div className={styles.wrap} style={{ flexBasis: width }}>
+              { onClose && <div className={styles.close} onClick={onClose}/> }
+
               <div className={styles.top_cap} />
             </div>
           </div>

src/containers/dialogs/ScrollDialog/styles.scss

@@ -20,7 +20,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  padding: 10px 0 0 0;
+  padding: 40px 0 0 0;
   box-sizing: border-box;
   flex: 1 1 800px;
   z-index: 1;
@@ -51,7 +51,7 @@
 }
 
 .top {
-  height: 10px;
+  height: 40px;
   top: 0;
 
   &:global(.has_buttons) {
@@ -155,3 +155,45 @@
     opacity: 1;
   }
 }
+
+@keyframes spin_1 {
+  0% { transform: rotate(0); }
+  100% { transform: rotate(45deg); }
+}
+
+@keyframes spin_2 {
+  0% { transform: rotate(0); }
+  100% { transform: rotate(-45deg); }
+}
+
+.close {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.5s, transform 0.25s;
+
+  &:hover {
+    opacity: 1;
+    transform: translate(-50%, -4px);
+  }
+
+  &::before, &::after {
+    content: ' ';
+    width: 32px;
+    height: 2px;
+    background: white;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    animation: spin_1 0.5s forwards;
+  }
+
+  &::before {
+    animation: spin_2 0.5s forwards;
+  }
+}