fixed typos

src/containers/dialogs/ExampleDialog/index.tsx

@@ -1,12 +1,12 @@
-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";
+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';
 
 type IProps = IDialogProps & {};
 

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,17 +1,17 @@
-import React, { FC, useState } 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 "./styles.scss";
+import React, { FC, useState } 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 './styles.scss';
 type IProps = IDialogProps & {};
 
 const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
-  const [username, setUserName] = useState("");
-  const [password, setPassword] = useState("");
+  const [username, setUserName] = useState('');
+  const [password, setPassword] = useState('');
 
   const title = <div>title</div>;
 
@@ -30,6 +30,11 @@ const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
       <Padder>
         <div className={styles.wrap}>
           <Group>
+            <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
+
+            <div />
+            <div />
+
             <InputText title="Логин" handler={setUserName} value={username} />
             <InputText title="Пароль" handler={setPassword} value={password} />
           </Group>

src/containers/dialogs/LoginDialog/styles.scss

@@ -1,6 +1,8 @@
 .wrap {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   min-height: 400px;
+  padding: 20px;
+  margin: auto;
 }

src/containers/dialogs/Modal/index.tsx

@@ -1,16 +1,16 @@
-import React, { Attributes, FC, useCallback } from "react";
-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, IDialogProps } from "~/redux/modal/constants";
-import ReactDOM from "react-dom";
+import React, { Attributes, FC, useCallback } from 'react';
+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, IDialogProps } from '~/redux/modal/constants';
+import ReactDOM from 'react-dom';
 
 const mapStateToProps = ({ modal }: IState) => ({ ...modal });
 const mapDispatchToProps = {
   modalSetShown: ACTIONS.modalSetShown,
   modalSetDialog: ACTIONS.modalSetDialog,
-  modalShowDialog: ACTIONS.modalShowDialog
+  modalShowDialog: ACTIONS.modalShowDialog,
 };
 
 type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
@@ -20,7 +20,7 @@ const ModalUnconnected: FC<IProps> = ({
   modalSetDialog,
   modalShowDialog,
   is_shown,
-  dialog
+  dialog,
 }) => {
   const onRequestClose = useCallback(() => {
     modalSetShown(false);
@@ -37,19 +37,19 @@ const ModalUnconnected: FC<IProps> = ({
           <div className={styles.content_padder}>
             {React.createElement(DIALOG_CONTENT[dialog], {
               onRequestClose,
-              onDialogChange: modalShowDialog
+              onDialogChange: modalShowDialog,
             } as IDialogProps)}
           </div>
         </div>
       </div>
     </div>,
-    document.body
+    document.body,
   );
 };
 
 const Modal = connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(ModalUnconnected);
 
 export { ModalUnconnected, Modal };

src/containers/dialogs/ScrollDialog/index.tsx

@@ -21,7 +21,6 @@ const ScrollDialog: FC<IProps> = ({
   children,
   title,
   buttons,
-  size = "medium",
   width = 800,
   top_sticky,
   top_sticky_offset,
@@ -61,7 +60,7 @@ const ScrollDialog: FC<IProps> = ({
       <div
         className={classNames(styles.content, {
           has_buttons: !!buttons,
-          has_title: !!title
+          has_title: true
         })}
         style={{ flexBasis: width }}
       >
@@ -84,6 +83,14 @@ const ScrollDialog: FC<IProps> = ({
           </div>
         )}
 
+        {!title && (
+          <div className={styles.top}>
+            <div className={styles.wrap} style={{ flexBasis: width }}>
+              <div className={styles.top_cap} />
+            </div>
+          </div>
+        )}
+
         {!!buttons && (
           <div className={styles.bottom}>
             <div className={styles.wrap} style={{ flexBasis: width }}>

src/containers/dialogs/ScrollDialog/styles.scss

@@ -50,6 +50,13 @@
   z-index: 2;
 }
 
+.top {
+  .wrap {
+    display: flex;
+    align-items: flex-end;
+  }
+}
+
 .bottom {
   bottom: 15px;
   top: auto;
@@ -94,5 +101,22 @@
 
 .children {
   background: $content_bg;
-  radius: $radius;
+  border-radius: $radius;
+}
+
+.top_cap {
+  height: $radius;
+  background: $content_bg;
+  border-radius: $radius $radius 0 0;
+  flex: 1;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: " ";
+    width: 100%;
+    height: $gap;
+    background: linear-gradient($content_bg, transparentize($content_bg, 1));
+    bottom: -$gap;
+  }
 }