Merge pull request #105 from pavlobu/trans

translations ru,ua done, ready for 1.0.6, docs on how to add translations are done

README.md

@@ -29,6 +29,16 @@ Why this was made? Because a client served with `http` without SSL, which makes
 ## [Deskreen FAQ](https://deskreen.com/#faq)
 
 <br/>
+
+## Get Started for translators
+
+Want to add a new language support for Deskreen?
+Or you found a typo in existing translations of Deskreen App or website?
+Here are step by step guides:
+
+- [How to add a new language to Deskreen App and Website](doc/translations-docs/how-to-add-new-language-translation-to-Deskreen.md)
+- [How to fix a typo in Deskreen App or Website](doc/translations-docs/fix-a-typo-in-existing-translation-of-Deskreen.md)
+
 <br/>
 
 ## Deskreen Github Discussion Threads

app/__snapshots__/menu.spec.ts.snap

@@ -6,31 +6,24 @@ Array [
     "label": "Deskreen",
     "submenu": Array [
       Object {
-        "label": "About Deskreen",
+        "label": undefined,
         "selector": "orderFrontStandardAboutPanel:",
       },
       Object {
         "type": "separator",
       },
-      Object {
-        "label": "Services",
-        "submenu": Array [],
-      },
-      Object {
-        "type": "separator",
-      },
       Object {
         "accelerator": "Command+H",
-        "label": "Hide Deskreen",
+        "label": undefined,
         "selector": "hide:",
       },
       Object {
         "accelerator": "Command+Shift+H",
-        "label": "Hide Others",
+        "label": undefined,
         "selector": "hideOtherApplications:",
       },
       Object {
-        "label": "Show All",
+        "label": undefined,
         "selector": "unhideAllApplications:",
       },
       Object {
@@ -39,21 +32,21 @@ Array [
       Object {
         "accelerator": "Command+Q",
         "click": [Function],
-        "label": "Quit",
+        "label": undefined,
       },
     ],
   },
   Object {
-    "label": "Edit",
+    "label": undefined,
     "submenu": Array [
       Object {
         "accelerator": "Command+Z",
-        "label": "Undo",
+        "label": undefined,
         "selector": "undo:",
       },
       Object {
         "accelerator": "Shift+Command+Z",
-        "label": "Redo",
+        "label": undefined,
         "selector": "redo:",
       },
       Object {
@@ -61,22 +54,22 @@ Array [
       },
       Object {
         "accelerator": "Command+X",
-        "label": "Cut",
+        "label": undefined,
         "selector": "cut:",
       },
       Object {
         "accelerator": "Command+C",
-        "label": "Copy",
+        "label": undefined,
         "selector": "copy:",
       },
       Object {
         "accelerator": "Command+V",
-        "label": "Paste",
+        "label": undefined,
         "selector": "paste:",
       },
       Object {
         "accelerator": "Command+A",
-        "label": "Select All",
+        "label": undefined,
         "selector": "selectAll:",
       },
     ],
@@ -87,50 +80,50 @@ Array [
       Object {
         "accelerator": "Ctrl+Command+F",
         "click": [Function],
-        "label": "Toggle Full Screen",
+        "label": undefined,
       },
     ],
   },
   Object {
-    "label": "Window",
+    "label": undefined,
     "submenu": Array [
       Object {
         "accelerator": "Command+M",
-        "label": "Minimize",
+        "label": undefined,
         "selector": "performMiniaturize:",
       },
       Object {
         "accelerator": "Command+W",
-        "label": "Close",
+        "label": undefined,
         "selector": "performClose:",
       },
       Object {
         "type": "separator",
       },
       Object {
-        "label": "Bring All to Front",
+        "label": undefined,
         "selector": "arrangeInFront:",
       },
     ],
   },
   Object {
-    "label": "Help",
+    "label": undefined,
     "submenu": Array [
       Object {
         "click": [Function],
-        "label": "Learn More",
+        "label": undefined,
       },
       Object {
         "click": [Function],
-        "label": "Documentation",
+        "label": undefined,
       },
       Object {
         "click": [Function],
-        "label": "Community Discussions",
+        "label": undefined,
       },
       Object {
         "click": [Function],
-        "label": "Search Issues",
+        "label": undefined,
       },
     ],
   },

app/app.global.css

@@ -147,6 +147,10 @@ div.class-allow-device-to-connect-alert {
   z-index: 9999;
 }
 
+.class-allow-device-to-connect-alert > div > .bp3-button {
+  border-radius: 50px;
+}
+
 /* ALLOW CONNECTION ALERT BLINK ANIMATION START */
 div.class-allow-device-to-connect-alert
   > div.bp3-alert-body

app/client/public/locales/en/translation.json

@@ -1,4 +1,45 @@
 {
   "Waiting for user to click ALLOW button on screen sharing device...": "Waiting for user to click ALLOW button on screen sharing device...",
-  "Waiting for user to select source to share from screen sharing device...": "Waiting for user to select source to share from screen sharing device..."
+  "Waiting for user to select source to share from screen sharing device...": "Waiting for user to select source to share from screen sharing device...",
+  "My Device Info": "My Device Info",
+  "Device Type": "Device Type",
+  "Your Device IP should match with Device IP in alert popup appeared on your computer, where Deskreen is running": "Your Device IP should match with \"Device IP\" in alert popup appeared on your computer, where Deskreen is running.",
+  "Device IP": "Device IP",
+  "Device Browser": "Device Browser",
+  "Device OS": "Device OS",
+  "These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running": "These details should match with the ones that you see in alert popup on screen sharing device.",
+  "Deskreen Screen Viewer": "Deskreen Screen Viewer",
+  "Connected!": "Connected!",
+  "Error occurred": "Error occurred",
+  "Deskreen Error Dialog": "Deskreen Error Dialog",
+  "Something went wrong": "Something went wrong",
+  "You may close this browser window then try to connect again": "You may close this browser window then try to connect again",
+  "An unknown error occurred": "An unknown error occurred",
+  "You were not allowed to connect": "You were not allowed to connect",
+  "You were disconnected": "You were disconnected",
+  "WebRTC error occurred": "WebRTC error occurred",
+  "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "If you like Deskreen, consider contributing financially. Deskreen is open-source. Your donations keep us motivated to make Deskreen even better.",
+  "Donate": "Donate",
+  "Video stream is paused": "Video stream is paused",
+  "Video stream is playing": "Video stream is playing",
+  "Pause": "Pause",
+  "Play": "Play",
+  "Video Settings": "Video Settings",
+  "Flip": "Flip",
+  "Video quality has been changed to": "Video quality has been changed to",
+  "Click to Open Video Settings": "Click to Open Video Settings",
+  "Click to Enter Full Screen Mode": "Click to Enter Full Screen Mode",
+  "Default video player has been turned OFF": "Default video player has been turned OFF",
+  "Default video player has been turned ON": "Default video player has been turned ON",
+  "ON": "ON",
+  "OFF": "OFF",
+  "Default Video Player": "Default Video Player",
+  "Click to visit our website": "Click to visit our website",
+  "Video is flipped horizontally": "Video is flipped horizontally",
+  "TRANSLATIONS BELOW ARE NOT ADDED TO UI YET, BUT YOUR TRANSLATIONS ARE WELCOME! THE FEATURES WILL BE ADDED SOON SO YOUR TRANSLATIONS ARE NEEDED": "",
+  "Click to see connection info": "Click to see connection info",
+  "Pair ID": "Pair ID",
+  "Unpair": "Unpair",
+  "Session ID": "Session ID",
+  "Click to boost video stream if it is lagging": "Click to boost video stream if it is lagging"
 }

app/client/public/locales/ru/translation.json

@@ -1,4 +1,45 @@
 {
-  "Waiting for user to click ALLOW button on screen sharing device...": "Жду когда пользователь нажмет кнопку РАЗРЕШИТЬ доступ к экрану компьютера...",
-  "Waiting for user to select source to share from screen sharing device...": "Жду когда пользователь выберет весь экран или окно приложения для демонстрации..."
+  "Waiting for user to click ALLOW button on screen sharing device...": "Ждем когда пользователь нажмет кнопку РАЗРЕШИТЬ для доступа к экрану компьютера...",
+  "Waiting for user to select source to share from screen sharing device...": "Ждем когда пользователь выберет Весь экран или Окно приложения для отображения его здесь...",
+  "My Device Info": "Информация о моем устройстве",
+  "Device Type": "Тип устройства",
+  "Your Device IP should match with Device IP in alert popup appeared on your computer, where Deskreen is running": "IP-aдрес вашего устройства должен совпадать с «IP-адресом устройства» во всплывающем окне с предупреждением на компьютере, где работает Deskreen.",
+  "Device IP": "IP-aдрес устройства",
+  "Device Browser": "Веб-браузер устройства",
+  "Device OS": "ОС устройства",
+  "These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running": "Эти данные должны совпадать с теми, которые вы видите во всплывающем окне предупреждения на экране компьютера, на котором работает Deskreen.",
+  "Deskreen Screen Viewer": "Просмотрщик экрана Deskreen",
+  "Connected!": "Подключено!",
+  "Error occurred": "Произошла ошибка",
+  "Deskreen Error Dialog": "Диалог ошибки Deskreen",
+  "Something went wrong": "Произошло что-то не так",
+  "You may close this browser window then try to connect again": "Вы можете закрыть это окно браузера и попытаться подключиться снова",
+  "An unknown error occurred": "Произошла неизвестная ошибка",
+  "You were not allowed to connect": "Вам не разрешили подключиться",
+  "You were disconnected": "Вы были отключены",
+  "WebRTC error occurred": "Произошла ошибка WebRTC",
+  "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Если вам нравится Deskreen, подумайте о том, чтобы внести финансовый вклад. Deskreen - это оупенсорсный проэкт. Ваши пожертвования позволяют нам делать Deskreen еще лучше.",
+  "Donate": "Пожертвовать",
+  "Video stream is paused": "Видеопоток приостановлен",
+  "Video stream is playing": "Видеопоток воспроизводится",
+  "Pause": "Pause",
+  "Play": "Play",
+  "Video Settings": "Настройки видео",
+  "Flip": "Отзеркалить",
+  "Video quality has been changed to": "Качество видео изменено на",
+  "Click to Open Video Settings": "Нажмите, чтобы открыть настройки видео",
+  "Click to Enter Full Screen Mode": "Нажмите, чтобы перейти в полноэкранный режим",
+  "Default video player has been turned OFF": "Видеоплеер по умолчанию отключен",
+  "Default video player has been turned ON": "Видеопроигрыватель по умолчанию включен",
+  "ON": "ВКЛ",
+  "OFF": "ВЫКЛ",
+  "Default Video Player": "Видеоплеер по умолчанию",
+  "Click to visit our website": "Нажмите, чтобы посетить наш сайт",
+  "Video is flipped horizontally": "Видео отзеркалено",
+  "TRANSLATIONS BELOW ARE NOT ADDED TO UI YET, BUT YOUR TRANSLATIONS ARE WELCOME! THE FEATURES WILL BE ADDED SOON SO YOUR TRANSLATIONS ARE NEEDED": "",
+  "Click to see connection info": "Click to see connection info",
+  "Pair ID": "Pair ID",
+  "Unpair": "Unpair",
+  "Session ID": "Session ID",
+  "Click to boost video stream if it is lagging": "Click to boost video stream if it is lagging"
 }

app/client/public/locales/ua/translation.json

@@ -1,4 +1,45 @@
 {
-  "Waiting for user to click ALLOW button on screen sharing device...": "Чекаэмо коли користувач натисне кнопку ДОЗВОЛИТИ доступ до екрану комп'ютера...",
-  "Waiting for user to select source to share from screen sharing device...": "Чекаю коли користувач вибере весь екран або вікно програми для демонстрації..."
+  "Waiting for user to click ALLOW button on screen sharing device...": "Чекаємо коли користувач натисне кнопку ДОЗВОЛИТИ для доступу до екрану комп'ютера...",
+  "Waiting for user to select source to share from screen sharing device...": "Чекаємо коли користувач вибере Весь екран або Вікно додатка для відображення його тут...",
+  "My Device Info": "Інформація про мій пристрій",
+  "Device Type": "Тип пристрою",
+  "Your Device IP should match with Device IP in alert popup appeared on your computer, where Deskreen is running": "IP-aдрес пристрою вашого пристрою має збігатися з «IP-адресою пристрою» у спливаючому вікні сповіщення, що з’явилося на комп’ютері, де працює Deskreen.",
+  "Device IP": "IP-aдрес пристрою",
+  "Device Browser": "Веб-браузер пристрою",
+  "Device OS": "ОС пристрою",
+  "These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running": "Ці деталі повинні збігатися з тими, які ви бачите у спливаючому вікні сповіщень на екрані комп’ютера, де запущений Deskreen.",
+  "Deskreen Screen Viewer": "Переглядач екрану Deskreen",
+  "Connected!": "Підключено!",
+  "Error occurred": "Виникла помилка",
+  "Deskreen Error Dialog": "Діалог помилки Deskreen",
+  "Something went wrong": "Щось не так сталося",
+  "You may close this browser window then try to connect again": "Ви можете закрити це вікно браузера та спробувати підключитися знову",
+  "An unknown error occurred": "Виникла невідома помилка",
+  "You were not allowed to connect": "Вам не дозволили підключитися",
+  "You were disconnected": "Ви були відключені",
+  "WebRTC error occurred": "Сталася помилка WebRTC",
+  "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Якщо вам подобається Deskreen, подумайте про те, щоб внести фінансовий внесок. Deskreen - це оупенсорсний проект. Ваші пожертвування дозволяють нам робити Deskreen ще краще.",
+  "Donate": "Пожертвувати",
+  "Video stream is paused": "Відеопотік призупинено",
+  "Video stream is playing": "Відеопотік продовжується",
+  "Pause": "Pause",
+  "Play": "Play",
+  "Video Settings": "Настройки видео",
+  "Flip": "Віддзеркалити",
+  "Video quality has been changed to": "Якість відео змінено на",
+  "Click to Open Video Settings": "Натисніть, щоб відкрити настройки відео",
+  "Click to Enter Full Screen Mode": "Натисніть для входу в повноекранноий режим",
+  "Default video player has been turned OFF": "Стандартний відеоплеєр браузера вимкнено",
+  "Default video player has been turned ON": "Стандартний відеоплеєр браузера включений",
+  "ON": "ВКЛ",
+  "OFF": "ВИМК",
+  "Default Video Player": "Стандартний відеоплеєр браузера",
+  "Click to visit our website": "Клацніть, щоб відвідати наш веб-сайт",
+  "Video is flipped horizontally": "Відео віддзеркалено",
+  "TRANSLATIONS BELOW ARE NOT ADDED TO UI YET, BUT YOUR TRANSLATIONS ARE WELCOME! THE FEATURES WILL BE ADDED SOON SO YOUR TRANSLATIONS ARE NEEDED": "",
+  "Click to see connection info": "Click to see connection info",
+  "Pair ID": "Pair ID",
+  "Unpair": "Unpair",
+  "Session ID": "Session ID",
+  "Click to boost video stream if it is lagging": "Click to boost video stream if it is lagging"
 }

app/client/src/components/ErrorDialog/ErrorMessageEnum.ts

@@ -1,7 +1,7 @@
 export enum ErrorMessage {
-  UNKNOWN_ERROR = 'An unknown error uccured.',
-  DENY_TO_CONNECT = 'You were not allowed to connect.',
-  DISCONNECTED = 'You were disconnected.',
-  NOT_ALLOWED = 'You were not allowed to connect.',
-  WEBRTC_ERROR = 'WebRTC error occurred.'
+  UNKNOWN_ERROR = 'An unknown error occurred',
+  DENY_TO_CONNECT = 'You were not allowed to connect',
+  DISCONNECTED = 'You were disconnected',
+  NOT_ALLOWED = 'You were not allowed to connect',
+  WEBRTC_ERROR = 'WebRTC error occurred'
 }

app/client/src/components/ErrorDialog/index.tsx

@@ -9,6 +9,7 @@ import {
   Icon,
 } from '@blueprintjs/core';
 import { Col, Row } from 'react-flexbox-grid';
+import { useTranslation } from 'react-i18next';
 import './index.css';
 import { ErrorMessage } from './ErrorMessageEnum';
 
@@ -18,6 +19,7 @@ interface ErrorDialogProps {
 }
 
 function ErrorDialog(props: ErrorDialogProps) {
+  const { t } = useTranslation();
   const { errorMessage, isOpen } = props;
 
   return (
@@ -37,7 +39,7 @@ function ErrorDialog(props: ErrorDialogProps) {
     >
       <Row center="xs" style={{ marginTop: '10px' }}>
         <Col xs={12}>
-          <H3 className={Classes.TEXT_MUTED}>Deskreen Error Dialog</H3>
+          <H3 className={Classes.TEXT_MUTED}>{t('Deskreen Error Dialog')}</H3>
         </Col>
       </Row>
       <Row middle="xs" center="xs" style={{ padding: '20px', width: '100%' }}>
@@ -51,7 +53,7 @@ function ErrorDialog(props: ErrorDialogProps) {
                 className={Classes.TEXT_DISABLED}
                 style={{ marginBottom: '0px' }}
               >
-                Something wrong happened :(
+                {`${t('Something went wrong')} :(`}
               </H1>
             </Col>
           </Row>
@@ -59,9 +61,9 @@ function ErrorDialog(props: ErrorDialogProps) {
       </Row>
       <Divider />
       <div className={Classes.DIALOG_BODY}>
-        <H3 className={Classes.TEXT_MUTED}>{errorMessage}</H3>
+        <H3 className={Classes.TEXT_MUTED}>{t(`${errorMessage}`)}</H3>
         <Divider />
-        <H2>You may close this browser window then try to connect again.</H2>
+        <H2>{`${t('You may close this browser window then try to connect again')}.`}</H2>
       </div>
     </Dialog>
   );

app/client/src/components/MyDeviceInfoCard/index.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { Callout, Card, H3, Text, Tooltip, Position } from '@blueprintjs/core';
+import { useTranslation } from 'react-i18next';
 import { AppContext } from '../../providers/AppContextProvider';
 import {
   DARK_UI_BACKGROUND,
@@ -11,6 +12,7 @@ interface MyDeviceDetailsCardProps {
 }
 
 function MyDeviceInfoCard(props: MyDeviceDetailsCardProps) {
+  const { t } = useTranslation();
   const { isDarkTheme } = useContext(AppContext);
 
   const { deviceDetails } = props;
@@ -24,11 +26,11 @@ function MyDeviceInfoCard(props: MyDeviceDetailsCardProps) {
         marginBottom: '30px',
       }}
     >
-      <H3>My Device Info:</H3>
+      <H3>{`${t('My Device Info')}:`}</H3>
       <Callout>
-        <Text>Device Type: {myDeviceType}</Text>
+        <Text>{`${t('Device Type')}: ${myDeviceType}`}</Text>
         <Tooltip
-          content="This should match with 'Device IP' in alert popup appeared on your computer, where Deskreen is running."
+          content={t('Your Device IP should match with Device IP in alert popup appeared on your computer, where Deskreen is running')}
           position={Position.TOP}
         >
           <div
@@ -40,15 +42,14 @@ function MyDeviceInfoCard(props: MyDeviceDetailsCardProps) {
               borderRadius: '20px',
             }}
           >
-            <Text>Device IP: {myIP}</Text>
+            <Text>{`${t('Device IP')}: ${myIP}`}</Text>
           </div>
         </Tooltip>
-        <Text>Device Browser: {myBrowser}</Text>
-        <Text>Device OS: {myOS}</Text>
+        <Text>{`${t('Device Browser')}: ${myBrowser}`}</Text>
+        <Text>{`${t('Device OS')}: ${myOS}`}</Text>
       </Callout>
       <Text className="bp3-text-muted">
-        These details should match with the ones that you see in alert popup on
-        screen sharing device.
+        {t('These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running')}
       </Text>
     </Card>
   );

app/client/src/components/PlayerControlPanel/__snapshots__/index.spec.tsx.snap

@@ -127,7 +127,7 @@ exports[`should match exact snapshot 1`] = `
                     <div
                       className=""
                     >
-                      Donate!
+                      Donate
                     </div>
                   </div>
                 </div>

app/client/src/components/PlayerControlPanel/index.tsx

@@ -19,6 +19,7 @@ import {
   Toaster,
   Intent,
 } from '@blueprintjs/core';
+import { useTranslation } from 'react-i18next';
 import FullScreenEnter from '../../images/fullscreen_24px.svg';
 import FullScreenExit from '../../images/fullscreen_exit-24px.svg';
 import RedHeartTwemojiPNG from '../../images/red_heart_2764_twemoji_120x120.png';
@@ -50,6 +51,7 @@ interface PlayerControlPanelProps {
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 function PlayerControlPanel(props: PlayerControlPanelProps) {
+  const { t } = useTranslation();
   const {
     isPlaying,
     onSwitchChangedCallback,
@@ -92,9 +94,9 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
     toaster?.show({
       icon: 'clean',
       intent: Intent.PRIMARY,
-      message: `Video is flipped horizontally`,
+      message: t('Video is flipped horizontally'),
     });
-  }, [isVideoFlipped, toaster]);
+  }, [isVideoFlipped, toaster, t]);
 
   return (
     <>
@@ -102,7 +104,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
         <Row between="xs" middle="xs">
           <Col xs={12} md={3}>
             <Tooltip
-              content="Click to visit our website"
+              content={t('Click to visit our website')}
               position={Position.BOTTOM}
             >
               <Button
@@ -127,7 +129,9 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
               </Button>
             </Tooltip>
             <Tooltip
-              content="If you like Deskreen, consider donating! Deskreen is free and opensource forever! You can help us to make Deskreen even better!"
+              content={t(
+                'If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better'
+              )}
               position={Position.BOTTOM}
             >
               <Button
@@ -150,7 +154,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                     <div
                       style={{ transform: 'translateY(2px) translateX(-5px)' }}
                     >
-                      <Text>Donate!</Text>
+                      <Text>{t('Donate')}</Text>
                     </div>
                   </Col>
                 </Row>
@@ -178,8 +182,8 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                         icon: isPlaying ? 'pause' : 'play',
                         intent: Intent.PRIMARY,
                         message: isPlaying
-                          ? 'Video stream is paused.'
-                          : 'Video stream is playing',
+                          ? t('Video stream is paused')
+                          : t('Video stream is playing'),
                       });
                     }}
                     style={{
@@ -197,7 +201,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                       </Col>
                       <Col xs>
                         <Text className="bp3-text-large">
-                          {isPlaying ? 'Pause' : 'Play'}
+                          {isPlaying ? t('Pause') : t('Play')}
                         </Text>
                       </Col>
                     </Row>
@@ -212,7 +216,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                   <Popover
                     content={
                       <>
-                        <H5>Video Settings:</H5>
+                        <H5>{`${t('Video Settings')}:`}</H5>
                         <Divider />
                         <Row>
                           <Button
@@ -222,7 +226,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                             style={videoQualityButtonStyle}
                             onClick={toggleFlipVideo}
                           >
-                            Flip
+                            {t('Flip')}
                           </Button>
                         </Row>
                         <Divider />
@@ -242,7 +246,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                                   toaster?.show({
                                     icon: 'clean',
                                     intent: Intent.PRIMARY,
-                                    message: `Video quality has been changed to ${q}`,
+                                    message: `${t('Video quality has been changed to')} ${q}`,
                                   });
                                 }}
                               >
@@ -256,7 +260,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                     position={Position.BOTTOM}
                     popoverClassName={Classes.POPOVER_CONTENT_SIZING}
                   >
-                    <Tooltip content="Video Quality" position={Position.BOTTOM}>
+                    <Tooltip content={t('Click to Open Video Settings')} position={Position.BOTTOM}>
                       <Button minimal>
                         <Icon icon="cog" color="white" />
                       </Button>
@@ -271,7 +275,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                     }}
                   />
                   <Tooltip
-                    content="Enter Full Screen Mode"
+                    content={t('Click to Enter Full Screen Mode')}
                     position={Position.BOTTOM}
                   >
                     <Button
@@ -310,14 +314,14 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                     toaster?.show({
                       icon: 'video',
                       intent: Intent.PRIMARY,
-                      message: `Default video player has been turned ${
-                        isDefaultPlayerTurnedOn ? 'OFF' : 'ON'
+                      message: `${
+                        isDefaultPlayerTurnedOn ? t('Default video player has been turned OFF') : t('Default video player has been turned ON')
                       }`,
                     });
                   }}
-                  innerLabel={isDefaultPlayerTurnedOn ? 'ON' : 'OFF'}
+                  innerLabel={isDefaultPlayerTurnedOn ? t('ON') : t('OFF')}
                   inline
-                  label={`Default Video Player`}
+                  label={t('Default Video Player')}
                   alignIndicator={Alignment.RIGHT}
                   checked={isDefaultPlayerTurnedOn}
                   disabled={!isFullScreenAPIAvailable}

app/client/src/containers/ConnectionPrompts/__snapshots__/index.spec.tsx.snap

@@ -54,6 +54,15 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
             }
           }
         >
+          <div
+            className="row center-xs"
+          >
+            <h2
+              className="bp3-heading bp3-text-muted"
+            >
+              Deskreen Screen Viewer
+            </h2>
+          </div>
           <div
             className="row center-xs"
             style={
@@ -87,7 +96,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Type: 
-                    
                   </div>
                   <span
                     className="bp3-popover-wrapper"
@@ -116,7 +124,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                           className=""
                         >
                           Device IP: 
-                          
                         </div>
                       </div>
                     </span>
@@ -125,19 +132,17 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Browser: 
-                    
                   </div>
                   <div
                     className=""
                   >
                     Device OS: 
-                    
                   </div>
                 </div>
                 <div
                   className="bp3-text-muted"
                 >
-                  These details should match with the ones that you see in alert popup on screen sharing device.
+                  These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running
                 </div>
               </div>
             </div>
@@ -235,6 +240,15 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
             }
           }
         >
+          <div
+            className="row center-xs"
+          >
+            <h2
+              className="bp3-heading bp3-text-muted"
+            >
+              Deskreen Screen Viewer
+            </h2>
+          </div>
           <div
             className="row center-xs"
             style={
@@ -268,7 +282,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Type: 
-                    
                   </div>
                   <span
                     className="bp3-popover-wrapper"
@@ -297,7 +310,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                           className=""
                         >
                           Device IP: 
-                          
                         </div>
                       </div>
                     </span>
@@ -306,19 +318,17 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Browser: 
-                    
                   </div>
                   <div
                     className=""
                   >
                     Device OS: 
-                    
                   </div>
                 </div>
                 <div
                   className="bp3-text-muted"
                 >
-                  These details should match with the ones that you see in alert popup on screen sharing device.
+                  These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running
                 </div>
               </div>
             </div>
@@ -487,6 +497,15 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
             }
           }
         >
+          <div
+            className="row center-xs"
+          >
+            <h2
+              className="bp3-heading bp3-text-muted"
+            >
+              Deskreen Screen Viewer
+            </h2>
+          </div>
           <div
             className="row center-xs"
             style={
@@ -520,7 +539,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Type: 
-                    
                   </div>
                   <span
                     className="bp3-popover-wrapper"
@@ -549,7 +567,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                           className=""
                         >
                           Device IP: 
-                          
                         </div>
                       </div>
                     </span>
@@ -558,19 +575,17 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Browser: 
-                    
                   </div>
                   <div
                     className=""
                   >
                     Device OS: 
-                    
                   </div>
                 </div>
                 <div
                   className="bp3-text-muted"
                 >
-                  These details should match with the ones that you see in alert popup on screen sharing device.
+                  These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running
                 </div>
               </div>
             </div>
@@ -721,6 +736,15 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
             }
           }
         >
+          <div
+            className="row center-xs"
+          >
+            <h2
+              className="bp3-heading bp3-text-muted"
+            >
+              Deskreen Screen Viewer
+            </h2>
+          </div>
           <div
             className="row center-xs"
             style={
@@ -754,7 +778,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Type: 
-                    
                   </div>
                   <span
                     className="bp3-popover-wrapper"
@@ -783,7 +806,6 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                           className=""
                         >
                           Device IP: 
-                          
                         </div>
                       </div>
                     </span>
@@ -792,19 +814,17 @@ exports[`when getPromptContent is called should match exact snapshot on each ste
                     className=""
                   >
                     Device Browser: 
-                    
                   </div>
                   <div
                     className=""
                   >
                     Device OS: 
-                    
                   </div>
                 </div>
                 <div
                   className="bp3-text-muted"
                 >
-                  These details should match with the ones that you see in alert popup on screen sharing device.
+                  These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running
                 </div>
               </div>
             </div>

app/client/src/containers/ConnectionPrompts/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../constants/styleConstants';
 import MyDeviceInfoCard from '../../components/MyDeviceInfoCard';
 import { TFunction } from 'i18next';
-import { H3 } from '@blueprintjs/core';
+import { H2, H3 } from '@blueprintjs/core';
 import ConnectingIndicator from '../../components/ConnectingIndicator';
 
 const Slide = require('react-reveal/Slide');
@@ -23,7 +23,7 @@ interface ConnectionPropmptsProps {
   isOpen: boolean;
 }
 
-function getPromptContent(step: number, t: TFunction) {
+function getPromptContent(t: TFunction, step: number) {
   switch (step) {
     case 1:
       return (
@@ -34,7 +34,7 @@ function getPromptContent(step: number, t: TFunction) {
         </H3>
       );
     case 2:
-      return <H3>Connected!</H3>;
+      return <H3>{t('Connected!')}</H3>;
     case 3:
       return (
         <H3>
@@ -44,7 +44,7 @@ function getPromptContent(step: number, t: TFunction) {
         </H3>
       );
     default:
-      return <H3>Error occurred :(</H3>;
+      return <H3>{`${t('Error occurred')} :(`}</H3>;
   }
 }
 
@@ -55,19 +55,14 @@ function ConnectionPropmpts(props: ConnectionPropmptsProps) {
     connectionIconType,
     isShownSpinnerIcon,
     spinnerIconType,
-    isOpen
+    isOpen,
   } = props;
 
   const { t } = useTranslation();
   const { isDarkTheme } = useContext(AppContext);
 
   return (
-    <Slide
-    id="connection-prompts-slide"
-    bottom
-    when={isOpen}
-    duration={1000}
-  >
+    <Slide id="connection-prompts-slide" bottom when={isOpen} duration={1000}>
       <div
         style={{
           position: 'absolute',
@@ -77,7 +72,9 @@ function ConnectionPropmpts(props: ConnectionPropmptsProps) {
           width: '100%',
           height: '100vh',
           boxShadow: `0 0 0 5px ${isDarkTheme ? '#000' : '#A7B6C2'}`,
-        backgroundColor: isDarkTheme ? DARK_UI_BACKGROUND : LIGHT_UI_BACKGROUND,
+          backgroundColor: isDarkTheme
+            ? DARK_UI_BACKGROUND
+            : LIGHT_UI_BACKGROUND,
         }}
       >
         <Row
@@ -99,13 +96,16 @@ function ConnectionPropmpts(props: ConnectionPropmptsProps) {
               }}
             >
               <div style={{ width: '100%' }}>
+                <Row center="xs">
+                  <H2 className="bp3-text-muted">{t('Deskreen Screen Viewer')}</H2>
+                </Row>
                 <Row center="xs" style={{ width: '100%', margin: '0 auto' }}>
                   <Col md={6} xl={4}>
                     <MyDeviceInfoCard deviceDetails={myDeviceDetails} />
                   </Col>
                 </Row>
                 <div id="prompt-text" style={{ fontSize: '20px' }}>
-                  {getPromptContent(promptStep, t)}
+                  {getPromptContent(t, promptStep)}
                 </div>
               </div>
             </Col>

app/client/src/containers/PlayerView/__snapshots__/index.spec.tsx.snap

@@ -139,7 +139,7 @@ exports[`should match exact snapshot 1`] = `
                       <div
                         className=""
                       >
-                        Donate!
+                        Donate
                       </div>
                     </div>
                   </div>

app/components/AllowConnectionForDeviceAlert.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Intent, Alert, H4 } from '@blueprintjs/core';
+import { useTranslation } from 'react-i18next';
 import DeviceInfoCallout from './DeviceInfoCallout';
 import isWithReactRevealAnimations from '../utils/isWithReactRevealAnimations';
 
@@ -13,13 +14,16 @@ interface AllowConnectionForDeviceAlertProps {
 export default function AllowConnectionForDeviceAlert(
   props: AllowConnectionForDeviceAlertProps
 ) {
+  const { t } = useTranslation();
   const { device, isOpen, onCancel, onConfirm } = props;
+  const denyText = t('Deny');
+  const allowText = t('Allow');
 
   return (
     <Alert
       className="class-allow-device-to-connect-alert"
-      cancelButtonText="Deny"
-      confirmButtonText="Allow"
+      cancelButtonText={denyText}
+      confirmButtonText={allowText}
       icon="feed"
       intent={Intent.DANGER}
       isOpen={isOpen}
@@ -30,7 +34,7 @@ export default function AllowConnectionForDeviceAlert(
       // @ts-ignore
       usePortal={false}
     >
-      <H4>Device is trying to connect, do you allow?</H4>
+      <H4>{t('Someone is trying to connect, do you allow?')}</H4>
       <DeviceInfoCallout
         deviceType={device?.deviceType}
         deviceIP={device?.deviceIP}

app/components/ConnectedDevicesListDrawer.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/destructuring-assignment */
 import { remote } from 'electron';
 import React, { useEffect, useState, useCallback } from 'react';
-
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   Text,
@@ -68,6 +68,7 @@ const useStyles = makeStyles(() =>
 export default function ConnectedDevicesListDrawer(
   props: ConnectedDevicesListDrawerProps
 ) {
+  const { t } = useTranslation();
   const classes = useStyles();
 
   const [isAlertDisconectAllOpen, setIsAlertDisconectAllOpen] = useState(false);
@@ -142,6 +143,9 @@ export default function ConnectedDevicesListDrawer(
     );
   }, [handleDisconnectAll, hideAllDevicesInDevicesDisplayed, props]);
 
+  const disconnectAllCancelButtonText = t('No, Cancel');
+  const disconnectAllConfirmButtonText = t('Yes, Disconnect All');
+
   return (
     <>
       <Drawer
@@ -157,7 +161,7 @@ export default function ConnectedDevicesListDrawer(
           <Col xs={11}>
             <Row middle="xs">
               <div className={classes.topHeader}>
-                <Text className="bp3-text-muted">Connected Devices</Text>
+                <Text className="bp3-text-muted">{t('Connected Devices')}</Text>
               </div>
               <Button
                 intent="danger"
@@ -167,7 +171,7 @@ export default function ConnectedDevicesListDrawer(
                 }}
                 icon="disable"
               >
-                Disconnect all devices
+                {t('Disconnect all devices')}
               </Button>
             </Row>
           </Col>
@@ -222,7 +226,7 @@ export default function ConnectedDevicesListDrawer(
                               }}
                               icon="disable"
                             >
-                              Disconnect
+                              {t('Disconnect')}
                             </Button>
                           </Row>
                         </Card>
@@ -241,8 +245,8 @@ export default function ConnectedDevicesListDrawer(
           setIsAlertDisconectAllOpen(false);
         }}
         icon="warning-sign"
-        cancelButtonText="No, Cancel"
-        confirmButtonText="Yes, Disconnect All"
+        cancelButtonText={disconnectAllCancelButtonText}
+        confirmButtonText={disconnectAllConfirmButtonText}
         intent="danger"
         canEscapeKeyCancel
         canOutsideClickCancel
@@ -253,10 +257,14 @@ export default function ConnectedDevicesListDrawer(
         transitionDuration={isWithReactRevealAnimations() ? 700 : 0}
       >
         <H4>
-          Are you sure you want to disconnect all connected viewing devices?
+          {t(
+            'Are you sure you want to disconnect all connected viewing devices?'
+          )}
         </H4>
-        <Text>This step can not be reverted.</Text>
-        <Text>You will have to connect all devices manually again.</Text>
+        <Text>{`${t('This step can not be undone')}.`}</Text>
+        <Text>
+          {`${t('You will have to connect all devices manually again')}.`}
+        </Text>
       </Alert>
     </>
   );

app/components/DeviceInfoCallout/index.tsx

@@ -2,6 +2,8 @@
 import React from 'react';
 import { Callout, Text, H4, Tooltip, Position } from '@blueprintjs/core';
 import { Row, Col } from 'react-flexbox-grid';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 
 interface DeviceInfoCalloutProps {
   deviceType: string | undefined;
@@ -11,24 +13,24 @@ interface DeviceInfoCalloutProps {
   deviceBrowser: string | undefined;
 }
 
-function getContentOfTooltip() {
+function getContentOfTooltip(t: TFunction) {
   return (
     <>
       <Text>
-        {`This should match with 'Device IP' displayed on the screen of device
-        that is trying to connect.`}
+        {t(
+          'This should match with Device IP displayed on the screen of device that is trying to connect'
+        )}
       </Text>
       <span style={{ fontWeight: 900 }}>
-        <Text>
-          {`If IPs don't match click 'Deny' or 'Disconnect' button immediately to
-          secure your computer!`}
-        </Text>
+        <Text>{t('If IP addresses dont match click Disconnect button')}</Text>
       </span>
     </>
   );
 }
 
 export default function DeviceInfoCallout(props: DeviceInfoCalloutProps) {
+  const { t } = useTranslation();
+
   const {
     deviceType,
     deviceIP,
@@ -40,15 +42,15 @@ export default function DeviceInfoCallout(props: DeviceInfoCalloutProps) {
   return (
     <>
       <H4 style={{ margin: '0 auto', textAlign: 'center' }}>
-        Partner Device Info:
+        {`${t('Partner Device Info')}:`}
       </H4>
-      <Callout id="device-info-callout">
+      <Callout id="device-info-callout" style={{ borderRadius: '8px' }}>
         <Row center="xs">
           <Col xs={12}>
             <Text>
-              Device Type: <span>{deviceType}</span>
+              {`${t('Device Type')}:`} <span>{deviceType}</span>
             </Text>
-            <Tooltip content={getContentOfTooltip()} position={Position.TOP}>
+            <Tooltip content={getContentOfTooltip(t)} position={Position.TOP}>
               <div
                 style={{
                   fontWeight: 900,
@@ -59,19 +61,20 @@ export default function DeviceInfoCallout(props: DeviceInfoCalloutProps) {
                 }}
               >
                 <Text className="bp3-text-large">
-                  Device IP: <span className="device-ip-span">{deviceIP}</span>
+                  {`${t('Device IP')}:`}{' '}
+                  <span className="device-ip-span">{deviceIP}</span>
                 </Text>
               </div>
             </Tooltip>
             <Text>
-              Device Browser: <span>{deviceBrowser}</span>
+              {`${t('Device Browser')}:`} <span>{deviceBrowser}</span>
             </Text>
             <Text>
-              Device OS: <span>{deviceOS}</span>
+              {`${t('Device OS')}:`} <span>{deviceOS}</span>
             </Text>
             <div style={{ width: '200px', margin: '0 auto' }}>
               <Text className="bp3-text-muted" ellipsize>
-                Session ID: <span>{sharingSessionID}</span>
+                {`${t('Session ID')}:`} <span>{sharingSessionID}</span>
               </Text>
             </div>
           </Col>

app/components/LanguageSelector/index.tsx

@@ -0,0 +1,59 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { remote } from 'electron';
+import { HTMLSelect } from '@blueprintjs/core';
+import i18n from 'i18next';
+import SharingSessionService from '../../features/SharingSessionService';
+import { SettingsContext } from '../../containers/SettingsProvider';
+import i18n_client, {
+  getLangFullNameToLangISOKeyMap,
+  getLangISOKeyToLangFullNameMap,
+} from '../../configs/i18next.config.client';
+
+const sharingSessionService = remote.getGlobal(
+  'sharingSessionService'
+) as SharingSessionService;
+
+export default function LanguageSelector() {
+  const { setCurrentLanguageHook } = useContext(SettingsContext);
+
+  const [languagesList, setLanguagesList] = useState([] as string[]);
+
+  useEffect(() => {
+    const tmp: string[] = [];
+    getLangFullNameToLangISOKeyMap().forEach((_, key) => {
+      tmp.push(key);
+    });
+    setLanguagesList(tmp);
+    setCurrentLanguageHook(i18n_client.language);
+  }, [setCurrentLanguageHook]);
+
+  const onChangeLanguageHTMLSelectHandler = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    if (
+      event.currentTarget &&
+      getLangFullNameToLangISOKeyMap().has(event.currentTarget.value)
+    ) {
+      const newLang =
+        getLangFullNameToLangISOKeyMap().get(event.currentTarget.value) ||
+        'English';
+      i18n.changeLanguage(newLang);
+      // TODO: call sharing sessions service here to notify all connected clients about language change
+      sharingSessionService.sharingSessions.forEach((sharingSession) => {
+        sharingSession?.appLanguageChanged();
+      });
+    }
+  };
+
+  return (
+    <HTMLSelect
+      value={getLangISOKeyToLangFullNameMap().get(i18n.language)}
+      options={languagesList}
+      onChange={onChangeLanguageHTMLSelectHandler}
+      style={{
+        borderRadius: '50px',
+        width: '120px',
+      }}
+    />
+  );
+}

app/components/SettingsOverlay/SettingsOverlay.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { ipcRenderer, remote, shell } from 'electron';
-import React, { useContext, useCallback, useEffect, useState } from 'react';
+import { ipcRenderer, shell } from 'electron';
+import React, { useContext, useEffect, useState } from 'react';
 import {
-  Button,
   Overlay,
   Classes,
   H3,
@@ -13,38 +12,28 @@ import {
   Tabs,
   Tab,
   Icon,
-  HTMLSelect,
   Text,
-  ControlGroup,
   Checkbox,
 } from '@blueprintjs/core';
 import { useTranslation } from 'react-i18next';
 import { Col, Row } from 'react-flexbox-grid';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
-import i18n from 'i18next';
-import SharingSessionService from '../../features/SharingSessionService';
 import {
   DARK_UI_BACKGROUND,
   LIGHT_UI_BACKGROUND,
   SettingsContext,
 } from '../../containers/SettingsProvider';
 import CloseOverlayButton from '../CloseOverlayButton';
-import i18n_client, {
-  getLangFullNameToLangISOKeyMap,
-  getLangISOKeyToLangFullNameMap,
-} from '../../configs/i18next.config.client';
 import SettingRowLabelAndInput from './SettingRowLabelAndInput';
 import isWithReactRevealAnimations from '../../utils/isWithReactRevealAnimations';
 import config from '../../api/config';
+import LanguageSelector from '../LanguageSelector';
+import ToggleThemeBtnGroup from '../ToggleThemeBtnGroup';
 
 const { port } = config;
 
 const Fade = require('react-reveal/Fade');
 
-const sharingSessionService = remote.getGlobal(
-  'sharingSessionService'
-) as SharingSessionService;
-
 interface SettingsOverlayProps {
   isSettingsOpen: boolean;
   handleClose: () => void;
@@ -73,13 +62,7 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
   const [latestVersion, setLatestVersion] = useState('');
   const [currentVersion, setCurrentVersion] = useState('');
 
-  const {
-    isDarkTheme,
-    setIsDarkThemeHook,
-    setCurrentLanguageHook,
-  } = useContext(SettingsContext);
-
-  const [languagesList, setLanguagesList] = useState([] as string[]);
+  const { isDarkTheme } = useContext(SettingsContext);
 
   useEffect(() => {
     const getLatestVersion = async () => {
@@ -98,96 +81,14 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
     getCurrentVersion();
   }, []);
 
-  useEffect(() => {
-    const tmp: string[] = [];
-    getLangFullNameToLangISOKeyMap().forEach((_, key) => {
-      tmp.push(key);
-    });
-    setLanguagesList(tmp);
-    setCurrentLanguageHook(i18n_client.language);
-  }, [setCurrentLanguageHook]);
-
   const getClassesCallback = useStylesWithTheme(isDarkTheme);
 
-  const handleToggleDarkTheme = useCallback(() => {
-    if (!isDarkTheme) {
-      document.body.classList.toggle(Classes.DARK);
-      setIsDarkThemeHook(true);
-    }
-    // TODO: call sharing sessions service here to notify all connected clients about theme change
-    sharingSessionService.sharingSessions.forEach((sharingSession) => {
-      sharingSession?.appThemeChanged(true);
-    });
-    sharingSessionService.setAppTheme(true);
-  }, [isDarkTheme, setIsDarkThemeHook]);
-
-  const handleToggleLightTheme = useCallback(() => {
-    if (isDarkTheme) {
-      document.body.classList.toggle(Classes.DARK);
-      setIsDarkThemeHook(false);
-    }
-    // TODO: call sharing sessions service here to notify all connected clients about theme change
-    sharingSessionService.sharingSessions.forEach((sharingSession) => {
-      sharingSession?.appThemeChanged(false);
-    });
-    sharingSessionService.setAppTheme(false);
-  }, [isDarkTheme, setIsDarkThemeHook]);
-
-  const onChangeLangueageHTMLSelectHandler = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    if (
-      event.currentTarget &&
-      getLangFullNameToLangISOKeyMap().has(event.currentTarget.value)
-    ) {
-      const newLang =
-        getLangFullNameToLangISOKeyMap().get(event.currentTarget.value) ||
-        'English';
-      i18n.changeLanguage(newLang);
-      // TODO: call sharing sessions service here to notify all connected clients about language change
-      sharingSessionService.sharingSessions.forEach((sharingSession) => {
-        sharingSession?.appLanguageChanged(newLang);
-      });
-      sharingSessionService.setAppLanguage(newLang);
-    }
-  };
-
-  const getThemeChangingControlGroupInput = () => {
-    return (
-      <ControlGroup fill vertical={false}>
-        <Button
-          icon="flash"
-          text="Light"
-          onClick={handleToggleLightTheme}
-          active={!isDarkTheme}
-        />
-        <Button
-          icon="moon"
-          text="Dark"
-          onClick={handleToggleDarkTheme}
-          active={isDarkTheme}
-        />
-      </ControlGroup>
-    );
-  };
-
-  const getLanguageChangingHTMLSelect = () => {
-    return (
-      <HTMLSelect
-        disabled // TODO: remove when tranlations are ready
-        defaultValue={getLangISOKeyToLangFullNameMap().get(i18n.language)}
-        options={languagesList}
-        onChange={onChangeLangueageHTMLSelectHandler}
-      />
-    );
-  };
-
   const getAutomaticUpdatesCheckboxInput = () => {
     return (
       <Checkbox
         disabled
         className={getClassesCallback().checkboxSettings}
-        label="Disabled"
+        label={t('Disabled')}
       />
     );
   };
@@ -195,21 +96,21 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
   const GeneralSettingsPanel: React.FC = () => (
     <>
       <Row middle="xs">
-        <H3 className="bp3-text-muted">General Settings</H3>
+        <H3 className="bp3-text-muted">{t('General Settings')}</H3>
       </Row>
       <SettingRowLabelAndInput
         icon="style"
-        label="Colors"
-        input={getThemeChangingControlGroupInput()}
+        label={t('Color Theme')}
+        input={<ToggleThemeBtnGroup />}
       />
       <SettingRowLabelAndInput
         icon="translate"
         label={t('Language')}
-        input={getLanguageChangingHTMLSelect()}
+        input={<LanguageSelector />}
       />
       <SettingRowLabelAndInput
         icon="automatic-updates"
-        label="Automatic Updates"
+        label={t('Automatic Updates')}
         input={getAutomaticUpdatesCheckboxInput()}
       />
     </>
@@ -219,7 +120,7 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
     <div>
       <H3>
         <Icon icon="shield" iconSize={20} />
-        Security
+        {t('Security Settings')}
       </H3>
       <H6 className={Classes.RUNNING_TEXT}>
         {`HTML is great for declaring static documents, but it falters when we try
@@ -231,12 +132,6 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
     </div>
   );
 
-  const BlockedIPsPanel: React.FC = () => (
-    <div>
-      <H3>Blocked IPs</H3>
-    </div>
-  );
-
   const AboutPanel: React.FC = () => (
     <Row center="xs" middle="xs" style={{ height: 'calc(100vh - 40%)' }}>
       <div>
@@ -248,14 +143,16 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
           />
         </Col>
         <Col xs={12}>
-          <H3>About Deskreen</H3>
-        </Col>
-        <Col xs={12}>
-          <Text>{`Version: ${currentVersion} (${currentVersion})`}</Text>
+          <H3>{t('About Deskreen')}</H3>
         </Col>
         <Col xs={12}>
           <Text>
-            {`Copyright © ${new Date().getFullYear()} `}
+            {`${t('Version')}: ${currentVersion} (${currentVersion})`}
+          </Text>
+        </Col>
+        <Col xs={12}>
+          <Text>
+            {`${t('Copyright')} © ${new Date().getFullYear()} `}
             <a
               onClick={() => {
                 shell.openExternal('https://linkedin.com/in/pavlobu');
@@ -268,16 +165,16 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
                     }
               }
             >
-              Pavlo (Paul) Buidenkov
+              Pavlo Buidenkov (Paul)
             </a>
           </Text>
         </Col>
         <Col xs={12}>
           <Text>
-            {`Website: `}
+            {`${t('Website')}: `}
             <a
               onClick={() => {
-                shell.openExternal('https://www.deskreen.com');
+                shell.openExternal('https://deskreen.com');
               }}
               style={
                 isDarkTheme
@@ -287,7 +184,7 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
                     }
               }
             >
-              https://www.deskreen.com
+              https://deskreen.com
             </a>
           </Text>
         </Col>
@@ -295,18 +192,6 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
     </Row>
   );
 
-  const getTabNavBlockedIPsButton = () => {
-    return (
-      <Row middle="xs" className={getClassesCallback().tabNavigationRowButton}>
-        <Icon
-          icon="blocked-person"
-          className={getClassesCallback().iconInTablLeftButton}
-        />
-        <Text className="bp3-text-large">Blacklisted IPs</Text>
-      </Row>
-    );
-  };
-
   const getTabNavSecurityButton = () => {
     return (
       <Row middle="xs" className={getClassesCallback().tabNavigationRowButton}>
@@ -314,7 +199,7 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
           icon="shield"
           className={getClassesCallback().iconInTablLeftButton}
         />
-        <Text className="bp3-text-large">Security</Text>
+        <Text className="bp3-text-large">{t('Security')}</Text>
       </Row>
     );
   };
@@ -326,7 +211,7 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
           icon="wrench"
           className={getClassesCallback().iconInTablLeftButton}
         />
-        <Text className="bp3-text-large">General</Text>
+        <Text className="bp3-text-large">{t('General')}</Text>
       </Row>
     );
   };
@@ -338,7 +223,7 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
           icon="info-sign"
           className={getClassesCallback().iconInTablLeftButton}
         />
-        <Text className="bp3-text-large">About</Text>
+        <Text className="bp3-text-large">{t('About')}</Text>
       </Row>
     );
   };
@@ -378,9 +263,14 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
                   e.preventDefault();
                   shell.openExternal('https://deskreen.com');
                 }}
+                style={{
+                  width: 'calc(100% - 50px)',
+                }}
               >
                 {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
-                New version {latestVersion} is available! Click to download.
+                {`${t(
+                  'A new version of Deskreen is available! Click to download new version'
+                )} ${latestVersion}`}
               </H4>
             ) : (
               <></>
@@ -398,9 +288,6 @@ export default function SettingsOverlay(props: SettingsOverlayProps) {
               <Tab id="ng" disabled title="" panel={<SecurityPanel />}>
                 {getTabNavSecurityButton()}
               </Tab>
-              <Tab id="bb" disabled title="" panel={<BlockedIPsPanel />}>
-                {getTabNavBlockedIPsButton()}
-              </Tab>
               <Tab id="cc" title="" panel={<AboutPanel />}>
                 {getTabNavAboutButton()}
               </Tab>

app/components/ShareAppOrScreenControlGroup.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { Button, Icon, ControlGroup, Text } from '@blueprintjs/core';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
+import { useTranslation } from 'react-i18next';
 import ChooseAppOrScreenOverlay from './StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay';
 
 interface ShareAppOrScreenControlGroupProps {
@@ -53,6 +54,7 @@ const useStyles = makeStyles(() =>
 export default function ShareAppOrScreenControlGroup(
   props: ShareAppOrScreenControlGroupProps
 ) {
+  const { t } = useTranslation();
   const { handleNextEntireScreen, handleNextApplicationWindow } = props;
   const classes = useStyles();
 
@@ -103,7 +105,7 @@ export default function ShareAppOrScreenControlGroup(
             iconSize={100}
             color="white"
           />
-          <Text className="bp3-running-text">Entire Screen</Text>
+          <Text className="bp3-running-text">{t('Entire Screen')}</Text>
         </Button>
         <Button
           className={classes.shareAppButton}
@@ -116,14 +118,14 @@ export default function ShareAppOrScreenControlGroup(
             iconSize={100}
             color="white"
           />
-          <Text className="bp3-running-text">Application Window</Text>
+          <Text className="bp3-running-text">{t('Application Window')}</Text>
         </Button>
         <Button
           active
           className={classes.orDecorationButton}
           style={{ zIndex: 999 }}
         >
-          OR
+          {t('OR')}
         </Button>
       </ControlGroup>
       <ChooseAppOrScreenOverlay

app/components/StepperPanel/DeviceConnectedInfoButton.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Row, Col } from 'react-flexbox-grid';
 import { Icon, Text, Button, Popover, Tooltip } from '@blueprintjs/core';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import DeviceInfoCallout from '../DeviceInfoCallout';
 import isWithReactRevealAnimations from '../../utils/isWithReactRevealAnimations';
 
@@ -10,9 +12,12 @@ interface DeviceConnectedInfoButtonProps {
 }
 
 const getDeviceConnectedPopoverContent = (
+  t: TFunction,
   pendingConnectionDevice: Device,
   handleDisconnect: () => void
 ) => {
+  const disconnectButtonText = t('Disconnect');
+
   return (
     <Row>
       <div style={{ padding: '20px', borderRadius: '100px' }}>
@@ -35,7 +40,7 @@ const getDeviceConnectedPopoverContent = (
               }}
               style={{ width: '100%', borderRadius: '5px' }}
             >
-              Disconnect
+              {disconnectButtonText}
             </Button>
           </Col>
         </Row>
@@ -47,18 +52,20 @@ const getDeviceConnectedPopoverContent = (
 export default function DeviceConnectedInfoButton(
   props: DeviceConnectedInfoButtonProps
 ) {
+  const { t } = useTranslation();
+
   const { device, onDisconnect } = props;
 
   return (
     <>
       <Popover
-        content={getDeviceConnectedPopoverContent(device, onDisconnect)}
+        content={getDeviceConnectedPopoverContent(t, device, onDisconnect)}
         position="bottom"
         inheritDarkTheme={false}
         transitionDuration={isWithReactRevealAnimations() ? 700 : 0}
       >
         <Tooltip
-          content={<Text>Click to manage</Text>}
+          content={<Text>{t('Click to see more')}</Text>}
           position="right"
           hoverOpenDelay={400}
         >
@@ -66,7 +73,7 @@ export default function DeviceConnectedInfoButton(
             id="connected-device-info-stepper-button"
             intent="success"
             style={{
-              width: '120px',
+              width: '150px',
               height: '10px !important',
               borderRadius: '100px',
               position: 'relative',
@@ -78,7 +85,7 @@ export default function DeviceConnectedInfoButton(
                 <Icon icon="info-sign" />
               </Col>
               <Col xs>
-                <Text>Connected</Text>
+                <Text>{t('Connected')}</Text>
               </Col>
             </Row>
           </Button>

app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap

@@ -65,7 +65,7 @@ exports[`should match exact snapshot 1`] = `
                       }
                     }
                   >
-                    Disconnect
+                    
                   </Blueprint3.Button>
                 </Col>
               </Row>
@@ -114,7 +114,7 @@ exports[`should match exact snapshot 1`] = `
                           ellipsize={false}
                           tagName="div"
                         >
-                          Click to manage
+                          
                         </Blueprint3.Text>
                       }
                       hoverCloseDelay={0}
@@ -135,7 +135,7 @@ exports[`should match exact snapshot 1`] = `
                             ellipsize={false}
                             tagName="div"
                           >
-                            Click to manage
+                            
                           </Blueprint3.Text>
                         }
                         defaultIsOpen={false}
@@ -196,7 +196,7 @@ exports[`should match exact snapshot 1`] = `
                                           "height": "10px !important",
                                           "margin": "0 auto",
                                           "position": "relative",
-                                          "width": "120px",
+                                          "width": "150px",
                                         }
                                       }
                                       tabIndex={0}
@@ -213,7 +213,7 @@ exports[`should match exact snapshot 1`] = `
                                             "height": "10px !important",
                                             "margin": "0 auto",
                                             "position": "relative",
-                                            "width": "120px",
+                                            "width": "150px",
                                           }
                                         }
                                         tabIndex={0}
@@ -274,9 +274,7 @@ exports[`should match exact snapshot 1`] = `
                                                   >
                                                     <div
                                                       className=""
-                                                    >
-                                                      Connected
-                                                    </div>
+                                                    />
                                                   </Blueprint3.Text>
                                                 </div>
                                               </Col>

app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Row, Col } from 'react-flexbox-grid';
-import { Text } from '@blueprintjs/core';
 import ShareEntireScreenOrAppWindowControlGroup from '../ShareAppOrScreenControlGroup';
 
 interface ChooseAppOrScreeenStepProps {
@@ -18,9 +17,6 @@ const ChooseAppOrScreeenStep: React.FC<ChooseAppOrScreeenStepProps> = (
       <Col xs={12}>
         <Row center="xs">
           <Col xs={6}>
-            <div style={{ marginBottom: '10px' }}>
-              <Text>Choose Entire Screen or App window you want to share</Text>
-            </div>
             <Row center="xs">
               <Col>
                 <ShareEntireScreenOrAppWindowControlGroup

app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { H3, Card, Dialog, Button } from '@blueprintjs/core';
 import { Row, Col } from 'react-flexbox-grid';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
+import { useTranslation } from 'react-i18next';
 import CloseOverlayButton from '../../CloseOverlayButton';
 import PreviewGridList from './PreviewGridList';
 import DesktopCapturerSources from '../../../features/DesktopCapturerSourcesService';
@@ -50,6 +51,8 @@ interface ChooseAppOrScreenOverlayProps {
 export default function ChooseAppOrScreenOverlay(
   props: ChooseAppOrScreenOverlayProps
 ) {
+  const { t } = useTranslation();
+
   const {
     handleClose,
     isChooseAppOrScreenOverlayOpen,
@@ -148,13 +151,13 @@ export default function ChooseAppOrScreenOverlay(
                   {isEntireScreenToShareChosen ? (
                     <div>
                       <H3 style={{ marginBottom: '0px' }}>
-                        Select Entire Screen to Share
+                        {t('Select Entire Screen to Share')}
                       </H3>
                     </div>
                   ) : (
                     <div>
                       <H3 style={{ marginBottom: '0px' }}>
-                        Select App Window to Share
+                        {t('Select App Window to Share')}
                       </H3>
                     </div>
                   )}
@@ -168,7 +171,7 @@ export default function ChooseAppOrScreenOverlay(
                       borderRadius: '100px',
                     }}
                   >
-                    Refresh
+                    {t('Refresh')}
                   </Button>
                 </Col>
 

app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap

@@ -103,9 +103,7 @@ exports[`should match exact snapshot 1`] = `
                                     <h3
                                       class="bp3-heading"
                                       style="margin-bottom: 0px;"
-                                    >
-                                      Select Entire Screen to Share
-                                    </h3>
+                                    />
                                   </div>
                                 </div>
                                 <div
@@ -135,11 +133,6 @@ exports[`should match exact snapshot 1`] = `
                                         />
                                       </svg>
                                     </span>
-                                    <span
-                                      class="bp3-button-text"
-                                    >
-                                      Refresh
-                                    </span>
                                   </button>
                                 </div>
                                 <div
@@ -250,9 +243,7 @@ exports[`should match exact snapshot 1`] = `
                                     <h3
                                       class="bp3-heading"
                                       style="margin-bottom: 0px;"
-                                    >
-                                      Select Entire Screen to Share
-                                    </h3>
+                                    />
                                   </div>
                                 </div>
                                 <div
@@ -282,11 +273,6 @@ exports[`should match exact snapshot 1`] = `
                                         />
                                       </svg>
                                     </span>
-                                    <span
-                                      class="bp3-button-text"
-                                    >
-                                      Refresh
-                                    </span>
                                   </button>
                                 </div>
                                 <div
@@ -546,9 +532,7 @@ exports[`should match exact snapshot 1`] = `
                                                         "marginBottom": "0px",
                                                       }
                                                     }
-                                                  >
-                                                    Select Entire Screen to Share
-                                                  </h3>
+                                                  />
                                                 </Component>
                                               </div>
                                             </div>
@@ -607,12 +591,6 @@ exports[`should match exact snapshot 1`] = `
                                                       </svg>
                                                     </span>
                                                   </Blueprint3.Icon>
-                                                  <span
-                                                    className="bp3-button-text"
-                                                    key="text"
-                                                  >
-                                                    Refresh
-                                                  </span>
                                                   <Blueprint3.Icon
                                                     key="rightIcon"
                                                   />

app/components/StepsOfStepper/ConfirmStep.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { remote } from 'electron';
 import { Text } from '@blueprintjs/core';
 import { Row, Col } from 'react-flexbox-grid';
+import { useTranslation } from 'react-i18next';
 import SharingSourcePreviewCard from '../SharingSourcePreviewCard';
 import SharingSessionService from '../../features/SharingSessionService';
 import DeviceInfoCallout from '../DeviceInfoCallout';
@@ -16,6 +17,7 @@ interface ConfirmStepProps {
 }
 
 export default function ConfirmStep(props: ConfirmStepProps) {
+  const { t } = useTranslation();
   const { device } = props;
   const [sharingSession, setSharingSession] = useState<
     SharingSession | undefined
@@ -34,7 +36,7 @@ export default function ConfirmStep(props: ConfirmStepProps) {
       <Row style={{ marginBottom: '10px' }}>
         <Col xs={12} style={{ textAlign: 'center' }}>
           {/* eslint-disable-next-line react/no-unescaped-entities */}
-          <Text>Check if all is OK and click "Confirm"</Text>
+          <Text>{t('Check if all is OK and click Confirm')}</Text>
         </Col>
       </Row>
       <Row middle="xs" center="xs">
@@ -53,14 +55,6 @@ export default function ConfirmStep(props: ConfirmStepProps) {
           />
         </Col>
       </Row>
-      <Row style={{ marginBottom: '10px' }}>
-        <Col xs={12} style={{ textAlign: 'center' }}>
-          <Text className="bp3-text-muted">
-            {/* eslint-disable-next-line react/no-unescaped-entities */}
-            Click "Back" if you need to change something
-          </Text>
-        </Col>
-      </Row>
     </div>
   );
 }

app/components/StepsOfStepper/IntermediateStep.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { remote } from 'electron';
-import { Button } from '@blueprintjs/core';
+import { Button, Text } from '@blueprintjs/core';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import { Col, Row } from 'react-flexbox-grid';
 import DEVICES from '../../constants/test-devices.json';
 import ScanQRStep from './ScanQRStep';
@@ -28,6 +30,7 @@ interface IntermediateStepProps {
 }
 
 function getStepContent(
+  t: TFunction,
   stepIndex: number,
   handleNextEntireScreen: () => void,
   handleNextApplicationWindow: () => void,
@@ -38,10 +41,19 @@ function getStepContent(
       return <ScanQRStep />;
     case 1:
       return (
+        <>
+          <Row center="xs">
+            <div style={{ marginBottom: '10px' }}>
+              <Text>
+                {t('Choose Entire Screen or App window you want to share')}
+              </Text>
+            </div>
+          </Row>
           <ChooseAppOrScreeenStep
             handleNextEntireScreen={handleNextEntireScreen}
             handleNextApplicationWindow={handleNextApplicationWindow}
           />
+        </>
       );
     case 2:
       return <ConfirmStep device={pendingConnectionDevice} />;
@@ -55,6 +67,8 @@ function isConfirmStep(activeStep: number, steps: string[]) {
 }
 
 export default function IntermediateStep(props: IntermediateStepProps) {
+  const { t } = useTranslation();
+
   const {
     activeStep,
     steps,
@@ -83,6 +97,7 @@ export default function IntermediateStep(props: IntermediateStepProps) {
       }}
     >
       {getStepContent(
+        t,
         activeStep,
         handleNextEntireScreen,
         handleNextApplicationWindow,
@@ -168,7 +183,9 @@ export default function IntermediateStep(props: IntermediateStepProps) {
                     : 'chevron-right'
                 }
               >
-                {isConfirmStep(activeStep, steps) ? 'Confirm' : 'Next'}
+                {isConfirmStep(activeStep, steps)
+                  ? t('Confirm Button Text')
+                  : 'Next'}
               </Button>
             </Col>
           </Row>
@@ -185,7 +202,7 @@ export default function IntermediateStep(props: IntermediateStepProps) {
           }}
           onClick={handleBack}
           icon="chevron-left"
-          text="No, I need to share other thing"
+          text={t('No, I need to choose other')}
         />
       </Row>
     </Col>

app/components/StepsOfStepper/ScanQRStep.tsx

@@ -101,13 +101,15 @@ const ScanQRStep: React.FC = () => {
               borderRadius: '20px',
             }}
           >
-            Make sure your computer and device are connected to same WiFi
+            {t(
+              'Make sure your computer and screen viewing device are connected to same Wi-Fi'
+            )}
           </span>
         </Text>
         <Text className="bp3-text">{t('Scan the QR code')}</Text>
       </div>
       <div>
-        <Tooltip content="Click to make bigger" position={Position.LEFT}>
+        <Tooltip content={t('Click to make bigger')} position={Position.LEFT}>
           <Button
             id="magnify-qr-code-button"
             className={classes.smallQRCode}
@@ -131,12 +133,13 @@ const ScanQRStep: React.FC = () => {
       </div>
       <div style={{ marginBottom: '10px' }}>
         <Text className="bp3-text-muted">
-          or type the following address manually in browser address bar on any
-          device:
+          {`${t(
+            'Or type the following address in browser address bar on any device'
+          )}:`}
         </Text>
       </div>
 
-      <Tooltip content="Click to copy" position={Position.LEFT}>
+      <Tooltip content={t('Click to copy')} position={Position.LEFT}>
         <Button
           intent="primary"
           icon="duplicate"

app/components/StepsOfStepper/SuccessStep.tsx

@@ -2,12 +2,15 @@
 import React, { useCallback, useEffect } from 'react';
 import { Button, H5, Icon, Text } from '@blueprintjs/core';
 import { Row, Col } from 'react-flexbox-grid';
+import { useTranslation } from 'react-i18next';
 
 interface SuccessStepProps {
   handleReset: () => void;
 }
 
 const SuccessStep: React.FC<SuccessStepProps> = (props: SuccessStepProps) => {
+  const { t } = useTranslation();
+
   useEffect(() => {
     document
       .querySelector('#top-panel-connected-devices-list-button')
@@ -49,16 +52,13 @@ const SuccessStep: React.FC<SuccessStepProps> = (props: SuccessStepProps) => {
       <Row center="xs">
         <Col xs={12}>
           <Icon icon="endorsed" iconSize={35} color="#0F9960" />
-          <H5>Success!</H5>
+          <H5>{t('Done!')}</H5>
         </Col>
       </Row>
       <Row center="xs">
         <Col xs={10}>
           <div style={{ marginBottom: '10px' }}>
-            <Text>
-              {`You should see now sharing session started on device you've connected
-      with.`}
-            </Text>
+            <Text>{t('Now you can see your screen on other device')}</Text>
           </div>
           <div
             id="connected-devices-list-text-success"
@@ -70,10 +70,9 @@ const SuccessStep: React.FC<SuccessStepProps> = (props: SuccessStepProps) => {
             }}
           >
             <Text className="">
-              {`
-              You can manage connected devices by clicking "Connected Devices"
-              button in top panel
-              `}
+              {t(
+                'You can manage connected devices by clicking Connected Devices button in top panel'
+              )}
             </Text>
           </div>
         </Col>
@@ -84,7 +83,7 @@ const SuccessStep: React.FC<SuccessStepProps> = (props: SuccessStepProps) => {
         icon="repeat"
         style={{ borderRadius: '100px' }}
       >
-        Connect New Device
+        {t('Connect New Device')}
       </Button>
     </Col>
   );

app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap

@@ -61,24 +61,6 @@ exports[`should match exact snapshot 1`] = `
                     <div
                       className="col-xs-6"
                     >
-                      <div
-                        style={
-                          Object {
-                            "marginBottom": "10px",
-                          }
-                        }
-                      >
-                        <Blueprint3.Text
-                          ellipsize={false}
-                          tagName="div"
-                        >
-                          <div
-                            className=""
-                          >
-                            Choose Entire Screen or App window you want to share
-                          </div>
-                        </Blueprint3.Text>
-                      </div>
                       <Row
                         center="xs"
                       >
@@ -168,9 +150,7 @@ exports[`should match exact snapshot 1`] = `
                                           >
                                             <div
                                               className="bp3-running-text"
-                                            >
-                                              Entire Screen
-                                            </div>
+                                            />
                                           </Blueprint3.Text>
                                         </span>
                                         <Blueprint3.Icon
@@ -233,9 +213,7 @@ exports[`should match exact snapshot 1`] = `
                                           >
                                             <div
                                               className="bp3-running-text"
-                                            >
-                                              Application Window
-                                            </div>
+                                            />
                                           </Blueprint3.Text>
                                         </span>
                                         <Blueprint3.Icon
@@ -267,12 +245,6 @@ exports[`should match exact snapshot 1`] = `
                                         <Blueprint3.Icon
                                           key="leftIcon"
                                         />
-                                        <span
-                                          className="bp3-button-text"
-                                          key="text"
-                                        >
-                                          OR
-                                        </span>
                                         <Blueprint3.Icon
                                           key="rightIcon"
                                         />

app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap

@@ -72,9 +72,7 @@ exports[`should match exact snapshot 1`] = `
                 >
                   <div
                     className=""
-                  >
-                    Check if all is OK and click "Confirm"
-                  </div>
+                  />
                 </Blueprint3.Text>
               </div>
             </Col>
@@ -111,15 +109,25 @@ exports[`should match exact snapshot 1`] = `
                         }
                       }
                     >
-                      Partner Device Info:
+                      :
                     </h4>
                   </Component>
                   <Blueprint3.Callout
                     id="device-info-callout"
+                    style={
+                      Object {
+                        "borderRadius": "8px",
+                      }
+                    }
                   >
                     <div
                       className="bp3-callout"
                       id="device-info-callout"
+                      style={
+                        Object {
+                          "borderRadius": "8px",
+                        }
+                      }
                     >
                       <Row
                         center="xs"
@@ -140,7 +148,8 @@ exports[`should match exact snapshot 1`] = `
                                 <div
                                   className=""
                                 >
-                                  Device Type: 
+                                  :
+                                   
                                   <span />
                                 </div>
                               </Blueprint3.Text>
@@ -151,8 +160,7 @@ exports[`should match exact snapshot 1`] = `
                                       ellipsize={false}
                                       tagName="div"
                                     >
-                                      This should match with 'Device IP' displayed on the screen of device
-        that is trying to connect.
+                                      
                                     </Blueprint3.Text>
                                     <span
                                       style={
@@ -165,8 +173,7 @@ exports[`should match exact snapshot 1`] = `
                                         ellipsize={false}
                                         tagName="div"
                                       >
-                                        If IPs don't match click 'Deny' or 'Disconnect' button immediately to
-          secure your computer!
+                                        
                                       </Blueprint3.Text>
                                     </span>
                                   </React.Fragment>
@@ -188,8 +195,7 @@ exports[`should match exact snapshot 1`] = `
                                         ellipsize={false}
                                         tagName="div"
                                       >
-                                        This should match with 'Device IP' displayed on the screen of device
-        that is trying to connect.
+                                        
                                       </Blueprint3.Text>
                                       <span
                                         style={
@@ -202,8 +208,7 @@ exports[`should match exact snapshot 1`] = `
                                           ellipsize={false}
                                           tagName="div"
                                         >
-                                          If IPs don't match click 'Deny' or 'Disconnect' button immediately to
-          secure your computer!
+                                          
                                         </Blueprint3.Text>
                                       </span>
                                     </React.Fragment>
@@ -277,7 +282,8 @@ exports[`should match exact snapshot 1`] = `
                                                   <div
                                                     className="bp3-text-large"
                                                   >
-                                                    Device IP: 
+                                                    :
+                                                     
                                                     <span
                                                       className="device-ip-span"
                                                     />
@@ -314,7 +320,8 @@ exports[`should match exact snapshot 1`] = `
                                 <div
                                   className=""
                                 >
-                                  Device Browser: 
+                                  :
+                                   
                                   <span />
                                 </div>
                               </Blueprint3.Text>
@@ -325,7 +332,8 @@ exports[`should match exact snapshot 1`] = `
                                 <div
                                   className=""
                                 >
-                                  Device OS: 
+                                  :
+                                   
                                   <span />
                                 </div>
                               </Blueprint3.Text>
@@ -345,7 +353,8 @@ exports[`should match exact snapshot 1`] = `
                                   <div
                                     className="bp3-text-overflow-ellipsis bp3-text-muted"
                                   >
-                                    Session ID: 
+                                    :
+                                     
                                     <span />
                                   </div>
                                 </Blueprint3.Text>
@@ -500,52 +509,6 @@ exports[`should match exact snapshot 1`] = `
             </Col>
           </div>
         </Row>
-        <Row
-          style={
-            Object {
-              "marginBottom": "10px",
-            }
-          }
-        >
-          <div
-            className="row"
-            style={
-              Object {
-                "marginBottom": "10px",
-              }
-            }
-          >
-            <Col
-              style={
-                Object {
-                  "textAlign": "center",
-                }
-              }
-              xs={12}
-            >
-              <div
-                className="col-xs-12"
-                style={
-                  Object {
-                    "textAlign": "center",
-                  }
-                }
-              >
-                <Blueprint3.Text
-                  className="bp3-text-muted"
-                  ellipsize={false}
-                  tagName="div"
-                >
-                  <div
-                    className="bp3-text-muted"
-                  >
-                    Click "Back" if you need to change something
-                  </div>
-                </Blueprint3.Text>
-              </div>
-            </Col>
-          </div>
-        </Row>
       </div>
     </ConfirmStep>
   </Router>

app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap

@@ -91,9 +91,7 @@ exports[`should match exact snapshot on each step 1`] = `
                         "paddingRight": "8px",
                       }
                     }
-                  >
-                    Make sure your computer and device are connected to same WiFi
-                  </span>
+                  />
                 </div>
               </Blueprint3.Text>
               <Blueprint3.Text
@@ -108,7 +106,7 @@ exports[`should match exact snapshot on each step 1`] = `
             </div>
             <div>
               <Blueprint3.Tooltip
-                content="Click to make bigger"
+                content=""
                 hoverCloseDelay={0}
                 hoverOpenDelay={100}
                 minimal={false}
@@ -120,7 +118,7 @@ exports[`should match exact snapshot on each step 1`] = `
                   boundary="scrollParent"
                   canEscapeKeyClose={false}
                   captureDismiss={false}
-                  content="Click to make bigger"
+                  content=""
                   defaultIsOpen={false}
                   disabled={false}
                   enforceFocus={false}
@@ -293,12 +291,12 @@ exports[`should match exact snapshot on each step 1`] = `
                 <div
                   className="bp3-text-muted"
                 >
-                  or type the following address manually in browser address bar on any device:
+                  :
                 </div>
               </Blueprint3.Text>
             </div>
             <Blueprint3.Tooltip
-              content="Click to copy"
+              content=""
               hoverCloseDelay={0}
               hoverOpenDelay={100}
               minimal={false}
@@ -310,7 +308,7 @@ exports[`should match exact snapshot on each step 1`] = `
                 boundary="scrollParent"
                 canEscapeKeyClose={false}
                 captureDismiss={false}
-                content="Click to copy"
+                content=""
                 defaultIsOpen={false}
                 disabled={false}
                 enforceFocus={false}
@@ -534,7 +532,7 @@ exports[`should match exact snapshot on each step 1`] = `
                     "marginTop": "10px",
                   }
                 }
-                text="No, I need to share other thing"
+                text=""
               >
                 <button
                   className="bp3-button bp3-intent-danger"
@@ -575,12 +573,6 @@ exports[`should match exact snapshot on each step 1`] = `
                       </svg>
                     </span>
                   </Blueprint3.Icon>
-                  <span
-                    className="bp3-button-text"
-                    key="text"
-                  >
-                    No, I need to share other thing
-                  </span>
                   <Blueprint3.Icon
                     key="rightIcon"
                   />
@@ -661,6 +653,30 @@ exports[`should match exact snapshot on each step 2`] = `
             }
           }
         >
+          <Row
+            center="xs"
+          >
+            <div
+              className="row center-xs"
+            >
+              <div
+                style={
+                  Object {
+                    "marginBottom": "10px",
+                  }
+                }
+              >
+                <Blueprint3.Text
+                  ellipsize={false}
+                  tagName="div"
+                >
+                  <div
+                    className=""
+                  />
+                </Blueprint3.Text>
+              </div>
+            </div>
+          </Row>
           <ChooseAppOrScreeenStep
             handleNextApplicationWindow={[Function]}
             handleNextEntireScreen={[Function]}
@@ -698,24 +714,6 @@ exports[`should match exact snapshot on each step 2`] = `
                           <div
                             className="col-xs-6"
                           >
-                            <div
-                              style={
-                                Object {
-                                  "marginBottom": "10px",
-                                }
-                              }
-                            >
-                              <Blueprint3.Text
-                                ellipsize={false}
-                                tagName="div"
-                              >
-                                <div
-                                  className=""
-                                >
-                                  Choose Entire Screen or App window you want to share
-                                </div>
-                              </Blueprint3.Text>
-                            </div>
                             <Row
                               center="xs"
                             >
@@ -805,9 +803,7 @@ exports[`should match exact snapshot on each step 2`] = `
                                                 >
                                                   <div
                                                     className="bp3-running-text"
-                                                  >
-                                                    Entire Screen
-                                                  </div>
+                                                  />
                                                 </Blueprint3.Text>
                                               </span>
                                               <Blueprint3.Icon
@@ -870,9 +866,7 @@ exports[`should match exact snapshot on each step 2`] = `
                                                 >
                                                   <div
                                                     className="bp3-running-text"
-                                                  >
-                                                    Application Window
-                                                  </div>
+                                                  />
                                                 </Blueprint3.Text>
                                               </span>
                                               <Blueprint3.Icon
@@ -904,12 +898,6 @@ exports[`should match exact snapshot on each step 2`] = `
                                               <Blueprint3.Icon
                                                 key="leftIcon"
                                               />
-                                              <span
-                                                className="bp3-button-text"
-                                                key="text"
-                                              >
-                                                OR
-                                              </span>
                                               <Blueprint3.Icon
                                                 key="rightIcon"
                                               />
@@ -1071,7 +1059,7 @@ exports[`should match exact snapshot on each step 2`] = `
                     "marginTop": "10px",
                   }
                 }
-                text="No, I need to share other thing"
+                text=""
               >
                 <button
                   className="bp3-button bp3-intent-danger"
@@ -1112,12 +1100,6 @@ exports[`should match exact snapshot on each step 2`] = `
                       </svg>
                     </span>
                   </Blueprint3.Icon>
-                  <span
-                    className="bp3-button-text"
-                    key="text"
-                  >
-                    No, I need to share other thing
-                  </span>
                   <Blueprint3.Icon
                     key="rightIcon"
                   />
@@ -1244,9 +1226,7 @@ exports[`should match exact snapshot on each step 3`] = `
                       >
                         <div
                           className=""
-                        >
-                          Check if all is OK and click "Confirm"
-                        </div>
+                        />
                       </Blueprint3.Text>
                     </div>
                   </Col>
@@ -1283,15 +1263,25 @@ exports[`should match exact snapshot on each step 3`] = `
                               }
                             }
                           >
-                            Partner Device Info:
+                            :
                           </h4>
                         </Component>
                         <Blueprint3.Callout
                           id="device-info-callout"
+                          style={
+                            Object {
+                              "borderRadius": "8px",
+                            }
+                          }
                         >
                           <div
                             className="bp3-callout"
                             id="device-info-callout"
+                            style={
+                              Object {
+                                "borderRadius": "8px",
+                              }
+                            }
                           >
                             <Row
                               center="xs"
@@ -1312,7 +1302,8 @@ exports[`should match exact snapshot on each step 3`] = `
                                       <div
                                         className=""
                                       >
-                                        Device Type: 
+                                        :
+                                         
                                         <span />
                                       </div>
                                     </Blueprint3.Text>
@@ -1323,8 +1314,7 @@ exports[`should match exact snapshot on each step 3`] = `
                                             ellipsize={false}
                                             tagName="div"
                                           >
-                                            This should match with 'Device IP' displayed on the screen of device
-        that is trying to connect.
+                                            
                                           </Blueprint3.Text>
                                           <span
                                             style={
@@ -1337,8 +1327,7 @@ exports[`should match exact snapshot on each step 3`] = `
                                               ellipsize={false}
                                               tagName="div"
                                             >
-                                              If IPs don't match click 'Deny' or 'Disconnect' button immediately to
-          secure your computer!
+                                              
                                             </Blueprint3.Text>
                                           </span>
                                         </React.Fragment>
@@ -1360,8 +1349,7 @@ exports[`should match exact snapshot on each step 3`] = `
                                               ellipsize={false}
                                               tagName="div"
                                             >
-                                              This should match with 'Device IP' displayed on the screen of device
-        that is trying to connect.
+                                              
                                             </Blueprint3.Text>
                                             <span
                                               style={
@@ -1374,8 +1362,7 @@ exports[`should match exact snapshot on each step 3`] = `
                                                 ellipsize={false}
                                                 tagName="div"
                                               >
-                                                If IPs don't match click 'Deny' or 'Disconnect' button immediately to
-          secure your computer!
+                                                
                                               </Blueprint3.Text>
                                             </span>
                                           </React.Fragment>
@@ -1449,7 +1436,8 @@ exports[`should match exact snapshot on each step 3`] = `
                                                         <div
                                                           className="bp3-text-large"
                                                         >
-                                                          Device IP: 
+                                                          :
+                                                           
                                                           <span
                                                             className="device-ip-span"
                                                           />
@@ -1486,7 +1474,8 @@ exports[`should match exact snapshot on each step 3`] = `
                                       <div
                                         className=""
                                       >
-                                        Device Browser: 
+                                        :
+                                         
                                         <span />
                                       </div>
                                     </Blueprint3.Text>
@@ -1497,7 +1486,8 @@ exports[`should match exact snapshot on each step 3`] = `
                                       <div
                                         className=""
                                       >
-                                        Device OS: 
+                                        :
+                                         
                                         <span />
                                       </div>
                                     </Blueprint3.Text>
@@ -1517,7 +1507,8 @@ exports[`should match exact snapshot on each step 3`] = `
                                         <div
                                           className="bp3-text-overflow-ellipsis bp3-text-muted"
                                         >
-                                          Session ID: 
+                                          :
+                                           
                                           <span />
                                         </div>
                                       </Blueprint3.Text>
@@ -1672,52 +1663,6 @@ exports[`should match exact snapshot on each step 3`] = `
                   </Col>
                 </div>
               </Row>
-              <Row
-                style={
-                  Object {
-                    "marginBottom": "10px",
-                  }
-                }
-              >
-                <div
-                  className="row"
-                  style={
-                    Object {
-                      "marginBottom": "10px",
-                    }
-                  }
-                >
-                  <Col
-                    style={
-                      Object {
-                        "textAlign": "center",
-                      }
-                    }
-                    xs={12}
-                  >
-                    <div
-                      className="col-xs-12"
-                      style={
-                        Object {
-                          "textAlign": "center",
-                        }
-                      }
-                    >
-                      <Blueprint3.Text
-                        className="bp3-text-muted"
-                        ellipsize={false}
-                        tagName="div"
-                      >
-                        <div
-                          className="bp3-text-muted"
-                        >
-                          Click "Back" if you need to change something
-                        </div>
-                      </Blueprint3.Text>
-                    </div>
-                  </Col>
-                </div>
-              </Row>
             </div>
           </ConfirmStep>
           <Row>
@@ -1762,12 +1707,6 @@ exports[`should match exact snapshot on each step 3`] = `
                       <Blueprint3.Icon
                         key="leftIcon"
                       />
-                      <span
-                        className="bp3-button-text"
-                        key="text"
-                      >
-                        Confirm
-                      </span>
                       <Blueprint3.Icon
                         icon="small-tick"
                         key="rightIcon"
@@ -1824,7 +1763,7 @@ exports[`should match exact snapshot on each step 3`] = `
                     "marginTop": "10px",
                   }
                 }
-                text="No, I need to share other thing"
+                text=""
               >
                 <button
                   className="bp3-button bp3-intent-danger"
@@ -1865,12 +1804,6 @@ exports[`should match exact snapshot on each step 3`] = `
                       </svg>
                     </span>
                   </Blueprint3.Icon>
-                  <span
-                    className="bp3-button-text"
-                    key="text"
-                  >
-                    No, I need to share other thing
-                  </span>
                   <Blueprint3.Icon
                     key="rightIcon"
                   />

app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap

@@ -23,9 +23,7 @@ exports[`<ScanQRStep /> when rendered should match exact snapshot 1`] = `
             "paddingRight": "8px",
           }
         }
-      >
-        Make sure your computer and device are connected to same WiFi
-      </span>
+      />
     </Blueprint3.Text>
     <Blueprint3.Text
       className="bp3-text"
@@ -35,7 +33,7 @@ exports[`<ScanQRStep /> when rendered should match exact snapshot 1`] = `
   </div>
   <div>
     <Blueprint3.Tooltip
-      content="Click to make bigger"
+      content=""
       hoverCloseDelay={0}
       hoverOpenDelay={100}
       minimal={false}
@@ -78,11 +76,11 @@ exports[`<ScanQRStep /> when rendered should match exact snapshot 1`] = `
       ellipsize={false}
       tagName="div"
     >
-      or type the following address manually in browser address bar on any device:
+      :
     </Blueprint3.Text>
   </div>
   <Blueprint3.Tooltip
-    content="Click to copy"
+    content=""
     hoverCloseDelay={0}
     hoverOpenDelay={100}
     minimal={false}

app/components/StepsOfStepper/__snapshots__/SuccessStep.spec.tsx.snap

@@ -90,9 +90,7 @@ exports[`should match exact snapshot 1`] = `
                   <Component>
                     <h5
                       className="bp3-heading"
-                    >
-                      Success!
-                    </h5>
+                    />
                   </Component>
                 </div>
               </Col>
@@ -123,10 +121,7 @@ exports[`should match exact snapshot 1`] = `
                     >
                       <div
                         className=""
-                      >
-                        You should see now sharing session started on device you've connected
-      with.
-                      </div>
+                      />
                     </Blueprint3.Text>
                   </div>
                   <div
@@ -147,12 +142,7 @@ exports[`should match exact snapshot 1`] = `
                     >
                       <div
                         className=""
-                      >
-                        
-              You can manage connected devices by clicking "Connected Devices"
-              button in top panel
-              
-                      </div>
+                      />
                     </Blueprint3.Text>
                   </div>
                 </div>
@@ -207,12 +197,6 @@ exports[`should match exact snapshot 1`] = `
                   </svg>
                 </span>
               </Blueprint3.Icon>
-              <span
-                className="bp3-button-text"
-                key="text"
-              >
-                Connect New Device
-              </span>
               <Blueprint3.Icon
                 key="rightIcon"
               />

app/components/ToggleThemeBtnGroup/index.tsx

@@ -0,0 +1,57 @@
+import { remote } from 'electron';
+import React, { useContext, useCallback } from 'react';
+import { Button, Classes, ControlGroup } from '@blueprintjs/core';
+import SharingSessionService from '../../features/SharingSessionService';
+import { SettingsContext } from '../../containers/SettingsProvider';
+
+const sharingSessionService = remote.getGlobal(
+  'sharingSessionService'
+) as SharingSessionService;
+
+export default function ToggleThemeBtnGroup() {
+  const { isDarkTheme, setIsDarkThemeHook } = useContext(SettingsContext);
+
+  const handleToggleDarkTheme = useCallback(() => {
+    if (!isDarkTheme) {
+      document.body.classList.toggle(Classes.DARK);
+      setIsDarkThemeHook(true);
+    }
+    // TODO: call sharing sessions service here to notify all connected clients about theme change
+    sharingSessionService.sharingSessions.forEach((sharingSession) => {
+      sharingSession?.appThemeChanged();
+    });
+  }, [isDarkTheme, setIsDarkThemeHook]);
+
+  const handleToggleLightTheme = useCallback(() => {
+    if (isDarkTheme) {
+      document.body.classList.toggle(Classes.DARK);
+      setIsDarkThemeHook(false);
+    }
+    // TODO: call sharing sessions service here to notify all connected clients about theme change
+    sharingSessionService.sharingSessions.forEach((sharingSession) => {
+      sharingSession?.appThemeChanged();
+    });
+  }, [isDarkTheme, setIsDarkThemeHook]);
+
+  return (
+    <ControlGroup fill vertical={false} style={{ width: '120px' }}>
+      <Button
+        id="light-theme-toggle-btn"
+        icon="flash"
+        onClick={handleToggleLightTheme}
+        active={!isDarkTheme}
+        style={{ borderTopLeftRadius: '50px', borderBottomLeftRadius: '50px' }}
+      />
+      <Button
+        id="dark-theme-toggle-btn"
+        icon="moon"
+        onClick={handleToggleDarkTheme}
+        active={isDarkTheme}
+        style={{
+          borderTopRightRadius: '50px',
+          borderBottomRightRadius: '50px',
+        }}
+      />
+    </ControlGroup>
+  );
+}

app/components/TopPanel.tsx

@@ -6,6 +6,7 @@ import React, { useCallback, useContext } from 'react';
 import { Button, Text, Icon, Position, Tooltip } from '@blueprintjs/core';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 import { Col, Row } from 'react-flexbox-grid';
+import { useTranslation } from 'react-i18next';
 import SettingsOverlay from './SettingsOverlay/SettingsOverlay';
 import ConnectedDevicesListDrawer from './ConnectedDevicesListDrawer';
 import { SettingsContext } from '../containers/SettingsProvider';
@@ -52,6 +53,7 @@ const useStylesWithTheme = (isDarkTheme: boolean) =>
   );
 
 export default function TopPanel(props: any) {
+  const { t } = useTranslation();
   const { isDarkTheme } = useContext(SettingsContext);
 
   const getClassesCallback = useCallback(() => {
@@ -73,12 +75,14 @@ export default function TopPanel(props: any) {
     setIsDrawerOpen(!isDrawersOpen);
   }, [isDrawersOpen]);
 
+  const donateTooltipContent = t(
+    'If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better'
+  );
+  const deskreenButtonTooltip = t('Click to visit our website');
+
   const renderDonateButton = useCallback(() => {
     return (
-      <Tooltip
-        content="If you like Deskreen, consider donating! Deskreen is free and opensource forever! You can help us to make Deskreen even better!"
-        position={Position.BOTTOM}
-      >
+      <Tooltip content={donateTooltipContent} position={Position.BOTTOM}>
         <Button
           style={{
             marginRight: '10px',
@@ -100,19 +104,19 @@ export default function TopPanel(props: any) {
             </Col>
             <Col xs>
               <div style={{ transform: 'translateY(2px) translateX(-5px)' }}>
-                <Text>Donate!</Text>
+                <Text>{t('Donate')}</Text>
               </div>
             </Col>
           </Row>
         </Button>
       </Tooltip>
     );
-  }, []);
+  }, [donateTooltipContent, t]);
 
   const renderConnectedDevicesListButton = useCallback(() => {
     return (
       <div className={getClassesCallback().topPanelControlButtonMargin}>
-        <Tooltip content="Connected Devices" position={Position.BOTTOM}>
+        <Tooltip content={t('Connected Devices')} position={Position.BOTTOM}>
           <Button
             id="top-panel-connected-devices-list-button"
             intent="primary"
@@ -128,12 +132,12 @@ export default function TopPanel(props: any) {
         </Tooltip>
       </div>
     );
-  }, [getClassesCallback, handleToggleConnectedDevicesListDrawer]);
+  }, [getClassesCallback, handleToggleConnectedDevicesListDrawer, t]);
 
   const renderHelpButton = useCallback(() => {
     return (
       <div className={getClassesCallback().topPanelControlButtonMargin}>
-        <Tooltip content="Tutorial" position={Position.BOTTOM}>
+        <Tooltip content={t('Tutorial')} position={Position.BOTTOM}>
           <Button
             id="top-panel-help-button"
             intent="none"
@@ -151,12 +155,12 @@ export default function TopPanel(props: any) {
         </Tooltip>
       </div>
     );
-  }, [getClassesCallback]);
+  }, [getClassesCallback, t]);
 
   const renderSettingsButton = useCallback(() => {
     return (
       <div className={getClassesCallback().topPanelControlButtonMargin}>
-        <Tooltip content="Settings" position={Position.BOTTOM}>
+        <Tooltip content={t('Settings')} position={Position.BOTTOM}>
           <Button
             id="top-panel-settings-button"
             onClick={handleSettingsOpen}
@@ -171,7 +175,7 @@ export default function TopPanel(props: any) {
         </Tooltip>
       </div>
     );
-  }, [getClassesCallback, handleSettingsOpen]);
+  }, [getClassesCallback, handleSettingsOpen, t]);
 
   const renderLogoWithAppName = useCallback(() => {
     return (
@@ -179,10 +183,7 @@ export default function TopPanel(props: any) {
         id="logo-with-popover-visit-website"
         className={getClassesCallback().logoWithAppName}
       >
-        <Tooltip
-          content="Click to visit our website"
-          position={Position.BOTTOM}
-        >
+        <Tooltip content={deskreenButtonTooltip} position={Position.BOTTOM}>
           <Button
             minimal
             onClick={() => {
@@ -205,7 +206,7 @@ export default function TopPanel(props: any) {
         </Tooltip>
       </div>
     );
-  }, [getClassesCallback]);
+  }, [deskreenButtonTooltip, getClassesCallback]);
 
   return (
     <>

app/components/__snapshots__/AllowConnectionForDeviceAlert.spec.tsx.snap

@@ -33,9 +33,9 @@ exports[`should match exact snapshot 1`] = `
       <Blueprint3.Alert
         canEscapeKeyCancel={false}
         canOutsideClickCancel={false}
-        cancelButtonText="Deny"
+        cancelButtonText=""
         className="class-allow-device-to-connect-alert"
-        confirmButtonText="Allow"
+        confirmButtonText=""
         icon="feed"
         intent="danger"
         isOpen={true}
@@ -181,9 +181,7 @@ exports[`should match exact snapshot 1`] = `
                             <Component>
                               <h4
                                 className="bp3-heading"
-                              >
-                                Device is trying to connect, do you allow?
-                              </h4>
+                              />
                             </Component>
                             <DeviceInfoCallout>
                               <Component
@@ -203,15 +201,25 @@ exports[`should match exact snapshot 1`] = `
                                     }
                                   }
                                 >
-                                  Partner Device Info:
+                                  :
                                 </h4>
                               </Component>
                               <Blueprint3.Callout
                                 id="device-info-callout"
+                                style={
+                                  Object {
+                                    "borderRadius": "8px",
+                                  }
+                                }
                               >
                                 <div
                                   className="bp3-callout"
                                   id="device-info-callout"
+                                  style={
+                                    Object {
+                                      "borderRadius": "8px",
+                                    }
+                                  }
                                 >
                                   <Row
                                     center="xs"
@@ -232,7 +240,8 @@ exports[`should match exact snapshot 1`] = `
                                             <div
                                               className=""
                                             >
-                                              Device Type: 
+                                              :
+                                               
                                               <span />
                                             </div>
                                           </Blueprint3.Text>
@@ -243,8 +252,7 @@ exports[`should match exact snapshot 1`] = `
                                                   ellipsize={false}
                                                   tagName="div"
                                                 >
-                                                  This should match with 'Device IP' displayed on the screen of device
-        that is trying to connect.
+                                                  
                                                 </Blueprint3.Text>
                                                 <span
                                                   style={
@@ -257,8 +265,7 @@ exports[`should match exact snapshot 1`] = `
                                                     ellipsize={false}
                                                     tagName="div"
                                                   >
-                                                    If IPs don't match click 'Deny' or 'Disconnect' button immediately to
-          secure your computer!
+                                                    
                                                   </Blueprint3.Text>
                                                 </span>
                                               </React.Fragment>
@@ -280,8 +287,7 @@ exports[`should match exact snapshot 1`] = `
                                                     ellipsize={false}
                                                     tagName="div"
                                                   >
-                                                    This should match with 'Device IP' displayed on the screen of device
-        that is trying to connect.
+                                                    
                                                   </Blueprint3.Text>
                                                   <span
                                                     style={
@@ -294,8 +300,7 @@ exports[`should match exact snapshot 1`] = `
                                                       ellipsize={false}
                                                       tagName="div"
                                                     >
-                                                      If IPs don't match click 'Deny' or 'Disconnect' button immediately to
-          secure your computer!
+                                                      
                                                     </Blueprint3.Text>
                                                   </span>
                                                 </React.Fragment>
@@ -369,7 +374,8 @@ exports[`should match exact snapshot 1`] = `
                                                               <div
                                                                 className="bp3-text-large"
                                                               >
-                                                                Device IP: 
+                                                                :
+                                                                 
                                                                 <span
                                                                   className="device-ip-span"
                                                                 />
@@ -406,7 +412,8 @@ exports[`should match exact snapshot 1`] = `
                                             <div
                                               className=""
                                             >
-                                              Device Browser: 
+                                              :
+                                               
                                               <span />
                                             </div>
                                           </Blueprint3.Text>
@@ -417,7 +424,8 @@ exports[`should match exact snapshot 1`] = `
                                             <div
                                               className=""
                                             >
-                                              Device OS: 
+                                              :
+                                               
                                               <span />
                                             </div>
                                           </Blueprint3.Text>
@@ -437,7 +445,8 @@ exports[`should match exact snapshot 1`] = `
                                               <div
                                                 className="bp3-text-overflow-ellipsis bp3-text-muted"
                                               >
-                                                Session ID: 
+                                                :
+                                                 
                                                 <span />
                                               </div>
                                             </Blueprint3.Text>
@@ -457,7 +466,7 @@ exports[`should match exact snapshot 1`] = `
                           <Blueprint3.Button
                             intent="danger"
                             onClick={[Function]}
-                            text="Allow"
+                            text=""
                           >
                             <button
                               className="bp3-button bp3-intent-danger"
@@ -470,38 +479,6 @@ exports[`should match exact snapshot 1`] = `
                               <Blueprint3.Icon
                                 key="leftIcon"
                               />
-                              <span
-                                className="bp3-button-text"
-                                key="text"
-                              >
-                                Allow
-                              </span>
-                              <Blueprint3.Icon
-                                key="rightIcon"
-                              />
-                            </button>
-                          </Blueprint3.Button>
-                          <Blueprint3.Button
-                            onClick={[Function]}
-                            text="Deny"
-                          >
-                            <button
-                              className="bp3-button"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              onKeyUp={[Function]}
-                              type="button"
-                            >
-                              <Blueprint3.Icon
-                                key="leftIcon"
-                              />
-                              <span
-                                className="bp3-button-text"
-                                key="text"
-                              >
-                                Deny
-                              </span>
                               <Blueprint3.Icon
                                 key="rightIcon"
                               />

app/components/__snapshots__/ConnectedDevicesListDrawer.spec.tsx.snap

@@ -93,9 +93,7 @@ exports[`should match exact snapshot 1`] = `
                             >
                               <div
                                 class="bp3-text-muted"
-                              >
-                                Connected Devices
-                              </div>
+                              />
                             </div>
                             <button
                               class="bp3-button bp3-disabled bp3-intent-danger"
@@ -122,11 +120,6 @@ exports[`should match exact snapshot 1`] = `
                                   />
                                 </svg>
                               </span>
-                              <span
-                                class="bp3-button-text"
-                              >
-                                Disconnect all devices
-                              </span>
                             </button>
                           </div>
                         </div>
@@ -212,9 +205,7 @@ exports[`should match exact snapshot 1`] = `
                             >
                               <div
                                 class="bp3-text-muted"
-                              >
-                                Connected Devices
-                              </div>
+                              />
                             </div>
                             <button
                               class="bp3-button bp3-disabled bp3-intent-danger"
@@ -241,11 +232,6 @@ exports[`should match exact snapshot 1`] = `
                                   />
                                 </svg>
                               </span>
-                              <span
-                                class="bp3-button-text"
-                              >
-                                Disconnect all devices
-                              </span>
                             </button>
                           </div>
                         </div>
@@ -406,9 +392,7 @@ exports[`should match exact snapshot 1`] = `
                                       >
                                         <div
                                           className="bp3-text-muted"
-                                        >
-                                          Connected Devices
-                                        </div>
+                                        />
                                       </Blueprint3.Text>
                                     </div>
                                     <Blueprint3.Button
@@ -451,12 +435,6 @@ exports[`should match exact snapshot 1`] = `
                                             </svg>
                                           </span>
                                         </Blueprint3.Icon>
-                                        <span
-                                          className="bp3-button-text"
-                                          key="text"
-                                        >
-                                          Disconnect all devices
-                                        </span>
                                         <Blueprint3.Icon
                                           key="rightIcon"
                                         />
@@ -608,8 +586,8 @@ exports[`should match exact snapshot 1`] = `
       <Blueprint3.Alert
         canEscapeKeyCancel={true}
         canOutsideClickCancel={true}
-        cancelButtonText="No, Cancel"
-        confirmButtonText="Yes, Disconnect All"
+        cancelButtonText=""
+        confirmButtonText=""
         icon="warning-sign"
         intent="danger"
         isOpen={false}

app/components/__snapshots__/ShareAppOrScreenControlGroup.spec.tsx.snap

@@ -103,9 +103,7 @@ exports[`should match exact snapshot 1`] = `
                 >
                   <div
                     className="bp3-running-text"
-                  >
-                    Entire Screen
-                  </div>
+                  />
                 </Blueprint3.Text>
               </span>
               <Blueprint3.Icon
@@ -168,9 +166,7 @@ exports[`should match exact snapshot 1`] = `
                 >
                   <div
                     className="bp3-running-text"
-                  >
-                    Application Window
-                  </div>
+                  />
                 </Blueprint3.Text>
               </span>
               <Blueprint3.Icon
@@ -202,12 +198,6 @@ exports[`should match exact snapshot 1`] = `
               <Blueprint3.Icon
                 key="leftIcon"
               />
-              <span
-                className="bp3-button-text"
-                key="text"
-              >
-                OR
-              </span>
               <Blueprint3.Icon
                 key="rightIcon"
               />

app/components/__snapshots__/TopPanel.spec.tsx.snap

@@ -17,7 +17,7 @@ exports[`<TopPanel /> should match exact snapshot 1`] = `
     >
       <Col>
         <Blueprint3.Tooltip
-          content="If you like Deskreen, consider donating! Deskreen is free and opensource forever! You can help us to make Deskreen even better!"
+          content=""
           hoverCloseDelay={0}
           hoverOpenDelay={100}
           minimal={false}
@@ -64,9 +64,7 @@ exports[`<TopPanel /> should match exact snapshot 1`] = `
                   <Blueprint3.Text
                     ellipsize={false}
                     tagName="div"
-                  >
-                    Donate!
-                  </Blueprint3.Text>
+                  />
                 </div>
               </Col>
             </Row>
@@ -79,7 +77,7 @@ exports[`<TopPanel /> should match exact snapshot 1`] = `
           id="logo-with-popover-visit-website"
         >
           <Blueprint3.Tooltip
-            content="Click to visit our website"
+            content=""
             hoverCloseDelay={0}
             hoverOpenDelay={100}
             minimal={false}
@@ -118,7 +116,7 @@ exports[`<TopPanel /> should match exact snapshot 1`] = `
         className="makeStyles-topPanelControlButtonMargin-34"
       >
         <Blueprint3.Tooltip
-          content="Connected Devices"
+          content=""
           hoverCloseDelay={0}
           hoverOpenDelay={100}
           minimal={false}
@@ -143,7 +141,7 @@ exports[`<TopPanel /> should match exact snapshot 1`] = `
         className="makeStyles-topPanelControlButtonMargin-55"
       >
         <Blueprint3.Tooltip
-          content="Tutorial"
+          content=""
           hoverCloseDelay={0}
           hoverOpenDelay={100}
           minimal={false}
@@ -168,7 +166,7 @@ exports[`<TopPanel /> should match exact snapshot 1`] = `
         className="makeStyles-topPanelControlButtonMargin-76"
       >
         <Blueprint3.Tooltip
-          content="Settings"
+          content=""
           hoverCloseDelay={0}
           hoverOpenDelay={100}
           minimal={false}

app/configs/i18next.config.client.ts

@@ -10,6 +10,10 @@ import settings from 'electron-settings';
 import config from './app.lang.config';
 import isProduction from '../utils/isProduction';
 
+import translationEN from '../locales/en/translation.json';
+import translationUA from '../locales/ua/translation.json';
+import translationRU from '../locales/ru/translation.json';
+
 export const getLangFullNameToLangISOKeyMap = (): Map<string, string> => {
   const res = new Map<string, string>();
   // eslint-disable-next-line no-restricted-syntax
@@ -32,6 +36,27 @@ export const getLangISOKeyToLangFullNameMap = (): Map<string, string> => {
   return res;
 };
 
+function shuffleArray(array: any[]) {
+  // eslint-disable-next-line no-plusplus
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+export const getShuffledArrayOfHello = (): string[] => {
+  const res: string[] = [];
+
+  res.push(translationUA.Hello);
+  res.push(translationRU.Hello);
+
+  shuffleArray(res);
+
+  res.unshift(translationEN.Hello);
+
+  return res;
+};
+
 const appPath = remote.getGlobal('appPath');
 
 const i18nextOptions = {

app/containers/DeskreenStepper.tsx

@@ -6,10 +6,21 @@ import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import { Row, Col, Grid } from 'react-flexbox-grid';
-import { Dialog, H3, H4, H5, Icon, Spinner, Text } from '@blueprintjs/core';
-
+import settings from 'electron-settings';
+import {
+  Button,
+  Dialog,
+  H1,
+  H3,
+  H4,
+  H5,
+  Icon,
+  Spinner,
+  Text,
+} from '@blueprintjs/core';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import { useToasts } from 'react-toast-notifications';
-
 import SuccessStep from '../components/StepsOfStepper/SuccessStep';
 import IntermediateStep from '../components/StepsOfStepper/IntermediateStep';
 import AllowConnectionForDeviceAlert from '../components/AllowConnectionForDeviceAlert';
@@ -23,6 +34,9 @@ import SharingSessionService from '../features/SharingSessionService';
 import ConnectedDevicesService from '../features/ConnectedDevicesService';
 import SharingSessionStatusEnum from '../features/SharingSessionService/SharingSessionStatusEnum';
 import Logger from '../utils/LoggerWithFilePrefix';
+import LanguageSelector from '../components/LanguageSelector';
+import { getShuffledArrayOfHello } from '../configs/i18next.config.client';
+import ToggleThemeBtnGroup from '../components/ToggleThemeBtnGroup';
 
 const log = new Logger(__filename);
 
@@ -33,6 +47,8 @@ const connectedDevicesService = remote.getGlobal(
   'connectedDevicesService'
 ) as ConnectedDevicesService;
 
+const Fade = require('react-reveal/Fade');
+
 const useStyles = makeStyles(() =>
   createStyles({
     stepContent: {
@@ -51,21 +67,28 @@ const useStyles = makeStyles(() =>
   })
 );
 
-function getSteps() {
-  return ['Connect', 'Select', 'Confirm'];
+function getSteps(t: TFunction) {
+  return [t('Connect'), t('Select'), t('Confirm')];
 }
 
 // eslint-disable-next-line react/display-name
 const DeskreenStepper = React.forwardRef((_props, ref) => {
+  const { t } = useTranslation();
+
   const classes = useStyles();
 
-  const { isDarkTheme, currentLanguage } = useContext(SettingsContext);
+  const { isDarkTheme } = useContext(SettingsContext);
 
   const { addToast } = useToasts();
 
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isUserAllowedConnection, setIsUserAllowedConnection] = useState(false);
   const [isNoWiFiError, setisNoWiFiError] = useState(false);
+  const [isSelectLanguageDialogOpen, setIsSelectLanguageDialogOpen] = useState(
+    false
+  );
+  const [isDisplayHelloWord, setIsDisplayHelloWord] = useState(true);
+  const [helloWord, setHelloWord] = useState('Hello');
 
   const [
     pendingConnectionDevice,
@@ -109,9 +132,29 @@ const DeskreenStepper = React.forwardRef((_props, ref) => {
   }, []);
 
   useEffect(() => {
-    sharingSessionService.setAppLanguage(currentLanguage);
-    sharingSessionService.setAppTheme(isDarkTheme);
-  }, [currentLanguage, isDarkTheme]);
+    const isFirstTimeStart = !settings.hasSync('isNotFirstTimeAppStart');
+    setIsSelectLanguageDialogOpen(isFirstTimeStart);
+
+    if (!isFirstTimeStart) return () => {};
+
+    const helloWords = getShuffledArrayOfHello();
+
+    let pos = 0;
+    const helloInterval = setInterval(() => {
+      setIsDisplayHelloWord(false);
+      if (pos + 1 === helloWords.length) {
+        pos = 0;
+      } else {
+        pos += 1;
+      }
+      setHelloWord(helloWords[pos]);
+      setIsDisplayHelloWord(true);
+    }, 4000);
+
+    return () => {
+      clearInterval(helloInterval);
+    };
+  }, []);
 
   const [activeStep, setActiveStep] = useState(0);
   const [isEntireScreenSelected, setIsEntireScreenSelected] = useState(false);
@@ -119,7 +162,7 @@ const DeskreenStepper = React.forwardRef((_props, ref) => {
     isApplicationWindowSelected,
     setIsApplicationWindowSelected,
   ] = useState(false);
-  const steps = getSteps();
+  const steps = getSteps(t);
 
   const handleNext = useCallback(() => {
     if (activeStep === steps.length - 1) {
@@ -238,7 +281,9 @@ const DeskreenStepper = React.forwardRef((_props, ref) => {
 
     addToast(
       <Text>
-        Device is successfully disconnected by you. You can connect new device
+        {t(
+          'Device is successfully disconnected by you You can connect a new device'
+        )}
       </Text>,
       {
         appearance: 'info',
@@ -247,7 +292,7 @@ const DeskreenStepper = React.forwardRef((_props, ref) => {
         isdarktheme: `${isDarkTheme}`,
       }
     );
-  }, [addToast, handleResetWithSharingSessionRestart, isDarkTheme]);
+  }, [addToast, handleResetWithSharingSessionRestart, isDarkTheme, t]);
 
   const renderIntermediateOrSuccessStepContent = useCallback(() => {
     return activeStep === steps.length ? (
@@ -365,6 +410,54 @@ const DeskreenStepper = React.forwardRef((_props, ref) => {
           </div>
         </Grid>
       </Dialog>
+      <Dialog isOpen={isSelectLanguageDialogOpen} autoFocus usePortal>
+        <Grid>
+          <div style={{ padding: '10px' }}>
+            <Row center="xs" style={{ marginTop: '10px' }}>
+              <Fade collapse opposite when={isDisplayHelloWord} duration={700}>
+                <H1>{helloWord}</H1>
+              </Fade>
+            </Row>
+            <Row>
+              <Col xs>
+                <Row center="xs" style={{ marginTop: '20px' }}>
+                  <Icon icon="translate" iconSize={50} color="#8A9BA8" />
+                </Row>
+                <Row center="xs" style={{ marginTop: '20px' }}>
+                  <H5>{t('Language')}</H5>
+                </Row>
+                <Row center="xs" style={{ marginTop: '10px' }}>
+                  <LanguageSelector />
+                </Row>
+              </Col>
+              <Col xs>
+                <Row center="xs" style={{ marginTop: '20px' }}>
+                  <Icon icon="style" iconSize={50} color="#8A9BA8" />
+                </Row>
+                <Row center="xs" style={{ marginTop: '20px' }}>
+                  <H5>{t('Color Theme')}</H5>
+                </Row>
+                <Row center="xs" style={{ marginTop: '10px' }}>
+                  <ToggleThemeBtnGroup />
+                </Row>
+              </Col>
+            </Row>
+            <Row center="xs" style={{ marginTop: '20px' }}>
+              <Button
+                minimal
+                rightIcon="chevron-right"
+                onClick={() => {
+                  setIsSelectLanguageDialogOpen(false);
+                  settings.setSync('isNotFirstTimeAppStart', true);
+                }}
+                style={{ borderRadius: '50px' }}
+              >
+                {t('Continue')}
+              </Button>
+            </Row>
+          </div>
+        </Grid>
+      </Dialog>
     </>
   );
 });

app/features/PeerConnection/createDesktopCapturerStream.spec.ts

@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -38,8 +36,6 @@ describe('createDesktopCapturerStream callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,

app/features/PeerConnection/handleCreatePeer.spec.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -58,8 +56,6 @@ describe('handleCreatePeer callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,

app/features/PeerConnection/handlePeerOnData.spec.ts

@@ -3,8 +3,6 @@ import handlePeerOnData from './handlePeerOnData';
 import getDesktopSourceStreamBySourceID from './getDesktopSourceStreamBySourceID';
 
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -50,8 +48,6 @@ describe('handlePeerOnData callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,

app/features/PeerConnection/handleRecieveEncryptedMessage.spec.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import uuid from 'uuid';
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -17,6 +15,8 @@ import handleRecieveEncryptedMessage, {
   handleDeviceIPMessage,
 } from './handleRecieveEncryptedMessage';
 import DesktopCapturerSourcesService from '../DesktopCapturerSourcesService';
+import getAppTheme from '../../utils/getAppTheme';
+import getAppLanguage from '../../utils/getAppLanguage';
 
 jest.useFakeTimers();
 
@@ -51,8 +51,6 @@ describe('handleRecieveEncryptedMessage.ts', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,
@@ -123,7 +121,7 @@ describe('handleRecieveEncryptedMessage.ts', () => {
         peerConnection.sendEncryptedMessage = jest.fn();
         const TEST_GET_APP_THEME_PAYLOAD = {
           type: 'APP_THEME',
-          payload: { value: peerConnection.appColorTheme },
+          payload: { value: getAppTheme() },
         };
         // @ts-ignore
         processMessage.mockImplementation(() => {
@@ -149,7 +147,7 @@ describe('handleRecieveEncryptedMessage.ts', () => {
         peerConnection.sendEncryptedMessage = jest.fn();
         const TEST_GET_APP_LANGUAGE_PAYLOAD = {
           type: 'APP_LANGUAGE',
-          payload: { value: peerConnection.appLanguage },
+          payload: { value: getAppLanguage() },
         };
         // @ts-ignore
         processMessage.mockImplementation(() => {

app/features/PeerConnection/handleRecieveEncryptedMessage.ts

@@ -1,3 +1,4 @@
+import settings from 'electron-settings';
 import uuid from 'uuid';
 import { process as processMessage } from '../../utils/message';
 
@@ -42,13 +43,21 @@ export default async function handleRecieveEncryptedMessage(
   if (message.type === 'GET_APP_THEME') {
     peerConnection.sendEncryptedMessage({
       type: 'APP_THEME',
-      payload: { value: peerConnection.appColorTheme },
+      payload: {
+        value: settings.hasSync('appIsDarkTheme')
+          ? settings.getSync('appIsDarkTheme') === 'true'
+          : false,
+      },
     });
   }
   if (message.type === 'GET_APP_LANGUAGE') {
     peerConnection.sendEncryptedMessage({
       type: 'APP_LANGUAGE',
-      payload: { value: peerConnection.appLanguage },
+      payload: {
+        value: settings.hasSync('appLanguage')
+          ? settings.getSync('appLanguage')
+          : 'en',
+      },
     });
   }
 }

app/features/PeerConnection/handleSelfDestroy.spec.ts

@@ -1,7 +1,5 @@
 import handleSelfDestroy from './handleSelfDestroy';
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -38,8 +36,6 @@ describe('handleSelfDestroy callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       ({
         unmarkRoomIDAsTaken: jest.fn(),
       } as unknown) as RoomIDService,

app/features/PeerConnection/handleSetDisplaySizeFromLocalStream.spec.ts

@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -30,8 +28,6 @@ describe('setDisplaySizeFromLocalStream callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,

app/features/PeerConnection/handleSocket.spec.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -51,8 +49,6 @@ describe('handleSocket callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,

app/features/PeerConnection/handleSocketUserEnter.spec.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -55,8 +53,6 @@ describe('handleSocketUserEnter callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,

app/features/PeerConnection/handleSocketUserExit.spec.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -27,8 +25,6 @@ describe('handleSocketUserExit callback', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME,
-      TEST_APP_LANGUAGE,
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,

app/features/PeerConnection/index.spec.ts

@@ -6,8 +6,6 @@ import ConnectedDevicesService from '../ConnectedDevicesService';
 import SharingSessionService from '../SharingSessionService';
 import DesktopCapturerSourcesService from '../DesktopCapturerSourcesService';
 import {
-  TEST_APP_LANGUAGE,
-  TEST_APP_THEME,
   TEST_ROOM_ID,
   TEST_SHARING_SESSION_ID,
   TEST_USER,
@@ -17,6 +15,8 @@ import handleSelfDestroy from './handleSelfDestroy';
 import handleRecieveEncryptedMessage from './handleRecieveEncryptedMessage';
 import handleCreatePeer from './handleCreatePeer';
 import { prepare as prepareMessage } from '../../utils/message';
+import getAppLanguage from '../../utils/getAppLanguage';
+import getAppTheme from '../../utils/getAppTheme';
 
 jest.useFakeTimers();
 
@@ -60,8 +60,6 @@ describe('PeerConnection index.ts tests', () => {
       TEST_ROOM_ID,
       TEST_SHARING_SESSION_ID,
       TEST_USER,
-      TEST_APP_THEME, // TODO getAppTheme
-      TEST_APP_LANGUAGE, // TODO getLanguage
       {} as RoomIDService,
       {} as ConnectedDevicesService,
       {} as SharingSessionService,
@@ -82,32 +80,6 @@ describe('PeerConnection index.ts tests', () => {
       expect(peerConnection.sharingSessionService).toBeDefined();
     });
 
-    describe('when setAppLanguage was called', () => {
-      it('should set peerConnection app language and call notifyClientWithNewLanguage', () => {
-        const TEST_APP_LANG = 'ua';
-        const mockNotify = jest.fn();
-        peerConnection.notifyClientWithNewLanguage = mockNotify;
-
-        peerConnection.setAppLanguage(TEST_APP_LANG);
-
-        expect(mockNotify).toBeCalled();
-        expect(peerConnection.appLanguage).toBe(TEST_APP_LANG);
-      });
-    });
-
-    describe('when setAppTheme was called', () => {
-      it('should set peerConnection theme and call notifyClientWithNewColorTheme', () => {
-        const APP_THEME = true;
-        const mockNotify = jest.fn();
-        peerConnection.notifyClientWithNewColorTheme = mockNotify;
-
-        peerConnection.setAppTheme(APP_THEME);
-
-        expect(mockNotify).toBeCalled();
-        expect(peerConnection.appColorTheme).toBe(APP_THEME);
-      });
-    });
-
     describe('when notifyClientWithNewLanguage was called', () => {
       it('should call sendEncryptedMessage with proper payload', () => {
         peerConnection.sendEncryptedMessage = jest.fn();
@@ -116,7 +88,7 @@ describe('PeerConnection index.ts tests', () => {
 
         expect(peerConnection.sendEncryptedMessage).toBeCalledWith({
           type: 'APP_LANGUAGE',
-          payload: { value: peerConnection.appLanguage },
+          payload: { value: getAppLanguage() },
         });
       });
     });
@@ -129,7 +101,7 @@ describe('PeerConnection index.ts tests', () => {
 
         expect(peerConnection.sendEncryptedMessage).toBeCalledWith({
           type: 'APP_THEME',
-          payload: { value: peerConnection.appColorTheme },
+          payload: { value: getAppTheme() },
         });
       });
     });

app/features/PeerConnection/index.ts

@@ -17,6 +17,8 @@ import NullUser from './NullUser';
 import NullSimplePeer from './NullSimplePeer';
 import setDisplaySizeFromLocalStream from './handleSetDisplaySizeFromLocalStream';
 import DesktopCapturerSourceType from '../DesktopCapturerSourcesService/DesktopCapturerSourceType';
+import getAppLanguage from '../../utils/getAppLanguage';
+import getAppTheme from '../../utils/getAppTheme';
 
 type DisplaySize = { width: number; height: number };
 
@@ -41,15 +43,11 @@ export default class PeerConnection {
   onDeviceConnectedCallback: (device: Device) => void;
   displayID: string;
   sourceDisplaySize: DisplaySize | undefined;
-  appLanguage: string;
-  appColorTheme: boolean;
 
   constructor(
     roomID: string,
     sharingSessionID: string,
     user: LocalPeerUser,
-    appColorTheme: boolean,
-    appLanguage: string,
     roomIDService: RoomIDService,
     connectedDevicesService: ConnectedDevicesService,
     sharingSessionsService: SharingSessionService,
@@ -71,8 +69,6 @@ export default class PeerConnection {
     this.localStream = null;
     this.displayID = '';
     this.sourceDisplaySize = undefined;
-    this.appLanguage = appLanguage;
-    this.appColorTheme = appColorTheme;
     this.desktopCapturerSourcesService = desktopCapturerSourcesService;
     this.onDeviceConnectedCallback = () => {};
 
@@ -83,27 +79,19 @@ export default class PeerConnection {
     });
   }
 
-  setAppLanguage(lang: string) {
-    this.appLanguage = lang;
-    this.notifyClientWithNewLanguage();
-  }
-
-  setAppTheme(theme: boolean) {
-    this.appColorTheme = theme;
-    this.notifyClientWithNewColorTheme();
-  }
-
   notifyClientWithNewLanguage() {
     this.sendEncryptedMessage({
       type: 'APP_LANGUAGE',
-      payload: { value: this.appLanguage },
+      payload: {
+        value: getAppLanguage(),
+      },
     });
   }
 
   notifyClientWithNewColorTheme() {
     this.sendEncryptedMessage({
       type: 'APP_THEME',
-      payload: { value: this.appColorTheme },
+      payload: { value: getAppTheme() },
     });
   }
 

app/features/SharingSessionService/SharingSession.spec.ts

@@ -6,8 +6,6 @@ import SharingType from './SharingTypeEnum';
 
 jest.useFakeTimers();
 
-const testAppLang = 'ua';
-const testAppTheme = true;
 const testUser = {
   username: '',
   privateKey: '',
@@ -19,10 +17,7 @@ describe('SharingSession unit tests', () => {
 
   beforeEach(() => {
     process.env.RUN_MODE = 'test-jest';
-    sharingSession = new SharingSession(
-      '1234',
-      testUser,
-      {
+    sharingSession = new SharingSession('1234', testUser, {
       // @ts-ignore: fine here
       createPeerConnectionHelperRenderer: () => {
         return {
@@ -33,10 +28,7 @@ describe('SharingSession unit tests', () => {
           close: jest.fn(),
         };
       },
-      },
-      testAppLang,
-      testAppTheme
-    );
+    });
   });
 
   afterEach(() => {
@@ -99,8 +91,6 @@ describe('SharingSession unit tests', () => {
           roomID: sharingSession.roomID,
           sharingSessionID: sharingSession.id,
           user: testUser,
-          appTheme: testAppTheme,
-          appLanguage: testAppLang,
         });
       });
     });
@@ -258,25 +248,21 @@ describe('SharingSession unit tests', () => {
 
   describe('when appLanguageChanged() is called', () => {
     it('should call .webContents.send with proper event name', () => {
-      const testLang = 'ua';
-
-      sharingSession.appLanguageChanged(testLang);
+      sharingSession.appLanguageChanged();
 
       expect(
         sharingSession.peerConnectionHelperRenderer?.webContents.send
-      ).toBeCalledWith('app-language-changed', testLang);
+      ).toBeCalledWith('app-language-changed');
     });
   });
 
   describe('when appThemeChanged() is called', () => {
     it('should call .webContents.send with proper event name', () => {
-      const testTheme = true;
-
-      sharingSession.appThemeChanged(testTheme);
+      sharingSession.appThemeChanged();
 
       expect(
         sharingSession.peerConnectionHelperRenderer?.webContents.send
-      ).toBeCalledWith('app-color-theme-changed', testTheme);
+      ).toBeCalledWith('app-color-theme-changed');
     });
   });
 });

app/features/SharingSessionService/SharingSession.ts

@@ -5,8 +5,6 @@ import SharingSessionStatusEnum from './SharingSessionStatusEnum';
 import SharingTypeEnum from './SharingTypeEnum';
 import PeerConnectionHelperRendererService from '../PeerConnectionHelperRendererService';
 
-// type OnDeviceConnectedCallbackType = undefined | (device: Device) => void;
-
 export default class SharingSession {
   id: string;
   deviceID: string;
@@ -24,9 +22,7 @@ export default class SharingSession {
   constructor(
     _roomID: string,
     user: LocalPeerUser,
-    peerConnectionHelperRendererService: PeerConnectionHelperRendererService,
-    appLanguage: string,
-    isDarkTheme: boolean
+    peerConnectionHelperRendererService: PeerConnectionHelperRendererService
   ) {
     this.id = uuid.v4();
     this.deviceID = '';
@@ -51,8 +47,6 @@ export default class SharingSession {
           roomID: this.roomID,
           sharingSessionID: this.id,
           user,
-          appTheme: isDarkTheme,
-          appLanguage,
         }
       );
     });
@@ -111,17 +105,13 @@ export default class SharingSession {
     );
   }
 
-  appLanguageChanged(newLang: string) {
-    this.peerConnectionHelperRenderer?.webContents.send(
-      'app-language-changed',
-      newLang
-    );
+  appLanguageChanged() {
+    this.peerConnectionHelperRenderer?.webContents.send('app-language-changed');
   }
 
-  appThemeChanged(isDarkTheme: boolean) {
+  appThemeChanged() {
     this.peerConnectionHelperRenderer?.webContents.send(
-      'app-color-theme-changed',
-      isDarkTheme
+      'app-color-theme-changed'
     );
   }
 

app/features/SharingSessionService/index.spec.ts

@@ -104,26 +104,6 @@ describe('SharingSessionService unit tests', () => {
     });
   });
 
-  describe('when setAppLanguage is called', () => {
-    it('should set app language accordingly', () => {
-      const testLang = 'be';
-
-      sharingSessionService.setAppLanguage(testLang);
-
-      expect(sharingSessionService.appLanguage).toBe(testLang);
-    });
-  });
-
-  describe('when setAppTheme is called', () => {
-    it('should set app language accordingly', () => {
-      const testTheme = true;
-
-      sharingSessionService.setAppTheme(testTheme);
-
-      expect(sharingSessionService.isDarkTheme).toBe(testTheme);
-    });
-  });
-
   describe('when createWaitingForConnectionSharingSession is called', () => {
     it('should call waitWhileUserIsNotCreated', async () => {
       sharingSessionService.waitWhileUserIsNotCreated = jest

app/features/SharingSessionService/index.ts

@@ -17,8 +17,6 @@ export default class SharingSessionService {
   connectedDevicesService: ConnectedDevicesService;
   rendererWebrtcHelpersService: RendererWebrtcHelpersService;
   isCreatingNewSharingSession: boolean;
-  appLanguage = 'en';
-  isDarkTheme = false;
 
   constructor(
     _roomIDService: RoomIDService,
@@ -40,14 +38,6 @@ export default class SharingSessionService {
     }, 1000 * 60 * 60); // every hour
   }
 
-  setAppLanguage(newLang: string): void {
-    this.appLanguage = newLang;
-  }
-
-  setAppTheme(isDarkTheme: boolean): void {
-    this.isDarkTheme = isDarkTheme;
-  }
-
   createUser(): Promise<undefined> {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve) => {
@@ -90,9 +80,7 @@ export default class SharingSessionService {
     const sharingSession = new SharingSession(
       roomID,
       this.user as LocalPeerUser,
-      this.rendererWebrtcHelpersService,
-      this.appLanguage,
-      this.isDarkTheme
+      this.rendererWebrtcHelpersService
     );
     this.sharingSessions.set(sharingSession.id, sharingSession);
     return sharingSession;

app/locales/en/translation.json

@@ -1,8 +1,142 @@
 {
-  "Language": "Language 🇬🇧 / 🇺🇸",
-  "Signaling server is running on port": "Signaling server is running on port ⚓",
+  "Hello": "Hello",
+  "Continue": "Continue",
+  "Language": "Language",
   "ru": "Русский",
   "en": "English",
   "ua": "Українська",
-  "Scan the QR code": "Scan the QR code"
+  "Donate": "Donate",
+  "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "If you like Deskreen, consider contributing financially. Deskreen is open-source. Your donations keep us motivated to make Deskreen even better.",
+  "Click to visit our website": "Click to visit our website",
+  "Connected Devices": "Connected Devices",
+  "Tutorial": "Tutorial",
+  "Settings": "Settings",
+  "Connect": "Connect",
+  "Select": "Select",
+  "Confirm": "Confirm",
+  "Scan the QR code": "Scan the QR code",
+  "Make sure your computer and screen viewing device are connected to same Wi-Fi": "Make sure your computer and screen viewing device are connected to same Wi-Fi",
+  "Or type the following address in browser address bar on any device": "Or type the following address in browser address bar on any device",
+  "Someone is trying to connect, do you allow?": "Someone is trying to connect, do you allow?",
+  "Click to make bigger": "Click to make bigger",
+  "Click to copy": "Click to copy",
+  "Partner Device Info": "Partner Device Info",
+  "Device Type": "Device Type",
+  "Device IP": "Device IP",
+  "Device Browser": "Device Browser",
+  "Device OS": "Device OS",
+  "Session ID": "Session ID",
+  "Allow": "Allow",
+  "Deny": "Deny",
+  "Device is successfully disconnected by you You can connect a new device": "Device is successfully disconnected by you. You can connect a new device.",
+  "Deskreen Update is Available!": "Deskreen Update is Available!",
+  "Your current version is": "Your current version is",
+  "Click to download new updated version": "Click to download new updated version",
+  "Connected": "Connected",
+  "Click to see more": "Click to see more",
+  "This should match with Device IP displayed on the screen of device that is trying to connect": "This should match with Device IP displayed on the screen of device that is trying to connect.",
+  "If IP addresses dont match click Disconnect button": "If IP addresses don't match click Disconnect button to prevent unauthorized access to your computer screen.",
+  "Disconnect": "Disconnect",
+  "Choose Entire Screen or App window you want to share": "Choose Entire Screen or App window you want to share",
+  "OR": "OR",
+  "Entire Screen": "Entire Screen",
+  "Application Window": "Application Window",
+  "Check if all is OK and click Confirm": "Check if all is OK and click Confirm",
+  "Confirm Button Text": "Confirm",
+  "No, I need to choose other": "No, I need to share other thing",
+  "Done!": "Done!",
+  "Now you can see your screen on other device": "Now you can see your screen on other device.",
+  "You can manage connected devices by clicking Connected Devices button in top panel": "You can manage connected devices by clicking Connected Devices button in top panel.",
+  "Connect New Device": "Connect New Device",
+  "Select Entire Screen to Share": "Select Entire Screen to Share",
+  "Select App Window to Share": "Select App Window to Share",
+  "Refresh": "Refresh",
+  "Disconnect all devices": "Disconnect all devices",
+  "Are you sure you want to disconnect all connected viewing devices?": "Are you sure you want to disconnect all connected viewing devices?",
+  "This step can not be undone": "This step can not be reverted",
+  "You will have to connect all devices manually again": "You will have to connect all devices manually again",
+  "No, Cancel": "No, Cancel",
+  "Yes, Disconnect All": "Yes, Disconnect All",
+  "A new version of Deskreen is available! Click to download new version": "A new version of Deskreen is available! Click to download new version",
+  "Security": "Security",
+  "General": "General",
+  "About": "About",
+  "Website": "Website",
+  "About Deskreen": "About Deskreen",
+  "Security Settings": "Security Settings",
+  "Color Theme": "Color Theme",
+  "Automatic Updates": "Automatic Updates",
+  "General Settings": "General Settings",
+  "Disabled": "Disabled",
+  "Version": "Version",
+  "Copyright": "Copyright",
+  "Edit": "Edit",
+  "Hide Deskreen": "Hide Deskreen",
+  "Hide Others": "Hide Others",
+  "Show All": "Show All",
+  "Quit": "Quit",
+  "Undo": "Undo",
+  "Redo": "Redo",
+  "Cut": "Cut",
+  "Copy": "Copy",
+  "Paste": "Paste",
+  "Select All": "Select All",
+  "View": "View",
+  "Reload": "Reload",
+  "Toggle Full Screen": "Toggle Full Screen",
+  "Toggle Developer Tools": "Toggle Developer Tools",
+  "Window": "Window",
+  "Minimize": "Minimize",
+  "Close": "Close",
+  "Bring All to Front": "Bring All to Front",
+  "Help": "Help",
+  "Learn More": "Learn More",
+  "Documentation": "Documentation",
+  "Community Discussions": "Community Discussions",
+  "Search Issues": "Search Issues",
+  "TRANSLATIONS BELOW ARE NOT ADDED TO UI YET, BUT YOUR TRANSLATIONS ARE WELCOME! THE FEATURES WILL BE ADDED SOON SO YOUR TRANSLATIONS ARE NEEDED": "",
+  "Available Trusted Devices": "Available Trusted Devices",
+  "Make this device trusted": "Make this device trusted",
+  "Click to select other screen source to share": "Click to select other screen source to share",
+  "Click to edit Device Alias": "Click to edit Device Alias",
+  "Trusted Device ID": "Trusted Device ID",
+  "Trusted": "Trusted",
+  "Make Trusted": "Make Trusted",
+  "Forget This Device": "Forget This Device",
+  "Device Alias": "Device Alias",
+  "Auto share last Entire Screen source when device is available": "Auto share last Entire Screen source when device is available",
+  "All devices are successfully disconnected": "All devices are successfully disconnected",
+  "Device was disconnected": "Device was disconnected",
+  "Networking": "Networking",
+  "Deskreen Application Port": "Deskreen Application Port",
+  "Port is already used by other App": "Port is already used by other App",
+  "Click to change Deskreen Application Port": "Click to change Deskreen Application Port",
+  "Type a number from 3000 to 64000 to use as a Deskreen Application Port": "Type a number from 3000 to 64000 to use as a Deskreen Application Port",
+  "Type another number in range from 3000 to 64000": "Type another number in range from 3000 to 64000",
+  "Select Network Interface": "Select Network Interface",
+  "I know IP of my computer and I want to type it manually": "I know IP of my computer and I want to type it manually",
+  "Type Your Computer IP": "Type Your Computer IP",
+  "Click to type IP manually": "Click to type IP manually",
+  "Banned IPs": "Banned IPs",
+  "Ban New IP": "Ban New IP",
+  "Type the IP you want to ban": "Type the IP you want to ban",
+  "Unban this IP": "Unban this IP",
+  "Unban all IPs": "Unban all IPs",
+  "Reset Deskreen settings to default": "Reset Deskreen settings to default",
+  "Ask user to enter password when connecting": "Ask user to enter password when connecting",
+  "Change Password": "Change Password",
+  "Type a New Password": "Type a New Password",
+  "Cancel": "Cancel",
+  "Device Status": "Device Status",
+  "Sharing Screen": "Sharing Screen",
+  "Available, no screen sharing": "Available, no screen sharing",
+  "Not Available": "Not Available",
+  "Autostart Deskreen App on login": "Autostart Deskreen App on login",
+  "Open Deskreen App window on login": "Open Deskreen App window on login",
+  "Use system tray": "Use system tray",
+  "Deskreen System Tray": "Deskreen System Tray",
+  "Open App Window": "Open App Window",
+  "Minimize To Tray": "Minimize To Tray",
+  "Show Connected Devices": "Show Connected Devices",
+  "Quit Deskreen": "Quit Deskreen"
 }

app/locales/en/translation.missing.json

@@ -0,0 +1,9 @@
+{
+  "Confirm": "Confirm",
+  "No, Cancel": "No, Cancel",
+  "Yes, Disconnect All": "Yes, Disconnect All",
+  "Disconnect all devices": "Disconnect all devices",
+  "Are you sure you want to disconnect all connected viewing devices?": "Are you sure you want to disconnect all connected viewing devices?",
+  "This step can not be reverted": "This step can not be reverted",
+  "You will have to connect all devices manually again": "You will have to connect all devices manually again"
+}

app/locales/ru/translation.json

@@ -1,8 +1,142 @@
 {
-  "Language": "Язык 🇷🇺",
-  "Signaling server is running on port": "Сигнальный сервер работает на порте ⚓",
+  "Hello": "Привет",
+  "Continue": "Продолжить",
+  "Language": "Язык",
   "ru": "Русский",
   "en": "English",
   "ua": "Українська",
-  "Scan the QR code": "Отсканируйте QR код"
+  "Donate": "Пожертвовать",
+  "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Если вам нравится Deskreen, подумайте о том, чтобы внести финансовый вклад. Deskreen - это оупенсорсный проэкт. Ваши пожертвования позволяют нам делать Deskreen еще лучше.",
+  "Click to visit our website": "Нажмите, чтобы посетить наш сайт",
+  "Connected Devices": "Подключенные устройства",
+  "Tutorial": "Инструкция по использованию",
+  "Settings": "Настройки",
+  "Connect": "Подключите",
+  "Select": "Выберите",
+  "Confirm": "Подтвердите",
+  "Scan the QR code": "Отсканируйте QR код",
+  "Make sure your computer and screen viewing device are connected to same Wi-Fi": "Убедитесь, что ваш компьютер и устройство просмотра экрана подключены к одному и тому же Wi-Fi",
+  "Or type the following address in browser address bar on any device": "Или введите следующий адрес вручную в адресной строке браузера на любом устройстве",
+  "Someone is trying to connect, do you allow?": "Кто-то пытается подключиться, вы разрешаете?",
+  "Click to make bigger": "Нажмите, чтобы увеличить",
+  "Click to copy": "Нажмите, чтобы скопировать",
+  "Partner Device Info": "Информация об устройстве партнера",
+  "Device Type": "Тип устройства",
+  "Device IP": "IP-aдрес устройства",
+  "Device Browser": "Веб-браузер устройства",
+  "Device OS": "ОС устройства",
+  "Session ID": "ID сессии",
+  "Allow": "Разрешить",
+  "Deny": "Отказать",
+  "Device is successfully disconnected by you You can connect a new device": "Устройство успешно отключено вами. Вы можете подключить новое устройство.",
+  "Deskreen Update is Available!": "Вышло обновление Deskreen!",
+  "Your current version is": "Ваша текущая версия",
+  "Click to download new updated version": "Нажмите, чтобы загрузить новую обновленную версию",
+  "Connected": "Подключено",
+  "Click to see more": "Нажмите, чтобы увидеть больше",
+  "This should match with Device IP displayed on the screen of device that is trying to connect": "Это должно совпадать с IP-адресом устройства, отображаемым на экране устройства, которое пытается подключиться.",
+  "If IP addresses dont match click Disconnect button": "Если IP-адреса не совпадают, нажмите кнопку «Отключить», чтобы предотвратить несанкционированный доступ к экрану вашего компьютера.",
+  "Disconnect": "Отсоединить",
+  "Choose Entire Screen or App window you want to share": "Выберите Весь экран или Окно приложения, которым хотите поделиться",
+  "OR": "ИЛИ",
+  "Entire Screen": "Весь экран",
+  "Application Window": "Окно приложения",
+  "Check if all is OK and click Confirm": "Убедитесь, что все в порядке, и нажмите Подтвердить",
+  "Confirm Button Text": "Подтвердить",
+  "No, I need to choose other": "Нет, мне нужно выбрать другое",
+  "Done!": "Сделано!",
+  "Now you can see your screen on other device": "Теперь вы можете видеть свой экран на другом устройстве.",
+  "You can manage connected devices by clicking Connected Devices button in top panel": "Вы можете управлять подключенными устройствами, нажав кнопку «Подключенные устройства» на верхней панели.",
+  "Connect New Device": "Подключить новое устройство",
+  "Select Entire Screen to Share": "Выберите экран которым хотите поделиться",
+  "Select App Window to Share": "Выберите окно приложения которым хотите поделиться",
+  "Refresh": "Обновить",
+  "Disconnect all devices": "Отсоединить все устройства",
+  "Are you sure you want to disconnect all connected viewing devices?": "Вы уверены, что хотите отключить все подключенные устройства просмотра?",
+  "This step can not be undone": "Этот шаг невозможно будет отменить",
+  "You will have to connect all devices manually again": "После этого вам придется снова подключить каждое устройство",
+  "No, Cancel": "Нет, отменить",
+  "Yes, Disconnect All": "Да, отсоединить все устройства",
+  "A new version of Deskreen is available! Click to download new version": "Доступна новая версия Deskreen! Нажмите, чтобы загрузить новую версию",
+  "Security": "Безопасность",
+  "General": "Общие",
+  "About": "О нас",
+  "Website": "Веб-сайт",
+  "About Deskreen": "Про Deskreen",
+  "Security Settings": "Настройки безопасности",
+  "Color Theme": "Цветовая схема",
+  "Automatic Updates": "Авто-обновления",
+  "General Settings": "Общие настройки",
+  "Disabled": "Отключено",
+  "Version": "Версия",
+  "Copyright": "Авторские права",
+  "Edit": "Править",
+  "Hide Deskreen": "Скрыть Deskreen",
+  "Hide Others": "Скрыть Другие",
+  "Show All": "Показать все",
+  "Quit": "Выйти",
+  "Undo": "Отменить",
+  "Redo": "Повторить",
+  "Cut": "Вырезать",
+  "Copy": "Копировать",
+  "Paste": "Вставить",
+  "Select All": "Выбрать все",
+  "View": "Вид",
+  "Reload": "Перезагрузить",
+  "Toggle Full Screen": "Включить полноэкранный режим",
+  "Toggle Developer Tools": "Включить инструменты разработчика",
+  "Window": "Окно",
+  "Minimize": "Свернуть",
+  "Close": "Закрыть",
+  "Bring All to Front": "Вынести все на передний план",
+  "Help": "Помощь",
+  "Learn More": "Узнать больше",
+  "Documentation": "Документация",
+  "Community Discussions": "Обсуждения в сообществе",
+  "Search Issues": "Поиск проблем",
+  "TRANSLATIONS BELOW ARE NOT ADDED TO UI YET, BUT YOUR TRANSLATIONS ARE WELCOME! THE FEATURES WILL BE ADDED SOON SO YOUR TRANSLATIONS ARE NEEDED": "",
+  "Available Trusted Devices": "Available Trusted Devices",
+  "Make this device trusted": "Make this device trusted",
+  "Click to select other screen source to share": "Click to select other screen source to share",
+  "Click to edit Device Alias": "Click to edit Device Alias",
+  "Trusted Device ID": "Trusted Device ID",
+  "Trusted": "Trusted",
+  "Make Trusted": "Make Trusted",
+  "Forget This Device": "Forget This Device",
+  "Device Alias": "Device Alias",
+  "Auto share last Entire Screen source when device is available": "Auto share last Entire Screen source when device is available",
+  "All devices are successfully disconnected": "All devices are successfully disconnected",
+  "Device was disconnected": "Device was disconnected",
+  "Networking": "Networking",
+  "Deskreen Application Port": "Deskreen Application Port",
+  "Port is already used by other App": "Port is already used by other App",
+  "Click to change Deskreen Application Port": "Click to change Deskreen Application Port",
+  "Type a number from 3000 to 64000 to use as a Deskreen Application Port": "Type a number from 3000 to 64000 to use as a Deskreen Application Port",
+  "Type another number in range from 3000 to 64000": "Type another number in range from 3000 to 64000",
+  "Select Network Interface": "Select Network Interface",
+  "I know IP of my computer and I want to type it manually": "I know IP of my computer and I want to type it manually",
+  "Type Your Computer IP": "Type Your Computer IP",
+  "Click to type IP manually": "Click to type IP manually",
+  "Banned IPs": "Banned IPs",
+  "Ban New IP": "Ban New IP",
+  "Type the IP you want to ban": "Type the IP you want to ban",
+  "Unban this IP": "Unban this IP",
+  "Unban all IPs": "Unban all IPs",
+  "Reset Deskreen settings to default": "Reset Deskreen settings to default",
+  "Ask user to enter password when connecting": "Ask user to enter password when connecting",
+  "Change Password": "Change Password",
+  "Type a New Password": "Type a New Password",
+  "Cancel": "Cancel",
+  "Device Status": "Device Status",
+  "Sharing Screen": "Sharing Screen",
+  "Available, no screen sharing": "Available, no screen sharing",
+  "Not Available": "Not Available",
+  "Autostart Deskreen App on login": "Autostart Deskreen App on login",
+  "Open Deskreen App window on login": "Open Deskreen App window on login",
+  "Use system tray": "Use system tray",
+  "Deskreen System Tray": "Deskreen System Tray",
+  "Open App Window": "Open App Window",
+  "Minimize To Tray": "Minimize To Tray",
+  "Show Connected Devices": "Show Connected Devices",
+  "Quit Deskreen": "Quit Deskreen"
 }

app/locales/ua/translation.json

@@ -1,8 +1,142 @@
 {
-  "Language": "Мова 🇺🇦",
-  "Signaling server is running on port": "Сигнальный сервер працює на порту ⚓",
+  "Hello": "Привіт",
+  "Continue": "Продовжити",
+  "Language": "Мова",
   "ru": "Русский",
   "en": "English",
   "ua": "Українська",
-  "Scan the QR code": "Відскануйте QR код"
+  "Donate": "Пожертвувати",
+  "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Якщо вам подобається Deskreen, подумайте про те, щоб внести фінансовий внесок. Deskreen - це оупенсорсний проект. Ваші пожертвування дозволяють нам робити Deskreen ще краще.",
+  "Click to visit our website": "Натисніть, щоб відвідати наш сайт",
+  "Connected Devices": "Підключені пристрої",
+  "Tutorial": "Інструкція по використанню",
+  "Settings": "Налаштування",
+  "Connect": "Підключіть",
+  "Select": "Виберіть",
+  "Confirm": "Підтвердіть",
+  "Scan the QR code": "Відскануйте QR код",
+  "Make sure your computer and screen viewing device are connected to same Wi-Fi": "Переконайтеся, що ваш комп'ютер і пристрій перегляду екрану підключені до одного й того ж Wi-Fi",
+  "Or type the following address in browser address bar on any device": "Або введіть наступну адресу в адресному рядку браузера на будь-якому пристрої",
+  "Someone is trying to connect, do you allow?": "Хтось намагається підключитися, ви дозволяєте?",
+  "Click to make bigger": "Натисніть, щоб збільшити",
+  "Click to copy": "Натисніть, щоб скопіювати",
+  "Partner Device Info": "Інформація про пристрій партнера",
+  "Device Type": "Тип пристрою",
+  "Device IP": "IP-aдрес пристрою",
+  "Device Browser": "Веб-браузер пристрою",
+  "Device OS": "ОС пристрою",
+  "Session ID": "ID сесії",
+  "Allow": "Дозволити",
+  "Deny": "Відмовити",
+  "Device is successfully disconnected by you You can connect a new device": "Пристрій успішно відключено вами. Ви можете підключити новий пристрій.",
+  "Deskreen Update is Available!": "Вийшло оновлення Deskreen!",
+  "Your current version is": "Ваша поточна версія",
+  "Click to download new updated version": "Натисніть, щоб завантажити нову оновлену версію",
+  "Connected": "З'єднано",
+  "Click to see more": "Натисніть, щоб побачити більше",
+  "This should match with Device IP displayed on the screen of device that is trying to connect": "Це повинно збігатися з IP-адресою пристрою на екрані пристрою, який намагається підключитися.",
+  "If IP addresses dont match click Disconnect button": "Якщо IP-адреси не збігаються, натисніть кнопку «Відключити», щоб запобігти несанкціонованому доступу до екрану вашого комп'ютера.",
+  "Disconnect": "Від'єднати",
+  "Choose Entire Screen or App window you want to share": "Виберіть Весь екран або Вікно додатка, яким хочете поділитися",
+  "OR": "ЧИ",
+  "Entire Screen": "Весь екран",
+  "Application Window": "Вікно додатка",
+  "Check if all is OK and click Confirm": "Переконайтеся, що все гаразд, і натисніть Підтвердити",
+  "Confirm Button Text": "Підтвердити",
+  "No, I need to choose other": "Ні, мені потрібно вибрати інше",
+  "Done!": "Зроблено!",
+  "Now you can see your screen on other device": "Тепер ви можете бачити свій екран на іншому пристрою.",
+  "You can manage connected devices by clicking Connected Devices button in top panel": "Ви можете управляти підключеними пристроями, натиснувши кнопку «Підключені пристрої» на верхній панелі.",
+  "Connect New Device": "Підключити новий пристрій",
+  "Select Entire Screen to Share": "Виберіть екран яким хочете поділитися",
+  "Select App Window to Share": "Виберіть вікно додатка яким хочете поділитися",
+  "Refresh": "Відновити",
+  "Disconnect all devices": "Від'єднати всі пристрої",
+  "Are you sure you want to disconnect all connected viewing devices?": "Ви впевнені, що хочете відключити всі підключені пристрої перегляду?",
+  "This step can not be undone": "Цей крок неможливо буде скасувати",
+  "You will have to connect all devices manually again": "Після цього вам доведеться знову підключити кожен пристрій",
+  "No, Cancel": "Ні, скасувати",
+  "Yes, Disconnect All": "Так, від'єднати всі пристрої",
+  "A new version of Deskreen is available! Click to download new version": "Доступна нова версія Deskreen! Натисніть, щоб завантажити нову версію",
+  "Security": "Безпека",
+  "General": "Загальні",
+  "About": "Про нас",
+  "Website": "Веб сайт",
+  "About Deskreen": "Про Deskreen",
+  "Security Settings": "Налаштування безпеки",
+  "Color Theme": "Схема кольорів",
+  "Automatic Updates": "Авто-оновлення",
+  "General Settings": "Загальні налаштування",
+  "Disabled": "Відключено",
+  "Version": "Версія",
+  "Copyright": "Авторські права",
+  "Edit": "Правити",
+  "Hide Deskreen": "Сховати Deskreen",
+  "Hide Others": "Сховати інші",
+  "Show All": "Показати всі",
+  "Quit": "Вийти",
+  "Undo": "Скасувати",
+  "Redo": "Повторити",
+  "Cut": "Вирізати",
+  "Copy": "Копіювати",
+  "Paste": "Вставити",
+  "Select All": "Вибрати все",
+  "View": "Вид",
+  "Reload": "Перезавантажити",
+  "Toggle Full Screen": "Переключити на весь екран",
+  "Toggle Developer Tools": "Відкрити інструменти розробника",
+  "Window": "Вікно",
+  "Minimize": "Мінімізувати",
+  "Close": "Закрити",
+  "Bring All to Front": "Вивести всі наперед",
+  "Help": "Допомога",
+  "Learn More": "Дізнатися більше",
+  "Documentation": "Документація",
+  "Community Discussions": "Обговорення в спільноті",
+  "Search Issues": "Пошук проблем",
+  "TRANSLATIONS BELOW ARE NOT ADDED TO UI YET, BUT YOUR TRANSLATIONS ARE WELCOME! THE FEATURES WILL BE ADDED SOON SO YOUR TRANSLATIONS ARE NEEDED": "",
+  "Available Trusted Devices": "Available Trusted Devices",
+  "Make this device trusted": "Make this device trusted",
+  "Click to select other screen source to share": "Click to select other screen source to share",
+  "Click to edit Device Alias": "Click to edit Device Alias",
+  "Trusted Device ID": "Trusted Device ID",
+  "Trusted": "Trusted",
+  "Make Trusted": "Make Trusted",
+  "Forget This Device": "Forget This Device",
+  "Device Alias": "Device Alias",
+  "Auto share last Entire Screen source when device is available": "Auto share last Entire Screen source when device is available",
+  "All devices are successfully disconnected": "All devices are successfully disconnected",
+  "Device was disconnected": "Device was disconnected",
+  "Networking": "Networking",
+  "Deskreen Application Port": "Deskreen Application Port",
+  "Port is already used by other App": "Port is already used by other App",
+  "Click to change Deskreen Application Port": "Click to change Deskreen Application Port",
+  "Type a number from 3000 to 64000 to use as a Deskreen Application Port": "Type a number from 3000 to 64000 to use as a Deskreen Application Port",
+  "Type another number in range from 3000 to 64000": "Type another number in range from 3000 to 64000",
+  "Select Network Interface": "Select Network Interface",
+  "I know IP of my computer and I want to type it manually": "I know IP of my computer and I want to type it manually",
+  "Type Your Computer IP": "Type Your Computer IP",
+  "Click to type IP manually": "Click to type IP manually",
+  "Banned IPs": "Banned IPs",
+  "Ban New IP": "Ban New IP",
+  "Type the IP you want to ban": "Type the IP you want to ban",
+  "Unban this IP": "Unban this IP",
+  "Unban all IPs": "Unban all IPs",
+  "Reset Deskreen settings to default": "Reset Deskreen settings to default",
+  "Ask user to enter password when connecting": "Ask user to enter password when connecting",
+  "Change Password": "Change Password",
+  "Type a New Password": "Type a New Password",
+  "Cancel": "Cancel",
+  "Device Status": "Device Status",
+  "Sharing Screen": "Sharing Screen",
+  "Available, no screen sharing": "Available, no screen sharing",
+  "Not Available": "Not Available",
+  "Autostart Deskreen App on login": "Autostart Deskreen App on login",
+  "Open Deskreen App window on login": "Open Deskreen App window on login",
+  "Use system tray": "Use system tray",
+  "Deskreen System Tray": "Deskreen System Tray",
+  "Open App Window": "Open App Window",
+  "Minimize To Tray": "Minimize To Tray",
+  "Show Connected Devices": "Show Connected Devices",
+  "Quit Deskreen": "Quit Deskreen"
 }

app/main.dev.ts

@@ -62,8 +62,12 @@ export default class DeskreenApp {
 
         const showNotification = () => {
           const notification = {
-            title: 'Deskreen Update is Available!',
-            body: `Your current version is ${this.appVersion} Click to download new ${this.latestVersion} updated version.`,
+            title: i18n.t('Deskreen Update is Available!'),
+            body: `${i18n.t('Your current version is')} ${
+              this.appVersion
+            } | ${i18n.t('Click to download new updated version')} ${
+              this.latestVersion
+            }`,
           };
           const notificationInstance = new Notification(notification);
           notificationInstance.show();

app/menu.spec.ts

@@ -313,7 +313,7 @@ describe('app menu MenyBuilder tests', () => {
       });
 
       describe('when Help submenu Community Discussions was clicked', () => {
-        it('shoud call shell open external with proper link to https://github.com/pavlobu/deskreen/issues', () => {
+        it('shoud call shell open external with proper link to https://github.com/pavlobu/deskreen/discussions', () => {
           const menu = menuBuilder.buildDarwinTemplate();
           const submenuView = menu[4];
           const learnMore =
@@ -323,7 +323,7 @@ describe('app menu MenyBuilder tests', () => {
           learnMore.click();
 
           expect(shell.openExternal).toBeCalledWith(
-            'https://github.com/pavlobu/deskreen/issues'
+            'https://github.com/pavlobu/deskreen/discussions'
           );
         });
       });

app/menu.ts

@@ -7,8 +7,6 @@ import {
   MenuItemConstructorOptions,
 } from 'electron';
 
-// import config from './configs/app.lang.config';
-
 import signalingServer from './server';
 
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
@@ -63,26 +61,24 @@ export default class MenuBuilder {
       label: 'Deskreen',
       submenu: [
         {
-          label: 'About Deskreen',
+          label: this.i18n.t('About Deskreen'),
           selector: 'orderFrontStandardAboutPanel:',
         },
         { type: 'separator' },
-        { label: 'Services', submenu: [] },
-        { type: 'separator' },
         {
-          label: 'Hide Deskreen',
+          label: this.i18n.t('Hide Deskreen'),
           accelerator: 'Command+H',
           selector: 'hide:',
         },
         {
-          label: 'Hide Others',
+          label: this.i18n.t('Hide Others'),
           accelerator: 'Command+Shift+H',
           selector: 'hideOtherApplications:',
         },
-        { label: 'Show All', selector: 'unhideAllApplications:' },
+        { label: this.i18n.t('Show All'), selector: 'unhideAllApplications:' },
         { type: 'separator' },
         {
-          label: 'Quit',
+          label: this.i18n.t('Quit'),
           accelerator: 'Command+Q',
           click: () => {
             signalingServer.stop();
@@ -92,40 +88,60 @@ export default class MenuBuilder {
       ],
     };
     const subMenuEdit: DarwinMenuItemConstructorOptions = {
-      label: 'Edit',
+      label: this.i18n.t('Edit'),
       submenu: [
-        { label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
-        { label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
-        { type: 'separator' },
-        { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
-        { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
-        { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
         {
-          label: 'Select All',
+          label: this.i18n.t('Undo'),
+          accelerator: 'Command+Z',
+          selector: 'undo:',
+        },
+        {
+          label: this.i18n.t('Redo'),
+          accelerator: 'Shift+Command+Z',
+          selector: 'redo:',
+        },
+        { type: 'separator' },
+        {
+          label: this.i18n.t('Cut'),
+          accelerator: 'Command+X',
+          selector: 'cut:',
+        },
+        {
+          label: this.i18n.t('Copy'),
+          accelerator: 'Command+C',
+          selector: 'copy:',
+        },
+        {
+          label: this.i18n.t('Paste'),
+          accelerator: 'Command+V',
+          selector: 'paste:',
+        },
+        {
+          label: this.i18n.t('Select All'),
           accelerator: 'Command+A',
           selector: 'selectAll:',
         },
       ],
     };
     const subMenuViewDev: MenuItemConstructorOptions = {
-      label: 'View',
+      label: this.i18n.t('View'),
       submenu: [
         {
-          label: 'Reload',
+          label: this.i18n.t('Reload'),
           accelerator: 'Command+R',
           click: () => {
             this.mainWindow.webContents.reload();
           },
         },
         {
-          label: 'Toggle Full Screen',
+          label: this.i18n.t('Toggle Full Screen'),
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
           },
         },
         {
-          label: 'Toggle Developer Tools',
+          label: this.i18n.t('Toggle Developer Tools'),
           accelerator: 'Alt+Command+I',
           click: () => {
             this.mainWindow.webContents.toggleDevTools();
@@ -137,7 +153,7 @@ export default class MenuBuilder {
       label: 'View',
       submenu: [
         {
-          label: 'Toggle Full Screen',
+          label: this.i18n.t('Toggle Full Screen'),
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
@@ -146,29 +162,36 @@ export default class MenuBuilder {
       ],
     };
     const subMenuWindow: DarwinMenuItemConstructorOptions = {
-      label: 'Window',
+      label: this.i18n.t('Window'),
       submenu: [
         {
-          label: 'Minimize',
+          label: this.i18n.t('Minimize'),
           accelerator: 'Command+M',
           selector: 'performMiniaturize:',
         },
-        { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
+        {
+          label: this.i18n.t('Close'),
+          accelerator: 'Command+W',
+          selector: 'performClose:',
+        },
         { type: 'separator' },
-        { label: 'Bring All to Front', selector: 'arrangeInFront:' },
+        {
+          label: this.i18n.t('Bring All to Front'),
+          selector: 'arrangeInFront:',
+        },
       ],
     };
     const subMenuHelp: MenuItemConstructorOptions = {
-      label: 'Help',
+      label: this.i18n.t('Help'),
       submenu: [
         {
-          label: 'Learn More',
+          label: this.i18n.t('Learn More'),
           click() {
             shell.openExternal('https://www.deskreen.com/');
           },
         },
         {
-          label: 'Documentation',
+          label: this.i18n.t('Documentation'),
           click() {
             shell.openExternal(
               'https://github.com/pavlobu/deskreen/blob/master/README.md'
@@ -176,13 +199,15 @@ export default class MenuBuilder {
           },
         },
         {
-          label: 'Community Discussions',
+          label: this.i18n.t('Community Discussions'),
           click() {
-            shell.openExternal('https://github.com/pavlobu/deskreen/issues');
+            shell.openExternal(
+              'https://github.com/pavlobu/deskreen/discussions'
+            );
           },
         },
         {
-          label: 'Search Issues',
+          label: this.i18n.t('Search Issues'),
           click() {
             shell.openExternal('https://github.com/pavlobu/deskreen/issues');
           },
@@ -196,35 +221,6 @@ export default class MenuBuilder {
         ? subMenuViewDev
         : subMenuViewProd;
 
-    // const languageSubmenu = config.languages.map((languageCode) => {
-    //   return {
-    //     label: this.i18n.t(languageCode),
-    //     type: 'radio',
-    //     checked: this.i18n.language === languageCode,
-    //     click: () => {
-    //       this.i18n.changeLanguage(languageCode);
-    //       setTimeout(() => {
-    //         // to fix for MacOS bug, not picking up new language on first click
-    //         if (this.i18n.language !== languageCode) {
-    //           this.i18n.changeLanguage(languageCode);
-    //         }
-    //       }, 500);
-    //     },
-    //   };
-    // });
-
-    // const languageMenu: MenuItemConstructorOptions = {
-    //   label: this.i18n.t('Language'),
-    //   submenu: languageSubmenu as MenuItemConstructorOptions[],
-    // };
-
-    return [
-      subMenuAbout,
-      subMenuEdit,
-      subMenuView,
-      subMenuWindow,
-      subMenuHelp,
-      // languageMenu,
-    ];
+    return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
   }
 }

app/package-lock.json

@@ -1,5 +1,5 @@
 {
   "name": "Deskreen",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "lockfileVersion": 1
 }

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "deskreen",
   "productName": "Deskreen",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Deskreen turns any device into a secondary screen for your computer",
   "main": "./main.prod.js",
   "author": {

app/peerConnectionHelperRendererWindowIndex.spec.ts

@@ -252,40 +252,6 @@ describe('peerConnectionHelperRendererWindowIndex tests', () => {
           ).toHaveBeenCalled();
         });
       });
-
-      describe('when ipcRenderer.on("app-color-theme-changed" callback occurred', () => {
-        it('should call peerConnection.setAppTheme(newTheme)', () => {
-          const peerConnectionInstance = mockAndGetPeerConnectionInstance();
-
-          const setAppThemeCallback =
-            // @ts-ignore
-            ipcRenderer.on.mock.calls[6][1];
-          const testTheme = true;
-
-          setAppThemeCallback(undefined, testTheme);
-
-          expect(peerConnectionInstance.setAppTheme).toHaveBeenCalledWith(
-            testTheme
-          );
-        });
-      });
-
-      describe('when ipcRenderer.on("app-language-changed" callback occurred', () => {
-        it('should call peerConnection.testAppLang(newLang)', () => {
-          const peerConnectionInstance = mockAndGetPeerConnectionInstance();
-
-          const setAppLangCallback =
-            // @ts-ignore
-            ipcRenderer.on.mock.calls[7][1];
-          const testAppLang = 'eu';
-
-          setAppLangCallback(undefined, testAppLang);
-
-          expect(peerConnectionInstance.setAppLanguage).toHaveBeenCalledWith(
-            testAppLang
-          );
-        });
-      });
     });
   });
 });

app/peerConnectionHelperRendererWindowIndex.tsx

@@ -26,8 +26,6 @@ export function handleIpcRenderer() {
         data.roomID,
         data.sharingSessionID,
         data.user,
-        data.appTheme, // TODO getAppTheme
-        data.appLanguage, // TODO getLanguage
         roomIDService,
         connectedDevicesService,
         sharingSessionService,
@@ -59,12 +57,12 @@ export function handleIpcRenderer() {
       peerConnection.sendUserAllowedToConnect();
     });
 
-    ipcRenderer.on('app-color-theme-changed', (_, newTheme: boolean) => {
-      peerConnection.setAppTheme(newTheme);
+    ipcRenderer.on('app-color-theme-changed', () => {
+      peerConnection.notifyClientWithNewColorTheme();
     });
 
-    ipcRenderer.on('app-language-changed', (_, newLang: string) => {
-      peerConnection.setAppLanguage(newLang);
+    ipcRenderer.on('app-language-changed', () => {
+      peerConnection.notifyClientWithNewLanguage();
     });
   });
 }

app/utils/getAppLanguage.ts

@@ -0,0 +1,7 @@
+import settings from 'electron-settings';
+
+export default function getAppLanguage(): string {
+  return settings.hasSync('appLanguage')
+    ? (settings.getSync('appLanguage') as string)
+    : 'en';
+}

app/utils/getAppTheme.ts

@@ -0,0 +1,7 @@
+import settings from 'electron-settings';
+
+export default function getAppTheme(): boolean {
+  return settings.hasSync('appIsDarkTheme')
+    ? settings.getSync('appIsDarkTheme') === 'true'
+    : false;
+}

doc/translations-docs/fix-a-typo-in-existing-translation-of-Deskreen.md

@@ -0,0 +1,135 @@
+### Guide on how to fix a typo in translations of Deskreen
+
+## Contents
+
+- [Notes on editing `translation.json` files. (Applies to all contributors wether you know how to code or not)](#notes-on-edit)
+- [I don't know how to code or I don't know how git works, but I want to help with fixing a typo for a language used in Deskreen App or Website](#dont-know-code)
+- [I know how to code and I know how git works, where should I start with fixing a typo for a language used in Deskreen App or Website?](#i-know-code)
+
+<a id="notes-on-edit">
+<h2>Notes on editing `translation.json` files. (Applies to all contributors wether you know how to code or not)</h2>
+</a>
+
+When editing a `translation.json` file, don't change the **left part of translation** before the `:`.
+Only change the text between `"` on right side of `:` sign.
+
+#### Example:
+
+Some content of `translation.json`
+
+<a id="edit-orig">
+<h6>Before your change (original):</h6>
+</a>
+
+```
+...
+"Hello": "Hello"
+...
+```
+
+##### Good example, after your change (for example Spanish language support):
+
+```
+...
+"Hello": "Hola"
+...
+```
+
+##### **Bad example** of your change (left side is different than in [original](#edit-orig)):
+
+```
+...
+"Greetings": "Hola"
+...
+```
+
+### Rule of thumb, don't edit a text on a left side of `:` sign in `translation.json` file. only edit a text between `"` on the right side from `:` symbol.
+
+<br/>
+<br/>
+
+<a id="dont-know-code">
+<h2>I don't know how to code or I don't know how git works, but I want to help with fixing a typo for a language used in Deskreen App or Website</h2>
+</a>
+
+### Fix typo for Deskreen App if you don't know how to code
+
+You can use any simple text editor to edit `translation.json` file.
+Good text editors for different operating systems:
+
+- Windows (Notepad)
+- MacOS (TextEdit)
+- Linux (gedit, mousepad etc.)
+
+#### Download a files for language with typo from here:
+
+Find `translation.json` file for language you need to edit here:
+
+[host app (that runs on computer)](https://github.com/pavlobu/deskreen/tree/master/app/locales)
+
+[client viewer app (that runs in a web browser)](https://github.com/pavlobu/deskreen/tree/master/app/client/public/locales)
+
+You can use any simple text editor to edit `translation.json` file.
+Good text editors for different operating systems:
+
+- Windows (Notepad)
+- MacOS (TextEdit)
+- Linux (gedit, mousepad etc.)
+
+### Fix typo for Deskreen Website if you don't know how to code
+
+Docs coming soon. Stay tuned.
+
+#### How to download `translation.json` file
+
+open **Raw** `translation.json` file -> right click in browser window -> Save as..
+
+### When finished editing translation.json files
+
+You can send me a Google Drive link to these files for translations of Deskreen App or Website, or attach them to email.
+Send your email with files here: pavlobu@gmail.com
+Please give different names for the files when attaching them.
+Also please include what is language name your fix is for.
+After that we will be adding your typo fix in new release. Thank you!
+
+<br/>
+<br/>
+
+<a id="i-know-code">
+<h2>I know how to code and I know how git works, where should I start with fixing a typo for a language used in Deskreen App or Website?</h2>
+</a>
+
+### Fix typo for Deskreen App if you know how to code
+
+Find `translation.json` file for language you need to edit here:
+
+[host app (that runs on computer)](https://github.com/pavlobu/deskreen/tree/master/app/locales)
+
+[client viewer app (that runs in a web browser)](https://github.com/pavlobu/deskreen/tree/master/app/client/public/locales)
+
+Fix them and then submit your PR. Thank you!
+
+### Fix typo for Deskreen Website if you know how to code
+
+Docs coming soon. Stay tuned.
+
+### When the Deskreen App edits done, then please fix tests if they are broken. And regenerate snapshots if needed.
+
+Example to regenerate snapshots:
+in root `./` folder of project
+
+```
+yarn test -- -u (or yarn jest -- -u)
+```
+
+in root `./app/client` folder of project
+
+```
+yarn test -- -u (or yarn jest -- -u)
+```
+
+If that doesn't work for you to regenerate snaphosts, please google search how to do it.
+
+### IMPORTANT: Please make sure your PR is 1 or maximum 2 commits length. If it is longer than that, you will be asked to squash your PR commits. If you don't know how to squash, refer [this guide](#dont-know-code)
+
+### After you done fixing, please submit your PR, it will be reviewed and if everything is ok it will be merged and you fix will be included in next release. Thank you!

doc/translations-docs/how-to-add-new-language-translation-to-Deskreen.md

@@ -0,0 +1,172 @@
+### Guide on how to add a new language translation to Deskreen
+
+As we agreed in our community, when adding a new language support for Deskreen,
+the translations for Deskreen App should be done along with translations for a website too.
+Why is that? Because if you translate app only, it doesn't bring any value to users because they
+can not read any documentation and important information about Deskreen on a website.
+
+If you are willing to contribute to translate application only and don't want to help with translating a
+website, then your submission with new language support will be stalled up until the time when there
+is a translation for Deskreen website.
+
+## The how-to guides on submitting translations for Deskreen website will be added here soon (within next week). Stay tuned.
+
+You can subscribe to this thread for news on translations:
+https://github.com/pavlobu/deskreen/issues/60
+
+<br/>
+
+## Contents
+
+- [Notes on editing `translation.json` files. (Applies to all contributors wether you know how to code or not)](#notes-on-edit)
+- [I don't know how to code or I don't know how git works, but I want to help with adding a new language support for Deskreen App and Website](#dont-know-code)
+- [I know how to code and I know how git works, where should I start with adding a new language for Deskreen App and Website?](#i-know-code)
+
+<br/>
+
+<a id="notes-on-edit">
+<h2>Notes on editing `translation.json` files. (Applies to all contributors wether you know how to code or not)</h2>
+</a>
+
+When editing a `translation.json` file, don't change the **left part of translation** before the `:`.
+Only change the text between `"` on right side of `:` sign.
+
+#### Example:
+
+Some content of `translation.json`
+
+<a id="edit-orig">
+<h6>Before your change (original):</h6>
+</a>
+
+```
+...
+"Hello": "Hello"
+...
+```
+
+##### Good example, after your change (for example Spanish language support):
+
+```
+...
+"Hello": "Hola"
+...
+```
+
+##### **Bad example** of your change (left side is different than in [original](#edit-orig)):
+
+```
+...
+"Greetings": "Hola"
+...
+```
+
+### Rule of thumb, don't edit a text on a left side of `:` sign in `translation.json` file. only edit a text between `"` on the right side from `:` symbol.
+
+<br/>
+<br/>
+
+<a id="dont-know-code">
+<h2>I don't know how to code or I don't know how git works, but I want to help with adding a new language support for Deskreen App and Website</h2>
+</a>
+
+### Add new language for Deskreen App if you don't know how to code
+
+You can use any simple text editor to edit `translation.json` file.
+Good text editors for different operating systems:
+
+- Windows (Notepad)
+- MacOS (TextEdit)
+- Linux (gedit, mousepad etc.)
+
+You can grab English language `translation.json` file [here](https://raw.githubusercontent.com/pavlobu/deskreen/master/app/locales/en/translation.json) and use it as a template.
+**That file is for a Deskreen App that runs on computer.**
+
+The second English language `translation.json` file you need to edit is [here](https://raw.githubusercontent.com/pavlobu/deskreen/master/app/client/public/locales/en/translation.json)
+and use it as a template.
+**That file is for a Deskreen Viewer that runs on any device web browser.**
+
+#### How to download `translation.json` file
+
+open link -> right click in browser window -> Save as..
+
+### Add new language for Deskreen Website if you don't know how to code
+
+Docs coming soon. Stay tuned.
+
+### When finished editing translation.json files
+
+You can send me a Google Drive link to these files for translations of Deskreen App and Website, or attach them to email.
+Send your email with files here: pavlobu@gmail.com
+Please give different names for the files when attaching them.
+Also please include what is language name your translation is for.
+After that we will be adding a support for new language and make a new release with your name in changelog :) Big thanks to you!
+
+<br/>
+<br/>
+
+<a id="i-know-code">
+<h2>I know how to code and I know how git works, where should I start with adding a new language for Deskreen App and Website?</h2>
+</a>
+
+### IMPORTANT: Please make sure your PR is 1 or maximum 2 commits length. If it is longer than that, you will be asked to squash your PR commits. If you don't know how to squash, refer [this guide](#dont-know-code)
+
+### Add new language for Deskreen App. Step By Step Guide for coders and people who know how to use git
+
+You need to add it in two places: 1. host app, that runs on a computer and 2. client viewer, that runs in a web browser
+
+#### Let's say you wan to add a language support for Spanish.
+
+#### Host app translations, step by step:
+
+- in `app/locales` create a new directory with [`ISO 639-1`](https://www.loc.gov/standards/iso639-2/php/code_list.php) Code of Spanish which is `es`
+- create `app/locales/es/translation.json`
+- copy contents of `app/locales/en/translation.json` to `app/locales/es/translation.json`
+- edit translations in `app/locales/es/translation.json` **translating only stuff that is on the right side of `:` on each row to Spanish**
+- in `app/configs/app.lang.config.ts` add a full language name with iso key in `langISOKeyToLangFullNameMap` map. Example: `es: Espagnol`
+- in `app/configs/app.lang.config.ts` add a language iso key in `languages` list. Example: `['en', .... , 'es']`
+- on the top of all `translation.json` in `app/locales` add `es: Espagnol` under all languages. Example:
+  ```
+  ....
+  "ru": "Русский",
+  "en": "English",
+  "ua": "Українська",
+  "es": "Espagnol",
+  ....
+  ```
+- Done with the host app!
+- Now proceed with client viewer. Create a directory `es` in `app/client/public/locales`
+- create `app/client/public/locales/es/translation.json`
+- copy contents of `app/client/public/locales/en/translation.json` to `app/client/public/locales/es/translation.json`
+- edit translations in `app/client/public/locales/es/translation.json` **translating only stuff that is on the right side of `:` on each row to Spanish**
+- in `app/client/src/config/i18n.ts` in `whitelist` add `es` to the end. Example: `whitelist: ['en', 'ru', 'ua', 'es']`
+- Done with client translations!
+
+### Dont forget to test whether your typo fix works. Run app with `yarn start` from `./` root dir of Deskreen project.
+
+### When the Deskreen App translations done, then please fix tests if they are broken. And regenerate snapshots if needed.
+
+Example to regenerate snapshots:
+in root `./` folder of project
+
+```
+yarn test -- -u (or yarn jest -- -u)
+```
+
+in root `./app/client` folder of project
+
+```
+yarn test -- -u (or yarn jest -- -u)
+```
+
+If that doesn't work for you to regenerate snaphosts, please google search how to do it.
+
+### By this time you should be done with adding a translation.
+
+### Add new language for Deskreen Website. Step By Step Guide for coders and people who know how to use git
+
+Docs coming soon. Stay tuned.
+
+### IMPORTANT: Please make sure your PR is 1 or maximum 2 commits length. If it is longer than that, you will be asked to squash your PR commits. If you don't know how to squash, refer [this guide](#dont-know-code)
+
+### After that you can submit your PR and it will be reviewed and if it is ok and translations for website are also done, then it will be merged and your translations will be included in new release of Deskreen. Big thanks to you!

package.json

@@ -1,7 +1,7 @@
 {
   "name": "deskreen",
   "productName": "Deskreen",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Deskreen turns any device into a secondary screen for your computer",
   "scripts": {
     "build": "yarn build-client && yarn build-main && yarn build-renderer",
@@ -70,7 +70,7 @@
   "build": {
     "productName": "Deskreen",
     "appId": "com.pavlobu.Deskreen",
-    "copyright": "Copyright © 2020-present Pavlo (Paul) Buidenkov",
+    "copyright": "Copyright © 2020-present Pavlo Buidenkov (Paul)",
     "files": [
       "dist/",
       "node_modules/",
@@ -141,7 +141,7 @@
       "url": "https://github.com/pavlobu"
     }
   ],
-  "license": "AGPL-3.0 License",
+  "license": "AGPL-3.0-or-later",
   "bugs": {
     "url": "https://github.com/pavlobu/deskreen/issues"
   },
@@ -308,9 +308,9 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "^3.0.7",
-    "testcafe": "^1.9.2",
-    "testcafe-browser-provider-electron": "^0.0.15",
-    "testcafe-react-selectors": "^4.0.0",
+    "testcafe": "^1.10.1",
+    "testcafe-browser-provider-electron": "^0.0.16",
+    "testcafe-react-selectors": "^4.1.4",
     "ts-jest": "^26.1.4",
     "typescript": "^3.9.7",
     "typings-for-css-modules-loader": "^1.7.0",

test/ux/Stepper.ux.ts

@@ -50,7 +50,7 @@ const headerWithTextSelectAppWindow = Selector('h3').withText(
 const previewShareButton = Selector('.preview-share-thumb-container');
 const step3ConfirmButton = Selector('button').withText('Confirm');
 const noINeedToShareOtherThingButton = Selector('button').withText(
-  'No, I need to share other thing'
+  'No, I need to choose other'
 );
 const step4ConnectNewDeviceButton = Selector('button').withText(
   'Connect New Device'
@@ -68,8 +68,8 @@ const yesDisconnectAllButton = Selector('button').withText(
 );
 const settingsButtonOfTopPanel = Selector('span').withAttribute('icon', 'cog');
 const openedSettingsOverlay = Selector('#settings-overlay-inner');
-const darkColorAppSettingButton = Selector('button').withText('Dark');
-const lightColorAppSettingButton = Selector('button').withText('Light');
+const darkColorAppSettingButton = '#dark-theme-toggle-btn';
+const lightColorAppSettingButton = '#light-theme-toggle-btn';
 const darkUIClassName = Selector('.bp3-dark');
 
 async function getConnecteddeviceIPFromAllowToConnectDeviceAlert() {
@@ -493,10 +493,10 @@ test(`when "Settings" Panel is opened,
   await t.click(settingsButtonOfTopPanel());
 
   // action and assertion 1
-  await t.click(darkColorAppSettingButton());
+  await t.click(darkColorAppSettingButton);
   await t.expect(darkUIClassName().exists).ok();
 
   // action and assertion 2
-  await t.click(lightColorAppSettingButton());
+  await t.click(lightColorAppSettingButton);
   await t.expect(darkUIClassName().exists).notOk();
 });

yarn.lock

@@ -13699,10 +13699,10 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
-testcafe-browser-provider-electron@^0.0.15:
-  version "0.0.15"
-  resolved "https://registry.npmjs.org/testcafe-browser-provider-electron/-/testcafe-browser-provider-electron-0.0.15.tgz#4c0d084222349501cf2eb400ccac50029cb454ae"
-  integrity sha512-nmsYcaf0HXv+8yDQxHR9b8kWkPwRPDVV5cwrZUCR2bh43pCozkcmgvWCFn9uD2twFo/oead61oBh9eMMxdTdZA==
+testcafe-browser-provider-electron@^0.0.16:
+  version "0.0.16"
+  resolved "https://registry.npmjs.org/testcafe-browser-provider-electron/-/testcafe-browser-provider-electron-0.0.16.tgz#cb4255b775bdec226ec76699f408a4aba20a8146"
+  integrity sha512-3qBIXdlV2gN0I3pLYbEdVlhe6rgfGdihaB6hc/339ZYVtpXE/AOt4CW+EubBJLG6gkwJI+39rv8azzQ6NebgKg==
   dependencies:
     babel-runtime "^6.25.0"
     chrome-remote-interface "^0.27.0"
@@ -13788,7 +13788,7 @@ testcafe-legacy-api@4.0.0:
     pinkie "^2.0.1"
     strip-bom "^2.0.0"
 
-testcafe-react-selectors@^4.0.0:
+testcafe-react-selectors@^4.1.4:
   version "4.1.4"
   resolved "https://registry.npmjs.org/testcafe-react-selectors/-/testcafe-react-selectors-4.1.4.tgz#9aebba4eb102c410596e40957dccc81ea8ff59bf"
   integrity sha512-+YkgZcQiFrdkqGJEE5q/YrANF2QPn6bG9Q1wG11rp0yZA405lG51CB9WXdSJkB2ACcEoIuWIqX2V839hPJ51og==
@@ -13818,7 +13818,7 @@ testcafe-reporter-xunit@^2.1.0:
   resolved "https://registry.npmjs.org/testcafe-reporter-xunit/-/testcafe-reporter-xunit-2.1.0.tgz#e6d66c572ce15af266706af0fd610b2a841dd443"
   integrity sha1-5tZsVyzhWvJmcGrw/WELKoQd1EM=
 
-testcafe@^1.9.2:
+testcafe@^1.10.1:
   version "1.10.1"
   resolved "https://registry.npmjs.org/testcafe/-/testcafe-1.10.1.tgz#0dc33954eabbdfb6ea018b789eb21b5557b35582"
   integrity sha512-c1ErVj+QvQR7fqJs/XVa4S7Ctl5Hf5bxnkTaFVl4Qt2QlliL3EAXtL3WjCOx65Pd8BatxTWUCXJ5NVwAvq7jWg==