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,9 +12,10 @@
   margin: 0 !important;
   padding: $gap;
   box-sizing: border-box;
+  border-radius: $radius;
 
   @include can_backdrop {
-  background-color: transparentize($red, 0.5);
+    background-color: transparentize($red, 0.5);
     backdrop-filter: blur(10px);
   }
 }

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;
-  box-shadow: transparentize($color: $red, $amount: 0.5) 0 0 0 2px;
+  padding: $gap * 1.5 $gap $gap;
+  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 {