fixed login dialog

src/containers/dialogs/ExampleDialog/index.tsx

@@ -26,7 +26,7 @@ const ExampleDialog: FC<IProps> = ({ onRequestClose }) => {
   useCloseOnEscape(onRequestClose);
 
   return (
-    <ScrollDialog buttons={buttons} width={720}>
+    <ScrollDialog buttons={buttons} width={860}>
       <div className={styles.uploads}>
         <div className={styles.cell} />
         <div className={styles.cell} />

src/containers/dialogs/LoginDialog/index.tsx

@@ -4,7 +4,7 @@ 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 { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
 import * as styles from './styles.scss';
 type IProps = IDialogProps & {};
@@ -13,8 +13,6 @@ const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
   const [username, setUserName] = useState('');
   const [password, setPassword] = useState('');
 
-  const title = <div>title</div>;
-
   const buttons = (
     <Padder>
       <Group horizontal>
@@ -26,7 +24,7 @@ const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
   useCloseOnEscape(onRequestClose);
 
   return (
-    <ScrollDialog buttons={buttons} width={300}>
+    <ScrollDialog buttons={buttons} width={260}>
       <Padder>
         <div className={styles.wrap}>
           <Group>

src/containers/dialogs/LoginDialog/styles.scss

@@ -2,7 +2,6 @@
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  min-height: 400px;
-  padding: 20px;
+  padding: 20px 20px 60px 20px;
   margin: auto;
 }

src/containers/dialogs/ScrollDialog/index.tsx

@@ -28,11 +28,11 @@ const ScrollDialog: FC<IProps> = ({
   onOverlayClick,
   onRefCapture
 }) => {
-  const [height, setHeight] = useState(window.innerHeight - 240);
+  const [height, setHeight] = useState(window.innerHeight - 120);
   const [show_top_sticky, setShowTopSticky] = useState(false);
   const [ref, setRef] = useState(null);
 
-  const onResize = useCallback(() => setHeight(window.innerHeight - 240), []);
+  const onResize = useCallback(() => setHeight(window.innerHeight - 120), []);
 
   useEffect(() => {
     window.addEventListener("resize", onResize);
@@ -60,7 +60,7 @@ const ScrollDialog: FC<IProps> = ({
       <div
         className={classNames(styles.content, {
           has_buttons: !!buttons,
-          has_title: true
+          has_title: !!title,
         })}
         style={{ flexBasis: width }}
       >

src/containers/dialogs/ScrollDialog/styles.scss

@@ -20,17 +20,17 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  padding: 0;
+  padding: 10px 0 0 0;
   box-sizing: border-box;
   flex: 1 1 800px;
   z-index: 1;
 
   &:global(.has_title) {
-    padding-top: 64px + 15px; // +15px
+    padding-top: 60px + 10px; // +15px
   }
 
   &:global(.has_buttons) {
-    padding-bottom: 64px + 15px; // +15px
+    padding-bottom: 60px + 10px; // +15px
   }
 }
 
@@ -51,6 +51,11 @@
 }
 
 .top {
+  height: 10px;
+  top: 0;
+
+  &:global(.has_buttons) { height: 60px; top: 15px;}
+
   .wrap {
     display: flex;
     align-items: flex-end;

src/redux/modal/reducer.ts

@@ -10,7 +10,7 @@ export interface IModalState {
 
 const INITIAL_STATE: IModalState = {
   is_shown: true,
-  dialog: DIALOGS.LOGIN,
+  dialog: DIALOGS.TEST,
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);