Add help us to translate !

packages/webapp/src/classes/app-i18n/index.ts

@@ -59,7 +59,7 @@ export const localeFromStr = (code: string): Locale => {
         .find((l) => l.code == code);
 
     if (!result) {
-        throw `Langunage code could not be found in list of default supported: + ${code}`
+        throw `Language code could not be found in list of default supported: + ${code}`
     }
 
     return result;

packages/webapp/src/compiled-lang/es.json

@@ -44,7 +44,7 @@
   "header.donthaveaccount": [
     {
       "type": 0,
-      "value": "No tienes una cuenta ?"
+      "value": "No tienes una cuenta contraseña?"
     }
   ],
   "login.email": [

packages/webapp/src/components/maps-page/index.tsx

@@ -8,7 +8,7 @@ import IconButton from '@material-ui/core/IconButton';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import { useStyles } from './style';
-import { AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, LabelTwoTone, PersonOutlineTwoTone, PublicTwoTone, ShareTwoTone, StarTwoTone } from '@material-ui/icons';
+import {  AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, LabelTwoTone, PersonOutlineTwoTone, PublicTwoTone, ScatterPlotTwoTone, ShareTwoTone, StarTwoTone } from '@material-ui/icons';
 import { Button, Link, ListItemSecondaryAction, ListItemText, Tooltip } from '@material-ui/core';
 import { MapsList } from './maps-list';
 import { FormattedMessage, IntlProvider, useIntl } from 'react-intl';
@@ -80,7 +80,7 @@ const MapsPage = () => {
     const filterButtons: ToolbarButtonInfo[] = [{
         filter: { type: 'all' },
         label: 'All',
-        icon: <AcUnitTwoTone color="secondary" />
+        icon: <ScatterPlotTwoTone color="secondary" />
     }, {
         filter: { type: 'owned' },
         label: 'Owned',
@@ -171,7 +171,7 @@ const MapsPage = () => {
                         }),
                     }}>
 
-                    <div style={{ padding: "20px 0 20px 15px" }}>
+                    <div style={{ padding: "20px 0 20px 15px" }} key="logo">
                         <img src={logoIcon} alt="logo" />
                     </div>
 
@@ -190,7 +190,7 @@ const MapsPage = () => {
                         )}
                     </List>
 
-                    <div style={{ position: 'absolute', bottom: '10px', left: '20px' }}>
+                    <div style={{ position: 'absolute', bottom: '10px', left: '20px' }} key="power-by">
                         <Link href="http://www.wisemapping.org/">
                             <img src={poweredByIcon} alt="Powered By WiseMapping" />
                         </Link>

packages/webapp/src/components/maps-page/language-menu/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Menu, MenuItem, Tooltip } from '@material-ui/core';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Menu, MenuItem, Tooltip } from '@material-ui/core';
 import { TranslateTwoTone } from '@material-ui/icons';
 import React from "react";
 import { useMutation, useQueryClient } from "react-query";
@@ -13,13 +13,14 @@ const LanguageMenu = () => {
     const queryClient = useQueryClient();
     const client: Client = useSelector(activeInstance);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [helpDialogOpen, setHelpDialogOpen] = React.useState<boolean>(false);
+
     const open = Boolean(anchorEl);
     const intl = useIntl();
 
     const mutation = useMutation((locale: LocaleCode) => client.updateAccountLanguage(locale),
         {
             onSuccess: () => {
-
                 queryClient.invalidateQueries('account')
                 handleClose();
             }
@@ -39,7 +40,7 @@ const LanguageMenu = () => {
         mutation.mutate(localeCode);
     }
 
-    const accountInfo =  fetchAccount();
+    const accountInfo = fetchAccount();
     return (
         <span>
             <Tooltip title={intl.formatMessage({ id: 'language.change', defaultMessage: 'Change Language' })}>
@@ -48,8 +49,9 @@ const LanguageMenu = () => {
                     variant="outlined"
                     disableElevation={true}
                     color="primary"
+                    style={{ borderColor: 'gray', color: 'gray' }}
                     onClick={handleMenu}
-                    startIcon={<TranslateTwoTone />}
+                    startIcon={<TranslateTwoTone style={{ color: 'inherit' }} />}
                 >
                     {accountInfo?.locale?.label}
                 </Button>
@@ -86,10 +88,36 @@ const LanguageMenu = () => {
                 </MenuItem>
                 <Divider />
 
-                <MenuItem onClick={handleOnClick}>
+                <MenuItem onClick={() => { handleClose(); setHelpDialogOpen(true) }} >
-                    <FormattedMessage id="language.help" defaultMessage=" Help to Translate" />
+                    <FormattedMessage id="language.help" defaultMessage="Help to Translate" />
                 </MenuItem>
             </Menu>
+            <HelpUsToTranslateDialog open={helpDialogOpen} onClose={() => setHelpDialogOpen(false)} />
         </span>);
 }
-export default LanguageMenu;
+
+type HelpUsToTranslateDialogProp = {
+    open: boolean,
+    onClose: () => void
+}
+const HelpUsToTranslateDialog = ({ open, onClose }: HelpUsToTranslateDialogProp) => {
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+        >
+            <DialogTitle>Help us to Translate !</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    We need your help !. You could help us to support more languages. If you are interested, send us an email to team@wisemapping.com.
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={onClose}>Close</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export default LanguageMenu;