Remove all CSS

packages/webapp/src/app.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Service, RestService } from './services/Service';
 import { IntlProvider } from 'react-intl'
 
-import GlobalStyle from './theme/global-style';
+import {GlobalStyle} from './theme/global-style';
 import { RegistrationSuccessPage } from './components/registration-success-page';
 import { RegistationPage } from './components/registration-page';
 import LoginPage from './components/login-page';
@@ -13,6 +13,7 @@ import {
   Redirect,
   BrowserRouter as Router,
 } from 'react-router-dom';
+
 import { ForgotPasswordPage } from './components/forgot-password-page';
 
 function loadLocaleData(language: string) {

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

@@ -3,13 +3,14 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { useHistory } from "react-router-dom"
 import { Service } from '../../services/Service'
 
+import { PageContent } from '../../theme/global-style';
+
+
 
 import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
 
-const css = require('../../css/registration.css');
-
 interface ErrorMessageDialogProps {
   message: string
 }
@@ -46,20 +47,18 @@ const RegistrationForm = (props: ServiceProps) => {
   }
 
   return (
-    <div className="wrapper">
+    <PageContent>
-      <div className="content">
       <h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password" /></h1>
       <p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password" /></p>
 
-        <form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
+      <form method="POST" onSubmit={e => handleSubmit(e)}>
         <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
 
         <ErrorMessageDialog message={errorMsg} />
 
         <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
       </form>
-      </div>
+    </PageContent>
-    </div>
   );
 }
 

packages/webapp/src/components/login-page/index.tsx

@@ -2,10 +2,14 @@ import React, { useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Link } from 'react-router-dom'
 
+import {PageContent} from '../../theme/global-style';
+import FormErrorDialog from '../form-error-dialog'
+
+
 import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
-import FormErrorDialog from '../form-error-dialog'
+
 
 const ConfigStatusMessage = (props: any) => {
   const enabled = props.enabled
@@ -37,12 +41,19 @@ const LoginError = () => {
   return <FormErrorDialog message={msg} />
 
 }
-const LoginForm = () => {
+
+const LoginPage = () => {
   const intl = useIntl();
 
+  useEffect(() => {
+    document.title = 'Login | WiseMapping';
+  });
+
   return (
-    <div className="wrapper">
+    <div>
-      <div className="content">
+      <Header type='only-signup' />
+
+      <PageContent>
         <h1><FormattedMessage id="login.title" defaultMessage="Welcome" /></h1>
         <p><FormattedMessage id="login.desc" defaultMessage="Log Into Your Account" /></p>
 
@@ -59,22 +70,11 @@ const LoginForm = () => {
           <SubmitButton value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
         </form>
         <Link to="/c/user/resetPassword"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
-      </div>
-    </div>
-  );
-}
 
-const LoginPage = () => {
-
-  useEffect(() => {
-    document.title = 'Login | WiseMapping';
-  });
-
-  return (
-    <div>
-      <Header type='only-signup' />
-      <LoginForm />
         <ConfigStatusMessage enabled='false' />
+
+      </PageContent>
+
       <Footer />
     </div>
   );

packages/webapp/src/components/registration-page/index.tsx

@@ -9,7 +9,8 @@ import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
 
-const css = require('../../css/registration.css');
+import { StyledReCAPTCHA } from './styled';
+import { PageContent } from '../../theme/global-style';
 
 const RegistrationForm = (props: ServiceProps) => {
   const [email, setEmail] = useState("");
@@ -46,29 +47,31 @@ const RegistrationForm = (props: ServiceProps) => {
   }
 
   return (
-    <div className="content">
+    <PageContent>
       <h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
       <p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
 
-      <form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
+      <form method="POST" onSubmit={e => handleSubmit(e)}>
         <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
         <input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
         <input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />
         <input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
 
-        <div>
+        <StyledReCAPTCHA>
           <ReCAPTCHA
             sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
             onChange={setRecaptchaToken} />
-        </div>
+        </StyledReCAPTCHA>
+
         <FormErrorDialog message={errorMsg} />
-        <p>
+
+        <div style={{ width: "300px", textAlign: "center", fontSize:"13px",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" />
-        </p>
+        </div>
 
       <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
       </form>
-    </div>
+    </PageContent >
   );
 }
 

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

@@ -1,4 +1,11 @@
 import styled from 'styled-components';
+
+export const StyledReCAPTCHA = styled.div`
+font-size: 13px;
+width: 300px;
+margin: auto;
+}`;
+
 export const StyledNav = styled.div`
 .db-warn-msg {
     margin-top: 30px;
@@ -13,5 +20,4 @@ export const StyledNav = styled.div`
     color: white;
     padding: 15px 30px;
     border-radius: 10px;
-}
+}`;
-`

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

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-import StyledDiv from './styled'
+
+import {PageContent} from '../../theme/global-style';
 
 import Header, { SignInButton } from '../header'
 import Footer from '../footer'
-import PageContent from './styled'
+
 
 
 const RegistrationSuccessPage = () => {
-
   useEffect(() => {
     document.title = 'Registration | WiseMapping';
   });
@@ -16,6 +16,7 @@ const RegistrationSuccessPage = () => {
   return (
     <div>
       <Header type='none' />
+      <div>
       <PageContent>
         <h1>
           <FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
@@ -26,7 +27,7 @@ const RegistrationSuccessPage = () => {
 
         <SignInButton style='style1' />
       </PageContent>
-
+      </div>
       <Footer />
     </div>
   );

packages/webapp/src/components/registration-success-page/styled.ts

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-const PageContent = styled.div`
-max-width: 1024px;
-min-height: 400px;
-margin: auto;
-padding-top: 100px;
-grid-area: content;
-text-align: center;
-
-& p {
-    color: black;
-    font-size: 18px;
-    margin: 10px 0px 30px 0px;
-}
-
-& h1 {
-    color: #f9a826;
-    font-size: 30px;
-}`
-
-export default PageContent;

packages/webapp/src/css/registration.css

@@ -1,11 +0,0 @@
-.content {
-    grid-area: content;
-    text-align: center;
-}
-
-form>p,
-form>div {
-    font-size: 13px;
-    width: 300px;
-    margin: auto;
-}

packages/webapp/src/theme/global-style.ts

@@ -1,4 +1,5 @@
-import { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
+
 
 const GlobalStyle = createGlobalStyle`
   
@@ -12,94 +13,11 @@ body {
     margin: 0px;
 }
 
-.wrapper {
-    max-width: 1024px;
-    margin: auto;
-}
-
-.wrapper>* {
-    border-radius: 5px;
-    padding: 10px;
-}
-
-h1,
-h2 {
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.2;
-    letter-spacing: normal;
-}
-
-h1 {
-    font-size: 36px;
-    font-weight: bold;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    color: #f9a826;
-}
-
 a {
     text-decoration: none;
     transition: background-color 0.3s ease;
 }
 
-p {
-    font-size: 20px;
-    font-weight: 300;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.36;
-    letter-spacing: normal;
-    text-align: center;
-    color: #000000;
-}
-
-/* Form Styles Section */
-
-input[type=email],
-input[type=password],
-input[type=text] {
-    width: 258px;
-    height: 53px;
-    padding: 0px 20px;
-    margin: 10px 20px;
-    border-radius: 9px;
-    font-size: 16px;
-    border: solid 1px #f9a826;
-    display: block;
-    margin: 10px auto;
-}
-
-input[type=checkbox] {
-    border: solid 1px #f9a826;
-    background-color: #f9a826;
-}
-
-input[type=submit],
-input[type=button] {
-    width: 258px;
-    height: 53px;
-    padding: 0px 20px;
-    margin: 10px 20px;
-    font-size: 20px;
-    font-weight: 600;
-    border-radius: 9px;
-    border: 0px;
-    background-color: rgba(255, 168, 0, 0.6);
-    color: white;
-}
-
-input[type=submit]:hover {
-    background-color: #f9a826;
-}
-
-input:placeholder {
-    color: grey;
-}
-
-
 /* Buttons */
 
 .button-style1,
@@ -158,6 +76,82 @@ input:placeholder {
     border: solid 1px #ffa800;
     font-weight: 600;
 }
+
+`;
+const PageContent = styled.div`
+max-width: 800px;
+min-height: 400px;
+margin: 10px auto;
+text-align:center;
+padding: 20px 10px 20px 10px;
+
+/* Form Styles Section */
+
+& input[type=email],
+& input[type=password],
+& input[type=text] {
+    width: 258px;
+    height: 53px;
+    padding: 0px 20px;
+    margin: 10px 20px;
+    border-radius: 9px;
+    font-size: 16px;
+    border: solid 1px #f9a826;
+    display: block;
+    margin: 10px auto;
+}
+
+& input[type=checkbox] {
+    border: solid 1px #f9a826;
+    background-color: #f9a826;
+}
+
+& input[type=submit],
+& input[type=button] {
+    width: 258px;
+    height: 53px;
+    padding: 0px 20px;
+    margin: 10px 20px;
+    font-size: 20px;
+    font-weight: 600;
+    border-radius: 9px;
+    border: 0px;
+    background-color: rgba(255, 168, 0, 0.6);
+    color: white;
+}
+
+& input[type=submit]:hover {
+    background-color: #f9a826;
+}
+
+& input:placeholder {
+    color: grey;
+}
+
+& h1,
+& h2 {
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.2;
+    letter-spacing: normal;
+}
+
+& h1 {
+    font-size: 36px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #f9a826;
+}
+
+& a {
+    font-size: 17px;
+    color: #f9a826;
+}
 `;
 
-export default GlobalStyle;
+
+
+export { GlobalStyle, PageContent };

packages/webapp/webpack.config.js

@@ -23,12 +23,7 @@ module.exports = {
                 test: /\.tsx?$/,
                 use: 'ts-loader',
                 exclude: '/node_modules/'
-            },
+            }, ,
-            {
-                test: /\.css$/,
-                use: ["style-loader", "css-loader"]
-
-            },
             {
                 test: /\.(png|jpe?g|gif|svg)$/,
                 use: [{