feature/add flags to general settings language dropdown

app/components/profile/language-selection/LanguageSelectionForm.js

@@ -11,6 +11,7 @@ import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../../i18n/LocalizableError';
 import styles from './LanguageSelectionForm.scss';
 import type { ReactIntlMessage } from '../../../types/i18nTypes';
+import FlagLabel from '../../widgets/FlagLabel';
 
 const messages = defineMessages({
   languageSelectLabel: {
@@ -24,7 +25,7 @@ const messages = defineMessages({
 });
 
 type Props = {
-  languages: Array<{ value: string, label: ReactIntlMessage }>,
+  languages: Array<{ value: string, label: ReactIntlMessage, svg: string }>,
   onSubmit: Function,
   isSubmitting: boolean,
   error?: ?LocalizableError,
@@ -70,7 +71,8 @@ export default class LanguageSelectionForm extends Component<Props> {
     const languageId = form.$('languageId');
     const languageOptions = languages.map(language => ({
       value: language.value,
-      label: intl.formatMessage(language.label)
+      label: intl.formatMessage(language.label),
+      svg: language.svg
     }));
     const buttonClasses = classnames([
       'primary',
@@ -86,6 +88,9 @@ export default class LanguageSelectionForm extends Component<Props> {
             options={languageOptions}
             {...languageId.bind()}
             skin={SelectSkin}
+            optionRenderer={option => (
+              <FlagLabel svg={option.svg} label={option.label} />
+            )}
           />
 
           {error && <p className={styles.error}>{intl.formatMessage(error)}</p>}

app/components/settings/categories/GeneralSettings.js

@@ -9,6 +9,7 @@ import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../../i18n/LocalizableError';
 import styles from './GeneralSettings.scss';
 import type { ReactIntlMessage } from '../../../types/i18nTypes';
+import FlagLabel from '../../widgets/FlagLabel';
 
 const messages = defineMessages({
   languageSelectLabel: {
@@ -19,7 +20,7 @@ const messages = defineMessages({
 });
 
 type Props = {
-  languages: Array<{ value: string, label: ReactIntlMessage }>,
+  languages: Array<{ value: string, label: ReactIntlMessage, svg: string }>,
   currentLocale: string,
   onSelectLanguage: Function,
   isSubmitting: boolean,
@@ -60,7 +61,8 @@ export default class GeneralSettings extends Component<Props> {
     const languageId = form.$('languageId');
     const languageOptions = languages.map(language => ({
       value: language.value,
-      label: intl.formatMessage(language.label)
+      label: intl.formatMessage(language.label),
+      svg: language.svg
     }));
     const componentClassNames = classNames([styles.component, 'general']);
     const languageSelectClassNames = classNames([
@@ -76,6 +78,9 @@ export default class GeneralSettings extends Component<Props> {
           {...languageId.bind()}
           onChange={this.selectLanguage}
           skin={SelectSkin}
+          optionRenderer={option => (
+            <FlagLabel svg={option.svg} label={option.label} />
+          )}
         />
         {error && <p className={styles.error}>{error}</p>}
 

app/components/settings/categories/GeneralSettings.scss

@@ -17,5 +17,3 @@
   @include error-message;
   text-align: center;
 }
-
-

app/components/widgets/FlagLabel.js

@@ -0,0 +1,30 @@
+// @flow
+import React, { Component } from 'react';
+import styles from './FlagLabel.scss';
+import SvgInline from 'react-svg-inline';
+
+type Props = {
+  svg: string,
+  label: string,
+  width?: string,
+  height?: string
+};
+
+export default class FlagLabel extends Component<Props> {
+
+  static defaultProps = {
+    width: '18px',
+    height: '18px'
+  };
+
+  render() {
+    const { svg, label, width, height } = this.props;
+    return (
+
+      <div className={styles.wrapper}>
+        <SvgInline svg={svg} className={styles.flag} width={width} height={height} />
+        <span>{label}</span>
+      </div>
+    );
+  }
+}

app/components/widgets/FlagLabel.scss

@@ -0,0 +1,9 @@
+.wrapper {
+  align-items: center;
+  display: flex;
+}
+
+.flag {
+  display: flex;
+  margin-right: 10px;
+}

app/stores/toplevel/ProfileStore.js

@@ -12,14 +12,14 @@ import globalMessages from '../../i18n/global-messages';
 export default class SettingsStore extends Store {
 
   LANGUAGE_OPTIONS = [
-    { value: 'en-US', label: globalMessages.languageEnglish },
-    { value: 'ja-JP', label: globalMessages.languageJapanese },
-    { value: 'ko-KR', label: globalMessages.languageKorean },
-    { value: 'zh-Hans', label: globalMessages.languageChineseSimplified },
-    { value: 'zh-Hant', label: globalMessages.languageChineseTraditional },
-    { value: 'ru-RU', label: globalMessages.languageRussian },
-    { value: 'de-DE', label: globalMessages.languageGerman },
-    { value: 'fr-FR', label: globalMessages.languageFrench },
+    { value: 'en-US', label: globalMessages.languageEnglish, svg: require('../../assets/images/flags/english.inline.svg') },
+    { value: 'ja-JP', label: globalMessages.languageJapanese, svg: require('../../assets/images/flags/japanese.inline.svg') },
+    { value: 'ko-KR', label: globalMessages.languageKorean, svg: require('../../assets/images/flags/korean.inline.svg') },
+    { value: 'zh-Hans', label: globalMessages.languageChineseSimplified, svg: require('../../assets/images/flags/chinese.inline.svg') },
+    { value: 'zh-Hant', label: globalMessages.languageChineseTraditional, svg: require('../../assets/images/flags/chinese.inline.svg') },
+    { value: 'ru-RU', label: globalMessages.languageRussian, svg: require('../../assets/images/flags/russian.inline.svg') },
+    { value: 'de-DE', label: globalMessages.languageGerman, svg: require('../../assets/images/flags/german.inline.svg') },
+    { value: 'fr-FR', label: globalMessages.languageFrench, svg: require('../../assets/images/flags/french.inline.svg') }
   ];
 
   @observable bigNumberDecimalFormat = {