fixed input appearance

src/components/profile/ProfileSettings/index.tsx

@@ -1,46 +1,53 @@
-import React, { FC, useState, useEffect, useCallback } from 'react';
-import styles from './styles.scss';
-import { connect } from 'react-redux';
-import classNames from 'classnames';
-import { selectAuthUser, selectAuthProfile } from '~/redux/auth/selectors';
-import { Textarea } from '~/components/input/Textarea';
-import { Button } from '~/components/input/Button';
-import { Group } from '~/components/containers/Group';
-import { Filler } from '~/components/containers/Filler';
-import { TextInput } from '~/components/input/TextInput';
-import { InputText } from '~/components/input/InputText';
-import reject from 'ramda/es/reject';
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import { ERROR_LITERAL } from '~/constants/errors';
+import React, { FC, useState, useEffect, useCallback } from "react";
+import styles from "./styles.scss";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import { selectAuthUser, selectAuthProfile } from "~/redux/auth/selectors";
+import { Textarea } from "~/components/input/Textarea";
+import { Button } from "~/components/input/Button";
+import { Group } from "~/components/containers/Group";
+import { Filler } from "~/components/containers/Filler";
+import { TextInput } from "~/components/input/TextInput";
+import { InputText } from "~/components/input/InputText";
+import reject from "ramda/es/reject";
+import * as AUTH_ACTIONS from "~/redux/auth/actions";
+import { ERROR_LITERAL } from "~/constants/errors";
 
 const mapStateToProps = state => ({
   user: selectAuthUser(state),
-  profile: selectAuthProfile(state),
+  profile: selectAuthProfile(state)
 });
 
 const mapDispatchToProps = {
-  authPatchUser: AUTH_ACTIONS.authPatchUser,
+  authPatchUser: AUTH_ACTIONS.authPatchUser
 };
 
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {};
 
 const ProfileSettingsUnconnected: FC<IProps> = ({
   user,
   authPatchUser,
-  profile: { patch_errors },
+  profile: { patch_errors }
 }) => {
-  const [password, setPassword] = useState('');
-  const [new_password, setNewPassword] = useState('');
+  const [password, setPassword] = useState("");
+  const [new_password, setNewPassword] = useState("");
 
   const [data, setData] = useState(user);
 
-  const setDescription = useCallback(description => setData({ ...data, description }), [
-    data,
-    setData,
-  ]);
+  const setDescription = useCallback(
+    description => setData({ ...data, description }),
+    [data, setData]
+  );
 
-  const setEmail = useCallback(email => setData({ ...data, email }), [data, setData]);
-  const setUsername = useCallback(username => setData({ ...data, username }), [data, setData]);
+  const setEmail = useCallback(email => setData({ ...data, email }), [
+    data,
+    setData
+  ]);
+  const setUsername = useCallback(username => setData({ ...data, username }), [
+    data,
+    setData
+  ]);
 
   const onSubmit = useCallback(
     event => {
@@ -51,7 +58,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
         username: data.username !== user.username && data.username,
         password: password.length > 0 && password,
         new_password: new_password.length > 0 && new_password,
-        description: data.description !== user.description && data.description,
+        description: data.description !== user.description && data.description
       });
 
       if (Object.values(fields).length === 0) return;
@@ -64,11 +71,15 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
   return (
     <form className={styles.wrap} onSubmit={onSubmit}>
       <Group>
-        <Textarea value={data.description} handler={setDescription} title="Описание" />
+        <Textarea
+          value={data.description}
+          handler={setDescription}
+          title="Описание"
+        />
 
         <div className={styles.small}>
-          Описание будет видно на странице профиля. Здесь работают те же правила оформления, что и в
-          комментариях.
+          Описание будет видно на странице профиля. Здесь работают те же правила
+          оформления, что и в комментариях.
         </div>
 
         <Group className={styles.pad}>
@@ -76,17 +87,27 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             value={data.username}
             handler={setUsername}
             title="Логин"
-            error={patch_errors.username && ERROR_LITERAL[patch_errors.username]}
+            error={
+              patch_errors.username && ERROR_LITERAL[patch_errors.username]
+            }
           />
 
-          <InputText value={data.email} handler={setEmail} title="E-mail" />
+          <InputText
+            value={data.email}
+            handler={setEmail}
+            title="E-mail"
+            error={patch_errors.email && ERROR_LITERAL[patch_errors.email]}
+          />
 
           <InputText
             value={new_password}
             handler={setNewPassword}
             title="Новый пароль"
             type="password"
-            error={patch_errors.new_password && ERROR_LITERAL[patch_errors.new_password]}
+            error={
+              patch_errors.new_password &&
+              ERROR_LITERAL[patch_errors.new_password]
+            }
           />
 
           <div />
@@ -96,7 +117,9 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             handler={setPassword}
             title="Старый пароль"
             type="password"
-            error={patch_errors.password && ERROR_LITERAL[patch_errors.password]}
+            error={
+              patch_errors.password && ERROR_LITERAL[patch_errors.password]
+            }
           />
 
           <div className={styles.small}>