From ffef5088625ad184123d1dace0e07bf03752e6cc Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Sun, 6 Nov 2016 02:35:09 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=D0=B7=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8F=20=D0=B4=D0=BB=D1=8F=20=D0=B0=D0=BA=D1=82?=
 =?UTF-8?q?=D0=B8=D0=B2=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=B0=D0=BA=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=83=D1=82=D0=B0=20=D0=B2=20=D0=B2=D1=8B=D0=BF=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=8E=D1=89=D0=B5=D0=BC=20=D0=BC=D0=B5=D0=BD=D1=8E=20?=
 =?UTF-8?q?=D1=8E=D0=B7=D0=B5=D1=80=D0=B1=D0=B0=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accounts/AccountSwitcher.jsx  | 30 +++++----
 src/components/accounts/accountSwitcher.scss | 66 ++++++++++++++++++++
 src/components/userbar/loggedInPanel.scss    | 13 +++-
 src/icons/webfont/minecraft-character.svg    |  5 ++
 4 files changed, 99 insertions(+), 15 deletions(-)
 create mode 100644 src/icons/webfont/minecraft-character.svg

diff --git a/src/components/accounts/AccountSwitcher.jsx b/src/components/accounts/AccountSwitcher.jsx
index 0ce99fb..30cde92 100644
--- a/src/components/accounts/AccountSwitcher.jsx
+++ b/src/components/accounts/AccountSwitcher.jsx
@@ -59,26 +59,32 @@ export default class AccountSwitcher extends Component {
                 styles[`${skin}AccountSwitcher`],
             )}>
                 {highlightActiveAccount ? (
-                    <div>
-                        <div className="account-icon"></div>
-                        <div>
-                            <div>
+                    <div className={styles.item}>
+                        <div className={styles.accountIcon}></div>
+                        <div className={styles.activeAccountInfo}>
+                            <div className={styles.activeAccountUsername}>
                                 {accounts.active.username}
                             </div>
-                            <div>
+                            <div className={styles.activeAccountEmail}>
                                 {accounts.active.email}
                             </div>
-                            <a href="">
-                                <Message {...messages.goToEly} />
-                            </a>
-                            <a href="">
-                                <Message {...messages.logout} />
-                            </a>
+                            <div className={styles.links}>
+                                <div className={styles.link}>
+                                    <a href="">
+                                        <Message {...messages.goToEly} />
+                                    </a>
+                                </div>
+                                <div className={styles.link}>
+                                    <a href="" className={styles.link}>
+                                        <Message {...messages.logout} />
+                                    </a>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 ) : null}
                 {available.map((account) => (
-                    <div key={account.id}>
+                    <div className={styles.item} key={account.id}>
                         <div className="account-icon"></div>
                         <div>
                             <div>
diff --git a/src/components/accounts/accountSwitcher.scss b/src/components/accounts/accountSwitcher.scss
index ccc8ee6..455ea61 100644
--- a/src/components/accounts/accountSwitcher.scss
+++ b/src/components/accounts/accountSwitcher.scss
@@ -1,9 +1,17 @@
 @import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+$borderColor: #EEE;
 
 .accountSwitcher {
     background: #fff;
     color: #444;
     text-align: left;
+    width: 205px;
+
+    $border: 1px solid $borderColor;
+    border-left: $border;
+    border-right: $border;
 }
 
 .lightAccountSwitcher {
@@ -14,6 +22,64 @@
     background: $black;
 }
 
+.item {
+    padding: 15px;
+    border-bottom: 1px solid $borderColor;
+}
+
+.accountIcon {
+    composes: minecraft-character from 'components/ui/icons.scss';
+
+    font-size: 40px;
+    color: $green;
+    float: left;
+}
+
+.activeAccountInfo {
+    margin-left: 29px;
+}
+
+.activeAccountUsername {
+    font-size: 20px;
+    line-height: normal; // button style override
+    color: $green;
+}
+
+.activeAccountEmail {
+    font-size: 10px;
+    color: #999;
+
+    line-height: normal; // button style override
+    font-family: $font-family-base; // button style override
+}
+
+.links {
+    margin-top: 6px;
+}
+
+.link {
+    line-height: normal; // button style override
+    font-size: 12px; // button style override
+    margin-bottom: 3px;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+
+    a {
+        color: #666;
+        font-size: 12px;
+        border-bottom: 1px dotted #666;
+        text-decoration: none;
+        transition: .25s;
+
+        &:hover {
+            border-bottom-color: #777;
+            color: #777;
+        }
+    }
+}
+
 .logoutIcon {
     composes: exit from 'components/ui/icons.scss';
 
diff --git a/src/components/userbar/loggedInPanel.scss b/src/components/userbar/loggedInPanel.scss
index 37f9d77..69fb816 100644
--- a/src/components/userbar/loggedInPanel.scss
+++ b/src/components/userbar/loggedInPanel.scss
@@ -1,9 +1,15 @@
+@import '~components/ui/colors.scss';
+
 .loggedInPanel {
 }
 
 .activeAccount {
     position: relative;
 
+    $border: 1px solid rgba(#fff, .15);
+    border-left: $border;
+    border-right: $border;
+
     &:hover {
         .accountSwitcherContainer {
             display: block;
@@ -21,10 +27,11 @@
 }
 
 .expandIcon {
-    composes: arrow from 'components/ui/icons.scss';
+    composes: caret from 'components/ui/icons.scss';
 
-    margin-left: 5px;
-    font-size: 12px;
+    margin-left: 4px;
+    font-size: 6px;
+    color: #CCC;
 }
 
 .userName {
diff --git a/src/icons/webfont/minecraft-character.svg b/src/icons/webfont/minecraft-character.svg
new file mode 100644
index 0000000..2e0711a
--- /dev/null
+++ b/src/icons/webfont/minecraft-character.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 138 276">
+<rect x="34" class="st0" width="69" height="276"/>
+<rect y="69" class="st0" width="138" height="103"/>
+</svg>