fixed input appearance

.vscode/settings.json

@@ -1,8 +1,9 @@
 {
   "eslint.enable": true,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-  "editor.rulers": [100],
+  "editor.rulers": [
-  "prettier.eslintIntegration": true,
+    100
+  ],
   "editor.formatOnSave": true,
   "editor.formatOnSaveTimeout": 750,
   "[javascript]": {

src/components/profile/ProfileSettings/index.tsx

@@ -1,46 +1,53 @@
-import React, { FC, useState, useEffect, useCallback } from 'react';
+import React, { FC, useState, useEffect, useCallback } from "react";
-import styles from './styles.scss';
+import styles from "./styles.scss";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import classNames from 'classnames';
+import classNames from "classnames";
-import { selectAuthUser, selectAuthProfile } from '~/redux/auth/selectors';
+import { selectAuthUser, selectAuthProfile } from "~/redux/auth/selectors";
-import { Textarea } from '~/components/input/Textarea';
+import { Textarea } from "~/components/input/Textarea";
-import { Button } from '~/components/input/Button';
+import { Button } from "~/components/input/Button";
-import { Group } from '~/components/containers/Group';
+import { Group } from "~/components/containers/Group";
-import { Filler } from '~/components/containers/Filler';
+import { Filler } from "~/components/containers/Filler";
-import { TextInput } from '~/components/input/TextInput';
+import { TextInput } from "~/components/input/TextInput";
-import { InputText } from '~/components/input/InputText';
+import { InputText } from "~/components/input/InputText";
-import reject from 'ramda/es/reject';
+import reject from "ramda/es/reject";
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import * as AUTH_ACTIONS from "~/redux/auth/actions";
-import { ERROR_LITERAL } from '~/constants/errors';
+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 [password, setPassword] = useState("");
-  const [new_password, setNewPassword] = useState('');
+  const [new_password, setNewPassword] = useState("");
 
   const [data, setData] = useState(user);
 
-  const setDescription = useCallback(description => setData({ ...data, description }), [
+  const setDescription = useCallback(
-    data,
+    description => setData({ ...data, description }),
-    setData,
+    [data, setData]
-  ]);
+  );
 
-  const setEmail = useCallback(email => setData({ ...data, email }), [data, setData]);
+  const setEmail = useCallback(email => setData({ ...data, email }), [
-  const setUsername = useCallback(username => setData({ ...data, username }), [data, setData]);
+    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}>

src/constants/errors.ts

@@ -1,27 +1,35 @@
 export const ERRORS = {
-  NOT_AN_EMAIL: 'Not_An_Email',
+  NOT_AN_EMAIL: "Not_An_Email",
-  TOO_SHIRT: 'Is_Too_Shirt',
+  TOO_SHIRT: "Is_Too_Shirt",
-  EMPTY_RESPONSE: 'Empty_Response',
+  EMPTY_RESPONSE: "Empty_Response",
-  NO_COMMENTS: 'No_Comments',
+  NO_COMMENTS: "No_Comments",
-  FILES_REQUIRED: 'Files_Required',
+  FILES_REQUIRED: "Files_Required",
-  TEXT_REQUIRED: 'Text_Required',
+  TEXT_REQUIRED: "Text_Required",
-  UNKNOWN_NODE_TYPE: 'Unknown_Node_Type',
+  UNKNOWN_NODE_TYPE: "Unknown_Node_Type",
-  URL_INVALID: 'Url_Invalid',
+  URL_INVALID: "Url_Invalid",
-  FILES_AUDIO_REQUIRED: 'Files_Audio_Required',
+  FILES_AUDIO_REQUIRED: "Files_Audio_Required",
-  NOT_ENOUGH_RIGHTS: 'Not_Enough_Rights',
+  NOT_ENOUGH_RIGHTS: "Not_Enough_Rights",
-  INCORRECT_DATA: 'Incorrect_Data',
+  INCORRECT_DATA: "Incorrect_Data",
+  IMAGE_CONVERSION_FAILED: "Image_Conversion_Failed",
+  USER_NOT_FOUND: "User_Not_found",
+  USER_EXIST: "User_Exist",
+  INCORRECT_PASSWORD: "Incorrect_Password"
 };
 
 export const ERROR_LITERAL = {
-  [ERRORS.NOT_AN_EMAIL]: 'Введите правильный e-mail',
+  [ERRORS.NOT_AN_EMAIL]: "Введите правильный e-mail",
-  [ERRORS.TOO_SHIRT]: 'Слишком короткий',
+  [ERRORS.TOO_SHIRT]: "Слишком короткий",
-  [ERRORS.NO_COMMENTS]: 'Комментариев пока нет',
+  [ERRORS.NO_COMMENTS]: "Комментариев пока нет",
-  [ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
+  [ERRORS.EMPTY_RESPONSE]: "Пустой ответ сервера",
-  [ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
+  [ERRORS.FILES_REQUIRED]: "Добавьте файлы",
-  [ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
+  [ERRORS.TEXT_REQUIRED]: "Нужно немного текста",
-  [ERRORS.UNKNOWN_NODE_TYPE]: 'Неизвестный тип поста',
+  [ERRORS.UNKNOWN_NODE_TYPE]: "Неизвестный тип поста",
-  [ERRORS.URL_INVALID]: 'Неизвестный адрес',
+  [ERRORS.URL_INVALID]: "Неизвестный адрес",
-  [ERRORS.FILES_AUDIO_REQUIRED]: 'Нужна хотя бы одна песня',
+  [ERRORS.FILES_AUDIO_REQUIRED]: "Нужна хотя бы одна песня",
-  [ERRORS.NOT_ENOUGH_RIGHTS]: 'У вас недостаточно прав',
+  [ERRORS.NOT_ENOUGH_RIGHTS]: "У вас недостаточно прав",
-  [ERRORS.INCORRECT_DATA]: 'Недопустимые данные',
+  [ERRORS.INCORRECT_DATA]: "Недопустимые данные",
+  [ERRORS.IMAGE_CONVERSION_FAILED]: "Не удалось изменить изображение",
+  [ERRORS.USER_NOT_FOUND]: "Пользователь не найден",
+  [ERRORS.USER_EXIST]: "Такой пользователь уже существует",
+  [ERRORS.INCORRECT_PASSWORD]: "Неправильный пароль"
 };

src/styles/inputs.scss

@@ -13,8 +13,12 @@
   background: $input_bg_color;
 
   &::before {
-    content: ' ';
+    content: " ";
-    background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
+    background: linear-gradient(
+      270deg,
+      $input_bg_color $gap,
+      transparentize($input_bg_color, 1)
+    );
     position: absolute;
     width: $gap * 2;
     height: $input_height;
@@ -94,7 +98,7 @@
 
   &.required {
     &::after {
-      content: ' ';
+      content: " ";
       width: 5px;
       height: 5px;
       border-radius: 3px;
@@ -129,7 +133,7 @@
     }
 
     .title {
-      padding-right: 40px;
+      // padding-right: 40px;
     }
 
     &.focused {
@@ -259,11 +263,11 @@
   .title {
     font: $font;
     position: absolute;
-    left: 0;
+    left: 6px;
-    width: 100%;
+    // width: 100%;
     top: 12px;
     bottom: auto;
-    padding: 0 16px;
+    padding: 0 4px;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -273,6 +277,7 @@
     touch-action: none;
     color: transparentize(white, 0.3);
     text-transform: capitalize;
+    background: $input_bg_color;
 
     span {
       font: $font;