From 796f6498aac12764c87d03f4390c321596e33573 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Thu, 3 Dec 2020 08:04:26 -0800
Subject: [PATCH] Change from class to className

---
 .eslintcache           |  2 +-
 src/Footer.js          |  4 ++--
 src/Header.js          | 43 ++++++++++++++++++++++--------------------
 src/LoginApp.js        | 10 +++++-----
 src/RegistrationApp.js |  6 +++---
 src/css/core.css       | 42 ++++++++++++-----------------------------
 6 files changed, 46 insertions(+), 61 deletions(-)

diff --git a/.eslintcache b/.eslintcache
index 6ec59eaf..5d32dd7a 100644
--- a/.eslintcache
+++ b/.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",[]]
\ No newline at end of file
+[{"/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",[]]
\ No newline at end of file
diff --git a/src/Footer.js b/src/Footer.js
index 149e6b8c..0ad0bbff 100644
--- a/src/Footer.js
+++ b/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>
         )
diff --git a/src/Header.js b/src/Header.js
index bc065e9e..dd543914 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -15,43 +15,46 @@ 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>;
-            signUpButton = <SignUpButton/>;
+            text = <span className="header-area-right1"><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span>;
+            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>;
-            signUpButton = <SignInButton/>;
+            text = <span className="header-area-right1"><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span>;
+            signUpButton = <SignInButton className="header-area-right2" />;
         } else {
-            signUpButton = <SignUpButton/>
-            signInButton = <SignInButton/>;
+            signUpButton = <SignUpButton />
+            signInButton = <SignInButton />;
         }
 
         return (
             <nav>
-                <div class="header">
-                    <span class="header-logo"><a href="/"><img src={logo} alt="logo" /></a></span>
+                <div className="header">
+                    <span className="header-logo"><a href="/"><img src={logo} alt="logo" /></a></span>
                     {text}
                     {signUpButton}
                     {signInButton}
                 </div>
             </nav>
-        ) 
+        )
     };
 }
 
-class SignInButton extends React.Component {
-    render() {
-        return <span class="nav-signin button-style1"><a href="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></a></span>;
-    }
+const SignInButton = (props) => {
+
+
+    return (<span className={`button-style1 ${props.class}`}>
+        <a href="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></a>
+    </span>);
 }
-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;
diff --git a/src/LoginApp.js b/src/LoginApp.js
index 3e10eebd..0deb2f26 100644
--- a/src/LoginApp.js
+++ b/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 class="content">
+      <div className="wrapper">
+        <div className="content">
           <h1><FormattedMessage id="login.welcome" defaultMessage="Welcome" /></h1>
           <p><FormattedMessage id="login.loginto" defaultMessage="Log Into Your Account" /></p>
 
diff --git a/src/RegistrationApp.js b/src/RegistrationApp.js
index 6bf6697f..22c1f0c7 100644
--- a/src/RegistrationApp.js
+++ b/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 class="content">
+      <div className="wrapper">
+        <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>
 
diff --git a/src/css/core.css b/src/css/core.css
index cc674ad2..d76c03a1 100644
--- a/src/css/core.css
+++ b/src/css/core.css
@@ -120,29 +120,16 @@ nav a {
     padding: 0px;
 }
 
-.nav-link a:hover,
-.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;
+.header-middle {
     grid-column-start: 2;
-    text-align: right;
-    font-weight: 500;
-    font-size: 15px;
-    padding: 20px 10px;
+}
+
+.header-area-right1 {
+    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;