From c2e977e48f665a0090ec0427f5ad956f9cec82dc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 15 Nov 2019 16:16:28 +0700
Subject: [PATCH] fixed login dialog

---
 .../dialogs/BetterScrollDialog/styles.scss    |  6 +-
 src/containers/dialogs/LoginDialog/index.tsx  | 71 ++++++++++++-------
 .../dialogs/LoginDialog/styles.scss           |  2 +-
 src/styles/colors.scss                        |  2 +
 4 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/containers/dialogs/BetterScrollDialog/styles.scss b/src/containers/dialogs/BetterScrollDialog/styles.scss
index 5e181c35..93d7f093 100644
--- a/src/containers/dialogs/BetterScrollDialog/styles.scss
+++ b/src/containers/dialogs/BetterScrollDialog/styles.scss
@@ -95,7 +95,11 @@
   width: 100%;
   height: 40px;
   pointer-events: none;
-  background: linear-gradient($red, transparentize($red, 1));
+  background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 $radius $radius;
 }
 
 .backdrop {
diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx
index 9e484b68..c30ba655 100644
--- a/src/containers/dialogs/LoginDialog/index.tsx
+++ b/src/containers/dialogs/LoginDialog/index.tsx
@@ -1,35 +1,37 @@
-import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-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';
-import { Padder } from '~/components/containers/Padder';
-import * as styles from './styles.scss';
-import { selectAuthLogin } from '~/redux/auth/selectors';
-import * as ACTIONS from '~/redux/auth/actions';
-import { API } from '~/constants/api';
-import { BetterScrollDialog } from '../BetterScrollDialog';
+import React, { FC, FormEvent, useCallback, useEffect, useState } from "react";
+import { connect } from "react-redux";
+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";
+import { Padder } from "~/components/containers/Padder";
+import * as styles from "./styles.scss";
+import { selectAuthLogin } from "~/redux/auth/selectors";
+import * as ACTIONS from "~/redux/auth/actions";
+import { API } from "~/constants/api";
+import { BetterScrollDialog } from "../BetterScrollDialog";
 
 const mapStateToProps = selectAuthLogin;
 
 const mapDispatchToProps = {
   userSendLoginRequest: ACTIONS.userSendLoginRequest,
-  userSetLoginError: ACTIONS.userSetLoginError,
+  userSetLoginError: ACTIONS.userSetLoginError
 };
 
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps &
+  IDialogProps & {};
 
 const LoginDialogUnconnected: FC<IProps> = ({
   onRequestClose,
   error,
   userSendLoginRequest,
-  userSetLoginError,
+  userSetLoginError
 }) => {
-  const [username, setUserName] = useState('');
-  const [password, setPassword] = useState('');
+  const [username, setUserName] = useState("");
+  const [password, setPassword] = useState("");
 
   const onSubmit = useCallback(
     (event: FormEvent) => {
@@ -40,7 +42,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
   );
 
   const onSocialLogin = useCallback(() => {
-    window.open(API.USER.VKONTAKTE_LOGIN, '', 'width=600,height=400');
+    window.open(API.USER.VKONTAKTE_LOGIN, "", "width=600,height=400");
   }, []);
 
   useEffect(() => {
@@ -59,17 +61,38 @@ const LoginDialogUnconnected: FC<IProps> = ({
 
   return (
     <form onSubmit={onSubmit}>
-      <BetterScrollDialog width={260} error={error} onClose={onRequestClose} footer={buttons}>
+      <BetterScrollDialog
+        width={260}
+        error={error}
+        onClose={onRequestClose}
+        footer={buttons}
+      >
         <Padder>
           <div className={styles.wrap}>
             <Group>
               <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
 
-              <InputText title="Логин" handler={setUserName} value={username} autoFocus />
-              <InputText title="Пароль" handler={setPassword} value={password} />
+              <InputText
+                title="Логин"
+                handler={setUserName}
+                value={username}
+                autoFocus
+              />
+
+              <InputText
+                title="Пароль"
+                handler={setPassword}
+                value={password}
+                type="password"
+              />
 
               <Group className={styles.buttons}>
-                <Button className={styles.vk} iconLeft="vk" type="button" onClick={onSocialLogin}>
+                <Button
+                  className={styles.vk}
+                  iconLeft="vk"
+                  type="button"
+                  onClick={onSocialLogin}
+                >
                   <span>Вконтакте</span>
                 </Button>
               </Group>
diff --git a/src/containers/dialogs/LoginDialog/styles.scss b/src/containers/dialogs/LoginDialog/styles.scss
index 2d162a76..3e0b6dc0 100644
--- a/src/containers/dialogs/LoginDialog/styles.scss
+++ b/src/containers/dialogs/LoginDialog/styles.scss
@@ -4,7 +4,7 @@ $vk_color: darken(desaturate($blue, 100%), 30%);
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding: $gap;
+  padding: $gap $gap 30px $gap;
 
   button {
     text-align: left;
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index e6d0754a..1fada816 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,3 +1,4 @@
+// color 0, 0, 68 is pretty cool, btw
 // $red: #ff3344;
 $red: #ff3344;
 $yellow: #ffd60f;
@@ -9,6 +10,7 @@ $olive: #8bc12a;
 $orange: #ff7549;
 $grass: #41800d;
 $wisegreen: #007962;
+// $wisegreen: #006868;
 
 $red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
 $blue_gradient: linear-gradient(170deg, $green, $dark_blue);