moved accounts to settings

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 {