feat: extract translations

package.json

@@ -13,7 +13,7 @@
     "@emotion/styled": "11.11.0",
     "@graasp/query-client": "1.3.0",
     "@graasp/sdk": "1.1.3",
-    "@graasp/translations": "1.15.1",
+    "@graasp/translations": "1.16.0",
     "@graasp/ui": "3.2.6",
     "@mui/icons-material": "5.14.1",
     "@mui/lab": "5.0.0-alpha.137",

src/components/MobileAuth.tsx

@@ -1,15 +1,20 @@
 import { Link } from 'react-router-dom';
 
+import { AUTH } from '@graasp/translations';
+
 import { Android, Apple, DeviceUnknown } from '@mui/icons-material';
 import { Button, Stack, Typography } from '@mui/material';
 
+import { useAuthTranslation } from '../config/i18n';
 import { HOME_PATH } from '../config/paths';
 import FullscreenContainer from './FullscreenContainer';
 
 const PLAY_STORE_LINK =
   'https://play.google.com/store/apps/details?id=org.graasp.mobile';
 
 const MobileAuth = (): JSX.Element => {
+  const { t } = useAuthTranslation();
+
   return (
     <FullscreenContainer>
       <Stack
@@ -19,10 +24,7 @@ const MobileAuth = (): JSX.Element => {
         spacing={2}
       >
         <DeviceUnknown fontSize="large" color="primary" />
-        <Typography>
-          It looks like you requested a mobile link but you do not have our app
-          installed on this device.
-        </Typography>
+        <Typography>{t(AUTH.MOBILE_APP_NOT_INSTALLED_MESSAGE)}</Typography>
         <Button component={Link} to={''} variant="contained">
           <Stack
             direction="column"
@@ -33,7 +35,7 @@ const MobileAuth = (): JSX.Element => {
             textTransform="none"
           >
             <Apple />
-            <Typography>Get from the Apple App Store</Typography>
+            <Typography>{t(AUTH.MOBILE_GET_APP_FROM_APPLE_STORE)}</Typography>
           </Stack>
         </Button>
         <Button component={Link} to={PLAY_STORE_LINK} variant="contained">
@@ -46,11 +48,13 @@ const MobileAuth = (): JSX.Element => {
             textTransform="none"
           >
             <Android />
-            <Typography>Get from the Google Play Store</Typography>
+            <Typography>
+              {t(AUTH.MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE)}
+            </Typography>
           </Stack>
         </Button>
         <Typography component={Link} to={HOME_PATH} variant="caption">
-          Go back Home
+          {t(AUTH.MOBILE_BACK_TO_LOGIN)}
         </Typography>
       </Stack>
     </FullscreenContainer>