finish pricing styled
This commit is contained in:
parent
88f2d51a33
commit
235711d3d6
|
|
@ -3,6 +3,7 @@ import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-d
|
|||
import Register from './Register';
|
||||
import Login from './Login';
|
||||
import Footer from './Footer';
|
||||
import styled, {css} from 'styled-components';
|
||||
|
||||
import '../login_reg.css';
|
||||
const BaseApp = styled.div`
|
||||
|
|
@ -28,7 +29,7 @@ const AppForm = styled.div`
|
|||
overflow: auto;
|
||||
|
||||
`;
|
||||
const PageSwitcher = styled.div`
|
||||
const PageSwitcherContainer = styled.div`
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -86,44 +87,81 @@ const PageSwitcher = styled(NavLink)`
|
|||
border: none;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
|
||||
${props = props.active ? css`
|
||||
text-decoration: none !important;
|
||||
|
||||
&.active{
|
||||
background-color: #66bfbf;
|
||||
color: white;
|
||||
`: css``}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
const FormLink = styled(NavLink)`
|
||||
|
||||
color: #707C8B;
|
||||
text-decoration: none !important;
|
||||
display: inline-block;
|
||||
font-size: 1.7em;
|
||||
margin: 0 10px;
|
||||
padding-bottom: 5px;
|
||||
border: none;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
color: #707c8b;
|
||||
}
|
||||
&.active{
|
||||
border-bottom: 1px solid #199087;
|
||||
}
|
||||
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const FormTitle = styled.div`
|
||||
color: #000000;
|
||||
font-weight: 300;
|
||||
margin-bottom: 50px;
|
||||
|
||||
|
||||
`;
|
||||
const LogInContainer = (props) => {
|
||||
return (
|
||||
<BrowserRouter basename="user">
|
||||
<div className="Apper">
|
||||
<div className="Apper__Aside">
|
||||
<div className="Apper_logo">
|
||||
<BaseApp>
|
||||
<AppSide>
|
||||
<PlaneContainer>
|
||||
<img src="/logo.jpg" alt="plane logo"></img>
|
||||
</div>
|
||||
<div className="Apper__Aside__text">
|
||||
<h1 className="Apper_heading">locaft</h1>
|
||||
<p className="Apper_quote">Sit back, let us move you</p>
|
||||
</PlaneContainer>
|
||||
<TextContainer>
|
||||
<BannerHeading>locaft</BannerHeading>
|
||||
<BannerText>Sit back, let us move you</BannerText>
|
||||
|
||||
</div>
|
||||
<div className="Apper_Aside_image">
|
||||
</TextContainer>
|
||||
<SkyContainer>
|
||||
<img src="/skyscraper.png" alt="skyscraper"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className="Apper__Form">
|
||||
<div className="PageSwitcher">
|
||||
<NavLink to="/login" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
|
||||
<NavLink to="/register" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
|
||||
</div>
|
||||
<div className="FormTitle">
|
||||
<NavLink to="/login" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/register" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
|
||||
</div>
|
||||
</SkyContainer>
|
||||
</AppSide>
|
||||
<AppForm>
|
||||
<PageSwitcherContainer>
|
||||
<PageSwitcher to="/login" >Sign In</PageSwitcher>
|
||||
<PageSwitcher to="/register" >Sign Up</PageSwitcher>
|
||||
</PageSwitcherContainer>
|
||||
<FormTitle>
|
||||
<FormLink to="/login" >Sign In</FormLink> or <FormLink to="/register">Sign Up</FormLink>
|
||||
</FormTitle>
|
||||
<Switch>
|
||||
<Route path="/register" component={Register} />
|
||||
<Route path="/login" component={Login} />
|
||||
|
|
@ -132,9 +170,9 @@ const LogInContainer = (props) => {
|
|||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</AppForm>
|
||||
|
||||
</div>
|
||||
</BaseApp>
|
||||
<Footer background="blue"/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Axios from "axios";
|
|||
import ErrorNotice from "./ErrorNotice";
|
||||
import { Link, useHistory, withRouter } from "react-router-dom";
|
||||
|
||||
import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles'
|
||||
const Login = () => {
|
||||
|
||||
const [email, setEmail] = useState();
|
||||
|
|
@ -34,27 +35,34 @@ const Login = () => {
|
|||
};
|
||||
return (
|
||||
|
||||
<div className="FormCenter">
|
||||
<FormCenter>
|
||||
{error && (
|
||||
<ErrorNotice message={error} clearError={() => setError(undefined)} />
|
||||
)}
|
||||
<form className="FormFields" onSubmit={submit}>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
||||
<input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
|
||||
</div>
|
||||
<FormField>
|
||||
<FormLabel htmlFor="email">E-Mail Address</FormLabel>
|
||||
<FormInput type="email" id="email" value={ email } placeholder="enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
|
||||
</FormField>
|
||||
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
||||
<input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
<FormField>
|
||||
<FormLabel htmlFor="password">Password</FormLabel>
|
||||
<FormInput type="password" id="password" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
|
||||
</FormField>
|
||||
|
||||
<div className="FormField">
|
||||
<button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/register" className="FormField__Link">Not a member?</Link>
|
||||
</div>
|
||||
<FormField>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
radiuscolor="#009578"
|
||||
textcolor="#009578"
|
||||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
>Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
|
||||
</FormField>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</FormCenter>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const Header = styled.header`
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: 0.6s;
|
||||
padding: 10px 15px;
|
||||
padding: 5px 15px;
|
||||
z-index: 100000;
|
||||
font-family: Ubuntu;
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ export default function NavBar() {
|
|||
<List>
|
||||
<ListElement><Anchor href="/">Home</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/#about-us">About</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/#services">Services</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/pricing">Pricing</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/#footer">Contact us</Anchor></ListElement>
|
||||
{userData.user ? (
|
||||
<React.Fragment>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import NavBar from './NavBar';
|
|||
import Footer from './Footer';
|
||||
import styled,{css} from 'styled-components';
|
||||
import UserContext from "../context/UserContext";
|
||||
import Payment from "./Payment";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import Axios from 'axios';
|
||||
import { Button } from './miscellaneous/Styles';
|
||||
|
||||
const size = {
|
||||
mobileS: '320px',
|
||||
|
|
@ -165,37 +165,13 @@ const Actions = styled.div`
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
`;
|
||||
const Button = styled.a`
|
||||
|
||||
display: inline-block;
|
||||
margin: 15px auto;
|
||||
padding: 8px 20px;
|
||||
color: #009578;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #009578;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
background: #009578;
|
||||
color: white !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const Heading = styled.h1`
|
||||
color: #66bfbf;
|
||||
color: #309975;
|
||||
margin-left: 20px;
|
||||
margin-top: 100px;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
`;
|
||||
|
||||
|
|
@ -210,6 +186,7 @@ const submit = async (props) => {
|
|||
props.preventDefault();
|
||||
try {
|
||||
const id = userData.user.id;
|
||||
console.log("Id " + id)
|
||||
const pricingRes = await Axios.put(
|
||||
"https://server-locaft.herokuapp.com/users/update", {
|
||||
id,
|
||||
|
|
@ -312,7 +289,13 @@ const submit = async (props) => {
|
|||
|
||||
</PricingPlanContainer>
|
||||
<PricingPlanContainer>
|
||||
<Button onClick={() => setPurchased(true) }>Purchase</Button>
|
||||
<Button
|
||||
radiuscolor="#009578"
|
||||
textcolor="#009578"
|
||||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
onClick={() => setPurchased(true)}
|
||||
>Purchase</Button>
|
||||
</PricingPlanContainer>
|
||||
</React.Fragment>
|
||||
): (
|
||||
|
|
|
|||
Loading…
Reference in New Issue