fixing dialogs

src/containers/dialogs/ExampleDialog/index.tsx

@@ -1,14 +1,40 @@
 import React, { FC } from "react";
 import { ScrollDialog } from "../ScrollDialog";
+import { IDialogProps } from "~/redux/modal/constants";
+import { useCloseOnEscape } from "~/utils/hooks";
+import { Group } from "~/components/containers/Group";
+import { InputText } from "~/components/input/InputText";
+import { Button } from "../../../components/input/Button/index";
+import { Padder } from "~/components/containers/Padder";
+import * as styles from "~/containers/examples/HorizontalExample/styles.scss";
 
-interface IProps {}
+type IProps = IDialogProps & {};
 
-const ExampleDialog: FC<IProps> = ({}) => {
+const ExampleDialog: FC<IProps> = ({ onRequestClose }) => {
   const title = <div>title</div>;
-  const buttons = <div>buttons</div>;
+
+  const buttons = (
+    <Padder>
+      <Group horizontal>
+        <InputText title="Название" />
+
+        <Button title="Сохранить" iconRight="check" />
+      </Group>
+    </Padder>
+  );
+
+  useCloseOnEscape(onRequestClose);
+
   return (
     <ScrollDialog buttons={buttons} width={720}>
-      <div style={{ height: 1400 }}>test</div>
+      <div className={styles.uploads}>
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+        <div className={styles.cell} />
+      </div>
     </ScrollDialog>
   );
 };

src/containers/dialogs/Modal/index.tsx

@@ -3,7 +3,7 @@ import * as styles from "./styles.scss";
 import { IState } from "~/redux/store";
 import * as ACTIONS from "~/redux/modal/actions";
 import { connect } from "react-redux";
-import { DIALOG_CONTENT } from "~/redux/modal/constants";
+import { DIALOG_CONTENT, IDialogProps } from "~/redux/modal/constants";
 import ReactDOM from "react-dom";
 
 const mapStateToProps = ({ modal }: IState) => ({ ...modal });
@@ -38,7 +38,7 @@ const ModalUnconnected: FC<IProps> = ({
             {React.createElement(DIALOG_CONTENT[dialog], {
               onRequestClose,
               onDialogChange: modalShowDialog
-            } as Attributes)}
+            } as IDialogProps)}
           </div>
         </div>
       </div>

src/containers/dialogs/ScrollDialog/styles.scss

@@ -39,19 +39,19 @@
   width: 100%;
   height: 64px;
   position: absolute;
-  top: 20px;
+  top: 15px;
   bottom: auto;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 $gap;
+  padding: 0 20px;
   box-sizing: border-box;
   z-index: 2;
 }
 
 .bottom {
-  bottom: 20px;
+  bottom: 15px;
   top: auto;
 
   .pan {

src/containers/examples/HorizontalExample/styles.scss

@@ -26,6 +26,7 @@
   justify-content: stretch;
   flex-direction: column;
   flex: 1;
+
   @include outer_shadow();
 }
 
@@ -69,7 +70,7 @@
 .uploads {
   flex: 1;
   padding: $gap;
-  padding-bottom: 0;
+  // padding-bottom: 0;
   display: grid;
   align-items: center;
   justify-content: center;