diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css
index d8ae588ae..25b995160 100644
--- a/src/components/language-selector/language-selector.css
+++ b/src/components/language-selector/language-selector.css
@@ -5,19 +5,27 @@
height: 1.5rem;
}
-.disabled {
- opacity: .5;
+/* Position the language select over the language icon, and make it transparent */
+.language-select {
+ position: absolute;
+ width: $language-selector-width;
+ height: $menu-bar-height;
+ opacity: 0;
+ user-select: none;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: .875rem;
}
-.language-select {
- margin: .5rem;
- height: 1.85rem;
- border: 1px solid $motion-primary;
- user-select: none;
- outline: none;
- background: rgba(255, 255, 255, 0.5);
- color: $motion-tertiary;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+[dir="ltr"] .language-select {
+ right: 0;
+}
+
+[dir="rtl"] .language-select {
+ left: 0;
+}
+
+.language-select option {
+ opacity: 1;
}
.language-select:focus {
diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx
index a6707bbce..fd4caef5f 100644
--- a/src/components/language-selector/language-selector.jsx
+++ b/src/components/language-selector/language-selector.jsx
@@ -1,58 +1,38 @@
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 (
-