Добавлена адаптивность для форм в профиле

Внесены правки в логику формирования разнонаправленных стрелок
Логика стрелки "назад" для форм профиля вынесена в отдельный компонент

src/components/profile/ProfileForm.intl.json

@@ -0,0 +1,3 @@
+{
+    "back": "Back"
+}

src/components/profile/ProfileForm.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import { FormattedMessage as Message } from 'react-intl';
+import { Link } from 'react-router';
+
+import FormComponent from 'components/ui/form/FormComponent';
+
+import styles from 'components/profile/profileForm.scss';
+
+import messages from './ProfileForm.intl.json';
+
+export class BackButton extends FormComponent {
+    static displayName = 'BackButton';
+
+    render() {
+        return (
+            <Link className={styles.backButton} to="/" title={this.formatMessage(messages.back)}>
+                <span className={styles.backIcon} />
+                <span className={styles.backText}>
+                    <Message {...messages.back} />
+                </span>
+            </Link>
+        );
+    }
+}

src/components/profile/changeEmail/ChangeEmail.jsx

@@ -7,6 +7,7 @@ import Helmet from 'react-helmet';
 import { Motion, spring } from 'react-motion';
 
 import { Input, Button, Form, FormModel } from 'components/ui/form';
+import { BackButton } from 'components/profile/ProfileForm';
 import styles from 'components/profile/profileForm.scss';
 import helpLinks from 'components/auth/helpLinks.scss';
 import MeasureHeight from 'components/MeasureHeight';
@@ -73,7 +74,7 @@ export default class ChangeEmail extends Component {
                 onInvalid={() => this.forceUpdate()}
             >
                 <div className={styles.contentWithBackButton}>
-                    <Link className={styles.backButton} to="/" />
+                    <BackButton />
 
                     <div className={styles.form}>
                         <div className={styles.formBody}>

src/components/profile/changePassword/ChangePassword.jsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 
 import { Input, Button, Checkbox, Form, FormModel } from 'components/ui/form';
+import { BackButton } from 'components/profile/ProfileForm';
 
 import styles from 'components/profile/profileForm.scss';
 import messages from './ChangePassword.intl.json';
@@ -31,7 +32,7 @@ export default class ChangePassword extends Component {
                 form={form}
             >
                 <div className={styles.contentWithBackButton}>
-                    <Link className={styles.backButton} to="/" />
+                    <BackButton />
 
                     <div className={styles.form}>
                         <div className={styles.formBody}>

src/components/profile/changeUsername/ChangeUsername.jsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 
 import { Input, Button, Form, FormModel } from 'components/ui/form';
+import { BackButton } from 'components/profile/ProfileForm';
 import styles from 'components/profile/profileForm.scss';
 
 import messages from './ChangeUsername.intl.json';
@@ -25,7 +26,6 @@ export default class ChangeUsername extends Component {
         };
     }
 
-
     render() {
         const {form, username} = this.props;
 
@@ -34,7 +34,7 @@ export default class ChangeUsername extends Component {
                 form={form}
             >
                 <div className={styles.contentWithBackButton}>
-                    <Link className={styles.backButton} to="/" />
+                    <BackButton />
 
                     <div className={styles.form}>
                         <div className={styles.formBody}>

src/components/profile/profileForm.scss

@@ -3,31 +3,38 @@
 
 .contentWithBackButton {
     position: relative;
-    width: 400px;
+    max-width: 400px;
     margin: 0 auto;
 }
 
 .backButton {
-    composes: arrow from 'components/ui/icons.scss';
-
     position: absolute;
     left: -60px;
     top: 15px;
     width: 25px;
     height: 25px;
     padding: 15px;
-
+    font-size: 25px;
-    transform: rotate(90deg);
-    transition: .3s;
 
     color: #ccc;
-    font-size: 25px;
+
+    transition: .3s;
 
     &:hover {
         color: #9a9a9a;
     }
 }
 
+.backIcon {
+    composes: arrowLeft from 'components/ui/icons.scss';
+
+    position: relative;
+}
+
+.backText {
+    display: none;
+}
+
 .form {
     background: #fff;
     overflow: hidden; // disable margin collapsing
@@ -75,3 +82,29 @@
     line-height: 1.5;
     margin-top: 25px;
 }
+
+@media (max-width: 525px) {
+    .contentWithBackButton .title {
+        padding-top: 23px;
+    }
+
+    .backButton {
+        top: 29px;
+        left: 27px;
+        padding: 0;
+        margin: 0;
+        width: auto;
+        height: auto;
+        z-index: 1;
+
+        font-size: 14px;
+    }
+
+    .backIcon {
+        bottom: 1px;
+    }
+
+    .backText {
+        display: inline;
+    }
+}

src/components/ui/icons.scss

@@ -1,20 +1,24 @@
 @import '~icons.font.json';
 
-.arrowLeft {
+// По умолчанию стрелка смотрит вниз, это просто алиас
-    composes: arrow;
+.arrowBottom {
-
+    @extend .arrow;
-    display: inline-block;
-    transform: rotate(90deg);
-
-    font-size: 24px;
 }
 
 .arrowTop {
-    composes: arrow;
+    @extend .arrow;
 
     transform: rotate(180deg);
 }
 
-.arrowBottom {
+.arrowRight {
-    composes: arrow;
+    @extend .arrow;
+
+    transform: rotate(270deg);
+}
+
+.arrowLeft {
+    @extend .arrow;
+
+    transform: rotate(90deg);
 }

src/i18n/en.json

@@ -76,6 +76,7 @@
     "components.langMenu.siteLanguage": "Site language",
     "components.profile.accountDescription": "Ely.by account allows you to get access to many Minecraft resources. Please, take care of your account safety. Use secure password and change it regularly.",
     "components.profile.accountPreferencesTitle": "Ely.by account preferences",
+    "components.profile.back": "Back",
     "components.profile.changeEmail.alreadyReceivedCode": "Already received code",
     "components.profile.changeEmail.changeEmailButton": "Change E‑mail",
     "components.profile.changeEmail.changeEmailDescription": "To change current account E‑mail you must first verify that you own the current address and then confirm the new one.",

src/i18n/ru.json

@@ -76,6 +76,7 @@
     "components.langMenu.siteLanguage": "Язык сайта",
     "components.profile.accountDescription": "Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft. Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте.",
     "components.profile.accountPreferencesTitle": "Настройки аккаунта Ely.by",
+    "components.profile.back": "Назад",
     "components.profile.changeEmail.alreadyReceivedCode": "Я уже получил код",
     "components.profile.changeEmail.changeEmailButton": "Сменить E‑mail",
     "components.profile.changeEmail.changeEmailDescription": "Для смены E‑mail адреса аккаунта сперва необходимо подтвердить владение текущим адресом, а за тем привязать новый.",