Стилизация для активного аккаута в выпадающем меню юзербара

src/components/accounts/AccountSwitcher.jsx

@@ -59,26 +59,32 @@ export default class AccountSwitcher extends Component {
                 styles[`${skin}AccountSwitcher`],
             )}>
                 {highlightActiveAccount ? (
-                    <div>
+                    <div className={styles.item}>
-                        <div className="account-icon"></div>
+                        <div className={styles.accountIcon}></div>
-                        <div>
+                        <div className={styles.activeAccountInfo}>
-                            <div>
+                            <div className={styles.activeAccountUsername}>
                                 {accounts.active.username}
                             </div>
-                            <div>
+                            <div className={styles.activeAccountEmail}>
                                 {accounts.active.email}
                             </div>
-                            <a href="">
+                            <div className={styles.links}>
-                                <Message {...messages.goToEly} />
+                                <div className={styles.link}>
-                            </a>
+                                    <a href="">
-                            <a href="">
+                                        <Message {...messages.goToEly} />
-                                <Message {...messages.logout} />
+                                    </a>
-                            </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>

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';
 

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;
+    margin-left: 4px;
-    font-size: 12px;
+    font-size: 6px;
+    color: #CCC;
 }
 
 .userName {

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>