From 7a5a18924e5e527e990565416d3cd967c46b4af1 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Fri, 27 Nov 2020 16:06:02 -0800 Subject: [PATCH] Complete basic styling --- .eslintcache | 2 +- src/Footer.js | 21 ++++++++++++------ src/Header.js | 4 ++-- src/LoginPage.js | 4 ++-- src/css/core.css | 56 +++++++++++++++++++++++++++++++++++++---------- src/css/login.css | 2 ++ 6 files changed, 66 insertions(+), 23 deletions(-) diff --git a/.eslintcache b/.eslintcache index eb4651b2..dcd468d2 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/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"] \ 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/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"] \ No newline at end of file diff --git a/src/Footer.js b/src/Footer.js index eeec3c90..14738456 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,18 +1,25 @@ import React from 'react'; +import { FormattedMessage } from 'react-intl' class Footer extends React.Component { render() { return ( ) diff --git a/src/Header.js b/src/Header.js index fe9b7785..2609c0f1 100644 --- a/src/Header.js +++ b/src/Header.js @@ -39,7 +39,7 @@ class Header extends React.Component { class SignInButton extends React.Component { render() { - return Sign In; + return ; } } class SignUpButton extends React.Component { @@ -49,7 +49,7 @@ class SignUpButton extends React.Component { render() { return ( - Sign Up + ); } } diff --git a/src/LoginPage.js b/src/LoginPage.js index e4fb08ad..43b23e59 100644 --- a/src/LoginPage.js +++ b/src/LoginPage.js @@ -58,8 +58,8 @@ class LoginForm extends React.Component {

-
-
+ +
diff --git a/src/css/core.css b/src/css/core.css index b093cf2d..640212fe 100644 --- a/src/css/core.css +++ b/src/css/core.css @@ -145,13 +145,16 @@ nav a { padding: 20px 10px; } + +/* Footer */ + .footer { - height: 60px; - margin-top: 100px; - padding: 10px 120px 10px 50px; + height: 130px; + margin-top: 50px; + padding: 30px 40px 10px 50px; background-color: #f9a826; - text-align: center; - border-top: 3px solid #f8ae37; + display: grid; + grid-template-columns: 200px 200px 200px 1fr; } .footer a { @@ -160,32 +163,63 @@ nav a { color: white; } -.footer img { - float: left; +.footer>img { + 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); } \ No newline at end of file diff --git a/src/css/login.css b/src/css/login.css index 5febffc6..ad8d26c3 100644 --- a/src/css/login.css +++ b/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] {