vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-11 01:43:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Clean up styles.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-01-25 17:54:54 -08:00
parent cd18df3811
commit 2a6782f165
10 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/webapp/src/components/forgot-password-page/index.tsx
View File

@ -5,7 +5,7 @@ import { Service, ErrorInfo } from '../../services/Service'
import Header from '../layout/header'
import Footer from '../layout/footer'
import { PageContent } from '../../theme'
import FormContainer from '../layout/form-container';
import { useSelector } from 'react-redux'
import { useMutation } from 'react-query'
import { activeInstance } from '../../reducers/serviceSlice'
@ -37,7 +37,7 @@ const ForgotPassword = () => {
}
return (
<PageContent>
<FormContainer>
<Typography variant="h4" component="h1">
<FormattedMessage id="forgot.title" defaultMessage="Reset your password" />
</Typography>
@ -54,7 +54,7 @@ const ForgotPassword = () => {
<SubmitButton value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
</form>
</PageContent>
</FormContainer>
);
}

8
packages/webapp/src/components/forgot-password-success-page/index.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react'
import { FormattedMessage } from 'react-intl'
import { PageContent } from '../../theme';
import Header, { SignInButton } from '../layout/header'
import FormContainer from '../layout/form-container';
import Header from '../layout/header'
import Footer from '../layout/footer'
import { Button, Typography } from '@material-ui/core';
import { Link as RouterLink} from 'react-router-dom'
@ -15,7 +15,7 @@ const ForgotPasswordSuccessPage = () => {
return (
<div>
<Header type='none' />
<PageContent>
<FormContainer>
<Typography variant="h4" component="h1">
<FormattedMessage id="forgot.success.title" defaultMessage="Your temporal password has been sent" />
</Typography>
@ -28,7 +28,7 @@ const ForgotPasswordSuccessPage = () => {
<FormattedMessage id="login.signin" defaultMessage="Sign In" />
</Button>
</PageContent>
</FormContainer>
<Footer />
</div>
);

2
packages/webapp/src/components/form/global-error/styled.ts
View File

@ -5,7 +5,7 @@ import { Alert } from "@material-ui/lab";
export const StyledAlert = withStyles({
root:
{
padding: '10px 0px 10px 0px'
}
})(Alert);

2
packages/webapp/src/components/form/submit-button/index.tsx
View File

@ -18,7 +18,7 @@ const SubmitButton = (props: SubmitButton) => {
return (
<Button color="primary" size="medium" variant="contained" type="submit"
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}
</Button>
);

11
packages/webapp/src/components/layout/form-container/index.tsx Normal file
View File

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

0
packages/webapp/src/components/layout/form-container/styled.ts Normal file
View File

15
packages/webapp/src/components/login-page/index.tsx
View File

@ -1,14 +1,13 @@
import React, { useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { Link as RouterLink} from 'react-router-dom'
import { PageContent } from '../../theme';
import Header from '../layout/header'
import Footer from '../layout/footer'
import SubmitButton from '../form/submit-button'
import { Link as RouterLink} from 'react-router-dom';
import Header from '../layout/header';
import Footer from '../layout/footer';
import SubmitButton from '../form/submit-button';
import Input from '../form/input';
import GlobalError from '../form/global-error';
import { FormControl, Link, Typography } from '@material-ui/core';
import FormContainer from '../layout/form-container';
const ConfigStatusMessage = (props: any) => {
@ -55,7 +54,7 @@ const LoginPage = () => {
<div>
<Header type='only-signup' />
<PageContent>
<FormContainer maxWidth="xs">
<Typography variant="h4" component="h1">
<FormattedMessage id="login.title" defaultMessage="Welcome" />
</Typography>
@ -81,7 +80,7 @@ const LoginPage = () => {
<Link component={RouterLink} to="/c/forgot-password"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
<ConfigStatusMessage />
</PageContent>
</FormContainer>
<Footer />
</div>

10
packages/webapp/src/components/registration-page/index.tsx
View File

@ -3,11 +3,11 @@ import { FormattedMessage, useIntl } from 'react-intl';
import ReCAPTCHA from 'react-google-recaptcha';
import { useHistory } from 'react-router-dom';
import { ErrorInfo, Service } from '../../services/Service';
import FormContainer from '../layout/form-container';
import Header from '../layout/header';
import Footer from '../layout/footer';
import { PageContent } from '../../theme';
import { FormControl, Typography } from '@material-ui/core';
import { useSelector } from 'react-redux';
import { useMutation } from 'react-query';
@ -57,7 +57,7 @@ const RegistrationForm = () => {
return (
<PageContent>
<FormContainer>
<Typography variant="h4" component="h1">
<FormattedMessage id="registration.title" defaultMessage="Become a member" />
</Typography>
@ -83,13 +83,13 @@ const RegistrationForm = () => {
<Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
autoComplete="new-password" />
<div style={{ width: '330px', padding: '5px 10px' }}>
<div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
<ReCAPTCHA
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
onChange={(value: string) => { model.recaptcha = value; setModel(model) }} />
</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" />
</div>
@ -97,7 +97,7 @@ const RegistrationForm = () => {
</form>
</FormControl>
</PageContent >
</FormContainer>
);
}

16
packages/webapp/src/components/registration-success-page/index.tsx
View File

@ -1,10 +1,10 @@
import React, { useEffect } from 'react'
import { FormattedMessage } from 'react-intl'
import { PageContent } from '../../theme';
import Header, { SignInButton } from '../layout/header'
import Footer from '../layout/footer'
import React, { useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import FormContainer from '../layout/form-container';
import Header from '../layout/header';
import Footer from '../layout/footer';
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 = () => {
@ -15,7 +15,7 @@ const RegistrationSuccessPage = () => {
return (
<div>
<Header type='none' />
<PageContent>
<FormContainer>
<Typography variant="h4" component="h1">
<FormattedMessage id="resetpassword.success.title" defaultMessage="Your account has been created successfully" />
</Typography>
@ -29,7 +29,7 @@ const RegistrationSuccessPage = () => {
<FormattedMessage id="login.signin" defaultMessage="Sign In" />
</Button>
</PageContent>
</FormContainer>
<Footer />
</div>
);

12
packages/webapp/src/theme/index.ts
View File

@ -1,5 +1,5 @@
import { createMuiTheme } from '@material-ui/core';
import styled, { createGlobalStyle } from 'styled-components';
import { createGlobalStyle } from 'styled-components';
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({
overrides: {
MuiOutlinedInput: {
@ -88,5 +80,5 @@ const theme = createMuiTheme({
}
});
export { GlobalStyle, PageContent, theme };
export { GlobalStyle, theme };