From 3552f33ee1f03a1f21894858bb21e1e9e707cddf Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Wed, 13 Jan 2021 19:46:45 -0800
Subject: [PATCH] Improve dialog styles

---
 packages/webapp/lang/en.json                  | 44 +---------
 packages/webapp/src/compiled-lang/en.json     | 86 +------------------
 .../components/form/global-error/styled.ts    |  3 +-
 .../src/components/form/input/index.tsx       | 15 ++--
 .../src/components/form/input/styles.ts       |  3 -
 .../src/components/login-page/index.tsx       | 40 +++++----
 .../src/components/login-page/styled.ts       |  1 -
 .../index.tsx}                                |  6 +-
 .../DialogCommon.ts                           |  0
 .../action-dialog/index.tsx}                  | 39 +++++----
 .../action-dialog/style.ts                    | 58 +++++++++++++
 .../delete/index.tsx}                         | 13 ++-
 .../index.tsx}                                | 13 ++-
 .../rename/index.tsx}                         | 29 ++++---
 .../webapp/src/components/maps-page/index.tsx | 41 +++++----
 .../webapp/src/components/maps-page/styled.ts |  5 +-
 .../components/registration-page/index.tsx    | 42 ++++-----
 packages/webapp/src/theme/global-style.ts     | 33 +++++--
 18 files changed, 212 insertions(+), 259 deletions(-)
 rename packages/webapp/src/components/maps-page/{MapActionMenu.tsx => action-chooser/index.tsx} (95%)
 rename packages/webapp/src/components/maps-page/{dialogs => action-dialog-dispatcher}/DialogCommon.ts (100%)
 rename packages/webapp/src/components/maps-page/{dialogs/Dialog.tsx => action-dialog-dispatcher/action-dialog/index.tsx} (52%)
 create mode 100644 packages/webapp/src/components/maps-page/action-dialog-dispatcher/action-dialog/style.ts
 rename packages/webapp/src/components/maps-page/{dialogs/DeleteDialog.tsx => action-dialog-dispatcher/delete/index.tsx} (81%)
 rename packages/webapp/src/components/maps-page/{dialogs/ActionDialog.tsx => action-dialog-dispatcher/index.tsx} (64%)
 rename packages/webapp/src/components/maps-page/{dialogs/RenameDialog.tsx => action-dialog-dispatcher/rename/index.tsx} (68%)

diff --git a/packages/webapp/lang/en.json b/packages/webapp/lang/en.json
index 1e276f4b..66a22631 100644
--- a/packages/webapp/lang/en.json
+++ b/packages/webapp/lang/en.json
@@ -5,15 +5,9 @@
   "action.delete": {
     "defaultMessage": "Delete"
   },
-  "action.delete-button": {
-    "defaultMessage": "Delete"
-  },
   "action.delete-description": {
     "defaultMessage": "Deleted mindmap can not be recovered. Do you want to continue ?."
   },
-  "action.delete-title": {
-    "defaultMessage": "Delete"
-  },
   "action.duplicate": {
     "defaultMessage": "Duplicate"
   },
@@ -32,21 +26,6 @@
   "action.rename": {
     "defaultMessage": "Rename"
   },
-  "action.rename-button": {
-    "defaultMessage": "Rename"
-  },
-  "action.rename-description": {
-    "defaultMessage": "Please, update the name and description for your mindmap."
-  },
-  "action.rename-description-placeholder": {
-    "defaultMessage": "Description"
-  },
-  "action.rename-name-placeholder": {
-    "defaultMessage": "Name"
-  },
-  "action.rename-title": {
-    "defaultMessage": "Rename"
-  },
   "action.share": {
     "defaultMessage": "Info"
   },
@@ -80,9 +59,6 @@
   "forgot.desc": {
     "defaultMessage": "We will send you an email to reset your password"
   },
-  "forgot.email": {
-    "defaultMessage": "Email"
-  },
   "forgot.register": {
     "defaultMessage": "Send recovery link"
   },
@@ -104,9 +80,6 @@
   "login.desc": {
     "defaultMessage": "Log into your account"
   },
-  "login.email": {
-    "defaultMessage": "Email"
-  },
   "login.error": {
     "defaultMessage": "The email address or password you entered is not valid."
   },
@@ -117,9 +90,6 @@
     "defaultMessage": "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",
     "description": "Missing production database configured"
   },
-  "login.password": {
-    "defaultMessage": "Password"
-  },
   "login.remberme": {
     "defaultMessage": "Remember me"
   },
@@ -138,18 +108,6 @@
   "registration.desc": {
     "defaultMessage": "Signing up is free and just take a moment"
   },
-  "registration.email": {
-    "defaultMessage": "Email"
-  },
-  "registration.firstname": {
-    "defaultMessage": "First Name"
-  },
-  "registration.lastname": {
-    "defaultMessage": "Last Name"
-  },
-  "registration.password": {
-    "defaultMessage": "Password"
-  },
   "registration.register": {
     "defaultMessage": "Register"
   },
@@ -160,7 +118,7 @@
     "defaultMessage": "Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy"
   },
   "registration.title": {
-    "defaultMessage": "Become a member of our comunity"
+    "defaultMessage": "Become a member"
   },
   "resetpassword.success.title": {
     "defaultMessage": "Your account has been created successfully"
diff --git a/packages/webapp/src/compiled-lang/en.json b/packages/webapp/src/compiled-lang/en.json
index 0cec10e1..d9ddd55e 100644
--- a/packages/webapp/src/compiled-lang/en.json
+++ b/packages/webapp/src/compiled-lang/en.json
@@ -11,24 +11,12 @@
       "value": "Delete"
     }
   ],
-  "action.delete-button": [
-    {
-      "type": 0,
-      "value": "Delete"
-    }
-  ],
   "action.delete-description": [
     {
       "type": 0,
       "value": "Deleted mindmap can not be recovered. Do you want to continue ?."
     }
   ],
-  "action.delete-title": [
-    {
-      "type": 0,
-      "value": "Delete"
-    }
-  ],
   "action.duplicate": [
     {
       "type": 0,
@@ -65,36 +53,6 @@
       "value": "Rename"
     }
   ],
-  "action.rename-button": [
-    {
-      "type": 0,
-      "value": "Rename"
-    }
-  ],
-  "action.rename-description": [
-    {
-      "type": 0,
-      "value": "Please, update the name and description for your mindmap."
-    }
-  ],
-  "action.rename-description-placeholder": [
-    {
-      "type": 0,
-      "value": "Description"
-    }
-  ],
-  "action.rename-name-placeholder": [
-    {
-      "type": 0,
-      "value": "Name"
-    }
-  ],
-  "action.rename-title": [
-    {
-      "type": 0,
-      "value": "Rename"
-    }
-  ],
   "action.share": [
     {
       "type": 0,
@@ -161,12 +119,6 @@
       "value": "We will send you an email to reset your password"
     }
   ],
-  "forgot.email": [
-    {
-      "type": 0,
-      "value": "Email"
-    }
-  ],
   "forgot.register": [
     {
       "type": 0,
@@ -209,12 +161,6 @@
       "value": "Log into your account"
     }
   ],
-  "login.email": [
-    {
-      "type": 0,
-      "value": "Email"
-    }
-  ],
   "login.error": [
     {
       "type": 0,
@@ -233,12 +179,6 @@
       "value": "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.password": [
-    {
-      "type": 0,
-      "value": "Password"
-    }
-  ],
   "login.remberme": [
     {
       "type": 0,
@@ -275,30 +215,6 @@
       "value": "Signing up is free and just take a moment"
     }
   ],
-  "registration.email": [
-    {
-      "type": 0,
-      "value": "Email"
-    }
-  ],
-  "registration.firstname": [
-    {
-      "type": 0,
-      "value": "First Name"
-    }
-  ],
-  "registration.lastname": [
-    {
-      "type": 0,
-      "value": "Last Name"
-    }
-  ],
-  "registration.password": [
-    {
-      "type": 0,
-      "value": "Password"
-    }
-  ],
   "registration.register": [
     {
       "type": 0,
@@ -320,7 +236,7 @@
   "registration.title": [
     {
       "type": 0,
-      "value": "Become a member of our comunity"
+      "value": "Become a member"
     }
   ],
   "resetpassword.success.title": [
diff --git a/packages/webapp/src/components/form/global-error/styled.ts b/packages/webapp/src/components/form/global-error/styled.ts
index 365f3588..2080643b 100644
--- a/packages/webapp/src/components/form/global-error/styled.ts
+++ b/packages/webapp/src/components/form/global-error/styled.ts
@@ -5,8 +5,7 @@ import { Alert } from "@material-ui/lab";
 export const StyledAlert = withStyles({
     root:
     {
-        width: '300px',
-        margin:'0 auto'
+
     }
 })(Alert);
 
diff --git a/packages/webapp/src/components/form/input/index.tsx b/packages/webapp/src/components/form/input/index.tsx
index 9a2ecacc..23015de5 100644
--- a/packages/webapp/src/components/form/input/index.tsx
+++ b/packages/webapp/src/components/form/input/index.tsx
@@ -13,6 +13,7 @@ type InputProps = {
     type: string;
     value?: string
     autoComplete?: string;
+    fullWidth?: boolean
 }
 
 const Input = (props: InputProps) => {
@@ -22,16 +23,16 @@ const Input = (props: InputProps) => {
     const name = props.name;
     const value = props.value;
     const onChange = props.onChange ? props.onChange : () => { };
-    const fieldError = error?.fields?.get(name);
+    const fieldError = Boolean(error?.fields?.get(name));
     const required = props.required != undefined ? props.required : true;
+    const fullWidth = props.fullWidth != undefined ? props.required : true;
 
     return (
-        <FormControl margin="normal" required={required} fullWidth>
-            <StyledTextField name={name} type={props.type} label={intl.formatMessage(props.label)}
-                value={value} onChange={onChange}
-                error={Boolean(fieldError)} helperText={fieldError}
-                variant="outlined" required={required} />
-        </FormControl>
+        <StyledTextField name={name} type={props.type} label={intl.formatMessage(props.label)}
+            value={value} onChange={onChange}
+            error={fieldError} helperText={fieldError}
+            variant="outlined" required={required} fullWidth={fullWidth} margin="dense"/>
+
     );
 }
 export default Input;
\ No newline at end of file
diff --git a/packages/webapp/src/components/form/input/styles.ts b/packages/webapp/src/components/form/input/styles.ts
index 0b08f342..207799f4 100644
--- a/packages/webapp/src/components/form/input/styles.ts
+++ b/packages/webapp/src/components/form/input/styles.ts
@@ -3,13 +3,10 @@ import { TextField, withStyles } from "@material-ui/core";
 export const StyledTextField = withStyles({
     root:
     {
-        margin: '0 auto',
-
         '& label.Mui-focused': {
             color: '#f9a826',
         },
         '& .MuiOutlinedInput-root': {
-            width: '300px',
             height: '53px',
             borderRadius: '9px',
             fontSize: '16px',
diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx
index 0ea49288..34638ade 100644
--- a/packages/webapp/src/components/login-page/index.tsx
+++ b/packages/webapp/src/components/login-page/index.tsx
@@ -8,6 +8,7 @@ import Footer from '../layout/footer'
 import SubmitButton from '../form/submit-button'
 import Input from '../form/input';
 import GlobalError from '../form/global-error';
+import { FormControl } from '@material-ui/core';
 
 
 const ConfigStatusMessage = (props: any) => {
@@ -29,16 +30,17 @@ const LoginError = () => {
   const errorCode = new URLSearchParams(window.location.search).get('login_error');
   const intl = useIntl();
 
-  let msg;
+  let msg: null | string = null;
   if (errorCode) {
-    if (errorCode === "3") {
-      msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!." });
-    } else {
-      msg = intl.formatMessage({ id: "login.error", defaultMessage: "The email address or password you entered is  not valid." });
+    switch (errorCode) {
+      case "3":
+        msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!." });
+        break;
+      default:
+        msg = intl.formatMessage({ id: "login.error", defaultMessage: "The email address or password you entered is  not valid." });
     }
   }
-  <GlobalError error={{msg: msg}} />
-  return null;
+  return (msg ? <GlobalError error={{ msg: msg }} /> : null);
 }
 
 
@@ -59,20 +61,20 @@ const LoginPage = () => {
 
         <LoginError />
 
-        <form action="/c/perform-login" method="POST">
-          <Input name="email" type="email" label={{ id: "login.email", defaultMessage: "Email" }} required={true} autoComplete="email" />
-          <Input name="password" type="password" label={{ id: "login.password", defaultMessage: "Password" }} required={true} autoComplete="current-password" />
-
-          <div>
-            <input name="_spring_security_login.remberme" id="staySignIn" type="checkbox" />
-            <label htmlFor="staySignIn"><FormattedMessage id="login.remberme" defaultMessage="Remember me" /></label>
-          </div>
-
-          <SubmitButton value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
-        </form>
+        <FormControl>
+          <form action="/c/perform-login" method="POST" >
+            <Input name="email" type="email" label={{ id: "login.email", defaultMessage: "Email" }} required autoComplete="email" />
+            <Input name="password" type="password" label={{ id: "login.password", defaultMessage: "Password" }} required autoComplete="current-password" />
+            <div>
+              <input name="_spring_security_login.remberme" id="staySignIn" type="checkbox" />
+              <label htmlFor="staySignIn"><FormattedMessage id="login.remberme" defaultMessage="Remember me" /></label>
+            </div>
+            <SubmitButton value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
+          </form>
+        </FormControl>
 
         <Link to="/c/forgot-password"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
-        <ConfigStatusMessage enabled='false' />
+        <ConfigStatusMessage />
 
       </PageContent>
 
diff --git a/packages/webapp/src/components/login-page/styled.ts b/packages/webapp/src/components/login-page/styled.ts
index 48eef28f..a882f637 100644
--- a/packages/webapp/src/components/login-page/styled.ts
+++ b/packages/webapp/src/components/login-page/styled.ts
@@ -1,4 +1,3 @@
-import { TextField, withStyles } from '@material-ui/core';
 import styled from 'styled-components';
 
 
diff --git a/packages/webapp/src/components/maps-page/MapActionMenu.tsx b/packages/webapp/src/components/maps-page/action-chooser/index.tsx
similarity index 95%
rename from packages/webapp/src/components/maps-page/MapActionMenu.tsx
rename to packages/webapp/src/components/maps-page/action-chooser/index.tsx
index c0845862..132e0b70 100644
--- a/packages/webapp/src/components/maps-page/MapActionMenu.tsx
+++ b/packages/webapp/src/components/maps-page/action-chooser/index.tsx
@@ -9,7 +9,7 @@ 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 './styled';
+import { StyledMenuItem } from '../styled';
 import { FormattedMessage } from 'react-intl';
 
 export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'print' | 'info' | 'publish' | undefined;
@@ -19,7 +19,7 @@ interface MapActionProps {
   anchor: undefined | HTMLElement;
 }
 
-const MapActionDialog = (props: MapActionProps) => {
+const ActionChooser = (props: MapActionProps) => {
   const { anchor, onClose } = props;
 
   const handleOnClose = (action: ActionType): ((event: React.MouseEvent<HTMLLIElement>) => void) => {
@@ -73,4 +73,4 @@ const MapActionDialog = (props: MapActionProps) => {
     </Menu>);
 }
 
-export default MapActionDialog;
\ No newline at end of file
+export default ActionChooser;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/dialogs/DialogCommon.ts b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/DialogCommon.ts
similarity index 100%
rename from packages/webapp/src/components/maps-page/dialogs/DialogCommon.ts
rename to packages/webapp/src/components/maps-page/action-dialog-dispatcher/DialogCommon.ts
diff --git a/packages/webapp/src/components/maps-page/dialogs/Dialog.tsx b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/action-dialog/index.tsx
similarity index 52%
rename from packages/webapp/src/components/maps-page/dialogs/Dialog.tsx
rename to packages/webapp/src/components/maps-page/action-dialog-dispatcher/action-dialog/index.tsx
index b6ae1536..fa007d36 100644
--- a/packages/webapp/src/components/maps-page/dialogs/Dialog.tsx
+++ b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/action-dialog/index.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { Button, Dialog as DialogUI, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core";
+import { DialogActions, DialogContentText, DialogTitle } from "@material-ui/core";
 import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
-import GlobalError from "../../form/global-error";
-import { ErrorInfo } from "../../../services/Service";
+import { ErrorInfo } from "../../../../services/Service";
+import { ButtonStyled, StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
+import GlobalError from "../../../form/global-error";
 
 export type DialogProps = {
     onClose: () => void;
@@ -16,7 +17,7 @@ export type DialogProps = {
     submitButton: MessageDescriptor;
 }
 
-const Dialog = (props: DialogProps) => {
+const BaseDialog = (props: DialogProps) => {
     const intl = useIntl();
     const handleOnClose = props.onClose;
     const isOpen = props.open;
@@ -26,33 +27,35 @@ const Dialog = (props: DialogProps) => {
 
     return (
         <div>
-            <DialogUI
+            <StyledDialog
                 open={isOpen}
-                onClose={handleOnClose} >
+                onClose={handleOnClose}
+                maxWidth="sm"
+                fullWidth={true}>
                 <form autoComplete="off" onSubmit={handleOnSubmit}>
-                    <DialogTitle>
+                    <StyledDialogTitle>
                         {intl.formatMessage(props.title)}
-                    </DialogTitle>
+                    </StyledDialogTitle>
 
-                    <DialogContent>
+                    <StyledDialogContent>
                         {description}
                         <GlobalError error={props.error} />
                         {props.children}
-                    </DialogContent>
+                    </StyledDialogContent>
 
-                    <DialogActions>
-                        <Button color="primary" variant="outlined" type="submit">
+                    <StyledDialogActions>
+                        <ButtonStyled color="primary" size="medium" variant="outlined" type="submit">
                             {intl.formatMessage(props.title)}
-                        </Button>
+                        </ButtonStyled>
 
-                        <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
+                        <ButtonStyled color="secondary" size="medium" variant="outlined" autoFocus onClick={handleOnClose}>
                             <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
-                        </Button>
-                    </DialogActions>
+                        </ButtonStyled>
+                    </StyledDialogActions>
                 </form>
-            </DialogUI>
+            </StyledDialog>
         </div>
     );
 }
 
-export default Dialog;
\ No newline at end of file
+export default BaseDialog;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/action-dialog-dispatcher/action-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/action-dialog/style.ts
new file mode 100644
index 00000000..4edeadd9
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/action-dialog/style.ts
@@ -0,0 +1,58 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TableCell, withStyles } from "@material-ui/core";
+
+export const StyledDialogContent = withStyles({
+    root: {
+        padding: '0px 39px'
+    }
+})(DialogContent);
+
+export const StyledDialogTitle = withStyles({
+    root: {
+        padding: '39px 39px 10px 39px'
+    }
+})(DialogTitle);
+
+export const StyledDialogActions = withStyles({
+    root: {
+        padding: '39px 39px 39px 39px'
+    }
+})(DialogActions);
+
+export const ButtonStyled = withStyles({
+    root: {
+        textTransform: 'none',
+        fontSize: '15px',
+        fontWeight: 600,
+        width: '196px',
+        padding: '7px 64px 8px 64px',
+        '&:hover': {
+            border: '0'
+        },
+        borderRadius: '9px'
+    },
+    outlinedPrimary: {
+        border: '0',
+        background: '#ffa800',
+        color: 'white',
+        '&:hover': {
+            border: '0',
+            background: 'rgba(249, 168, 38, 0.91)'
+        }
+    },
+    outlinedSecondary: {
+        background: '#white',
+        color: '#ffa800',
+        border: '1px solid #ffa800',
+        '&:hover': {
+            border: '1px solid rgba(249, 168, 38, 0.91)',
+            background: 'white'
+        }
+    }
+})(Button)
+
+
+export const StyledDialog = withStyles({
+    root: {
+        borderRadius: '9px'
+    }
+})(Dialog)
diff --git a/packages/webapp/src/components/maps-page/dialogs/DeleteDialog.tsx b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/delete/index.tsx
similarity index 81%
rename from packages/webapp/src/components/maps-page/dialogs/DeleteDialog.tsx
rename to packages/webapp/src/components/maps-page/action-dialog-dispatcher/delete/index.tsx
index 08ac1203..aaca6221 100644
--- a/packages/webapp/src/components/maps-page/dialogs/DeleteDialog.tsx
+++ b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/delete/index.tsx
@@ -1,13 +1,12 @@
-import { Button, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
-import { Service } from "../../../services/Service";
-import { activeInstance } from '../../../reducers/serviceSlice';
-import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
-import Dialog from "./Dialog";
+import { Service } from "../../../../services/Service";
+import { activeInstance } from '../../../../reducers/serviceSlice';
+import { DialogProps, fetchMapById, handleOnMutationSuccess } from "../DialogCommon";
+import BaseDialog from "../action-dialog";
 
 
 const DeleteDialog = (props: DialogProps) => {
@@ -32,7 +31,7 @@ const DeleteDialog = (props: DialogProps) => {
   const { map } = fetchMapById(mapId);
   return (
     <div>
-      <Dialog
+      <BaseDialog
         open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
         title={{ id: "action.delete-title", defaultMessage: "Delete" }} 
         submitButton={{ id: "action.delete-title", defaultMessage: "Delete" }} >
@@ -41,7 +40,7 @@ const DeleteDialog = (props: DialogProps) => {
           <AlertTitle>Delete '{map?.name}'</AlertTitle>
           <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
         </Alert>
-      </Dialog>
+      </BaseDialog>
     </div>
   );
 }
diff --git a/packages/webapp/src/components/maps-page/dialogs/ActionDialog.tsx b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/index.tsx
similarity index 64%
rename from packages/webapp/src/components/maps-page/dialogs/ActionDialog.tsx
rename to packages/webapp/src/components/maps-page/action-dialog-dispatcher/index.tsx
index 31328e96..2da890d8 100644
--- a/packages/webapp/src/components/maps-page/dialogs/ActionDialog.tsx
+++ b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import RenameDialog from './RenameDialog';
-import DeleteDialog from './DeleteDialog';
+import RenameDialog from './rename';
+import DeleteDialog from './delete';
+import { ActionType } from '../action-chooser';
 
 
 export type BasicMapInfo = {
@@ -8,15 +9,13 @@ export type BasicMapInfo = {
   description: string | undefined;
 }
 
-export type DialogType = 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'publish';
-
 type ActionDialogProps = {
-  action?: DialogType,
+  action?: ActionType,
   mapId: number,
   onClose: () => void
 }
 
-const ActionDialog = (props: ActionDialogProps) => {
+const ActionDialogDispatcher = (props: ActionDialogProps) => {
   const handleOnClose = (): void => {
     props.onClose();
   }
@@ -32,4 +31,4 @@ const ActionDialog = (props: ActionDialogProps) => {
   );
 }
 
-export default ActionDialog;
+export default ActionDialogDispatcher;
diff --git a/packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/rename/index.tsx
similarity index 68%
rename from packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx
rename to packages/webapp/src/components/maps-page/action-dialog-dispatcher/rename/index.tsx
index e92e0e43..75045340 100644
--- a/packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx
+++ b/packages/webapp/src/components/maps-page/action-dialog-dispatcher/rename/index.tsx
@@ -2,11 +2,12 @@ import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
-import { BasicMapInfo, ErrorInfo, Service } from "../../../services/Service";
-import { activeInstance } from '../../../reducers/serviceSlice';
-import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
-import Dialog from "./Dialog";
-import Input from "../../form/input";
+import { BasicMapInfo, ErrorInfo, Service } from "../../../../services/Service";
+import { activeInstance } from '../../../../reducers/serviceSlice';
+import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./../DialogCommon";
+import Input from "../../../form/input";
+import { FormControl } from "@material-ui/core";
+import BaseDialog from "../action-dialog";
 
 export type RenameModel = {
     id: number;
@@ -69,18 +70,20 @@ const RenameDialog = (props: DialogProps) => {
 
     return (
         <div>
-            <Dialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
+            <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
                 title={{ id: 'rename.title', defaultMessage: 'Rename' }}
                 description={{ id: 'rename.description', defaultMessage: 'Rename' }}
                 submitButton={{ id: 'rename.title', defaultMessage: 'Rename Description' }}>
-                
-                <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
-                    value={model.name} onChange={handleOnChange} error={error} />
 
-                <Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
-                    value={model.description} onChange={handleOnChange} required={false} />
-            </Dialog>
-        </div>
+                <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} />
+
+                    <Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
+                        value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />
+                </FormControl>
+            </BaseDialog>
+        </div> 
     );
 }
 
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index b55f6c75..e10406ed 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { PageContainer, MapsListArea, NavArea, HeaderArea, StyledTableCell } from './styled';
 
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme, ThemeProvider } 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';
@@ -21,12 +21,14 @@ import FilterListIcon from '@material-ui/icons/FilterList';
 import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { CSSProperties } from 'react';
-import MapActionMenu, { ActionType } from './MapActionMenu';
-import ActionDialog, { DialogType } from './dialogs/ActionDialog';
 import { useSelector } from 'react-redux';
 import { activeInstance } from '../../reducers/serviceSlice';
 import { useQuery } from 'react-query';
 import { ErrorInfo, MapInfo, Service } from '../../services/Service';
+import { theme } from '../../theme/global-style';
+import { CssBaseline } from '@material-ui/core';
+import ActionChooser, { ActionType } from './action-chooser';
+import ActionDialogDispatcher from './action-dialog-dispatcher';
 
 
 
@@ -234,7 +236,7 @@ const EnhancedTable = () => {
 
   const [activeRowAction, setActiveRowAction] = React.useState<ActionPanelState | undefined>(undefined);
   type ActiveDialog = {
-    actionType: DialogType;
+    actionType: ActionType;
     mapId: number
   };
 
@@ -301,7 +303,7 @@ const EnhancedTable = () => {
 
       setActiveRowAction(undefined);
       setActiveDialog({
-        actionType: action as DialogType,
+        actionType: action as ActionType,
         mapId: mapId as number
       });
     }
@@ -377,7 +379,7 @@ const EnhancedTable = () => {
                             <MoreHorizIcon color="action" />
                           </IconButton>
                         </Tooltip>
-                        <MapActionMenu anchor={activeRowAction?.el} onClose={handleActionMenuClose} />
+                        <ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} />
                       </StyledTableCell>
                     </TableRow>
                   );
@@ -402,7 +404,7 @@ const EnhancedTable = () => {
       </Paper>
 
       {/* Action Dialog */}
-      <ActionDialog action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} />
+      <ActionDialogDispatcher action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} />
     </div>
   );
 }
@@ -416,17 +418,20 @@ const MapsPage = () => {
   }, []);
 
   return (
-    <PageContainer>
-      <HeaderArea>
-        <h2>Header</h2>
-      </HeaderArea>
-      <NavArea>
-        <h1> Nav </h1>
-      </NavArea>
-      <MapsListArea>
-        <EnhancedTable />
-      </MapsListArea>
-    </PageContainer>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <PageContainer>
+        <HeaderArea>
+          <h2>Header</h2>
+        </HeaderArea>
+        <NavArea>
+          <h1> Nav </h1>
+        </NavArea>
+        <MapsListArea>
+          <EnhancedTable />
+        </MapsListArea>
+      </PageContainer>
+    </ThemeProvider>
   );
 }
 export default MapsPage;
diff --git a/packages/webapp/src/components/maps-page/styled.ts b/packages/webapp/src/components/maps-page/styled.ts
index 9cbab58e..743f3499 100644
--- a/packages/webapp/src/components/maps-page/styled.ts
+++ b/packages/webapp/src/components/maps-page/styled.ts
@@ -1,4 +1,4 @@
-import { MenuItem, TableCell } from '@material-ui/core';
+import { Button, Dialog, MenuItem, TableCell } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import styled from 'styled-components';
 
@@ -28,7 +28,6 @@ grid-area: header;
 background-color: blue;
 `
 
-
 export const StyledTableCell = withStyles({
     root: {
         color: 'black',
@@ -43,4 +42,4 @@ export const StyledMenuItem = withStyles({
         padding: '10px 20px',
         marging: '0px 20px'
     }
-})(MenuItem)
\ No newline at end of file
+})(MenuItem)
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index f85fc82b..a8ee646c 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@@ -8,8 +8,8 @@ import Header from '../layout/header';
 import Footer from '../layout/footer';
 
 import { StyledReCAPTCHA } from './styled';
-import { PageContent } from '../../theme/global-style';
-import { FormControl } from '@material-ui/core';
+import { PageContent, theme } from '../../theme/global-style';
+import { CssBaseline, FormControl, ThemeProvider } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import { useMutation } from 'react-query';
 import { activeInstance } from '../../reducers/serviceSlice';
@@ -58,40 +58,40 @@ const RegistrationForm = () => {
 
   return (
     <PageContent>
-      <h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
+      <h1><FormattedMessage id="registration.title" defaultMessage="Become a member" /></h1>
       <p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
 
+      <FormControl>
 
-      <form onSubmit={handleOnSubmit}>
-        <GlobalError error={error} />
-        
-        <Input name="email" type="email" onChange={handleOnChange} label={{ id: "registration.email", defaultMessage: "Email" }}
-          autoComplete="email" />
+        <form onSubmit={handleOnSubmit}>
+          <GlobalError error={error} />
 
-        <Input name="firstname" type="text" onChange={handleOnChange} label={{ id: "registration.firstname", defaultMessage: "First Name" }}
-          autoComplete="given-name" />
+          <Input name="email" type="email" onChange={handleOnChange} label={{ id: "registration.email", defaultMessage: "Email" }}
+            autoComplete="email" />
 
-        <Input name="lastname" type="text" onChange={handleOnChange} label={{ id: "registration.lastname", defaultMessage: "Last Name" }}
-          autoComplete="family-name" />
+          <Input name="firstname" type="text" onChange={handleOnChange} label={{ id: "registration.firstname", defaultMessage: "First Name" }}
+            autoComplete="given-name" />
 
-        <Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
-          autoComplete="new-password" />
+          <Input name="lastname" type="text" onChange={handleOnChange} label={{ id: "registration.lastname", defaultMessage: "Last Name" }}
+            autoComplete="family-name" />
+
+          <Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
+            autoComplete="new-password" />
 
-        <FormControl>
           <StyledReCAPTCHA>
             <ReCAPTCHA
               sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
               onChange={(value: string) => { model.recaptcha = value; setModel(model) }} />
           </StyledReCAPTCHA>
-        </FormControl>
 
-        <div style={{ width: "300px", textAlign: "center", fontSize: "12px", margin: "auto" }}>
-          <FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
-        </div>
+          <div style={{ fontSize: "12px", padding: "5px 0px" }}>
+            <FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
+          </div>
 
-        <input type="submit" value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
+          <input type="submit" value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
+        </form>
+      </FormControl>
 
-      </form>
     </PageContent >
   );
 }
diff --git a/packages/webapp/src/theme/global-style.ts b/packages/webapp/src/theme/global-style.ts
index b4dc1087..d70d9672 100644
--- a/packages/webapp/src/theme/global-style.ts
+++ b/packages/webapp/src/theme/global-style.ts
@@ -1,4 +1,4 @@
-import { TextField, withStyles } from '@material-ui/core';
+import { createMuiTheme, TextField, withStyles } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import styled, { createGlobalStyle } from 'styled-components';
 
@@ -78,11 +78,11 @@ a {
     border: solid 1px #ffa800;
     font-weight: 600;
 }
-
 `;
+
 const PageContent = styled.div`
-max-width: 800px;
-min-height: 400px;
+max-width: 350px;
+min-height: 350px;
 margin: 10px auto;
 text-align:center;
 padding: 20px 10px 20px 10px;
@@ -96,20 +96,21 @@ padding: 20px 10px 20px 10px;
 
 & input[type=submit],
 & input[type=button] {
-    width: 300px;
+    width: 330px;
     height: 53px;
     padding: 0px 20px;
-    margin: 10px 20px;
+    margin: 7px 0px;
     font-size: 20px;
     font-weight: 600;
     border-radius: 9px;
     border: 0px;
-    background-color: rgba(255, 168, 0, 0.6);
+    background-color: #ffa800;
     color: white;
 }
 
 & input[type=submit]:hover {
-    background-color: #f9a826;
+    background-color: rgba(249, 168, 38, 0.91);
+    cursor: pointer
 }
 
 & label {
@@ -144,5 +145,19 @@ padding: 20px 10px 20px 10px;
 }
 `;
 
+const theme = createMuiTheme({
+    typography: {
+        fontFamily: [
+            'Montserrat'
+        ].join(','),
+    }
+});
+
+theme.typography.h6 = {
+    fontSize: '25px',
+    fontWeight: 'bold'
+
+  };
+
+export { GlobalStyle, PageContent, theme };
 
-export { GlobalStyle, PageContent };
\ No newline at end of file