Доработал стилистику всплывашки с языками

src/components/langMenu/LangMenu.jsx

@@ -4,8 +4,6 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { FormattedMessage as Message } from 'react-intl';
 
-import icons from 'components/ui/icons.scss';
-
 import styles from './langMenu.scss';
 import messages from './langMenu.intl.json';
 
@@ -68,7 +66,7 @@ export default class LangMenu extends Component {
                         {showCurrentLang
                             ? this.renderLangLabel(userLang) : (
                             <span>
-                                <span className={icons.globe} />
+                                <span className={styles.triggerIcon} />
                                 {' '}
                                 <Message {...messages.siteLanguage} />
                                 {' '}

src/components/langMenu/langMenu.scss

@@ -1,3 +1,5 @@
+@import "~components/ui/colors.scss";
+
 .container {
     position: relative;
 }
@@ -10,6 +12,8 @@
 
     width: 150px;
     margin: 0 auto 10px;
+
+    perspective: 600px;
 }
 
 .menu {
@@ -21,15 +25,14 @@
 
     visibility: hidden;
     opacity: 0;
-    transition: 0.2s ease;
+    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1); // easeOutCirc
-    transform: scale(0.1);
+    transform: translateY(10px) rotateX(-22deg);
-    transform-origin: center bottom;
 }
 
 .menuActive {
     visibility: visible;
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0) rotateX(0deg);
 }
 
 .withCurrentLang {
@@ -47,9 +50,11 @@
     font-size: 13px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
+    transition: .2s;
 
     &:hover {
-        background: rgba(0, 0, 0, 0.1);
+        background: #f5f5f5;
+        color: #262626;
     }
 
     &:last-child {
@@ -58,7 +63,9 @@
 }
 
 .activeMenuItem {
-    background: #efffef;
+    background: lighter($green)!important;
+    color: #fff!important;
+    font-weight: $font-wight-bold;
 }
 
 .langIco {
@@ -103,6 +110,14 @@
     font-size: 12px;
 }
 
+.triggerIcon {
+    composes: globe from 'components/ui/icons.scss';
+
+    position: relative;
+    bottom: 1px;
+    font-size: 11px;
+}
+
 .triggerArrow {
     font-size: 8px;
     transition: 0.2s;
@@ -116,4 +131,7 @@
 .triggerArrowBottom {
     composes: triggerArrow;
     composes: arrowBottom from 'components/ui/icons.scss';
+
+    // Докручиваем лишний раз, чтобы иконка крутилась по часовой стрелке
+    transform: rotate(360deg);
 }

src/components/ui/fonts.scss

@@ -1,3 +1,5 @@
 // TODO: should we host fonts from our side?
 $font-family-title: 'Roboto Condensed', Arial, sans-serif;
 $font-family-base: 'Roboto', Arial, sans-serif;
+
+$font-wight-bold: 500;

src/index.scss

@@ -15,7 +15,7 @@ body {
 }
 
 b {
-    font-weight: 500;
+    font-weight: $font-wight-bold;
 }
 
 a {