Improve dialog styles

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"

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": [

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);
 

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}
+            error={fieldError} helperText={fieldError}
-                variant="outlined" required={required} />
+            variant="outlined" required={required} fullWidth={fullWidth} margin="dense"/>
-        </FormControl>
+
     );
 }
 export default Input;

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',

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") {
+    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!." });
-    } else {
+        break;
+      default:
         msg = intl.formatMessage({ id: "login.error", defaultMessage: "The email address or password you entered is  not valid." });
     }
   }
-  <GlobalError error={{msg: msg}} />
+  return (msg ? <GlobalError error={{ msg: msg }} /> : null);
-  return null;
 }
 
 
@@ -59,20 +61,20 @@ const LoginPage = () => {
 
         <LoginError />
 
+        <FormControl>
           <form action="/c/perform-login" method="POST" >
-          <Input name="email" type="email" label={{ id: "login.email", defaultMessage: "Email" }} required={true} autoComplete="email" />
+            <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={true} autoComplete="current-password" />
+            <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>
 

packages/webapp/src/components/login-page/styled.ts

@@ -1,4 +1,3 @@
-import { TextField, withStyles } from '@material-ui/core';
 import styled from 'styled-components';
 
 

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;
+export default ActionChooser;

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>
+                    <StyledDialogActions>
-                        <Button color="primary" variant="outlined" type="submit">
+                        <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>
+                        </ButtonStyled>
-                    </DialogActions>
+                    </StyledDialogActions>
                 </form>
-            </DialogUI>
+            </StyledDialog>
         </div>
     );
 }
 
-export default Dialog;
+export default BaseDialog;

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)

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 { Service } from "../../../../services/Service";
-import { activeInstance } from '../../../reducers/serviceSlice';
+import { activeInstance } from '../../../../reducers/serviceSlice';
-import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
+import { DialogProps, fetchMapById, handleOnMutationSuccess } from "../DialogCommon";
-import Dialog from "./Dialog";
+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>
   );
 }

packages/webapp/src/components/maps-page/action-dialog-dispatcher/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import RenameDialog from './RenameDialog';
+import RenameDialog from './rename';
-import DeleteDialog from './DeleteDialog';
+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;

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 { BasicMapInfo, ErrorInfo, Service } from "../../../../services/Service";
-import { activeInstance } from '../../../reducers/serviceSlice';
+import { activeInstance } from '../../../../reducers/serviceSlice';
-import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
+import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./../DialogCommon";
-import Dialog from "./Dialog";
+import Input from "../../../form/input";
-import Input from "../../form/input";
+import { FormControl } from "@material-ui/core";
+import BaseDialog from "../action-dialog";
 
 export type RenameModel = {
     id: number;
@@ -69,17 +70,19 @@ 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' }}>
 
+                <FormControl fullWidth={true}>
                     <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
-                    value={model.name} onChange={handleOnChange} error={error} />
+                        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} />
+                        value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />
-            </Dialog>
+                </FormControl>
+            </BaseDialog>
         </div> 
     );
 }

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,6 +418,8 @@ const MapsPage = () => {
   }, []);
 
   return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
       <PageContainer>
         <HeaderArea>
           <h2>Header</h2>
@@ -427,6 +431,7 @@ const MapsPage = () => {
           <EnhancedTable />
         </MapsListArea>
       </PageContainer>
+    </ThemeProvider>
   );
 }
 export default MapsPage;

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',

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 { PageContent, theme } from '../../theme/global-style';
-import { FormControl } from '@material-ui/core';
+import { CssBaseline, FormControl, ThemeProvider } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import { useMutation } from 'react-query';
 import { activeInstance } from '../../reducers/serviceSlice';
@@ -58,9 +58,10 @@ 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} />
@@ -77,21 +78,20 @@ const RegistrationForm = () => {
           <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" }}>
+          <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" })} />
-
         </form>
+      </FormControl>
+
     </PageContent >
   );
 }

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;
+max-width: 350px;
-min-height: 400px;
+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 };