From d2192b60571b331d39dc604fe024aa7c29dc1034 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sat, 9 Jan 2016 13:59:42 +0200
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=B4=D0=B4=D0=B5=D1=80=D0=B6?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BE=D0=BA=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/SignIn.jsx | 23 +++--------------------
 src/components/ui/Panel.jsx    | 12 +++++++++++-
 src/components/ui/buttons.scss | 15 +++++++++------
 src/components/ui/panel.scss   | 10 ++++++++--
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/auth/SignIn.jsx b/src/components/auth/SignIn.jsx
index bca8731..f3cb3e2 100644
--- a/src/components/auth/SignIn.jsx
+++ b/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}>
diff --git a/src/components/ui/Panel.jsx b/src/components/ui/Panel.jsx
index 955a7a4..add9057 100644
--- a/src/components/ui/Panel.jsx
+++ b/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>
         );
diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss
index 15613f9..8d143d4 100644
--- a/src/components/ui/buttons.scss
+++ b/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);
diff --git a/src/components/ui/panel.scss b/src/components/ui/panel.scss
index 70a234a..88d833c 100644
--- a/src/components/ui/panel.scss
+++ b/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 {