diff --git a/package.json b/package.json
index 5f29d3ab..d23a6cc7 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"@reach/combobox": "^0.10.4",
"history": "^4.10.1",
"lodash": "^4.17.15",
+ "node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
diff --git a/public/images/flags-sprite.png b/public/images/flags-sprite.png
new file mode 100644
index 00000000..e61e8681
Binary files /dev/null and b/public/images/flags-sprite.png differ
diff --git a/public/images/worldIcon.svg b/public/images/worldIcon.svg
new file mode 100644
index 00000000..f6fa9772
--- /dev/null
+++ b/public/images/worldIcon.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx
index cf05f102..ef677883 100644
--- a/src/features/App/AuthenticatedApp.tsx
+++ b/src/features/App/AuthenticatedApp.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
import {
Route,
Redirect,
@@ -12,25 +12,29 @@ import { TeamPage } from 'features/TeamPage'
import { MatchPage } from 'features/MatchPage'
import { PlayerPage } from 'features/PlayerPage'
import { TournamentPage } from 'features/TournamentPage'
+import { LanguageSelect } from 'features/LanguageSelect'
export const AuthenticatedApp = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
)
diff --git a/src/features/App/UnauthenticatedApp.tsx b/src/features/App/UnauthenticatedApp.tsx
index bad1d9b6..90b464bb 100644
--- a/src/features/App/UnauthenticatedApp.tsx
+++ b/src/features/App/UnauthenticatedApp.tsx
@@ -10,12 +10,14 @@ import { publicLexics } from 'config/lexics/public'
import { Login } from 'features/Login'
import { Register } from 'features/Register'
+import { LanguageSelect } from 'features/LanguageSelect'
import { useLexicsConfig } from 'features/LexicsStore'
export const UnauthenticatedApp = () => {
useLexicsConfig(publicLexics)
return (
+
diff --git a/src/features/LanguageSelect/config.tsx b/src/features/LanguageSelect/config.tsx
new file mode 100644
index 00000000..47811a04
--- /dev/null
+++ b/src/features/LanguageSelect/config.tsx
@@ -0,0 +1,12 @@
+export const langsList = [
+ {
+ className: 'ru',
+ locale: 'ru',
+ title: 'Русский',
+ },
+ {
+ className: 'gb',
+ locale: 'en',
+ title: 'English',
+ },
+]
diff --git a/src/features/LanguageSelect/flags.scss b/src/features/LanguageSelect/flags.scss
new file mode 100644
index 00000000..017ed080
--- /dev/null
+++ b/src/features/LanguageSelect/flags.scss
@@ -0,0 +1,30 @@
+@mixin flag-position($col, $row, $offsetX, $offsetY) {
+ background-position: $col*(-1)*$offsetX $row*(-1)*$offsetY;
+}
+
+@mixin flags-list($width, $height, $bgSize) {
+ background-size: $bgSize;
+ height: $height;
+ width: $width;
+
+ &.flag-icon-ru { @include flag-position(8, 9, $width, $height); } /* Russia */
+ &.flag-icon-gb { @include flag-position(4, 12, $width, $height); } /* United Kingdom */
+}
+
+/*
+ * PNG images
+ */
+.flag-icon {
+ background-image: url('/images/flags-sprite.png');
+ background-position: 1000px 1000px;
+ background-repeat: no-repeat;
+ display: inline-block;
+ position: relative;
+
+ &.flag-icon-24x16 {
+ @include flags-list(24px, 16px, 360px);
+ }
+ &.flag-icon-15x10 {
+ @include flags-list(15px, 10px, 225px);
+ }
+}
diff --git a/src/features/LanguageSelect/index.tsx b/src/features/LanguageSelect/index.tsx
new file mode 100644
index 00000000..12dbb010
--- /dev/null
+++ b/src/features/LanguageSelect/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+
+import map from 'lodash/map'
+
+import { useLexicsStore } from 'features/LexicsStore'
+import { OutsideClick } from 'features/OutsideClick'
+
+import { useToggle } from 'hooks'
+
+import { langsList } from './config'
+import {
+ Wrapper,
+ WorldIcon,
+ LangsList,
+ LangsItem,
+ FlagIcon,
+} from './styled'
+import './flags.scss'
+
+export const LanguageSelect = () => {
+ const { changeLang } = useLexicsStore()
+ const {
+ close,
+ isOpen,
+ open,
+ } = useToggle()
+
+ const handleLangChange = (locale: string) => () => {
+ changeLang(locale)
+ close()
+ }
+
+ return (
+
+
+
+ {isOpen && (
+
+ {
+ map(
+ langsList,
+ ({
+ className,
+ locale,
+ title,
+ }) => (
+
+
+
+ ),
+ )
+ }
+
+ )}
+
+
+ )
+}
diff --git a/src/features/LanguageSelect/styled.tsx b/src/features/LanguageSelect/styled.tsx
new file mode 100644
index 00000000..6357258e
--- /dev/null
+++ b/src/features/LanguageSelect/styled.tsx
@@ -0,0 +1,76 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div`
+ position: absolute;
+ right: 31px;
+ top: 31px;
+`
+
+type WorldIconProps = {
+ active?: boolean,
+}
+
+export const WorldIcon = styled.span`
+ display: block;
+ width: 18px;
+ height: 18px;
+ background-image: url(/images/worldIcon.svg);
+ background-position-x: -1px;
+ cursor: pointer;
+
+ :hover {
+ opacity: 1;
+ }
+
+ ${({ active }) => (
+ active
+ ? 'opacity: 1;'
+ : 'opacity: 0.7;'
+ )}
+`
+
+export const LangsList = styled.ul`
+ display: flex;
+ flex-wrap: wrap;
+ width: 96px;
+ position: absolute;
+ background-color: #666666;
+ box-shadow: 0 2px 5px rgba(0,0,0,.5);
+ border-radius: 2px;
+ right: -16px;
+ top: 36px;
+
+ :before {
+ content: '';
+ width: 12px;
+ height: 12px;
+ transform: translateY(-50%) rotate(45deg);
+ position: absolute;
+ right: 19px;
+ background-color: #666666;
+ z-index: 0;
+ }
+`
+
+export const LangsItem = styled.li`
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ z-index: 1;
+ border-radius: 2px;
+
+ :hover {
+ background-color: #999999;
+ cursor: pointer;
+ }
+`
+
+export const FlagIcon = styled.span`
+ display: inline-block;
+ width: 28px;
+ height: 16px;
+ transition: .3s;
+`
diff --git a/src/features/Login/index.tsx b/src/features/Login/index.tsx
index 3f5ebe5e..1ccdcd37 100644
--- a/src/features/Login/index.tsx
+++ b/src/features/Login/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import { PAGES } from 'config'
+import { T9n } from 'features/T9n'
import { Logo } from 'features/Logo'
import { Input, ButtonSolid } from 'features/Common'
import { formIds } from 'features/Register/components/RegistrationStep/config'
@@ -24,7 +25,7 @@ export const Login = () => {