moved accounts to settings

src/components/main/UserButton/index.tsx

@@ -22,10 +22,6 @@ const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, on
     authOpenProfile(username, 'settings');
   }, [authOpenProfile, username]);
 
-  const onAccountsOpen = useCallback(() => {
-    authOpenProfile(username, 'accounts');
-  }, [authOpenProfile, username]);
-
   return (
     <div className={styles.wrap}>
       <Group horizontal className={styles.user_button}>
@@ -42,7 +38,6 @@ const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, on
       <div className={styles.menu}>
         <div onClick={onProfileOpen}>Профиль</div>
         <div onClick={onSettingsOpen}>Настройки</div>
-        <div onClick={onAccountsOpen}>Аккаунты</div>
         <div onClick={onLogout}>Выдох</div>
       </div>
     </div>

src/components/profile/ProfileAccounts/styles.scss

@@ -1,10 +1,9 @@
 .wrap {
-  padding: $gap;
 }
 
 .list {
-  box-shadow: inset transparentize(white, 0.9) 0 0 0 2px;
   border-radius: $radius;
+  background: transparentize(white, 0.95);
 }
 
 .buttons {
@@ -80,6 +79,6 @@
 }
 
 .info {
-  padding: $gap;
+  padding: $gap $gap / 2;
   font: $font_14_regular;
 }

src/components/profile/ProfileAccountsError/styles.scss

@@ -12,6 +12,7 @@
   margin: 0 !important;
   padding: $gap;
   box-sizing: border-box;
+  border-radius: $radius;
 
   @include can_backdrop {
     background-color: transparentize($red, 0.5);

src/components/profile/ProfileSettings/index.tsx

@@ -11,6 +11,7 @@ import reject from 'ramda/es/reject';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
+import classNames from 'classnames';
 
 const mapStateToProps = state => ({
   user: selectAuthUser(state),
@@ -70,7 +71,11 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
   return (
     <form className={styles.wrap} onSubmit={onSubmit}>
       <Group>
-        <Group>
+        <Group className={styles.pad}>
+          <div className={styles.pad__title}>
+            <span>О себе</span>
+          </div>
+
           <InputText
             value={data.fullname}
             handler={setFullname}
@@ -86,7 +91,13 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
           </div>
         </Group>
 
-        <Group className={styles.pad}>
+        <Filler />
+
+        <Group className={classNames(styles.pad, styles.pad_danger)}>
+          <div className={styles.pad__title}>
+            <span>Логин и пароли</span>
+          </div>
+
           <InputText
             value={data.username}
             handler={setUsername}
@@ -109,8 +120,6 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             error={patch_errors.new_password && ERROR_LITERAL[patch_errors.new_password]}
           />
 
-          <div />
-
           <InputText
             value={password}
             handler={setPassword}
@@ -122,11 +131,23 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
           <div className={styles.small}>
             Чтобы изменить любое из этих полей, нужно ввести старый пароль.
           </div>
+
+          <Filler />
         </Group>
 
         <Filler />
 
-        <Group horizontal>
+        <Filler />
+
+        <div className={styles.pad}>
+          <div className={styles.pad__title}>
+            <span>Аккаунты</span>
+          </div>
+
+          <ProfileAccounts />
+        </div>
+
+        <Group horizontal className={styles.buttons}>
           <Filler />
           <Button title="Сохранить" type="submit" />
         </Group>

src/components/profile/ProfileSettings/styles.scss

@@ -1,16 +1,47 @@
+$pad_danger: mix($red, $content_bg, 70%);
+$pad_usual: mix(white, $content_bg, 10%);
+
 .wrap {
   padding: $gap;
 }
 
 .pad {
-  padding: $gap;
+  padding: $gap * 1.5 $gap $gap;
-  box-shadow: transparentize($color: $red, $amount: 0.5) 0 0 0 2px;
+  box-shadow: inset $pad_usual 0 0 0 2px;
   border-radius: $radius;
+  position: relative;
+
+  &_danger {
+    box-shadow: inset $pad_danger 0 0 0 2px;
+
+    .pad__title {
+      span {
+        background: $pad_danger;
+      }
+    }
+  }
+
+  &__title {
+    position: relative;
+
+    span {
+      position: absolute;
+      top: -5px;
+      left: $radius;
+      transform: translate(0, -100%);
+      background: $pad_usual;
+      border-radius: 4px;
+      font: $font_10_semibold;
+      line-height: 12px;
+      padding: 2px $gap / 2;
+      text-transform: uppercase;
+    }
+  }
 }
 
 .small {
   font: $font_12_regular;
-  padding: 0 $gap $gap;
+  padding: 0 $gap 0;
 }
 
 .grid {

src/constants/errors.ts

@@ -46,5 +46,5 @@ export const ERROR_LITERAL = {
   [ERRORS.UNKNOWN_FILE_TYPE]: 'Запрещенный тип файла',
   [ERRORS.FILE_IS_TOO_BIG]: 'Файл слишком большой',
   [ERRORS.USER_EXIST_WITH_EMAIL]:
-    'Мы не можем продолжить, потому что у другого пользователя есть этот email.',
+    'Мы не можем продолжить, потому что есть другой пользователь с этим имэйлом.',
 };

src/containers/profile/ProfileInfo/index.tsx

@@ -1,13 +1,13 @@
-import React, { FC } from "react";
+import React, { FC } from 'react';
-import { IUser } from "~/redux/auth/types";
+import { IUser } from '~/redux/auth/types';
-import styles from "./styles.scss";
+import styles from './styles.scss';
-import { Group } from "~/components/containers/Group";
+import { Group } from '~/components/containers/Group';
-import { Placeholder } from "~/components/placeholders/Placeholder";
+import { Placeholder } from '~/components/placeholders/Placeholder';
-import { getURL, getPrettyDate } from "~/utils/dom";
+import { getURL, getPrettyDate } from '~/utils/dom';
-import { PRESETS } from "~/constants/urls";
+import { PRESETS } from '~/constants/urls';
-import { ProfileTabs } from "../ProfileTabs";
+import { ProfileTabs } from '../ProfileTabs';
-import { MessageForm } from "~/components/profile/MessageForm";
+import { MessageForm } from '~/components/profile/MessageForm';
-import { ProfileAvatar } from "../ProfileAvatar";
+import { ProfileAvatar } from '../ProfileAvatar';
 
 interface IProps {
   user?: IUser;
@@ -20,7 +20,7 @@ interface IProps {
 }
 
 const TAB_HEADERS = {
-  messages: <MessageForm is_sending_message={false} />
+  messages: <MessageForm is_sending_message={false} />,
 };
 
 const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
@@ -30,11 +30,7 @@ const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
 
       <div className={styles.field}>
         <div className={styles.name}>
-          {is_loading ? (
+          {is_loading ? <Placeholder width="80%" /> : user.fullname || user.username}
-            <Placeholder width="80%" />
-          ) : (
-            user.fullname || user.username
-          )}
         </div>
 
         <div className={styles.description}>

src/containers/profile/ProfileTabs/index.tsx

@@ -30,13 +30,6 @@ const ProfileTabs: FC<IProps> = ({ tab, is_own, setTab }) => (
         >
           Настройки
         </div>
-
-        <div
-          className={classNames(styles.tab, { [styles.active]: tab === 'accounts' })}
-          onClick={() => setTab('accounts')}
-        >
-          Аккаунты
-        </div>
       </>
     )}
   </div>

src/redux/auth/types.ts

@@ -49,7 +49,7 @@ export type IAuthState = Readonly<{
   };
 
   profile: {
-    tab: 'profile' | 'messages' | 'settings' | 'accounts';
+    tab: 'profile' | 'messages' | 'settings';
     is_loading: boolean;
     is_loading_messages: boolean;
     is_sending_messages: boolean;