mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 14:47:56 +01:00
Clean up styles.
This commit is contained in:
parent
cd18df3811
commit
2a6782f165
@ -5,7 +5,7 @@ import { Service, ErrorInfo } from '../../services/Service'
|
|||||||
|
|
||||||
import Header from '../layout/header'
|
import Header from '../layout/header'
|
||||||
import Footer from '../layout/footer'
|
import Footer from '../layout/footer'
|
||||||
import { PageContent } from '../../theme'
|
import FormContainer from '../layout/form-container';
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { useMutation } from 'react-query'
|
import { useMutation } from 'react-query'
|
||||||
import { activeInstance } from '../../reducers/serviceSlice'
|
import { activeInstance } from '../../reducers/serviceSlice'
|
||||||
@ -37,7 +37,7 @@ const ForgotPassword = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContent>
|
<FormContainer>
|
||||||
<Typography variant="h4" component="h1">
|
<Typography variant="h4" component="h1">
|
||||||
<FormattedMessage id="forgot.title" defaultMessage="Reset your password" />
|
<FormattedMessage id="forgot.title" defaultMessage="Reset your password" />
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -54,7 +54,7 @@ const ForgotPassword = () => {
|
|||||||
|
|
||||||
<SubmitButton value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
|
<SubmitButton value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
|
||||||
</form>
|
</form>
|
||||||
</PageContent>
|
</FormContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect } from 'react'
|
import React, { useEffect } from 'react'
|
||||||
import { FormattedMessage } from 'react-intl'
|
import { FormattedMessage } from 'react-intl'
|
||||||
import { PageContent } from '../../theme';
|
import FormContainer from '../layout/form-container';
|
||||||
import Header, { SignInButton } from '../layout/header'
|
import Header from '../layout/header'
|
||||||
import Footer from '../layout/footer'
|
import Footer from '../layout/footer'
|
||||||
import { Button, Typography } from '@material-ui/core';
|
import { Button, Typography } from '@material-ui/core';
|
||||||
import { Link as RouterLink} from 'react-router-dom'
|
import { Link as RouterLink} from 'react-router-dom'
|
||||||
@ -15,7 +15,7 @@ const ForgotPasswordSuccessPage = () => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Header type='none' />
|
<Header type='none' />
|
||||||
<PageContent>
|
<FormContainer>
|
||||||
<Typography variant="h4" component="h1">
|
<Typography variant="h4" component="h1">
|
||||||
<FormattedMessage id="forgot.success.title" defaultMessage="Your temporal password has been sent" />
|
<FormattedMessage id="forgot.success.title" defaultMessage="Your temporal password has been sent" />
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -28,7 +28,7 @@ const ForgotPasswordSuccessPage = () => {
|
|||||||
<FormattedMessage id="login.signin" defaultMessage="Sign In" />
|
<FormattedMessage id="login.signin" defaultMessage="Sign In" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
</PageContent>
|
</FormContainer>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -5,7 +5,7 @@ import { Alert } from "@material-ui/lab";
|
|||||||
export const StyledAlert = withStyles({
|
export const StyledAlert = withStyles({
|
||||||
root:
|
root:
|
||||||
{
|
{
|
||||||
|
padding: '10px 0px 10px 0px'
|
||||||
}
|
}
|
||||||
})(Alert);
|
})(Alert);
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@ const SubmitButton = (props: SubmitButton) => {
|
|||||||
return (
|
return (
|
||||||
<Button color="primary" size="medium" variant="contained" type="submit"
|
<Button color="primary" size="medium" variant="contained" type="submit"
|
||||||
disableElevation={true} disabled={disabled}
|
disableElevation={true} disabled={disabled}
|
||||||
style={{width: '330px', height: '53px', padding: '0px 20px', margin: '7px 0px',fontSize: '18px' }} >
|
style={{width: '350px', height: '53px', padding: '0px 20px', margin: '7px 0px',fontSize: '18px' }} >
|
||||||
{value}
|
{value}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
@ -0,0 +1,11 @@
|
|||||||
|
import { Container, withStyles } from "@material-ui/core";
|
||||||
|
|
||||||
|
const FormContainer = withStyles({
|
||||||
|
root: {
|
||||||
|
padding: '20px 10px 0px 20px',
|
||||||
|
maxWidth: '380px',
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
})(Container)
|
||||||
|
|
||||||
|
export default FormContainer;
|
@ -1,14 +1,13 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { FormattedMessage, useIntl } from 'react-intl';
|
import { FormattedMessage, useIntl } from 'react-intl';
|
||||||
import { Link as RouterLink} from 'react-router-dom'
|
import { Link as RouterLink} from 'react-router-dom';
|
||||||
|
import Header from '../layout/header';
|
||||||
import { PageContent } from '../../theme';
|
import Footer from '../layout/footer';
|
||||||
import Header from '../layout/header'
|
import SubmitButton from '../form/submit-button';
|
||||||
import Footer from '../layout/footer'
|
|
||||||
import SubmitButton from '../form/submit-button'
|
|
||||||
import Input from '../form/input';
|
import Input from '../form/input';
|
||||||
import GlobalError from '../form/global-error';
|
import GlobalError from '../form/global-error';
|
||||||
import { FormControl, Link, Typography } from '@material-ui/core';
|
import { FormControl, Link, Typography } from '@material-ui/core';
|
||||||
|
import FormContainer from '../layout/form-container';
|
||||||
|
|
||||||
|
|
||||||
const ConfigStatusMessage = (props: any) => {
|
const ConfigStatusMessage = (props: any) => {
|
||||||
@ -55,7 +54,7 @@ const LoginPage = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header type='only-signup' />
|
<Header type='only-signup' />
|
||||||
|
|
||||||
<PageContent>
|
<FormContainer maxWidth="xs">
|
||||||
<Typography variant="h4" component="h1">
|
<Typography variant="h4" component="h1">
|
||||||
<FormattedMessage id="login.title" defaultMessage="Welcome" />
|
<FormattedMessage id="login.title" defaultMessage="Welcome" />
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -81,7 +80,7 @@ const LoginPage = () => {
|
|||||||
<Link component={RouterLink} to="/c/forgot-password"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
|
<Link component={RouterLink} to="/c/forgot-password"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
|
||||||
<ConfigStatusMessage />
|
<ConfigStatusMessage />
|
||||||
|
|
||||||
</PageContent>
|
</FormContainer>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,11 +3,11 @@ import { FormattedMessage, useIntl } from 'react-intl';
|
|||||||
import ReCAPTCHA from 'react-google-recaptcha';
|
import ReCAPTCHA from 'react-google-recaptcha';
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import { ErrorInfo, Service } from '../../services/Service';
|
import { ErrorInfo, Service } from '../../services/Service';
|
||||||
|
import FormContainer from '../layout/form-container';
|
||||||
|
|
||||||
import Header from '../layout/header';
|
import Header from '../layout/header';
|
||||||
import Footer from '../layout/footer';
|
import Footer from '../layout/footer';
|
||||||
|
|
||||||
import { PageContent } from '../../theme';
|
|
||||||
import { FormControl, Typography } from '@material-ui/core';
|
import { FormControl, Typography } from '@material-ui/core';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { useMutation } from 'react-query';
|
import { useMutation } from 'react-query';
|
||||||
@ -57,7 +57,7 @@ const RegistrationForm = () => {
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContent>
|
<FormContainer>
|
||||||
<Typography variant="h4" component="h1">
|
<Typography variant="h4" component="h1">
|
||||||
<FormattedMessage id="registration.title" defaultMessage="Become a member" />
|
<FormattedMessage id="registration.title" defaultMessage="Become a member" />
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -83,13 +83,13 @@ const RegistrationForm = () => {
|
|||||||
<Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
|
<Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
|
||||||
autoComplete="new-password" />
|
autoComplete="new-password" />
|
||||||
|
|
||||||
<div style={{ width: '330px', padding: '5px 10px' }}>
|
<div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
|
||||||
<ReCAPTCHA
|
<ReCAPTCHA
|
||||||
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
|
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
|
||||||
onChange={(value: string) => { model.recaptcha = value; setModel(model) }} />
|
onChange={(value: string) => { model.recaptcha = value; setModel(model) }} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ fontSize: "12px", padding: "5px 0px" }}>
|
<div style={{ fontSize: "12px", padding: "10px 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" />
|
<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>
|
||||||
|
|
||||||
@ -97,7 +97,7 @@ const RegistrationForm = () => {
|
|||||||
</form>
|
</form>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
||||||
</PageContent >
|
</FormContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import React, { useEffect } from 'react'
|
import React, { useEffect } from 'react';
|
||||||
import { FormattedMessage } from 'react-intl'
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { PageContent } from '../../theme';
|
import FormContainer from '../layout/form-container';
|
||||||
import Header, { SignInButton } from '../layout/header'
|
import Header from '../layout/header';
|
||||||
import Footer from '../layout/footer'
|
import Footer from '../layout/footer';
|
||||||
import { Button, Typography } from '@material-ui/core';
|
import { Button, Typography } from '@material-ui/core';
|
||||||
import { Link as RouterLink } from 'react-router-dom'
|
import { Link as RouterLink } from 'react-router-dom';
|
||||||
|
|
||||||
|
|
||||||
const RegistrationSuccessPage = () => {
|
const RegistrationSuccessPage = () => {
|
||||||
@ -15,7 +15,7 @@ const RegistrationSuccessPage = () => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Header type='none' />
|
<Header type='none' />
|
||||||
<PageContent>
|
<FormContainer>
|
||||||
<Typography variant="h4" component="h1">
|
<Typography variant="h4" component="h1">
|
||||||
<FormattedMessage id="resetpassword.success.title" defaultMessage="Your account has been created successfully" />
|
<FormattedMessage id="resetpassword.success.title" defaultMessage="Your account has been created successfully" />
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -29,7 +29,7 @@ const RegistrationSuccessPage = () => {
|
|||||||
<FormattedMessage id="login.signin" defaultMessage="Sign In" />
|
<FormattedMessage id="login.signin" defaultMessage="Sign In" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
</PageContent>
|
</FormContainer>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { createMuiTheme } from '@material-ui/core';
|
import { createMuiTheme } from '@material-ui/core';
|
||||||
import styled, { createGlobalStyle } from 'styled-components';
|
import { createGlobalStyle } from 'styled-components';
|
||||||
|
|
||||||
|
|
||||||
const GlobalStyle = createGlobalStyle`
|
const GlobalStyle = createGlobalStyle`
|
||||||
@ -10,14 +10,6 @@ const GlobalStyle = createGlobalStyle`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const PageContent = styled.div`
|
|
||||||
max-width: 350px;
|
|
||||||
min-height: 350px;
|
|
||||||
margin: 10px auto;
|
|
||||||
text-align:center;
|
|
||||||
padding: 20px 10px 20px 10px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const theme = createMuiTheme({
|
const theme = createMuiTheme({
|
||||||
overrides: {
|
overrides: {
|
||||||
MuiOutlinedInput: {
|
MuiOutlinedInput: {
|
||||||
@ -88,5 +80,5 @@ const theme = createMuiTheme({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export { GlobalStyle, PageContent, theme };
|
export { GlobalStyle, theme };
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user