diff --git a/src/components/profile/ProfileSettings/index.tsx b/src/components/profile/ProfileSettings/index.tsx index 0bd0bbe9..bc77b17e 100644 --- a/src/components/profile/ProfileSettings/index.tsx +++ b/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,30 +31,54 @@ const ProfileSettings: FC = () => { return ( <form className={styles.wrap} onSubmit={handleSubmit}> <Group> - <Group className={styles.pad}> - <div className={styles.pad__title}> - <span>О себе</span> - </div> + <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> - <InputText - value={values.fullname} - handler={handleChange('fullname')} - title="Полное имя" - error={getError(errors.fullname)} - /> + <Group className={styles.pad}> + <div className={styles.pad__title}> + <span>О себе</span> + </div> - <Textarea - value={values.description} - handler={handleChange('description')} - title="Описание" - /> + <InputText + value={values.fullname} + handler={handleChange('fullname')} + title="Полное имя" + error={getError(errors.fullname)} + /> - <div className={styles.small}> - Описание будет видно на странице профиля. Здесь работают те же правила оформления, что и - в комментариях. - </div> + <Textarea + value={values.description} + handler={handleChange('description')} + title="Описание" + /> + + <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 /> <Group className={classNames(styles.pad, styles.pad_danger)}> @@ -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" /> diff --git a/src/components/profile/ProfileSettings/styles.module.scss b/src/components/profile/ProfileSettings/styles.module.scss index 216ecdcc..b30ac830 100644 --- a/src/components/profile/ProfileSettings/styles.module.scss +++ b/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; +} \ No newline at end of file