Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import classNames from 'classnames';
+import { localeFlags } from 'app/components/i18n';
+import LANGS from 'app/i18n';
+import { connect } from 'react-redux';
+import { create as createPopup } from 'app/components/ui/popup/actions';
+import LanguageSwitcher from 'app/components/languageSwitcher';
+import { RootState } from 'app/reducers';
+
+import styles from './link.scss';
+
+type Props = {
+  userLang: string;
+  interfaceLocale: string;
+  showLanguageSwitcherPopup: (event: React.MouseEvent<HTMLSpanElement>) => void;
+};
+
+function LanguageLink({
+  userLang,
+  interfaceLocale,
+  showLanguageSwitcherPopup,
+}: Props) {
+  const localeDefinition = LANGS[userLang] || LANGS[interfaceLocale];
+
+  return (
+    <span
+      className={classNames(styles.languageLink, {
+        [styles.mark]: userLang !== interfaceLocale,
+      })}
+      onClick={showLanguageSwitcherPopup}
+    >
+      <span
+        className={styles.languageIcon}
+        style={{
+          backgroundImage: `url('${localeFlags.getIconUrl(
+            localeDefinition.code,
+          )}')`,
+        }}
+      />
+      {localeDefinition.name}
+    </span>
+  );
+}
+
+export default connect(
+  (state: RootState) => ({
+    userLang: state.user.lang,
+    interfaceLocale: state.i18n.locale,
+  }),
+  {
+    showLanguageSwitcherPopup: () => createPopup({ Popup: LanguageSwitcher }),
+  },
+)(LanguageLink);

packages/app/components/languageSwitcher/changeLanguageLink/link.scss

@@ -0,0 +1,35 @@
+@import '~app/components/ui/colors.scss';
+
+.languageLink {
+  position: relative;
+
+  color: #666;
+  border-bottom: 1px dotted #666;
+  text-decoration: none;
+  transition: 0.25s;
+  cursor: pointer;
+
+  &.mark {
+    &:after {
+      position: absolute;
+      content: '*';
+      color: $red;
+      font-size: 75%;
+      top: -0.2em;
+    }
+  }
+}
+
+.languageIcon {
+  $height: 13px;
+
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  margin-right: 4px;
+  height: $height;
+  width: $height * 4 / 3;
+  box-shadow: 0 0 1px rgba(#000, 0.2);
+
+  background-size: cover;
+}