Fix dialog missing msg.

2024-11-22 06:37:56 +01:00 · 2021-01-27 17:27:19 -08:00 · 2021-01-27 17:27:19 -08:00 · 1b7f172518
commit 1b7f172518
parent 2a6782f165
18 changed files with 456 additions and 267 deletions
--- a/packages/webapp/lang/en.json
+++ b/packages/webapp/lang/en.json
@ -2,6 +2,9 @@
  "action.cancel-button": {
    "defaultMessage": "Cancel"
  },
+  "action.close-button": {
+    "defaultMessage": "Close"
+  },
  "action.delete": {
    "defaultMessage": "Delete"
  },
@ -20,6 +23,9 @@
  "action.info": {
    "defaultMessage": "Info"
  },
+  "action.info-title": {
+    "defaultMessage": "Info"
+  },
  "action.open": {
    "defaultMessage": "Open"
  },
@ -38,6 +44,9 @@
  "common.wait": {
    "defaultMessage": "Please wait ..."
  },
+  "duplicate.title": {
+    "defaultMessage": "Duplicate"
+  },
  "footer.aboutus": {
    "defaultMessage": "About Us"
  },
@ -126,6 +135,12 @@
  "registration.title": {
    "defaultMessage": "Become a member"
  },
+  "rename.description": {
+    "defaultMessage": "Please, fill the new map name and description."
+  },
+  "rename.title": {
+    "defaultMessage": "Rename"
+  },
  "resetpassword.success.title": {
    "defaultMessage": "Your account has been created successfully"
  }
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@ -42,7 +42,7 @@
        "webpack-dev-server": "^3.11.0"
    },
    "dependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.11.1",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.57",
        "@reduxjs/toolkit": "^1.5.0",
@ -57,4 +57,4 @@
        "react-router-dom": "^5.2.0",
        "styled-components": "^5.1.7"
    }
-}
+}
--- a/packages/webapp/src/compiled-lang/en.json
+++ b/packages/webapp/src/compiled-lang/en.json
@ -5,6 +5,12 @@
      "value": "Cancel"
    }
  ],
+  "action.close-button": [
+    {
+      "type": 0,
+      "value": "Close"
+    }
+  ],
  "action.delete": [
    {
      "type": 0,
@ -41,6 +47,12 @@
      "value": "Info"
    }
  ],
+  "action.info-title": [
+    {
+      "type": 0,
+      "value": "Info"
+    }
+  ],
  "action.open": [
    {
      "type": 0,
@ -77,6 +89,12 @@
      "value": "Please wait ..."
    }
  ],
+  "duplicate.title": [
+    {
+      "type": 0,
+      "value": "Duplicate"
+    }
+  ],
  "footer.aboutus": [
    {
      "type": 0,
@ -251,6 +269,18 @@
      "value": "Become a member"
    }
  ],
+  "rename.description": [
+    {
+      "type": 0,
+      "value": "Please, fill the new map name and description."
+    }
+  ],
+  "rename.title": [
+    {
+      "type": 0,
+      "value": "Rename"
+    }
+  ],
  "resetpassword.success.title": [
    {
      "type": 0,
--- a/packages/webapp/src/compiled-lang/es.json
+++ b/packages/webapp/src/compiled-lang/es.json
@ -1,78 +1,116 @@
 {
-    "footer.aboutus": [{
-        "type": 0,
-        "value": "Sobre Nosotros"
-    }],
-    "footer.contactus": [{
-        "type": 0,
-        "value": "Contáctenos"
-    }],
-    "footer.donations": [{
-        "type": 0,
-        "value": "Donaciones"
-    }],
-    "footer.faq": [{
-        "type": 0,
-        "value": "Preguntas Frecuentes"
-    }],
-    "footer.feedback": [{
-        "type": 0,
-        "value": "Feedback"
-    }],
-    "footer.opensource": [{
-        "type": 0,
-        "value": "Open Source"
-    }],
-    "footer.termsandconditions": [{
-        "type": 0,
-        "value": "Terminos y Condiciones"
-    }],
-    "header.donthaveaccount": [{
-        "type": 0,
-        "value": "No tienes una cuenta ?"
-    }],
-    "login.email": [{
-        "type": 0,
-        "value": "Email"
-    }],
-    "login.error": [{
-        "type": 0,
-        "value": "El email o la contraseña no es valida."
-    }],
-    "login.forgotpwd": [{
-        "type": 0,
-        "value": "Olvidaste la contraseña ?"
-    }],
-    "login.hsqldbcofig": [{
-        "type": 0,
-        "value": "Warning: Although HSQLDB is bundled with WiseMapping by default during the installation, we do not recommend this database for production use. Please consider using MySQL 5.7 instead. You can find more information how to configure MySQL"
-    }],
-    "login.loginto": [{
-        "type": 0,
-        "value": "Ingresar a tu Cuenta"
-    }],
-    "login.password": [{
-        "type": 0,
-        "value": "Contraseña"
-    }],
-    "login.remberme": [{
-        "type": 0,
-        "value": "Recordarme"
-    }],
-    "login.signin": [{
-        "type": 0,
-        "value": "Ingresar"
-    }],
-    "login.signup": [{
-        "type": 0,
-        "value": "Registrarse"
-    }],
-    "login.userinactive": [{
-        "type": 0,
-        "value": "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!."
-    }],
-    "login.welcome": [{
-        "type": 0,
-        "value": "Bienvenido"
-    }]
+  "footer.aboutus": [
+    {
+      "type": 0,
+      "value": "Sobre Nosotros"
+    }
+  ],
+  "footer.contactus": [
+    {
+      "type": 0,
+      "value": "Contáctenos"
+    }
+  ],
+  "footer.donations": [
+    {
+      "type": 0,
+      "value": "Donaciones"
+    }
+  ],
+  "footer.faq": [
+    {
+      "type": 0,
+      "value": "Preguntas Frecuentes"
+    }
+  ],
+  "footer.feedback": [
+    {
+      "type": 0,
+      "value": "Feedback"
+    }
+  ],
+  "footer.opensource": [
+    {
+      "type": 0,
+      "value": "Open Source"
+    }
+  ],
+  "footer.termsandconditions": [
+    {
+      "type": 0,
+      "value": "Terminos y Condiciones"
+    }
+  ],
+  "header.donthaveaccount": [
+    {
+      "type": 0,
+      "value": "No tienes una cuenta ?"
+    }
+  ],
+  "login.email": [
+    {
+      "type": 0,
+      "value": "Email"
+    }
+  ],
+  "login.error": [
+    {
+      "type": 0,
+      "value": "El email o la contraseña no es valida."
+    }
+  ],
+  "login.forgotpwd": [
+    {
+      "type": 0,
+      "value": "Olvidaste la contraseña ?"
+    }
+  ],
+  "login.hsqldbcofig": [
+    {
+      "type": 0,
+      "value": "Warning: Although HSQLDB is bundled with WiseMapping by default during the installation, we do not recommend this database for production use. Please consider using MySQL 5.7 instead. You can find more information how to configure MySQL"
+    }
+  ],
+  "login.loginto": [
+    {
+      "type": 0,
+      "value": "Ingresar a tu Cuenta"
+    }
+  ],
+  "login.password": [
+    {
+      "type": 0,
+      "value": "Contraseña"
+    }
+  ],
+  "login.remberme": [
+    {
+      "type": 0,
+      "value": "Recordarme"
+    }
+  ],
+  "login.signin": [
+    {
+      "type": 0,
+      "value": "Ingresar"
+    }
+  ],
+  "login.signup": [
+    {
+      "type": 0,
+      "value": "Registrarse"
+    }
+  ],
+  "login.userinactive": [
+    {
+      "type": 0,
+      "value": "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!."
+    }
+  ],
+  "login.welcome": [
+    {
+      "type": 0,
+      "value": "Bienvenido"
+    }
+  ]
 }
--- a/packages/webapp/src/components/layout/form-container/styled.ts
+++ b/packages/webapp/src/components/layout/form-container/styled.ts
--- a/packages/webapp/src/components/maps-page/action-chooser/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-chooser/index.tsx
@ -9,10 +9,10 @@ import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined';
 import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined';
 import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
-import { StyledMenuItem } from '../maps-list/styled';
+import { StyledMenuItem } from './styled';
 import { FormattedMessage } from 'react-intl';

-export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'print' | 'info' | 'publish' | undefined;
+export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'print' | 'info' | 'publish' | 'history'| undefined;

 interface ActionProps {
  onClose: (action: ActionType) => void;
@ -36,6 +36,7 @@ const ActionChooser = (props: ActionProps) => {
      keepMounted
      open={Boolean(anchor)}
      onClose={handleOnClose(undefined)}
+
    >
      <StyledMenuItem onClick={handleOnClose('open')}>
        <DescriptionOutlinedIcon /><FormattedMessage id="action.open" defaultMessage="Open" />
@ -70,6 +71,11 @@ const ActionChooser = (props: ActionProps) => {
      <MenuItem onClick={handleOnClose('info')}>
        <InfoOutlinedIcon /><FormattedMessage id="action.info" defaultMessage="Info" />
      </MenuItem>
+     
+      <MenuItem onClick={handleOnClose('history')}>
+        <DeleteOutlinedIcon /><FormattedMessage id="action.delete" defaultMessage="History" />
+      </MenuItem>
+
    </Menu>);
 }

--- a/packages/webapp/src/components/maps-page/action-chooser/styled.ts
+++ b/packages/webapp/src/components/maps-page/action-chooser/styled.ts
@ -0,0 +1,10 @@
+import { MenuItem, withStyles } from "@material-ui/core";
+
+export const StyledMenuItem = withStyles({
+    root: {
+      width: '300px',
+      padding: '10px 20px',
+      marging: '0px 20px'
+    }
+  })(MenuItem)
+  
--- a/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
@ -1,6 +1,6 @@
 import React from "react";
-import { Button, DialogContentText, DialogTitle } from "@material-ui/core";
-import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
+import { Button, DialogContentText } from "@material-ui/core";
+import { FormattedMessage, useIntl } from "react-intl";
 import { ErrorInfo } from "../../../../services/Service";
 import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
 import GlobalError from "../../../form/global-error";
@ -12,9 +12,9 @@ export type DialogProps = {
    children: any;
    error?: ErrorInfo;

-    title: MessageDescriptor;
-    description?: MessageDescriptor;
-    submitButton?: MessageDescriptor;
+    title: string;
+    description?: string;
+    submitButton?: string; 
 }

 const BaseDialog = (props: DialogProps) => {
@ -23,7 +23,7 @@ const BaseDialog = (props: DialogProps) => {
    const isOpen = props.open;
    const handleOnSubmit = props.onSubmit;

-    const description = props.description ? (<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>) : null;
+    const description = props.description ? (<DialogContentText>{props.description}</DialogContentText>) : null;

    return (
        <div>
@ -34,7 +34,7 @@ const BaseDialog = (props: DialogProps) => {
                fullWidth={true}>
                <form autoComplete="off" onSubmit={handleOnSubmit}>
                    <StyledDialogTitle>
-                        {intl.formatMessage(props.title)}
+                        {props.title}
                    </StyledDialogTitle>

                    <StyledDialogContent>
@ -49,7 +49,7 @@ const BaseDialog = (props: DialogProps) => {
                        </Button>
                        {handleOnSubmit ? (
                            <Button color="primary" size="medium" variant="contained" type="submit" disableElevation={true}>
-                                {intl.formatMessage(props.title)}
+                                {props.title}
                            </Button>) : null
                        }
                    </StyledDialogActions>
--- a/packages/webapp/src/components/maps-page/action-dispatcher/delete/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/delete/index.tsx
@ -10,6 +10,8 @@ import BaseDialog from "../action-dialog";


 const DeleteDialog = (props: DialogProps) => {
+  const intl = useIntl();
+
  const service: Service = useSelector(activeInstance);
  const queryClient = useQueryClient();
  const mutation = useMutation((id: number) => service.deleteMap(id),
@ -33,8 +35,8 @@ const DeleteDialog = (props: DialogProps) => {
    <div>
      <BaseDialog
        open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
-        title={{ id: "action.delete-title", defaultMessage: "Delete" }} 
-        submitButton={{ id: "action.delete-title", defaultMessage: "Delete" }} >
+        title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} 
+        submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} >
        <Alert severity="warning">
          <AlertTitle>Delete '{map?.name}'</AlertTitle>
          <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
--- a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/duplicate/index.tsx
@ -2,10 +2,11 @@ import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
+import { FormControl } from "@material-ui/core";
+
 import { BasicMapInfo, ErrorInfo, Service } from "../../../../services/Service";
 import { activeInstance } from '../../../../reducers/serviceSlice';
 import Input from "../../../form/input";
-import { FormControl } from "@material-ui/core";
 import { DialogProps, fetchMapById, handleOnMutationSuccess } from "..";
 import BaseDialog from "../action-dialog";

@ -71,10 +72,10 @@ const DuplicateDialog = (props: DialogProps) => {
    return (
        <div>
            <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
-                title={{ id: 'duplicate.title', defaultMessage: 'Duplicate' }}
-                description={{ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' }}
-                submitButton={{ id: 'duplicate.title', defaultMessage: 'Duplicate' }}>
-
+                title={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}
+                description={intl.formatMessage({ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' })}
+                submitButton={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}>
+ 
                <FormControl fullWidth={true}>
                    <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
                        value={model.name} onChange={handleOnChange} error={error} fullWidth={true} />
--- a/packages/webapp/src/components/maps-page/action-dispatcher/info/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/info/index.tsx
@ -5,12 +5,14 @@ import { Service } from "../../../../services/Service";
 import { activeInstance } from '../../../../reducers/serviceSlice';
 import { DialogProps, fetchMapById } from "..";
 import BaseDialog from "../action-dialog";
+import { useIntl } from "react-intl";


 const InfoDialog = (props: DialogProps) => {
  const service: Service = useSelector(activeInstance);
  const queryClient = useQueryClient();
- 
+  const intl = useIntl();
+

  const mapId = props.mapId;
  const handleOnClose = (): void => {
@ -22,7 +24,7 @@ const InfoDialog = (props: DialogProps) => {
    <div>
      <BaseDialog
        open={props.open} onClose={handleOnClose}
-        title={{ id: "action.info-title", defaultMessage: "Info" }}>
+        title={intl.formatMessage({ id: "action.info-title", defaultMessage: "Info" })}>

        <iframe src="http://www.clarin.com" style={{width:'100%',height:'400px'}}/>

--- a/packages/webapp/src/components/maps-page/action-dispatcher/rename/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/rename/index.tsx
@ -71,9 +71,9 @@ const RenameDialog = (props: DialogProps) => {
    return (
        <div>
            <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
-                title={{ id: 'rename.title', defaultMessage: 'Rename' }}
-                description={{ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' }}
-                submitButton={{ id: 'rename.title', defaultMessage: 'Rename' }}>
+                title={intl.formatMessage({ id: 'rename.title', defaultMessage: 'Rename' })}
+                description={intl.formatMessage({ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' })}
+                submitButton={intl.formatMessage({ id: 'rename.title', defaultMessage: 'Rename' })}>

                <FormControl fullWidth={true}>
                    <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@ -10,11 +10,11 @@ import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
-import { MapsList } from './maps-list';
 import { ListItemTextStyled, useStyles } from './style';
-import { AddTwoTone, BlurCircular, DeleteOutlineTwoTone, LabelTwoTone, PublicTwoTone, ShareTwoTone, StarRateTwoTone } from '@material-ui/icons';
+import { AccountCircle, AddTwoTone, BlurCircular, DeleteOutlineTwoTone, LabelTwoTone, PublicTwoTone, PublishTwoTone, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons';
 import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
-import { Button, ListItemSecondaryAction } from '@material-ui/core';
+import { Button, ListItemSecondaryAction, Tooltip } from '@material-ui/core';
+import { MapsList } from './maps-list';

 type FilterType = 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned'

@ -44,107 +44,127 @@ const MapsPage = (props: any) => {


    return (
-            <div className={classes.root}>
-                <AppBar
-                    position="fixed"
-                    className={clsx(classes.appBar, {
-                        [classes.appBarShift]: open,
-                    })}>
-                    <Toolbar>
-                            <IconButton
-                            color="inherit"
-                            aria-label="open drawer"
-                            onClick={handleDrawerOpen}
-                            edge="start"
-                            className={clsx(classes.menuButton, {
-                                [classes.hide]: open,
-                            })}>
-                            <MenuIcon />
-                        </IconButton>
+        <div className={classes.root}>
+            <AppBar
+                position="fixed"
+                className={clsx(classes.appBar, {
+                    [classes.appBarShift]: open,
+                })}>
+                <Toolbar variant="regular">
+                    <IconButton color="inherit" onClick={handleDrawerOpen} edge="start"
+                        className={clsx(classes.menuButton, {
+                            [classes.hide]: open,
+                        })}>
+                        <MenuIcon />
+                    </IconButton>

-                        <Button color="primary" size="medium" variant="contained" type="button" 
-                        disableElevation={true} startIcon={<AddTwoTone />}>
+                    <Tooltip title="Create a New Map">
+                        <Button color="primary" size="medium" variant="contained" type="button"
+                            disableElevation={true} startIcon={<AddTwoTone />} className={classes.newMapButton}>
                            New Map
                        </Button>
-                    </Toolbar>
-                </AppBar>
+                    </Tooltip>

-                <Drawer
-                    variant="permanent"
-                    className={clsx(classes.drawer, {
-                        [classes.drawerOpen]: open,
-                        [classes.drawerClose]: !open,
-                    })}
-                    classes={{
-                        paper: clsx({
-                            [classes.drawerOpen]: open,
-                            [classes.drawerClose]: !open,
-                        }),
-                    }}>
-                    <div className={classes.toolbar}>
-                        <IconButton onClick={handleDrawerClose}>
-                            {<ChevronLeftIcon />}
+                    <Tooltip title="Import from other mindmap tools">
+                        <Button color="primary" size="medium" variant="outlined" type="button"
+                            disableElevation={true} startIcon={<PublishTwoTone />} className={classes.importButton}>
+                            Import
+                    </Button>
+                    </Tooltip>
+
+
+                    <div className={classes.rightButtonGroup}>
+                        <IconButton
+                            aria-label="account of current user"
+                            aria-controls="menu-appbar"
+                            aria-haspopup="true"
+                        // onClick={handleMenu}
+                        >
+                            <AccountCircle fontSize="large" />
                        </IconButton>
                    </div>
-                    <Divider />

-                    <List component="nav">

-                        <ListItem button >
-                            <ListItemIcon>
-                                <InboxTwoToneIcon color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="All" />
-                        </ListItem>

-                        <ListItem button >
-                            <ListItemIcon>
-                                <BlurCircular color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Owned" />
-                        </ListItem>
+                </Toolbar>
+            </AppBar>

-                        <ListItem button >
-                            <ListItemIcon>
-                                <StarRateTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Starred" />
-                        </ListItem>
+            <Drawer
+                variant="permanent"
+                className={clsx(classes.drawer, {
+                    [classes.drawerOpen]: open,
+                    [classes.drawerClose]: !open,
+                })}
+                classes={{
+                    paper: clsx({
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
+                    }),
+                }}>
+                <div className={classes.toolbar}>
+                    <IconButton onClick={handleDrawerClose}>
+                        {<ChevronLeftIcon />}
+                    </IconButton>
+                </div>
+                <Divider />

-                        <ListItem button >
-                            <ListItemIcon>
-                                <ShareTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Shared With Me" />
-                        </ListItem>
+                <List component="nav">

-                        <ListItem button >
-                            <ListItemIcon>
-                                <PublicTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Public" />
-                        </ListItem>
+                    <ListItem button >
+                        <ListItemIcon>
+                            <InboxTwoToneIcon color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="All" />
+                    </ListItem>

-                        <ListItem button >
-                            <ListItemIcon>
-                                <LabelTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Some label>" />
-                            <ListItemSecondaryAction>
-                                <IconButton edge="end" aria-label="delete">
-                                    <DeleteOutlineTwoTone color="secondary" />
-                                </IconButton>
-                            </ListItemSecondaryAction>
-                        </ListItem>
+                    <ListItem button >
+                        <ListItemIcon>
+                            <BlurCircular color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Owned" />
+                    </ListItem>

-                    </List>
-                </Drawer>
-                <main className={classes.content}>
-                    <div className={classes.toolbar} />
-                    <MapsList />
-                </main>
-            </div>
-        );
+                    <ListItem button >
+                        <ListItemIcon>
+                            <StarRateTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Starred" />
+                    </ListItem>
+
+                    <ListItem button >
+                        <ListItemIcon>
+                            <ShareTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Shared With Me" />
+                    </ListItem>
+
+                    <ListItem button >
+                        <ListItemIcon>
+                            <PublicTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Public" />
+                    </ListItem>
+
+                    <ListItem button >
+                        <ListItemIcon>
+                            <LabelTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Some label>" />
+                        <ListItemSecondaryAction>
+                            <IconButton edge="end" aria-label="delete">
+                                <DeleteOutlineTwoTone color="secondary" />
+                            </IconButton>
+                        </ListItemSecondaryAction>
+                    </ListItem>
+
+                </List>
+            </Drawer>
+            <main className={classes.content}>
+                <div className={classes.toolbar} />
+                <MapsList />
+            </main>
+        </div>
+    );
 }

 export default MapsPage;
--- a/packages/webapp/src/components/maps-page/maps-list/index.tsx
+++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx
@ -1,7 +1,7 @@
-import React, { useEffect } from 'react'
-import { StyledTableCell } from './styled';
+import React from 'react'
+import { useStyles } from './styled';

-import { createStyles, makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@ -23,10 +23,11 @@ import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
 import { activeInstance } from '../../../reducers/serviceSlice';
-import { useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { ErrorInfo, MapInfo, Service } from '../../../services/Service';
 import ActionChooser, { ActionType } from '../action-chooser';
-import ActionDispatcher from '../action-dispatcher';
+import ActionDispatcher, { handleOnMutationSuccess } from '../action-dispatcher';
+import { Link } from '@material-ui/core';



@ -64,7 +65,7 @@ function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
 interface HeadCell {
  disablePadding: boolean;
  id: keyof MapInfo;
-  label: string;
+  label?: string;
  numeric: boolean;
  style: CSSProperties;
 }
@ -72,7 +73,7 @@ interface HeadCell {
 const headCells: HeadCell[] = [
  { id: 'starred', numeric: false, disablePadding: false, label: '', style: { width: '20px', padding: '0px' } },
  { id: 'name', numeric: false, disablePadding: true, label: 'Name', style: {} },
-  { id: 'labels', numeric: false, disablePadding: true, label: 'Labels', style: {} },
+  { id: 'labels', numeric: false, disablePadding: true, style: {} },
  { id: 'creator', numeric: false, disablePadding: false, label: 'Creator', style: {} },
  { id: 'modified', numeric: true, disablePadding: false, label: 'Modified', style: { width: '50px' } }
 ];
@ -96,9 +97,8 @@ function EnhancedTableHead(props: EnhancedTableProps) {

  return (
    <TableHead>
-
      <TableRow>
-        <TableCell padding='checkbox' key='select' style={{ width: '20px' }}>
+        <TableCell padding='checkbox' key='select' style={{ width: '20px' }} className={classes.headerCell}>
          <Checkbox
            indeterminate={numSelected > 0 && numSelected < rowCount}
            checked={rowCount > 0 && numSelected === rowCount}
@ -108,11 +108,12 @@ function EnhancedTableHead(props: EnhancedTableProps) {
          />
        </TableCell>

-        {headCells.map((headCell) => (
-          <TableCell
+        {headCells.map((headCell) => {
+          return headCell.label ? (<TableCell
            key={headCell.id}
            sortDirection={orderBy === headCell.id ? order : false}
            style={headCell.style}
+            className={classes.headerCell}
          >
            <TableSortLabel
              active={orderBy === headCell.id}
@ -125,11 +126,10 @@ function EnhancedTableHead(props: EnhancedTableProps) {
                </span>
              ) : null}
            </TableSortLabel>
-          </TableCell>
-        ))}
-        <TableCell style={{ width: '20px', padding: '0px' }} key='actions'>
-          <TableSortLabel>""</TableSortLabel>
-        </TableCell>
+          </TableCell>) : (<TableCell className={classes.headerCell} key={headCell.id}> </TableCell>)
+        }
+        )}
+        <TableCell style={{ width: '20px', padding: '0px' }} key='actions' className={classes.headerCell}></TableCell>
      </TableRow>
    </TableHead>
  );
@ -163,7 +163,7 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
        </Typography>
      ) : (
          <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
-            Nutrition
+            All
          </Typography>
        )}
      {numSelected > 0 ? (
@ -183,32 +183,6 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
  );
 };

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-    },
-    paper: {
-      width: '100%',
-      marginBottom: theme.spacing(2),
-    },
-    table: {
-      minWidth: 750,
-      border: 0,
-    },
-    visuallyHidden: {
-      border: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1,
-    },
-  }),
-);

 type ActionPanelState = {
  el: HTMLElement | undefined,
@ -295,16 +269,38 @@ export const MapsList = () => {
    };
  };

+  const queryClient = useQueryClient();
+
+  const starredMultation = useMutation<void, ErrorInfo, number>((id: number) => {
+    return service.changeStarred(id);
+  },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('maps');
+      },
+      onError: (error) => {
+        // setError(error);
+      }
+    }
+  );
+
+  const handleStarred = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number) => {
+    event.stopPropagation();
+
+    event.preventDefault();
+    starredMultation.mutate(id);
+  }
+
  const handleActionMenuClose = (action: ActionType): void => {
    if (action) {
      const mapId = activeRowAction?.mapId;

-      setActiveRowAction(undefined);
      setActiveDialog({
        actionType: action as ActionType,
        mapId: mapId as number
      });
    }
+    setActiveRowAction(undefined);
  };

  const isSelected = (id: number) => selected.indexOf(id) !== -1;
@ -313,14 +309,14 @@ export const MapsList = () => {

  return (
    <div className={classes.root}>
-      <Paper className={classes.paper}>
+      <Paper className={classes.paper} elevation={0}>
        <EnhancedTableToolbar numSelected={selected.length} />
+
        <TableContainer>
          <Table
            className={classes.table}
            aria-labelledby="tableTitle"
-            size={'small'}
-            aria-label="sticky table"
+            size="small"
            stickyHeader
          >
            <EnhancedTableHead
@ -332,6 +328,7 @@ export const MapsList = () => {
              onRequestSort={handleRequestSort}
              rowCount={mapsInfo.length}
            />
+
            <TableBody>
              {isLoading ? (<TableRow></TableRow>) : stableSort(mapsInfo, getComparator(order, orderBy))
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
@ -350,35 +347,41 @@ export const MapsList = () => {
                      selected={isItemSelected}
                    >

-                      <StyledTableCell padding="checkbox">
+                      <TableCell padding="checkbox">
                        <Checkbox
                          checked={isItemSelected}
                          inputProps={{ 'aria-labelledby': String(labelId) }}
-                          size="small"
-                        />
-                      </StyledTableCell>
+                          size="small" />
+                      </TableCell>

-                      <StyledTableCell>
+                      <TableCell>
                        <Tooltip title="Starred">
-                          <IconButton aria-label="Starred" size="small" onClick={(e) => { alert("") }}>
+                          <IconButton aria-label="Starred" size="small" onClick={(e) => handleStarred(e, row.id)}>
                            <StarRateRoundedIcon color="action" style={{ color: row.starred ? 'yellow' : 'gray' }} />
                          </IconButton>
                        </Tooltip>
-                      </StyledTableCell>
+                      </TableCell>

-                      <StyledTableCell>{row.name}</StyledTableCell>
-                      <StyledTableCell>{row.labels}</StyledTableCell>
-                      <StyledTableCell>{row.creator}</StyledTableCell>
-                      <StyledTableCell>{row.modified}</StyledTableCell>
+                      <Tooltip title="Open for edition" placement="bottom-start">
+                        <TableCell>
+                          <Link href={`c/maps/${row.id}/edit`} color="textPrimary" underline="always">
+                            {row.name}
+                          </Link>
+                        </TableCell>
+                      </Tooltip>

-                      <StyledTableCell>
+                      <TableCell>{row.labels}</TableCell>
+                      <TableCell>{row.creator}</TableCell>
+                      <TableCell>{row.modified}</TableCell>
+
+                      <TableCell>
                        <Tooltip title="Others">
                          <IconButton aria-label="Others" size="small" onClick={handleActionClick(row.id)}>
                            <MoreHorizIcon color="action" />
                          </IconButton>
                        </Tooltip>
                        <ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} />
-                      </StyledTableCell>
+                      </TableCell>
                    </TableRow>
                  );
                })}
@ -403,6 +406,6 @@ export const MapsList = () => {

      {/* Action Dialog */}
      <ActionDispatcher action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} />
-    </div>
+    </div >
  );
 }
--- a/packages/webapp/src/components/maps-page/maps-list/styled.ts
+++ b/packages/webapp/src/components/maps-page/maps-list/styled.ts
@ -1,18 +1,50 @@
 import { MenuItem, TableCell } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles';

-export const StyledTableCell = withStyles({
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
    root: {
-        color: 'black',
-        padding: '0px',
-        cursor: 'pointer'
-    }
-})(TableCell);
+      width: '100%',
+    },
+    paper: {
+      width: '100%',
+      marginBottom: theme.spacing(2),
+    },
+    table: {
+      minWidth: 750,
+      border: 0,
+      '& tr:nth-child(even)': {
+        background: 'white'
+      },
+      '& tr:nth-child(odd)':
+      {
+        background: 'rgba(221, 221, 221, 0.35)'
+      } 
+    },
+    headerCell: {
+      background: 'white',
+      fontWeight: 'bold',
+      color: 'rgba(0, 0, 0, 0.44)'
+    },
+    visuallyHidden: {
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      height: 1,
+      margin: -1,
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      top: 20,
+      width: 1,
+    },
+  }),
+);

-export const StyledMenuItem = withStyles({
-    root: {
-        width: '300px',
-        padding: '10px 20px',
-        marging: '0px 20px'
-    }
-})(MenuItem)
+// export const StyledTableCell = withStyles({
+//   root: {
+//     color: 'black',
+//     padding: '0px',
+//     cursor: 'pointer',
+//     border: '0'
+//   }
+// })(TableCell);
--- a/packages/webapp/src/components/maps-page/style.ts
+++ b/packages/webapp/src/components/maps-page/style.ts
@ -28,6 +28,17 @@ export const useStyles = makeStyles((theme: Theme) =>
        menuButton: {
            marginRight: 36,
        },
+        newMapButton: {
+            marginRight: 10,
+        },
+        importButton: {
+            marginRight: 10,
+        },
+        rightButtonGroup: {
+            marginRight: 10,
+            flexGrow: 10,
+            textAlign: 'right'
+        },
        hide: {
            display: 'none',
        },
@ -66,12 +77,11 @@ export const useStyles = makeStyles((theme: Theme) =>
        content: {
            flexGrow: 1,
            padding: theme.spacing(3),
-        },
-        listItemText: {
        }
    }),
 );

+
 export const ListItemTextStyled = withStyles({
    root:
    {
--- a/packages/webapp/src/services/Service.ts
+++ b/packages/webapp/src/services/Service.ts
@ -42,6 +42,7 @@ interface Service {
    renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
    duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
    loadMapInfo(id: number): Promise<BasicMapInfo>;
+    changeStarred(id: number): Promise<void>;
 }

 class MockService implements Service {
@ -71,6 +72,17 @@ class MockService implements Service {
        ];
    }

+    changeStarred(id: number): Promise<void> {
+        const mapInfo = this.maps.find(m => m.id == id);
+        if (!mapInfo) {
+            console.log(`Could not find the map iwth id ${id}`);
+            return Promise.reject();
+        }
+        const newStarredValue = !mapInfo?.starred;
+        mapInfo.starred = newStarredValue;
+
+        return Promise.resolve();
+    }

    loadMapInfo(id: number): Promise<BasicMapInfo> {
        return Promise.resolve({ name: 'My Map', description: 'My Description' });
@ -100,6 +112,7 @@ class MockService implements Service {
            })
        };
    }
+   
    duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<void> {

        const exists = this.maps.find(m => m.name == basicInfo.name) != undefined;
--- a/packages/webapp/src/theme/index.ts
+++ b/packages/webapp/src/theme/index.ts
@ -12,6 +12,13 @@ const GlobalStyle = createGlobalStyle`

 const theme = createMuiTheme({
    overrides: {
+        MuiCssBaseline: {
+            '@global': {
+                body: {
+                  backgroundColor: 'white',
+                },
+              },
+        },
        MuiOutlinedInput: {
            root: {
                height: '53px',