Поддержка иконок для заголовков панелей

src/components/auth/SignIn.jsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import buttons from 'components/ui/buttons.scss';
 import icons from 'components/ui/icons.scss';
-import { Panel, PanelHeader, PanelBody, PanelFooter } from 'components/ui/Panel';
+import { Panel, PanelBody, PanelFooter } from 'components/ui/Panel';
 import { Input } from 'components/ui/Form';
 
 import styles from './signIn.scss';
@@ -13,7 +13,6 @@ import messages from './SignIn.messages';
 
 
 import panel from 'components/ui/panel.scss';
-styles.headerControl = panel.headerControl;
 
 // 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)
 
@@ -57,15 +56,7 @@ export default class SignIn extends Component {
                     </div>
                 </div>
                 <div className={styles.signIn}>
-                    <Panel>
-                        <PanelHeader>
-                            <div className={styles.headerControl}>
-                                <button className={buttons.black}>
-                                    <span className={icons.arrowLeft} />
-                                </button>
-                            </div>
-                            <Message {...messages.enterPassword} />
-                        </PanelHeader>
+                    <Panel icon="arrowLeft" title={<Message {...messages.enterPassword} />}>
                         <PanelBody>
                             <div className={styles.error}>
                                 <Message {...messages.invalidPassword} />
@@ -206,15 +197,7 @@ export default class SignIn extends Component {
                     </div>
                 </div>
                 <div className={styles.signIn}>
-                    <Panel>
-                        <PanelHeader>
-                            <div className={styles.headerControl}>
-                                <button className={buttons.black}>
-                                    <span className={icons.arrowLeft} />
-                                </button>
-                            </div>
-                            <Message {...messages.accountActivationTitle} />
-                        </PanelHeader>
+                    <Panel icon="arrowLeft" title={<Message {...messages.accountActivationTitle} />}>
                         <PanelBody>
                             <div className={styles.description}>
                                 <div className={styles.descriptionImage}>

src/components/ui/Panel.jsx

@@ -1,13 +1,23 @@
 import React from 'react';
 
 import styles from './panel.scss';
+import icons from './icons.scss';
 
 export function Panel(props) {
-    var { title } = props;
+    var { title, icon } = props;
+
+    if (icon) {
+        icon = (
+            <button className={styles.headerControl}>
+                <span className={icons[icon]} />
+            </button>
+        );
+    }
 
     if (title) {
         title = (
             <PanelHeader>
+                {icon}
                 {title}
             </PanelHeader>
         );

src/components/ui/buttons.scss

@@ -21,8 +21,7 @@
     }
 }
 
-.button,
-.black {
+.button {
     display: inline-block;
     box-sizing: border-box;
     height: 50px;
@@ -38,6 +37,14 @@
 
     transition: background-color 0.25s;
 
+    &:focus {
+        outline: none;
+    }
+}
+
+.black {
+    composes: button;
+
     background-color: $black;
 
     &:hover {
@@ -47,10 +54,6 @@
     &:active {
         background-color: $black-button-dark;
     }
-
-    &:focus {
-        outline: none;
-    }
 }
 
 @include button-color('blue', $blue);

src/components/ui/panel.scss

@@ -18,11 +18,17 @@
 }
 
 .headerControl {
+    composes: black from './buttons.scss';
+
     float: left;
-    line-height: 1;
-    border-right: 1px solid lighter($black);
     overflow: hidden;
     height: 49px;
+    width: 49px;
+    padding: 0;
+    border-right: 1px solid lighter($black);
+
+    line-height: 1;
+    text-align: center;
 }
 
 .body {