Complete basic styling

.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/LoginPage.js":"4"},{"size":701,"mtime":1606446171817,"results":"5","hashOfConfig":"6"},{"size":1536,"mtime":1606517031518,"results":"7","hashOfConfig":"6"},{"size":554,"mtime":1606496703139,"results":"8","hashOfConfig":"6"},{"size":3622,"mtime":1606512919931,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1xegajf",{"filePath":"12","messages":"13","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",["18"],"/Users/pveiga/repos/wisemapping-react/src/Header.js",["19"],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",["20"],{"ruleId":"21","severity":1,"message":"22","line":8,"column":17,"nodeType":"23","endLine":8,"endColumn":58},{"ruleId":"24","severity":1,"message":"25","line":46,"column":5,"nodeType":"26","messageId":"27","endLine":48,"endColumn":6},{"ruleId":"28","severity":1,"message":"29","line":6,"column":7,"nodeType":"30","messageId":"31","endLine":6,"endColumn":26},"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","no-useless-constructor","Useless constructor.","MethodDefinition","noUselessConstructor","no-unused-vars","'ConfigStatusMessage' is defined but never used.","Identifier","unusedVar"]
+[{"/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/LoginPage.js":"4"},{"size":1728,"mtime":1606520682659,"results":"5","hashOfConfig":"6"},{"size":1577,"mtime":1606519756685,"results":"7","hashOfConfig":"6"},{"size":554,"mtime":1606496703139,"results":"8","hashOfConfig":"6"},{"size":3600,"mtime":1606521877816,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"12","messages":"13","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",["18"],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",["19"],{"ruleId":"20","severity":1,"message":"21","line":46,"column":5,"nodeType":"22","messageId":"23","endLine":48,"endColumn":6},{"ruleId":"24","severity":1,"message":"25","line":6,"column":7,"nodeType":"26","messageId":"27","endLine":6,"endColumn":26},"no-useless-constructor","Useless constructor.","MethodDefinition","noUselessConstructor","no-unused-vars","'ConfigStatusMessage' is defined but never used.","Identifier","unusedVar"]

src/Footer.js

@@ -1,18 +1,25 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl'
 
 
 class Footer extends React.Component {
     render() {
         return (
             <footer class="footer">
-                <img src="images/text-wisemapping.svg" />
+                <img src="images/text-wisemapping.svg" alt="logo"/>
                 <div>
-                    <a href="termsofuse.html">Terms and Conditions</a>
+                    <div><a href="termsofuse.html"><FormattedMessage id="TERMS_AND_CONDITIONS" defaultMessage="Term And Conditions" /></a></div>
-                    <a href="mailto:feedback@wisemapping.com">Feedback</a>
+                    <div><a href="faq.html"><FormattedMessage id="FAQ" defaultMessage="F.A.Q." /></a></div>
-                    <a href="mailto:team@wisemapping.com">Contact Us</a>
+                    <div><a href="aboutus.html"><FormattedMessage id="ABOUT_US" defaultMessage="About Us" /></a></div>
-                    <a href="http://www.wisemapping.org/">Open Source</a>
+                </div>
-                    <a href="faq.html">FAQ</a>
+                <div>
-                    <a href="aboutus.html">About Us</a>
+                    <div><a href="http://www.wisemapping.org/"><FormattedMessage id="OPEN_SOURCE" defaultMessage="Open Source" /></a></div>
+                    <div><a href="mailto:team@wisemapping.com"><FormattedMessage id="CONTACT_US" defaultMessage="Contact Us" /></a></div>
+                    <div><a href="mailto:feedback@wisemapping.com"><FormattedMessage id="FEEDBACK" defaultMessage="Feedback" /></a></div>
+                </div>
+                <div>
+                    <div><span id="siteseal"><script async type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=iGLOz83ePtxZCiqwz4QuXb7OQWXTflEIPdOnuR2PzaUwSru3lYJNEj9VdqJ1"></script></span></div>
+                    <div><span class="button-style2"><a href="https://www.paypal.com/webapps/shoppingcart?flowlogging_id=c7ac923b53025&mfid=1606520600355_c7ac923b53025#/checkout/openButton"><FormattedMessage id="DONATIONS" defaultMessage="PayPal Donations" /></a></span></div>
                 </div>
             </footer>
         )

src/Header.js

@@ -39,7 +39,7 @@ class Header extends React.Component {
 
 class SignInButton extends React.Component {
     render() {
-        return <span class="nav-signin"><a href="https://app.wisemapping.com/c/login">Sign In</a></span>;
+        return <span class="nav-signin"><a href="c/login"><FormattedMessage id="SIGN_IN" defaultMessage="Sign In" /></a></span>;
     }
 }
 class SignUpButton extends React.Component {
@@ -49,7 +49,7 @@ class SignUpButton extends React.Component {
     render() {
         return (
             <span class="nav-signup button-style1">
-                <a href="https://app.wisemapping.com/c/user/registration">Sign Up</a>
+                <a href="c/registration"><FormattedMessage id="SIGN_UP" defaultMessage="Sign Up" /></a>
             </span>);
     }
 }

src/LoginPage.js

@@ -58,8 +58,8 @@ class LoginForm extends React.Component {
           <p><FormattedMessage id="LOG_INTO" defaultMessage="Log Into Your Account" /></p>
 
           <form onSubmit={this.handleSubmit}>
-            <div><input type="email" placeholder={intl.formatMessage({ id: "EMAIL", defaultMessage: 'Email' })} value={this.state.value} onChange={this.handleInputChange} required /></div>
+            <input type="email" placeholder={intl.formatMessage({ id: "EMAIL", defaultMessage: 'Email' })} value={this.state.value} onChange={this.handleInputChange} required />
-            <div><input type="password" placeholder={intl.formatMessage({ id: "PASSWORD", defaultMessage: 'Password' })} value={this.state.value} onChange={this.handleInputChange} required /></div>
+            <input type="password" placeholder={intl.formatMessage({ id: "PASSWORD", defaultMessage: 'Password' })} value={this.state.value} onChange={this.handleInputChange} required />
 
             <div>
               <input name="staySignIn" id="staySignIn" type="checkbox" checked={this.state.staySignIn} onChange={this.handleInputChange} />

src/css/core.css

@@ -145,13 +145,16 @@ nav a {
     padding: 20px 10px;
 }
 
+
+/* Footer */
+
 .footer {
-    height: 60px;
+    height: 130px;
-    margin-top: 100px;
+    margin-top: 50px;
-    padding: 10px 120px 10px 50px;
+    padding: 30px 40px 10px 50px;
     background-color: #f9a826;
-    text-align: center;
+    display: grid;
-    border-top: 3px solid #f8ae37;
+    grid-template-columns: 200px 200px 200px 1fr;
 }
 
 .footer a {
@@ -160,32 +163,63 @@ nav a {
     color: white;
 }
 
-.footer img {
+.footer>img {
-    float: left;
+    grid-column: 1;
+}
+
+.footer div:nth-child(2) {
+    grid-column: 2;
+}
+
+.footer div:nth-child(3) {
+    grid-column: 3;
+}
+
+.footer div:nth-child(4) {
+    grid-column: 4;
+    text-align: right;
 }
 
 
 /* Buttons */
 
-.button-style1 {
+.button-style1,
+.button-style2 {
     font-size: 16px;
     font-weight: 500;
     font-stretch: normal;
     font-style: normal;
     letter-spacing: normal;
+    white-space: nowrap;
+}
+
+.button-style1 a,
+.button-style2 a {
+    padding: 10px 30px 10px 30px;
+    transition: background-color 0.3s ease;
     border-radius: 9px;
 }
 
 .button-style1 a {
+    background-color: white;
     border: solid 1px #f9a826;
     color: #ffa800;
-    padding: 10px 30px 10px 30px;
-    background-color: white;
-    transition: background-color 0.3s ease;
 }
 
 .button-style1 a:hover {
     color: white;
     background-color: rgba(255, 168, 0, 0.6);
     border: 0px;
+}
+
+.button-style2 a {
+    background-color: white;
+    border: solid 1px rgba(255, 168, 0, 0.6);
+    color: #ffa800;
+}
+
+.button-style2 a:hover {
+    color: white;
+    border: solid 1px white;
+    background-color: rgba(243, 220, 174, 0.6);
 }

src/css/login.css

@@ -19,6 +19,8 @@
     border-radius: 9px;
     font-size: 16px;
     border: solid 1px #f9a826;
+    display: block;
+    margin: 10px auto;
 }
 
 .content input[type=submit] {