Get rid of double menu for language selection

Overlay a transparent `select` over the language icon. When a user clicks there the options pops up. There’s no styling of the options, other than font and font size.

src/components/language-selector/language-selector.css

@@ -5,19 +5,23 @@
     height:  1.5rem;
 }
 
-.disabled {
-    opacity: .5;
-}
-
+/* Position the language select over the language icon, and make it transparent */
 .language-select {
-    margin: .5rem;
-    height: 1.85rem;
-    border: 1px solid $motion-primary;
+    position: relative;
+    width: 3rem;
+    height: 3rem;
+    opacity: 0;
     user-select: none;
-    outline: none;
-    background: rgba(255, 255, 255, 0.5);
-    color: $motion-tertiary;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: .875rem;
+}
+
+[dir="ltr"] .language-select {
+    right: 40px;
+}
+
+[dir="rtl"] .language-select {
+    left: 40px;
 }
 
 .language-select:focus {

src/components/language-selector/language-selector.jsx

 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Box from '../box/box.jsx';
 import locales from 'scratch-l10n';
 import styles from './language-selector.css';
 
 // supported languages to exclude from the menu, but allow as a URL option
 const ignore = ['he'];
 
-class LanguageSelector extends React.Component {
-    render () {
-        const {
-            componentRef,
-            currentLocale,
-            onChange,
-            ...componentProps
-        } = this.props;
-        return (
-            <Box
-                {...componentProps}
-            >
-                <div
-                    className={styles.group}
-                    ref={componentRef}
-                >
-                    <select
-                        className={styles.languageSelect}
-                        value={currentLocale}
-                        onChange={onChange}
+const LanguageSelector = ({currentLocale, onChange}) => (
+    <select
+        className={styles.languageSelect}
+        value={currentLocale}
+        onChange={onChange}
+    >
+        {
+            Object.keys(locales)
+                .filter(l => !ignore.includes(l))
+                .map(locale => (
+                    <option
+                        key={locale}
+                        value={locale}
                     >
-                        {
-                            Object.keys(locales)
-                                .filter(l => !ignore.includes(l))
-                                .map(locale => (
-                                    <option
-                                        key={locale}
-                                        value={locale}
-                                    >
-                                        {locales[locale].name}
-                                    </option>
-                                ))
-                        }
-                    </select>
-                </div>
-            </Box>
-        );
-    }
-}
+                        {locales[locale].name}
+                    </option>
+                ))
+        }
+    </select>
+);
 
 LanguageSelector.propTypes = {
-    componentRef: PropTypes.func,
     currentLocale: PropTypes.string,
-    onChange: PropTypes.func,
-    open: PropTypes.bool
+    onChange: PropTypes.func
 };
 
 export default LanguageSelector;

src/components/menu-bar/menu-bar.css

@@ -48,8 +48,13 @@
     height:  1.5rem;
 }
 
+.language-caret {
+    vertical-align: text-top;
+}
+
 .language-menu {
     display: inline-flex;
+    width: 3rem;
 }
 
 .menu {

src/components/menu-bar/menu-bar.jsx

@@ -165,39 +165,21 @@ class MenuBar extends React.Component {
                             />
                         </div>
                         <div
-                            className={classNames(styles.menuBarItem, styles.hoverable, {
-                                [styles.active]: this.props.languageMenuOpen
-                            })}
-                            onMouseUp={this.handleLanguageMouseUp}
+                            className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
                         >
-                            {/* @TODO: remove coming soon tooltip wrapper  https://github.com/LLK/scratch-gui/issues/2664  */}
-                            <MenuBarItemTooltip
-                                enable
-                                id="menubar-selector"
-                                place="right"
+                            <div
+                                aria-label={this.props.intl.formatMessage(ariaMessages.language)}
                             >
-                                <div
-                                    aria-label={this.props.intl.formatMessage(ariaMessages.language)}
-                                    className={classNames(styles.languageMenu)}
-                                >
-                                    <img
-                                        className={styles.languageIcon}
-                                        src={languageIcon}
-                                    />
-                                    <img
-                                        className={styles.dropdownCaret}
-                                        src={dropdownCaret}
-                                    />
-                                </div>
-                                <MenuBarMenu
-                                    open={this.props.languageMenuOpen}
-                                    place={this.props.isRtl ? 'left' : 'right'}
-                                    onRequestClose={this.props.onRequestCloseLanguage}
-                                >
-                                    <LanguageSelector />
-                                </MenuBarMenu>
-
-                            </MenuBarItemTooltip>
+                                <img
+                                    className={styles.languageIcon}
+                                    src={languageIcon}
+                                />
+                                <img
+                                    className={styles.languageCaret}
+                                    src={dropdownCaret}
+                                />
+                            </div>
+                            <LanguageSelector />
                         </div>
                         <div
                             className={classNames(styles.menuBarItem, styles.hoverable, {