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
 }
@@ -36,7 +37,7 @@ const RegistrationForm = (props: ServiceProps) => {
     event.preventDefault();
     setDisableButton(true);
 
-    
+
     // Call Service ...
     props.service.resetPassword(
       email,
@@ -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>
-        <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>
-        <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" />
+        <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} />
+        <ErrorMessageDialog message={errorMsg} />
 
-          <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
+        <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
-        </form>
+      </form>
-      </div>
+    </PageContent>
-    </div>
   );
 }
 

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

@@ -2,21 +2,25 @@ 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
-  let result= null;
+  let result = null;
   if (enabled === true) {
     result = (<div className="db-warn-msg">
       <p>
         <FormattedMessage id="login.hsqldbcofig" 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" /><a href="https://wisemapping.atlassian.net/wiki/display/WS/Database+Configuration"> here</a>
       </p>
     </div>);
-  } 
+  }
   return result;
 }
 
@@ -29,20 +33,27 @@ const LoginError = () => {
   let msg = null;
   if (errorCode) {
     if (errorCode === "3") {
-      msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!."});
+      msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!." });
     } else {
-      msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is  not valid."});
+      msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is  not valid." });
     }
   }
   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 = () => {
+        <ConfigStatusMessage enabled='false' />
 
-  useEffect(() => {
+      </PageContent>
-    document.title = 'Login | WiseMapping';
-  });
 
-  return (
-    <div>
-      <Header type='only-signup' />
-      <LoginForm />
-      <ConfigStatusMessage enabled='false' />
       <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>
-          <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>
 
-        <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
+        <FormErrorDialog message={errorMsg} />
+
+        <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" />
+        </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,17 +16,18 @@ const RegistrationSuccessPage = () => {
   return (
     <div>
       <Header type='none' />
+      <div>
       <PageContent>
-          <h1>
+        <h1>
-            <FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
+          <FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
-          </h1>
+        </h1>
-          <p>
+        <p>
-            <FormattedMessage id="registration.success.desc" defaultMessage="Click 'Sign In' button below and start creating mind maps." />
+          <FormattedMessage id="registration.success.desc" defaultMessage="Click 'Sign In' button below and start creating mind maps." />
-          </p>
+        </p>
-
-          <SignInButton style='style1'/>
-        </PageContent>
 
+        <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,5 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
- 
+
+
 const GlobalStyle = createGlobalStyle`
   
 @import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900');
@@ -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`
-export default GlobalStyle;
+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 { 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: [{