Slava Ukraini (#404)

antoinejaussoin · May 8, 2022 · 3f2d00a · 3f2d00a
1 parent d889c3b
commit 3f2d00a
Show file tree

Hide file tree

Showing 19 changed files with 173 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -88,6 +88,7 @@ This will run a demo version, which you can turn into a fully licenced version b
 ### Version 4.16.0
 
 - Complete overhaul of the translations. Switching to [i18next](https://www.i18next.com). Translated all languages using Machine Learning (via Crowdin).
+- Added translations for the Ukrainian language, and a link to provide help for Ukraine.
 - Fix the empty file download when logging using Google OAuth
 - Upgrade the documentation to the latest version of Docusaurus
 - Add more integration tests, covering password accounts and account deletion

diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx
@@ -26,6 +26,8 @@ import { Alert, AlertTitle, Button, Hidden } from '@mui/material';
 import useBackendCapabilities from './global/useBackendCapabilities';
 import useIsPro from 'auth/useIsPro';
 import ProButton from 'components/ProButton';
+import { Flag } from 'components/Flag';
+import { useTranslation } from 'react-i18next';
 
 const Home = lazy(() => import('./views/Home' /* webpackChunkName: "home" */));
 const Game = lazy(() => import('./views/Game' /* webpackChunkName: "game" */));
@@ -103,6 +105,7 @@ function App() {
   const goToHome = useCallback(() => navigate('/'), [navigate]);
   const location = useLocation();
   const isOnGamePage = !!useMatch('game/:gameId/*');
+  const { t } = useTranslation();
 
   // Tracks page views on every location change
   useEffect(() => {
@@ -113,7 +116,7 @@ function App() {
     <div>
       {!backend.licenced ? (
         <Alert title="Unlicenced" severity="error">
-          <AlertTitle>Retrospected is Unlicenced</AlertTitle>
+          <AlertTitle>{t('Main.unlicenced.title')}</AlertTitle>
           This software is unlicenced. You can obtain a licence{' '}
           <a
             target="_blank"
@@ -127,7 +130,14 @@ function App() {
           administration panel.
         </Alert>
       ) : null}
-      <AppBar position="sticky">
+      <AppBar
+        position="sticky"
+        style={{
+          backgroundColor: 'none',
+          background:
+            'linear-gradient(167deg, rgba(0,87,183,1) 28%, rgba(255,215,0,1) 74%)',
+        }}
+      >
         <Toolbar>
           <IconButton
             color="inherit"
@@ -166,11 +176,20 @@ function App() {
             </Hidden>
           ) : null}
           <Spacer />
+          <Hidden mdDown>
+            <HelpUkraine>
+              <Flag country="ua" />
+              <a href="https://www.gov.uk/government/news/ukraine-what-you-can-do-to-help">
+                {t('Main.helpUkraine')}
+              </a>
+            </HelpUkraine>
+          </Hidden>
+
           {isOnGamePage ? <Invite /> : null}
           {isInitialised ? (
             <AccountMenu />
           ) : (
-            <Initialising>Loading...</Initialising>
+            <Initialising>{t('Main.loading')}</Initialising>
           )}
         </Toolbar>
       </AppBar>
@@ -225,4 +244,23 @@ const Spacer = styled.div`
   flex: 1;
 `;
 
+const HelpUkraine = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20px;
+  a {
+    font-style: unset;
+    text-decoration: unset;
+    font-size: 1.2rem;
+    font-weight: 100;
+    color: #0057b7;
+  }
+  border: 1px solid #0057b7;
+  border-radius: 5px;
+  padding: 10px;
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.3);
+`;
+
 export default App;
diff --git a/frontend/src/components/Flag.tsx b/frontend/src/components/Flag.tsx
@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import 'flag-icons/css/flag-icons.min.css';
+
+type FlagProps = {
+  country: string;
+};
+
+export function Flag({ country }: FlagProps) {
+  return (
+    <FlagIcon className={`fi fi-${country}`}>
+      <FlagOverlay />
+    </FlagIcon>
+  );
+}
+
+const FlagIcon = styled.div`
+  font-size: 32px;
+  margin-left: 10px;
+  height: 32px;
+  margin-right: 8px;
+  position: relative;
+`;
+
+const FlagOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 32px;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.5) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+`;
diff --git a/frontend/src/components/LanguagePicker.tsx b/frontend/src/components/LanguagePicker.tsx
@@ -4,7 +4,7 @@ import Select from '@mui/material/Select';
 import { SelectChangeEvent } from '@mui/material';
 import MenuItem from '@mui/material/MenuItem';
 import { languages } from '../translations';
-import 'flag-icons/css/flag-icons.min.css';
+import { Flag } from './Flag';
 
 interface LanguagePickerProps {
   value: string;
@@ -33,9 +33,7 @@ const LanguagePicker = ({ value, onChange }: LanguagePickerProps) => {
           data-cy={`language-picker-item-${language.locale}`}
         >
           <LanguageItem>
-            <Flag className={`fi fi-${language.iso}`}>
-              <FlagOverlay />
-            </Flag>
+            <Flag country={language.iso} />
             <Names>
               <Name>{language.name}</Name>
               <EnglishName>{language.englishName}</EnglishName>
@@ -56,34 +54,15 @@ const LanguageItem = styled.div`
   align-items: center;
 `;
 
-const Flag = styled.div`
-  font-size: 32px;
-  margin-left: 10px;
-  height: 32px;
-  margin-right: 8px;
-  position: relative;
-`;
-
-const FlagOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 32px;
-  background: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0.5) 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
-`;
 const Names = styled.div`
   margin-left: 5px;
   display: flex;
   flex-direction: column;
   font-size: 0.8em;
 `;
+
 const Name = styled.div``;
+
 const EnglishName = styled.div`
   color: grey;
 `;

diff --git a/frontend/src/translations/locales/ar-SA.json b/frontend/src/translations/locales/ar-SA.json
@@ -11,7 +11,12 @@
     "header": "إختيار اللُّغة"
   },
   "Main": {
-    "hint": "يمكنُكَ دعوة أشخاص إلى هذه الجلسة عن طريق نسخ عنوان هذه الصفحة"
+    "hint": "يمكنُكَ دعوة أشخاص إلى هذه الجلسة عن طريق نسخ عنوان هذه الصفحة",
+    "helpUkraine": "ساعد أوكرانيا!",
+    "loading": "تحميل...",
+    "unlicenced": {
+      "title": "الاستطلاع التراجعي غير مرخص"
+    }
   },
   "Home": {
     "welcome": "مرحبا، {{name}}"

diff --git a/frontend/src/translations/locales/de-DE.json b/frontend/src/translations/locales/de-DE.json
@@ -11,7 +11,12 @@
     "header": "Sprache auswählen"
   },
   "Main": {
-    "hint": "Du kannst Andere zu dieser Session einladen indem Du ihnen die URL schickst"
+    "hint": "Du kannst Andere zu dieser Session einladen indem Du ihnen die URL schickst",
+    "helpUkraine": "Hilf der Ukraine!",
+    "loading": "Wird geladen...",
+    "unlicenced": {
+      "title": "Retrospected ist nicht lizenziert"
+    }
   },
   "Home": {
     "welcome": "Willkommen, {{name}}"

diff --git a/frontend/src/translations/locales/en-GB.json b/frontend/src/translations/locales/en-GB.json
@@ -11,7 +11,12 @@
     "header": "Choose a language"
   },
   "Main": {
-    "hint": "You can invite others to this session by copy-pasting the URL"
+    "hint": "You can invite others to this session by copy-pasting the URL",
+    "helpUkraine": "Help Ukraine!",
+    "loading": "Loading...",
+    "unlicenced": {
+      "title": "Retrospected is Unlicenced"
+    }
   },
   "Home": {
     "welcome": "Welcome, {{name}}"

diff --git a/frontend/src/translations/locales/es-ES.json b/frontend/src/translations/locales/es-ES.json
@@ -11,7 +11,12 @@
     "header": "Escoje un idioma"
   },
   "Main": {
-    "hint": "Puedes invitar a otros a esta sesión compartiendo la URL"
+    "hint": "Puedes invitar a otros a esta sesión compartiendo la URL",
+    "helpUkraine": "¡Ayuda a Ucrania!",
+    "loading": "Cargando...",
+    "unlicenced": {
+      "title": "El retrospectivo está sin licencia"
+    }
   },
   "Home": {
     "welcome": "Bienvenido, {{name}}"

diff --git a/frontend/src/translations/locales/fr-FR.json b/frontend/src/translations/locales/fr-FR.json
@@ -11,7 +11,12 @@
     "header": "Changez de langue"
   },
   "Main": {
-    "hint": "Vous pouvez inviter d'autres participants en leur envoyant l'URL de cette page"
+    "hint": "Vous pouvez inviter d'autres participants en leur envoyant l'URL de cette page",
+    "helpUkraine": "Aidez l'Ukraine!",
+    "loading": "Chargement en cours...",
+    "unlicenced": {
+      "title": "Retrospected est sans licence"
+    }
   },
   "Home": {
     "welcome": "Bienvenue, {{name}}"
@@ -140,7 +145,7 @@
     "sailboat": "Bateau"
   },
   "Clients": {
-    "header": "Participants:",
+    "header": "Participants :",
     "joined": "{{users}} connecté.",
     "left": "{{users}} déconnecté."
   },

diff --git a/frontend/src/translations/locales/hu-HU.json b/frontend/src/translations/locales/hu-HU.json
@@ -11,7 +11,12 @@
     "header": "Válassz nyelvet"
   },
   "Main": {
-    "hint": "Ha meg akarsz hívni másokat, másold ki és oszd meg velük az URL-t"
+    "hint": "Ha meg akarsz hívni másokat, másold ki és oszd meg velük az URL-t",
+    "helpUkraine": "Segíts Ukrajnának!",
+    "loading": "Betöltés...",
+    "unlicenced": {
+      "title": "Az utólag jogosítvány nélküli"
+    }
   },
   "Home": {
     "welcome": "Isten hozott, {{name}}"

diff --git a/frontend/src/translations/locales/it-IT.json b/frontend/src/translations/locales/it-IT.json
@@ -11,7 +11,12 @@
     "header": "Scegli una lingua"
   },
   "Main": {
-    "hint": "Puoi invitare altre persone a questa sessione copiando ed incollando la URL"
+    "hint": "Puoi invitare altre persone a questa sessione copiando ed incollando la URL",
+    "helpUkraine": "Aiuta Ucraina!",
+    "loading": "Caricamento...",
+    "unlicenced": {
+      "title": "Retrospected is Unlicenced"
+    }
   },
   "Home": {
     "welcome": "Benvenuto, {{name}}"

diff --git a/frontend/src/translations/locales/ja-JP.json b/frontend/src/translations/locales/ja-JP.json
@@ -11,7 +11,12 @@
     "header": "言語を選択"
   },
   "Main": {
-    "hint": "URLを共有すれば新たな参加者を本セッションに招待できます"
+    "hint": "URLを共有すれば新たな参加者を本セッションに招待できます",
+    "helpUkraine": "ウクライナを助けよう!",
+    "loading": "読み込み中...",
+    "unlicenced": {
+      "title": "Retrospected is unlicenced"
+    }
   },
   "Home": {
     "welcome": "ようこそ、 {{name}}"

diff --git a/frontend/src/translations/locales/nl-NL.json b/frontend/src/translations/locales/nl-NL.json
@@ -11,7 +11,12 @@
     "header": "Kies een taal"
   },
   "Main": {
-    "hint": "Je kan anderen uitnodigen voor deze sessie door de URL te kopiëren en te plakken"
+    "hint": "Je kan anderen uitnodigen voor deze sessie door de URL te kopiëren en te plakken",
+    "helpUkraine": "Help Oekraïne",
+    "loading": "Laden...",
+    "unlicenced": {
+      "title": "Retrospected is niet toegestaan"
+    }
   },
   "Home": {
     "welcome": "Welkom, {{name}}"

diff --git a/frontend/src/translations/locales/pl-PL.json b/frontend/src/translations/locales/pl-PL.json
@@ -11,7 +11,12 @@
     "header": "Wybierz język"
   },
   "Main": {
-    "hint": "Możesz zaprosić inne osoby do tej sesji wysyłając im URL"
+    "hint": "Możesz zaprosić inne osoby do tej sesji wysyłając im URL",
+    "helpUkraine": "Pomóż Ukrainie!",
+    "loading": "Ładowanie...",
+    "unlicenced": {
+      "title": "Retrospected jest nielicencjonowany"
+    }
   },
   "Home": {
     "welcome": "Witaj, {{name}}"

diff --git a/frontend/src/translations/locales/pt-BR.json b/frontend/src/translations/locales/pt-BR.json
@@ -11,7 +11,12 @@
     "header": "Escolha uma língua"
   },
   "Main": {
-    "hint": "Você pode convidar outras pessoas para esta seção compartilhando a URL"
+    "hint": "Você pode convidar outras pessoas para esta seção compartilhando a URL",
+    "helpUkraine": "Ajude a Ucrânia!",
+    "loading": "Carregandochar@@0",
+    "unlicenced": {
+      "title": "Retrospectiva Não Autorizada"
+    }
   },
   "Home": {
     "welcome": "Bem-vindo, {{name}}"

diff --git a/frontend/src/translations/locales/pt-PT.json b/frontend/src/translations/locales/pt-PT.json
@@ -11,7 +11,12 @@
     "header": "Escolha um idioma"
   },
   "Main": {
-    "hint": "Você pode convidar outros para esta sessão copiando a URL"
+    "hint": "Você pode convidar outros para esta sessão copiando a URL",
+    "helpUkraine": "Ajude a Ucrânia!",
+    "loading": "Carregandochar@@0",
+    "unlicenced": {
+      "title": "Retrospectiva Não Autorizada"
+    }
   },
   "Home": {
     "welcome": "Bem-vindo, {{name}}"

diff --git a/frontend/src/translations/locales/uk-UA.json b/frontend/src/translations/locales/uk-UA.json
@@ -11,7 +11,12 @@
     "header": "Виберіть мову"
   },
   "Main": {
-    "hint": "Ви можете запросити інших до цього сеансу, скопіювавши URL"
+    "hint": "Ви можете запросити інших до цього сеансу, скопіювавши URL",
+    "helpUkraine": "Допоможіть Україні!",
+    "loading": "Завантажується...",
+    "unlicenced": {
+      "title": "Ретроспекція не ліцензована"
+    }
   },
   "Home": {
     "welcome": "Ласкаво просимо, {{name}}"

diff --git a/frontend/src/translations/locales/zh-CN.json b/frontend/src/translations/locales/zh-CN.json
@@ -11,7 +11,12 @@
     "header": "切换语言"
   },
   "Main": {
-    "hint": "复制并分享网址，即可让别人加入此议程"
+    "hint": "复制并分享网址，即可让别人加入此议程",
+    "helpUkraine": "帮助乌克兰！",
+    "loading": "加载中...",
+    "unlicenced": {
+      "title": "返回是未授权的"
+    }
   },
   "Home": {
     "welcome": "欢迎， {{name}}"