Change from class to className

.eslintcache

@@ -1 +1 @@
-[{"/Users/pveiga/repos/wisemapping-react/src/Footer.js":"1","/Users/pveiga/repos/wisemapping-react/src/Header.js":"2","/Users/pveiga/repos/wisemapping-react/src/index.js":"3","/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js":"4","/Users/pveiga/repos/wisemapping-react/src/LoginApp.js":"5"},{"size":1601,"mtime":1606716377431,"results":"6","hashOfConfig":"7"},{"size":1823,"mtime":1606961799662,"results":"8","hashOfConfig":"7"},{"size":1883,"mtime":1606789677736,"results":"9","hashOfConfig":"7"},{"size":3892,"mtime":1606881237401,"results":"10","hashOfConfig":"7"},{"size":3495,"mtime":1606881218435,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[]]
+[{"/Users/pveiga/repos/wisemapping-react/src/Footer.js":"1","/Users/pveiga/repos/wisemapping-react/src/Header.js":"2","/Users/pveiga/repos/wisemapping-react/src/index.js":"3","/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js":"4","/Users/pveiga/repos/wisemapping-react/src/LoginApp.js":"5"},{"size":1609,"mtime":1607011308675,"results":"6","hashOfConfig":"7"},{"size":1877,"mtime":1607011262532,"results":"8","hashOfConfig":"7"},{"size":1883,"mtime":1606789677736,"results":"9","hashOfConfig":"7"},{"size":3904,"mtime":1607011410657,"results":"10","hashOfConfig":"7"},{"size":3515,"mtime":1607011370081,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[]]

src/Footer.js

@@ -5,7 +5,7 @@ import { ReactComponent as Logo } from './images/logo-text.svg'
 class Footer extends React.Component {
     render() {
         return (
-            <footer class="footer" >
+            <footer className="footer" >
                 <Logo />
                 <div >
                     <div><a href="termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /> </a></div>
@@ -18,7 +18,7 @@ class Footer extends React.Component {
                     <div>< a href="mailto:feedback@wisemapping.com" > <FormattedMessage id="footer.feedback" defaultMessage="Feedback" /> </a></div>
                 </div>
                 <div>
-                    <div><span class="button-style2" >< a href="https://www.paypal.com/webapps/shoppingcart?flowlogging_id=c7ac923b53025&mfid=1606520600355_c7ac923b53025#/checkout/openButton">< FormattedMessage id="footer.donations" defaultMessage="PayPal Donations" /> </a></span ></div>
+                    <div><span className="button-style2" >< a href="https://www.paypal.com/webapps/shoppingcart?flowlogging_id=c7ac923b53025&mfid=1606520600355_c7ac923b53025#/checkout/openButton">< FormattedMessage id="footer.donations" defaultMessage="PayPal Donations" /> </a></span ></div>
                 </div >
             </footer>
         )

src/Header.js

@@ -15,13 +15,14 @@ class Header extends React.Component {
         let signInButton;
         let text;
 
+
         const pageType = this.state.type;
         if (pageType === 'only-signup') {
-            text = <span class="nav-center"><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span>;
+            text = <span className="header-area-right1"><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span>;
-            signUpButton = <SignUpButton/>;
+            signUpButton = <SignUpButton className="header-area-right2" />;
         } else if (pageType === 'only-signin') {
-            text = <span class="nav-center"><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span>;
+            text = <span className="header-area-right1"><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span>;
-            signUpButton = <SignInButton/>;
+            signUpButton = <SignInButton className="header-area-right2" />;
         } else {
             signUpButton = <SignUpButton />
             signInButton = <SignInButton />;
@@ -29,8 +30,8 @@ class Header extends React.Component {
 
         return (
             <nav>
-                <div class="header">
+                <div className="header">
-                    <span class="header-logo"><a href="/"><img src={logo} alt="logo" /></a></span>
+                    <span className="header-logo"><a href="/"><img src={logo} alt="logo" /></a></span>
                     {text}
                     {signUpButton}
                     {signInButton}
@@ -40,18 +41,20 @@ class Header extends React.Component {
     };
 }
 
-class SignInButton extends React.Component {
+const SignInButton = (props) => {
-    render() {
+
-        return <span class="nav-signin button-style1"><a href="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></a></span>;
+
-    }
+    return (<span className={`button-style1 ${props.class}`}>
-}
+        <a href="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></a>
-class SignUpButton extends React.Component {
-    render() {
-        return (
-            <span class="nav-signup button-style1">
-                <a href="/c/user/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></a>
     </span>);
 }
+
+const SignUpButton = (props) => {
+    return (
+        <span className={`button-style1 ${props.class}`}>
+            <a href="/c/user/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></a>
+        </span>);
+
 }
 
 export default Header;

src/LoginApp.js

@@ -11,7 +11,7 @@ const ConfigStatusMessage = (props) => {
   let result;
 
   if (enabled === true) {
-    result = (<div class="db-warn-msg">
+    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>
@@ -31,12 +31,12 @@ const LoginError = (props) => {
   if (errorCode) {
     if (errorCode === 3) {
       result = (
-        <div class='form-error-dialog'>
+        <div className='form-error-dialog'>
           <FormattedMessage 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!." />
         </div>)
     } else {
       result = (
-        <div class='form-error-dialog'>
+        <div className='form-error-dialog'>
           <FormattedMessage id="login.error" defaultMessage="The login.email address or login.password you entered is  not valid." />
         </div>)
     }
@@ -50,8 +50,8 @@ class LoginForm extends React.Component {
 
     const intl = this.props.intl;
     return (
-      <div class="wrapper">
+      <div className="wrapper">
-        <div class="content">
+        <div className="content">
           <h1><FormattedMessage id="login.welcome" defaultMessage="Welcome" /></h1>
           <p><FormattedMessage id="login.loginto" defaultMessage="Log Into Your Account" /></p>
 

src/RegistrationApp.js

@@ -13,7 +13,7 @@ const ErrorMessageDialog = (props) => {
   const message = props.message;
   if (message) {
     const message = "here is a messar ofr error eerera rser wer"
-    result = <p class='form-error-dialog'>{message}</p>
+    result = <p className='form-error-dialog'>{message}</p>
   } else {
     result = <span></span>
   }
@@ -52,8 +52,8 @@ class RegistrationForm extends React.Component {
     const errrMsg = this.state.errorMsg;
 
     return (
-      <div class="wrapper">
+      <div className="wrapper">
-        <div class="content">
+        <div className="content">
           <h1><FormattedMessage id="registration.become" defaultMessage="Become a member of our comunity" /></h1>
           <p><FormattedMessage id="registration.signup" defaultMessage="Signing up is free and just take a moment " /></p>
 

src/css/core.css

@@ -120,29 +120,16 @@ nav a {
     padding: 0px;
 }
 
-.nav-link a:hover,
+.header-middle {
-.nav-signin a:hover {
-    background-color: rgb(241, 217, 181);
-    color: #ffa800;
-}
-
-.nav-signin {
-    grid-column-start: 4;
-    margin: 20px 0px;
-}
-
-.nav-signup {
-    grid-column-start: 3;
-    margin: 20px 0px;
-}
-
-.nav-center {
-    text-align: left;
     grid-column-start: 2;
-    text-align: right;
+}
-    font-weight: 500;
+
-    font-size: 15px;
+.header-area-right1 {
-    padding: 20px 10px;
+    grid-column-start: 3;
+}
+
+.header-area-right2 {
+    grid-column-start: 4;
 }
 
 
@@ -209,6 +196,9 @@ nav a {
     }
 }
 
+
+/* Form Styles Section */
+
 input[type=email],
 input[type=password],
 input[type=text] {
@@ -249,14 +239,6 @@ input:placeholder {
     color: grey;
 }
 
-::-moz-selection {
-    background: #f7a494;
-}
-
-::selection {
-    background: #f7a494;
-}
-
 .form-error-dialog {
     margin: 10px auto;
     width: 260px;