From 0e0ef13e92acb09546eb52c2e8d62951e983cb74 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Wed, 9 Dec 2020 19:33:30 -0800 Subject: [PATCH] Continue migration to styles-component --- packages/webapp/public/manifest.json | 4 +- packages/webapp/src/app.tsx | 30 ++--- .../webapp/src/components/footer/index.tsx | 7 +- .../webapp/src/components/footer/styled.ts | 44 ++++++++ .../components/form-error-dialog/index.tsx | 12 ++ .../components/form-error-dialog/styled.ts | 12 ++ .../webapp/src/components/header/styled.ts | 12 ++ .../src/components/login-page/index.tsx | 26 ++--- .../src/components/login-page/styled.ts | 18 +++ .../components/registration-page/index.tsx | 71 ++++-------- .../components/registration-page/styled.ts | 17 +++ .../registration-success-page/index.tsx | 9 +- .../registration-success-page/styled.ts | 22 ++++ packages/webapp/src/css/login.css | 39 ------- packages/webapp/src/css/registration.css | 31 ------ packages/webapp/src/css/reset-password.css | 39 ------- packages/webapp/src/css/success.css | 22 ---- .../{css/core.css => theme/global-style.ts} | 104 ++---------------- 18 files changed, 199 insertions(+), 320 deletions(-) create mode 100644 packages/webapp/src/components/footer/styled.ts create mode 100644 packages/webapp/src/components/form-error-dialog/index.tsx create mode 100644 packages/webapp/src/components/form-error-dialog/styled.ts create mode 100644 packages/webapp/src/components/registration-page/styled.ts create mode 100644 packages/webapp/src/components/registration-success-page/styled.ts delete mode 100644 packages/webapp/src/css/login.css delete mode 100644 packages/webapp/src/css/reset-password.css delete mode 100644 packages/webapp/src/css/success.css rename packages/webapp/src/{css/core.css => theme/global-style.ts} (63%) diff --git a/packages/webapp/public/manifest.json b/packages/webapp/public/manifest.json index 6898e2b1..46e82a49 100644 --- a/packages/webapp/public/manifest.json +++ b/packages/webapp/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "WiseMapping", + "name": "WiseMapping", "icons": [{ "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx index 2bb93ca2..4c59c6cd 100644 --- a/packages/webapp/src/app.tsx +++ b/packages/webapp/src/app.tsx @@ -2,6 +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 { RegistrationSuccessPage } from './components/registration-success-page'; import { RegistationPage } from './components/registration-page'; import LoginPage from './components/login-page'; @@ -47,21 +48,22 @@ const App = () => { return messages ? ( - - - - - - - - - - - - - + + + + + + + + + + + + + + - ) :
loading
+ ) :
Loading ...
} export default App; diff --git a/packages/webapp/src/components/footer/index.tsx b/packages/webapp/src/components/footer/index.tsx index dcdb9a35..a18d97ab 100644 --- a/packages/webapp/src/components/footer/index.tsx +++ b/packages/webapp/src/components/footer/index.tsx @@ -1,13 +1,12 @@ import React from 'react' import { FormattedMessage } from 'react-intl' +import { StyledFooter } from './styled' const logo = require('../../images/logo-text.svg') - const Footer = () => { return ( - + ) } diff --git a/packages/webapp/src/components/footer/styled.ts b/packages/webapp/src/components/footer/styled.ts new file mode 100644 index 00000000..f1698d22 --- /dev/null +++ b/packages/webapp/src/components/footer/styled.ts @@ -0,0 +1,44 @@ +import styled from 'styled-components'; +/* Footer */ + +export const StyledFooter = styled.footer` +height: 250px; +margin-top: 80px; +padding: 60px 40px 10px 50px; +background-color: #f9a826; +display: grid; +grid-template-columns: 200px 1fr 1fr 3fr; + +& a { + font-size: 14px; + color: white; + word-wrap: nowrap; +} + +& h4 { + font-size: 14px; + color: white; + word-wrap: nowrap; + font-weight: 500px; + margin: 0px; +} + +&>svg { + grid-column: 1; +} + +& div:nth-child(2) { + grid-column: 2; +} + +& div:nth-child(3) { + grid-column: 3; +} + +& div:nth-child(4) { + grid-column: 4; + text-align: right; + display: inline-block; + visibility: visible; +}` + diff --git a/packages/webapp/src/components/form-error-dialog/index.tsx b/packages/webapp/src/components/form-error-dialog/index.tsx new file mode 100644 index 00000000..8997a6fd --- /dev/null +++ b/packages/webapp/src/components/form-error-dialog/index.tsx @@ -0,0 +1,12 @@ +import React, { useEffect } from 'react' +import { StyleDiv } from './styled' + +type FormErrorDialogProps = { + message: string | null; +} + +const FormErrorDialog = (props: FormErrorDialogProps) => { + return props.message ? {props.message} : null; +} +export default FormErrorDialog; + diff --git a/packages/webapp/src/components/form-error-dialog/styled.ts b/packages/webapp/src/components/form-error-dialog/styled.ts new file mode 100644 index 00000000..3c8ecb51 --- /dev/null +++ b/packages/webapp/src/components/form-error-dialog/styled.ts @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +export const StyleDiv = styled.div` +margin: 10px auto; +width: 260px; +font-size: 15px; +border: 2px solid #e97450; +padding: 10px 10px; +border-radius: 9px; +color: white; +background-color: #e78b72; +` diff --git a/packages/webapp/src/components/header/styled.ts b/packages/webapp/src/components/header/styled.ts index 26a7d09d..8abbcf4c 100644 --- a/packages/webapp/src/components/header/styled.ts +++ b/packages/webapp/src/components/header/styled.ts @@ -38,6 +38,18 @@ z-index: 1; .header-area-right2 { grid-column-start: 4; } + +.header-area-right1 span, +.header-area-right2 span { + font-size: 15px; +} +.header-area-content-span { + grid-column-start: 2; + grid-column-end: 4; + text-align: right; + font-size: 14px; + padding: 10px; +} `; export const StyledDiv = styled.nav` diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx index 7c35f346..7056ab4c 100644 --- a/packages/webapp/src/components/login-page/index.tsx +++ b/packages/webapp/src/components/login-page/index.tsx @@ -5,23 +5,18 @@ import { Link } from 'react-router-dom' import Header from '../header' import Footer from '../footer' import SubmitButton from '../submit-button' - -const css = require('../../css/login.css') - +import FormErrorDialog from '../form-error-dialog' const ConfigStatusMessage = (props: any) => { const enabled = props.enabled - let result; - + let result= null; if (enabled === true) { result = (

here

); - } else { - result = ; - } + } return result; } @@ -29,22 +24,17 @@ const LoginError = () => { // @Todo: This must be reviewed to be based on navigation state. // Login error example: http://localhost:8080/c/login?login.error=2 const errorCode = new URLSearchParams(window.location.search).get('login_error'); + const intl = useIntl(); - let result; + let msg = null; if (errorCode) { if (errorCode === "3") { - result = ( -
- -
) + 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 { - result = ( -
- -
) + msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is not valid."}); } } - return ({result}); + return } const LoginForm = () => { diff --git a/packages/webapp/src/components/login-page/styled.ts b/packages/webapp/src/components/login-page/styled.ts index 4f210a90..9bf5561d 100644 --- a/packages/webapp/src/components/login-page/styled.ts +++ b/packages/webapp/src/components/login-page/styled.ts @@ -1 +1,19 @@ import styled from 'styled-components'; + + +export const StyledNav = styled.div` +.db-warn-msg { + margin-top: 30px; + width: 100%; +} + +.db-warn-msg p { + margin: 0 auto; + width: 500px; + background-color: #e97450; + font-size: 15px; + color: white; + padding: 15px 30px; + border-radius: 10px; +} +` diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx index 9540923e..d0dbdd70 100644 --- a/packages/webapp/src/components/registration-page/index.tsx +++ b/packages/webapp/src/components/registration-page/index.tsx @@ -1,9 +1,9 @@ -import React, { useState, useEffect} from 'react' +import React, { useState, useEffect } from 'react' import { FormattedMessage, useIntl } from 'react-intl' import ReCAPTCHA from 'react-google-recaptcha' import { useHistory } from "react-router-dom" import { Service, NewUser } from '../../services/Service' - +import FormErrorDialog from '../form-error-dialog' import Header from '../header' import Footer from '../footer' @@ -11,30 +11,6 @@ import SubmitButton from '../submit-button' const css = require('../../css/registration.css'); -interface ErrorMessageDialogProps { - message: string -} - -const ErrorMessageDialog = (props: ErrorMessageDialogProps) => { - let result; - - const message = props.message; - if (message) { - result =

{message}

- } else { - result = - } - return result; -} - -type RegistrationBody = { - email: string; - firstname: string; - lastlname: string; - password: string; - recaptcha: string | null; -} - const RegistrationForm = (props: ServiceProps) => { const [email, setEmail] = useState(""); const [lastname, setLastname] = useState("") @@ -70,35 +46,30 @@ const RegistrationForm = (props: ServiceProps) => { } return ( -
-
-

-

+
+

+

-
handleSubmit(e)}> - setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" /> - setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" /> - setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" /> - setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" /> + handleSubmit(e)}> + setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" /> + setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" /> + setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" /> + setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" /> -
- -
+
+ +
+ +

+ +

- - -

- -

- - - -
+ +
); - } type ServiceProps = { diff --git a/packages/webapp/src/components/registration-page/styled.ts b/packages/webapp/src/components/registration-page/styled.ts new file mode 100644 index 00000000..86d8bb2e --- /dev/null +++ b/packages/webapp/src/components/registration-page/styled.ts @@ -0,0 +1,17 @@ +import styled from 'styled-components'; +export const StyledNav = styled.div` +.db-warn-msg { + margin-top: 30px; + width: 100%; +} + +.db-warn-msg p { + margin: 0 auto; + width: 500px; + background-color: #e97450; + font-size: 15px; + color: white; + padding: 15px 30px; + border-radius: 10px; +} +` diff --git a/packages/webapp/src/components/registration-success-page/index.tsx b/packages/webapp/src/components/registration-success-page/index.tsx index 3efb0055..fc8da2a8 100644 --- a/packages/webapp/src/components/registration-success-page/index.tsx +++ b/packages/webapp/src/components/registration-success-page/index.tsx @@ -1,10 +1,11 @@ import React, { useEffect } from 'react' import { FormattedMessage } from 'react-intl' +import StyledDiv from './styled' import Header, { SignInButton } from '../header' import Footer from '../footer' +import PageContent from './styled' -const css = require('../../css/success.css'); const RegistrationSuccessPage = () => { @@ -15,8 +16,7 @@ const RegistrationSuccessPage = () => { return (
-
-
+

@@ -25,9 +25,8 @@ const RegistrationSuccessPage = () => {

+ -
-
); diff --git a/packages/webapp/src/components/registration-success-page/styled.ts b/packages/webapp/src/components/registration-success-page/styled.ts new file mode 100644 index 00000000..1fc7d5ad --- /dev/null +++ b/packages/webapp/src/components/registration-success-page/styled.ts @@ -0,0 +1,22 @@ +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; \ No newline at end of file diff --git a/packages/webapp/src/css/login.css b/packages/webapp/src/css/login.css deleted file mode 100644 index 117ac60f..00000000 --- a/packages/webapp/src/css/login.css +++ /dev/null @@ -1,39 +0,0 @@ -@import "core.css"; -.wrapper { - max-width: 1024px; - display: grid; - grid-template-areas: "content" "footer"; -} - -.content { - grid-area: content; - text-align: center; -} - -.content input:placeholder { - color: grey; -} - -.content label { - font-size: 14px; -} - -.content a { - color: #f9a826; - font-size: 15px; -} - -.db-warn-msg { - margin-top: 30px; - width: 100%; -} - -.db-warn-msg p { - margin: 0 auto; - width: 500px; - background-color: #e97450; - font-size: 15px; - color: white; - padding: 15px 30px; - border-radius: 10px; -} \ No newline at end of file diff --git a/packages/webapp/src/css/registration.css b/packages/webapp/src/css/registration.css index 19730664..4531de2a 100644 --- a/packages/webapp/src/css/registration.css +++ b/packages/webapp/src/css/registration.css @@ -1,10 +1,3 @@ -@import "core.css"; -.wrapper { - max-width: 1024px; - display: grid; - grid-template-areas: "content" "footer"; -} - .content { grid-area: content; text-align: center; @@ -15,28 +8,4 @@ form>div { font-size: 13px; width: 300px; margin: auto; -} - -.content label { - font-size: 14px; -} - -.content a { - color: #f9a826; - font-size: 15px; -} - -.db-warn-msg { - margin-top: 30px; - width: 100%; -} - -.db-warn-msg p { - margin: 0 auto; - width: 500px; - background-color: #e97450; - font-size: 15px; - color: white; - padding: 15px 30px; - border-radius: 10px; } \ No newline at end of file diff --git a/packages/webapp/src/css/reset-password.css b/packages/webapp/src/css/reset-password.css deleted file mode 100644 index 117ac60f..00000000 --- a/packages/webapp/src/css/reset-password.css +++ /dev/null @@ -1,39 +0,0 @@ -@import "core.css"; -.wrapper { - max-width: 1024px; - display: grid; - grid-template-areas: "content" "footer"; -} - -.content { - grid-area: content; - text-align: center; -} - -.content input:placeholder { - color: grey; -} - -.content label { - font-size: 14px; -} - -.content a { - color: #f9a826; - font-size: 15px; -} - -.db-warn-msg { - margin-top: 30px; - width: 100%; -} - -.db-warn-msg p { - margin: 0 auto; - width: 500px; - background-color: #e97450; - font-size: 15px; - color: white; - padding: 15px 30px; - border-radius: 10px; -} \ No newline at end of file diff --git a/packages/webapp/src/css/success.css b/packages/webapp/src/css/success.css deleted file mode 100644 index 9c7c4ae5..00000000 --- a/packages/webapp/src/css/success.css +++ /dev/null @@ -1,22 +0,0 @@ -@import "core.css"; -.wrapper { - max-width: 1024px; - min-height: 400px; -} - -.rcontent { - padding-top: 100px; - grid-area: content; - text-align: center; -} - -.rcontent p { - color: black; - font-size: 18px; - margin: 10px 0px 30px 0px; -} - -.rcontent h1 { - color: #f9a826; - font-size: 30px; -} \ No newline at end of file diff --git a/packages/webapp/src/css/core.css b/packages/webapp/src/theme/global-style.ts similarity index 63% rename from packages/webapp/src/css/core.css rename to packages/webapp/src/theme/global-style.ts index ad2f137c..803607b8 100644 --- a/packages/webapp/src/css/core.css +++ b/packages/webapp/src/theme/global-style.ts @@ -1,3 +1,7 @@ +import { createGlobalStyle } from 'styled-components'; + +const GlobalStyle = createGlobalStyle` + @import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900'); * { box-sizing: border-box; @@ -52,90 +56,6 @@ p { color: #000000; } - -/* Footer */ - -.footer { - height: 250px; - margin-top: 80px; - padding: 60px 40px 10px 50px; - background-color: #f9a826; - display: grid; -} - -.footer a { - font-size: 14px; - color: white; - word-wrap: nowrap; -} - -.footer h4 { - font-size: 14px; - color: white; - word-wrap: nowrap; - font-weight: 500px; - margin: 0px; -} - -.footer>svg { - grid-column: 1; -} - -.footer div:nth-child(2) { - grid-column: 2; -} - -.footer div:nth-child(3) { - grid-column: 3; -} - -.footer { - grid-template-columns: 200px 1fr 1fr 3fr; -} - -.footer>svg { - display: inline-block; - visibility: visible; -} - -.footer div:nth-child(4) { - grid-column: 4; - text-align: right; - display: inline-block; - visibility: visible; -} - -.header-area-right1 span, -.header-area-right2 span { - font-size: 15px; -} - -.header-area-content-span { - grid-column-start: 2; - grid-column-end: 4; - text-align: right; - font-size: 14px; - padding: 10px; -} - -@media (max-width: 500px) { - .footer { - grid-template-columns: 0px 1fr 1fr 5px; - } - .footer div:nth-child(1), - .footer div:nth-child(4), - .header-area-content-span { - display: none; - visibility: hidden; - } - .header { - display: grid; - white-space: nowrap; - grid-template-columns: 100px 1fr 130px 130px; - } -} - - /* Form Styles Section */ input[type=email], @@ -179,17 +99,6 @@ input:placeholder { color: grey; } -.form-error-dialog { - margin: 10px auto; - width: 260px; - font-size: 15px; - border: 2px solid #e97450; - padding: 10px 10px; - border-radius: 9px; - color: white; - background-color: #e78b72; -} - /* Buttons */ @@ -248,4 +157,7 @@ input:placeholder { background-color: white; border: solid 1px #ffa800; font-weight: 600; -} \ No newline at end of file +} +`; + +export default GlobalStyle; \ No newline at end of file