added superpower placeholder to user profile

src/components/profile/ProfileSettings/index.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import classNames from 'classnames';
 
+import { Superpower } from '~/components/boris/Superpower';
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
@@ -30,6 +31,16 @@ const ProfileSettings: FC = () => {
   return (
     <form className={styles.wrap} onSubmit={handleSubmit}>
       <Group>
+        <Group horizontal className={styles.base_info}>
+          <Superpower>
+            <div className={classNames(styles.avatar, styles.pad)}>
+              <div className={styles.pad__title}>
+                <span>Фото</span>
+                <small>Будет здесь. Кстати, ты видишь это, потому что включил суперсилы в Борисе.</small>
+              </div>
+            </div>
+          </Superpower>
+
           <Group className={styles.pad}>
             <div className={styles.pad__title}>
               <span>О себе</span>
@@ -49,10 +60,24 @@ const ProfileSettings: FC = () => {
             />
 
             <div className={styles.small}>
-            Описание будет видно на странице профиля. Здесь работают те же правила оформления, что и
+              Описание будет показываться при клике наведении на вашу аватарку.
-            в комментариях.
             </div>
           </Group>
+        </Group>
+
+        <Superpower>
+          <div className={styles.pad}>
+            <div className={styles.pad__title}>
+              <span>Обложка</span>
+              <small>Будет здесь. Кстати, ты видишь это, потому что включил суперсилы в Борисе.</small>
+              <br />
+              <br />
+              <br />
+              <br />
+              <br />
+            </div>
+          </div>
+        </Superpower>
 
         <Filler />
 
@@ -110,6 +135,16 @@ const ProfileSettings: FC = () => {
           <ProfileAccounts />
         </div>
 
+        <Superpower>
+          <div className={styles.pad}>
+            <div className={styles.pad__title}>
+              <span>Всякие приятные штуковины</span>
+              <small>Будут здесь. Кстати, ты видишь это, потому что включил суперсилы в Борисе.</small>
+              <br />
+            </div>
+          </div>
+        </Superpower>
+
         <Group horizontal className={styles.buttons}>
           <Filler />
           <Button title="Сохранить" type="submit" />

src/components/profile/ProfileSettings/styles.module.scss

@@ -49,3 +49,11 @@ $pad_usual: mix(white, $content_bg, 10%);
 
 .grid {
 }
+
+div.base_info.base_info {
+  align-items: stretch;
+}
+
+.avatar {
+  flex: 0 0 150px;
+}