mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 06:37:56 +01:00
Continue migration to styles-component
This commit is contained in:
Paulo Gustavo Veiga
parent
e5866a9e4e
commit
0e0ef13e92
@ -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",
|
||||
|
||||
@ -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 ? (
|
||||
<IntlProvider locale={locale} defaultLocale='en' messages={messages}>
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/c/login" />
|
||||
</Route>
|
||||
<Route path="/c/login" component={LoginPage} />
|
||||
<Route path="/c/user/registration">
|
||||
<RegistationPage service={service} />
|
||||
</Route>
|
||||
<Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
|
||||
<Route path="/c/user/resetPassword" component={ForgotPasswordPage} />
|
||||
</Switch>
|
||||
</Router>
|
||||
<GlobalStyle/>
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/c/login" />
|
||||
</Route>
|
||||
<Route path="/c/login" component={LoginPage} />
|
||||
<Route path="/c/user/registration">
|
||||
<RegistationPage service={service} />
|
||||
</Route>
|
||||
<Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
|
||||
<Route path="/c/user/resetPassword" component={ForgotPasswordPage} />
|
||||
</Switch>
|
||||
</Router>
|
||||
</IntlProvider>
|
||||
) : <div>loading</div>
|
||||
) : <div>Loading ... </div>
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -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 (
|
||||
<footer className="footer" >
|
||||
{/* Todo: Replace this with a SVG Image */}
|
||||
<StyledFooter>
|
||||
<div style={{ padding: 0, margin: 0 }}>
|
||||
<a href="http://www.wisemapping.org/">
|
||||
<div style={{ textAlign: "left" }}>Powered By</div><img src={logo} alt="logo" />
|
||||
@ -28,7 +27,7 @@ const Footer = () => {
|
||||
<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>
|
||||
</StyledFooter>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
44
packages/webapp/src/components/footer/styled.ts
Normal file
44
packages/webapp/src/components/footer/styled.ts
Normal file
@ -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;
|
||||
}`
|
||||
|
||||
12
packages/webapp/src/components/form-error-dialog/index.tsx
Normal file
12
packages/webapp/src/components/form-error-dialog/index.tsx
Normal file
@ -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 ? <StyleDiv>{props.message}</StyleDiv > : null;
|
||||
}
|
||||
export default FormErrorDialog;
|
||||
|
||||
12
packages/webapp/src/components/form-error-dialog/styled.ts
Normal file
12
packages/webapp/src/components/form-error-dialog/styled.ts
Normal file
@ -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;
|
||||
`
|
||||
@ -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`
|
||||
|
||||
@ -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 = (<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>
|
||||
</div>);
|
||||
} else {
|
||||
result = <span></span>;
|
||||
}
|
||||
}
|
||||
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 = (
|
||||
<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>)
|
||||
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 = (
|
||||
<div className='form-error-dialog'>
|
||||
<FormattedMessage id="login.error" defaultMessage="The login.email address or login.password you entered is not valid." />
|
||||
</div>)
|
||||
msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is not valid."});
|
||||
}
|
||||
}
|
||||
return (<span>{result}</span>);
|
||||
return <FormErrorDialog message={msg} />
|
||||
|
||||
}
|
||||
const LoginForm = () => {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
@ -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 = <p className='form-error-dialog'>{message}</p>
|
||||
} else {
|
||||
result = <span></span>
|
||||
}
|
||||
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 (
|
||||
<div className="wrapper">
|
||||
<div className="content">
|
||||
<h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
|
||||
<p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
|
||||
<div className="content">
|
||||
<h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
|
||||
<p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
|
||||
|
||||
<form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
|
||||
<input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
|
||||
<input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
|
||||
<input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />
|
||||
<input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
|
||||
<form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
|
||||
<input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
|
||||
<input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
|
||||
<input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />
|
||||
<input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
|
||||
|
||||
<div>
|
||||
<ReCAPTCHA
|
||||
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
|
||||
onChange={setRecaptchaToken} />
|
||||
</div>
|
||||
<div>
|
||||
<ReCAPTCHA
|
||||
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
|
||||
onChange={setRecaptchaToken} />
|
||||
</div>
|
||||
<FormErrorDialog message={errorMsg} />
|
||||
<p>
|
||||
<FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
|
||||
</p>
|
||||
|
||||
<ErrorMessageDialog message={errorMsg} />
|
||||
|
||||
<p>
|
||||
<FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
|
||||
</p>
|
||||
|
||||
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
|
||||
</form>
|
||||
</div>
|
||||
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
type ServiceProps = {
|
||||
|
||||
17
packages/webapp/src/components/registration-page/styled.ts
Normal file
17
packages/webapp/src/components/registration-page/styled.ts
Normal file
@ -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;
|
||||
}
|
||||
`
|
||||
@ -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 (
|
||||
<div>
|
||||
<Header type='none' />
|
||||
<div className="wrapper">
|
||||
<div className="rcontent">
|
||||
<PageContent>
|
||||
<h1>
|
||||
<FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
|
||||
</h1>
|
||||
@ -25,9 +25,8 @@ const RegistrationSuccessPage = () => {
|
||||
</p>
|
||||
|
||||
<SignInButton style='style1'/>
|
||||
</PageContent>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default GlobalStyle;
|
||||
Loading…
Reference in New Issue
Block a user