logindialog initial

src/containers/dialogs/LoginDialog/index.tsx

@@ -0,0 +1,42 @@
+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 title = <div>title</div>;
+
+  const buttons = (
+    <Padder>
+      <Group horizontal>
+        <Button title="ВОЙТИ" stretchy />
+      </Group>
+    </Padder>
+  );
+
+  useCloseOnEscape(onRequestClose);
+
+  return (
+    <ScrollDialog buttons={buttons} width={300}>
+      <Padder>
+        <div className={styles.wrap}>
+          <Group>
+            <InputText title="Логин" handler={setUserName} value={username} />
+            <InputText title="Пароль" handler={setPassword} value={password} />
+          </Group>
+        </div>
+      </Padder>
+    </ScrollDialog>
+  );
+};
+
+export { LoginDialog };

src/containers/dialogs/LoginDialog/styles.scss

@@ -0,0 +1,6 @@
+.wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}

src/containers/dialogs/ScrollDialog/styles.scss

@@ -56,6 +56,7 @@
 
   .pan {
     border-radius: 0 0 $radius $radius;
+    box-shadow: transparentize($color: black, $amount: 0.8) 0 8px 0;
   }
 }
 
@@ -88,7 +89,7 @@
 
 .pan {
   background: darken($content_bg, 4%);
-  height: 64px;
+  max-height: 64px;
 }
 
 .children {

src/redux/modal/constants.ts

@@ -1,6 +1,7 @@
 import { ValueOf } from "~/redux/types";
 import { HorizontalExample } from "~/containers/examples/HorizontalExample";
 import { ExampleDialog } from "~/containers/dialogs/ExampleDialog";
+import { LoginDialog } from "~/containers/dialogs/LoginDialog";
 
 export const MODAL_ACTIONS = {
   SET_SHOWN: "MODAL.SET_SHOWN",
@@ -9,11 +10,13 @@ export const MODAL_ACTIONS = {
 };
 
 export const DIALOGS = {
-  TEST: "TEST"
+  TEST: "TEST",
+  LOGIN: "LOGIN"
 };
 
 export const DIALOG_CONTENT = {
-  [DIALOGS.TEST]: ExampleDialog
+  [DIALOGS.TEST]: ExampleDialog,
+  [DIALOGS.LOGIN]: LoginDialog
 };
 
 export interface IDialogProps {

src/redux/modal/reducer.ts

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