language switch moved to header

web/src/components/App/Sidebar.jsx

@@ -2,10 +2,9 @@ import Divider from '@material-ui/core/Divider'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
-import { CreditCard as CreditCardIcon, Language as LanguageIcon } from '@material-ui/icons'
+import { CreditCard as CreditCardIcon } from '@material-ui/icons'
 import List from '@material-ui/core/List'
 import { useTranslation } from 'react-i18next'
-import useChangeLanguage from 'utils/useChangeLanguage'
 import AddDialogButton from 'components/Add'
 import SettingsDialog from 'components/Settings'
 import RemoveAll from 'components/RemoveAll'
@@ -15,7 +14,6 @@ import CloseServer from 'components/CloseServer'
 import { AppSidebarStyle } from './style'
 
 export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
-  const [currentLang, changeLang] = useChangeLanguage()
   const { t } = useTranslation()
 
   return (
@@ -35,17 +33,6 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
 
       <Divider />
 
-      <List>
-        <ListItem button onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
-          <ListItemIcon>
-            <LanguageIcon />
-          </ListItemIcon>
-          <ListItemText primary={t('ChooseLanguage')} />
-        </ListItem>
-      </List>
-
-      <Divider />
-
       <List>
         <AboutDialog />
 

web/src/components/App/index.jsx

@@ -10,8 +10,9 @@ import axios from 'axios'
 import TorrentList from 'components/TorrentList'
 import DonateSnackbar from 'components/Donate'
 import DonateDialog from 'components/Donate/DonateDialog'
+import useChangeLanguage from 'utils/useChangeLanguage'
 
-import { AppWrapper, AppHeader } from './style'
+import { AppWrapper, AppHeader, LanguageSwitch } from './style'
 import Sidebar from './Sidebar'
 
 const baseTheme = createMuiTheme({
@@ -23,6 +24,7 @@ export default function App() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
+  const [currentLang, changeLang] = useChangeLanguage()
 
   useEffect(() => {
     axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
@@ -48,6 +50,12 @@ export default function App() {
             <Typography variant='h6' noWrap>
               TorrServer {torrServerVersion}
             </Typography>
+
+            <div style={{ justifySelf: 'end' }}>
+              <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+                {currentLang === 'en' ? 'RU' : 'EN'}
+              </LanguageSwitch>
+            </div>
           </AppHeader>
 
           <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />

web/src/components/App/style.js

@@ -21,8 +21,10 @@ export const AppHeader = styled.div`
   background: #00a572;
   color: rgba(0, 0, 0, 0.87);
   grid-area: head;
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
   align-items: center;
+  grid-template-columns: repeat(2, max-content) 1fr;
   box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
   padding: 0 24px;
   z-index: 3;
@@ -63,3 +65,26 @@ export const TorrentListWrapper = styled.div`
     grid-template-columns: 1fr;
   }
 `
+
+export const LanguageSwitch = styled.div`
+  cursor: pointer;
+  border-radius: 50%;
+  background: #56b887;
+  height: 35px;
+  width: 35px;
+  transition: all 0.2s;
+  font-weight: 500;
+  display: grid;
+  place-items: center;
+  color: #44795e;
+
+  :hover {
+    background: #7ec9a3;
+  }
+
+  @media (max-width: 700px) {
+    height: 28px;
+    width: 28px;
+    font-size: 12px;
+  }
+`

web/src/components/TorrentCard/index.jsx

@@ -1,4 +1,3 @@
-import 'fontsource-roboto'
 import { forwardRef, memo, useState } from 'react'
 import {
   UnfoldMore as UnfoldMoreIcon,

web/src/components/TorrentCard/style.js

@@ -166,7 +166,6 @@ export const StyledButton = styled.button`
   background: #268757;
   color: #fff;
   font-size: 0.9rem;
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   letter-spacing: 0.009em;
   padding: 0 12px;
   svg {

web/src/locales/en/translation.json

@@ -25,7 +25,6 @@
   "Cache": "Cache",
   "CacheSize": "Cache Size (Megabytes)",
   "Cancel": "Cancel",
-  "ChooseLanguage": "По-русски",
   "Clear": "Clear",
   "Close": "Close",
   "CloseServer?": "Do you want to turn off server?",

web/src/locales/ru/translation.json

@@ -25,7 +25,6 @@
   "Cache": "Кеш",
   "CacheSize": "Размер кеша (Мегабайты)",
   "Cancel": "Отмена",
-  "ChooseLanguage": "In English",
   "Clear": "Очистить",
   "Close": "Закрыть",
   "CloseServer?": "Хотите выключить сервер?",