From 2a6782f165d757605f92510b2f4f65684c3e32c1 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Mon, 25 Jan 2021 17:54:54 -0800
Subject: [PATCH] Clean up styles.

---
 .../components/forgot-password-page/index.tsx    |  6 +++---
 .../forgot-password-success-page/index.tsx       |  8 ++++----
 .../src/components/form/global-error/styled.ts   |  2 +-
 .../src/components/form/submit-button/index.tsx  |  2 +-
 .../components/layout/form-container/index.tsx   | 11 +++++++++++
 .../components/layout/form-container/styled.ts   |  0
 .../webapp/src/components/login-page/index.tsx   | 15 +++++++--------
 .../src/components/registration-page/index.tsx   | 10 +++++-----
 .../registration-success-page/index.tsx          | 16 ++++++++--------
 packages/webapp/src/theme/index.ts               | 12 ++----------
 10 files changed, 42 insertions(+), 40 deletions(-)
 create mode 100644 packages/webapp/src/components/layout/form-container/index.tsx
 create mode 100644 packages/webapp/src/components/layout/form-container/styled.ts

diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx
index ff258a89..2eba8b73 100644
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@@ -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>
   );
 }
 
diff --git a/packages/webapp/src/components/forgot-password-success-page/index.tsx b/packages/webapp/src/components/forgot-password-success-page/index.tsx
index ab1449c4..1641a682 100644
--- a/packages/webapp/src/components/forgot-password-success-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-success-page/index.tsx
@@ -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>
   );
diff --git a/packages/webapp/src/components/form/global-error/styled.ts b/packages/webapp/src/components/form/global-error/styled.ts
index 2080643b..b689fa87 100644
--- a/packages/webapp/src/components/form/global-error/styled.ts
+++ b/packages/webapp/src/components/form/global-error/styled.ts
@@ -5,7 +5,7 @@ import { Alert } from "@material-ui/lab";
 export const StyledAlert = withStyles({
     root:
     {
-
+        padding: '10px 0px 10px 0px'
     }
 })(Alert);
 
diff --git a/packages/webapp/src/components/form/submit-button/index.tsx b/packages/webapp/src/components/form/submit-button/index.tsx
index 54e43c83..29bba6ea 100644
--- a/packages/webapp/src/components/form/submit-button/index.tsx
+++ b/packages/webapp/src/components/form/submit-button/index.tsx
@@ -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>
     );
diff --git a/packages/webapp/src/components/layout/form-container/index.tsx b/packages/webapp/src/components/layout/form-container/index.tsx
new file mode 100644
index 00000000..17710141
--- /dev/null
+++ b/packages/webapp/src/components/layout/form-container/index.tsx
@@ -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;
\ No newline at end of file
diff --git a/packages/webapp/src/components/layout/form-container/styled.ts b/packages/webapp/src/components/layout/form-container/styled.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx
index 170e36df..d3a44a0c 100644
--- a/packages/webapp/src/components/login-page/index.tsx
+++ b/packages/webapp/src/components/login-page/index.tsx
@@ -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>
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index 0b91b425..578f0436 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@@ -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>
   );
 }
 
diff --git a/packages/webapp/src/components/registration-success-page/index.tsx b/packages/webapp/src/components/registration-success-page/index.tsx
index 4d0de4b7..35d99fb5 100644
--- a/packages/webapp/src/components/registration-success-page/index.tsx
+++ b/packages/webapp/src/components/registration-success-page/index.tsx
@@ -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>
   );
diff --git a/packages/webapp/src/theme/index.ts b/packages/webapp/src/theme/index.ts
index 3491ba4d..bff17da9 100644
--- a/packages/webapp/src/theme/index.ts
+++ b/packages/webapp/src/theme/index.ts
@@ -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 };