Compare commits
No commits in common. "main" and "client" have entirely different histories.
|
|
@ -19,7 +19,6 @@ node_modules
|
|||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -16,10 +16,9 @@
|
|||
"react": "^17.0.1",
|
||||
"react-bootstrap": "^1.5.2",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-google-login": "^5.2.2",
|
||||
"react-lottie": "^1.2.3",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.3",
|
||||
"react-scripts": "^4.0.0",
|
||||
"styled-components": "^5.2.1",
|
||||
"styled-icons": "^10.22.0",
|
||||
"web-vitals": "^0.2.4"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link href="../src/index.css" rel="stylesheet"/>
|
||||
<link href="./src/style.css" rel="stylesheet"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.jpg" />
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
|
|
@ -29,9 +28,10 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- CSS Styles-->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
|
||||
|
||||
<title>Locaft</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
11
src/App.js
11
src/App.js
|
|
@ -11,8 +11,6 @@ import NavBar from "./components/NavBar";
|
|||
import FillingDetails from "./components/FillingDetails";
|
||||
import Error404 from './components/Error404';
|
||||
import Payment from './components/Payment'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
export default function App() {
|
||||
const [userData, setUserData ] = useState({
|
||||
token: undefined,
|
||||
|
|
@ -21,16 +19,15 @@ export default function App() {
|
|||
useEffect(() => {
|
||||
const checkLoggedIn = async () => {
|
||||
let token = localStorage.getItem("auth-token");
|
||||
console.log("app js " + token);
|
||||
if (token == null) {
|
||||
localStorage.setItem("auth-token","");
|
||||
token ="";
|
||||
}
|
||||
const tokenRes = await Axios.post(
|
||||
"https://server-locaft.herokuapp.com/users/tokenIsValid",
|
||||
null,
|
||||
null,
|
||||
{headers: {"x-auth-token": token }}
|
||||
|
||||
|
||||
);
|
||||
if (tokenRes.data) {
|
||||
const userRes = await Axios.get("https://server-locaft.herokuapp.com/users/",
|
||||
|
|
@ -43,7 +40,7 @@ export default function App() {
|
|||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
checkLoggedIn();
|
||||
|
||||
|
|
@ -67,7 +64,7 @@ export default function App() {
|
|||
</UserContext.Provider>
|
||||
</BrowserRouter>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Lottie from 'react-lottie';
|
|||
import animationData from '../lottie/box_error';
|
||||
|
||||
const Body = styled.div`
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,300,500');
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
|
@ -13,7 +13,7 @@ const Body = styled.div`
|
|||
align-items: center;
|
||||
`;
|
||||
const Container = styled.div`
|
||||
|
||||
|
||||
position: relative;
|
||||
background-color: #66bfbf;
|
||||
text-align: center;
|
||||
|
|
@ -25,8 +25,8 @@ const Heading = styled.h1`
|
|||
color: white;
|
||||
font-size: 4rem;
|
||||
margin: 0px;
|
||||
|
||||
|
||||
|
||||
|
||||
`;
|
||||
const defaultOptions = {
|
||||
loop: true,
|
||||
|
|
@ -35,7 +35,7 @@ const defaultOptions = {
|
|||
rendererSettings: {
|
||||
preserveAspectRatio: "xMidYMid slice"
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const Error404 = () => {
|
||||
return (
|
||||
|
|
@ -46,8 +46,8 @@ const Error404 = () => {
|
|||
<Lottie height={500} width={500} options={defaultOptions} />
|
||||
</Container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Body>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const IconStyler = styled.div`
|
|||
height: ${props => props.height ? props.height : 26};
|
||||
color: ${ props => props.color ? props.color: "white"};
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -32,16 +32,12 @@ const defaultOptions = {
|
|||
rendererSettings: {
|
||||
preserveAspectRatio: "xMidYMid slice"
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const ColoredSection = styled.section`
|
||||
const ColoredSection = styled.section`
|
||||
|
||||
background-color:#66bfbf;
|
||||
color: #fff;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
|
||||
`;
|
||||
|
|
@ -77,13 +73,13 @@ const BigHeading = styled.h1`
|
|||
font-family: "Ubuntu";
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
|
||||
`;
|
||||
const FeatureTitle = styled.h3`
|
||||
font-size: 1.5rem;
|
||||
color:#8f8f8f;
|
||||
align-self: center;
|
||||
|
||||
|
||||
`;
|
||||
const TestimonalTitle = styled.h2`
|
||||
font-size: 3rem;
|
||||
|
|
@ -110,7 +106,7 @@ export default function HomePage() {
|
|||
|
||||
<FeatureCol lg="6">
|
||||
<BigHeading>Adapt to a new place easy peasy.</BigHeading>
|
||||
|
||||
|
||||
<Button variant="info" onClick={() => {
|
||||
history.push("/user/login")
|
||||
}} >Log In</Button>
|
||||
|
|
@ -120,7 +116,7 @@ export default function HomePage() {
|
|||
</FeatureCol>
|
||||
|
||||
<FeatureCol lg="6">
|
||||
|
||||
|
||||
<Lottie options= { defaultOptions } />
|
||||
</FeatureCol>
|
||||
|
||||
|
|
@ -232,7 +228,7 @@ export default function HomePage() {
|
|||
</FeatureCol>
|
||||
</Row>
|
||||
</ContainerPadded>
|
||||
|
||||
|
||||
</ColoredSection>
|
||||
<Sidebar logout="{logout}" />
|
||||
<NavBar />
|
||||
|
|
|
|||
|
|
@ -3,81 +3,91 @@ import styled from 'styled-components';
|
|||
|
||||
const Image = styled.img`
|
||||
display:block;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 40px;
|
||||
box-shadow: none;
|
||||
object-fit:cover;
|
||||
`;
|
||||
const Tick = styled.input.attrs(props => ({
|
||||
type: "radio",
|
||||
name: "radiobtn"
|
||||
|
||||
}))`
|
||||
|
||||
`;
|
||||
const Hover = styled.div`
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 350ms ease;
|
||||
position: absolute;
|
||||
|
||||
`;
|
||||
const Overlay = styled.div`
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
transition: black 350ms ease;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
`;
|
||||
const CardTitle = styled.h2`
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
font-family: sans-serif;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
|
||||
|
||||
|
||||
|
||||
position: block;
|
||||
bottom: 0;
|
||||
background: rgb(0, 0, 0);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #f1f1f1;
|
||||
width: 100%;
|
||||
transition: .5s ease;
|
||||
opacity:0;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-top: -90px;
|
||||
`;
|
||||
|
||||
const Paragraph = styled.p`
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
color: #fff;
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const Card = styled.div`
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 40px;
|
||||
box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22);
|
||||
cursor: pointer;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
background-image: url("${props => props.img ? props.img : "vrl.jpg"}");
|
||||
background-size: cover;
|
||||
|
||||
|
||||
&:hover ${Overlay} {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
& .card_image {
|
||||
width: inherit;
|
||||
height:inherit;
|
||||
|
||||
}
|
||||
&:hover ${CardTitle}, :hover ${Paragraph}{
|
||||
transform: translate3d(0,0,0);
|
||||
|
||||
& .card_image ${Image} {
|
||||
width: inherit;
|
||||
height:inherit;
|
||||
border-radius: 40px;
|
||||
object-fit:cover;
|
||||
}
|
||||
&:hover ${Hover}{
|
||||
|
||||
& .card_title {
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
margin-top: -80px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
& .card_title {
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
margin-top: -80px;
|
||||
height: 40px;
|
||||
color: white !important;
|
||||
}
|
||||
& .card_tick {
|
||||
content:'asdf';
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
margin-top: -90px;
|
||||
height: 40px;
|
||||
color: white;
|
||||
}
|
||||
&:hover {
|
||||
|
||||
box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11);
|
||||
;
|
||||
|
||||
}
|
||||
&:hover ${Overlay}{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
|
@ -85,15 +95,15 @@ const Card = styled.div`
|
|||
const HouseCard = (props) => {
|
||||
|
||||
return (
|
||||
<Card img = {props.img}>
|
||||
<Overlay>
|
||||
<Hover>
|
||||
<CardTitle>{props.title ? props.title : "asdf"}</CardTitle>
|
||||
<Paragraph>{props.desc ? props.desc: "zxcv"}</Paragraph>
|
||||
</Hover>
|
||||
</Overlay>
|
||||
|
||||
|
||||
<Card>
|
||||
<Card className="card_image"> <Image src={props.img} alt="asdf" /></Card>
|
||||
<Card className="card_title">
|
||||
<p>Card Title</p>
|
||||
</Card>
|
||||
</Card>
|
||||
|
||||
|
||||
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, {useState, useContext} from 'react';
|
||||
import React, {useContext} from 'react';
|
||||
import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
|
||||
import Register from './Register';
|
||||
import Login from './Login';
|
||||
|
|
@ -7,50 +7,28 @@ import styled, {css} from 'styled-components';
|
|||
import {Button} from './miscellaneous/Styles';
|
||||
import UserContext from "../context/UserContext";
|
||||
import {logout} from "./NavBar"
|
||||
import { GoogleLogin } from 'react-google-login';
|
||||
import Axios from "axios";
|
||||
import { Device} from './miscellaneous/Responsive';
|
||||
|
||||
const BaseApp = styled.div`
|
||||
display: flex;
|
||||
color: white;
|
||||
height:100vh;
|
||||
flex-direction: column;
|
||||
|
||||
@media ${Device.laptop} {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const AppSide = styled.div`
|
||||
width: 50%;
|
||||
background-color: #66bfbf;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 300px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
@media ${Device.laptop} {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
`;
|
||||
const AppForm = styled.div`
|
||||
|
||||
width: 50%;
|
||||
background-color: #ffffff;
|
||||
padding: 25px 40px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
@media ${Device.laptop} {
|
||||
width: 50%;
|
||||
overflow:auto
|
||||
}
|
||||
overflow: auto;
|
||||
|
||||
`;
|
||||
const PageSwitcherContainer = styled.div`
|
||||
|
|
@ -87,7 +65,7 @@ const TextContainer = styled.p`
|
|||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const BannerText = styled.p`
|
||||
|
|
@ -160,73 +138,25 @@ const FormTitle = styled.div`
|
|||
font-weight: 300;
|
||||
margin-bottom: 50px;
|
||||
|
||||
|
||||
`;
|
||||
const responseSuccessGoogle = (response) => {
|
||||
|
||||
Axios({
|
||||
method: 'POST',
|
||||
url: "http://localhost:5000/users/googlelogin",
|
||||
data: { idToken: response.tokenId }
|
||||
}).then(response => {
|
||||
console.log(response);
|
||||
|
||||
})
|
||||
}
|
||||
const responseFailGoogle = (response) => {
|
||||
console.log(response)
|
||||
|
||||
}
|
||||
const LogInContainer = () => {
|
||||
const LogInContainer = (props) => {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
const [error, setError] = useState();
|
||||
const [hasLogged, setHasLogged] = useState(false);
|
||||
const history = useHistory();
|
||||
const responsePassGoogle = async (response) => {
|
||||
try{
|
||||
const idToken = response.tokenId;
|
||||
console.log("id token" + idToken);
|
||||
const googleres = await Axios.post(
|
||||
"https://server-locaft.herokuapp.com/users/googlelogin",{
|
||||
idToken: idToken
|
||||
}
|
||||
|
||||
);
|
||||
setUserData({
|
||||
token: googleres.data.token,
|
||||
user: googleres.data.user
|
||||
});
|
||||
localStorage.setItem("auth-token",googleres.data.token);
|
||||
setHasLogged(true);
|
||||
|
||||
} catch (err) {
|
||||
err.response.data.msg && setError(err.response.data.msg);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
return (
|
||||
<BaseApp>
|
||||
<meta name="google-signin-client_id"
|
||||
content={`${process.env.REACT_APP_CLIENT_ID}.apps.googleusercontent.com`} />
|
||||
<AppSide>
|
||||
{!hasLogged ? (
|
||||
<GoogleLogin
|
||||
clientId= {process.env.REACT_APP_CLIENT_ID}
|
||||
buttonText="Login with Google"
|
||||
onSuccess={responsePassGoogle}
|
||||
onFailure={responseFailGoogle}
|
||||
cookiePolicy={'single_host_origin'}
|
||||
/>
|
||||
<PlaneContainer>
|
||||
<img src="/logo.jpg" alt="plane logo"></img>
|
||||
</PlaneContainer>
|
||||
<TextContainer>
|
||||
<BannerHeading>locaft</BannerHeading>
|
||||
<BannerText>Sit back, let us move you</BannerText>
|
||||
|
||||
|
||||
): (
|
||||
<React.Fragment>
|
||||
<p> username: {userData.user.username}</p>
|
||||
<p> email: {userData.user.email}</p>
|
||||
<p> pricing: {userData.user.pricing}</p>
|
||||
</React.Fragment>
|
||||
|
||||
) }
|
||||
</TextContainer>
|
||||
<SkyContainer>
|
||||
<img src="/skyscraper.png" alt="skyscraper"></img>
|
||||
</SkyContainer>
|
||||
</AppSide>
|
||||
<AppForm>
|
||||
{!userData.user ? (
|
||||
|
|
@ -244,7 +174,7 @@ const responsePassGoogle = async (response) => {
|
|||
</Switch>
|
||||
</BrowserRouter>
|
||||
) : (
|
||||
|
||||
|
||||
<React.Fragment>
|
||||
<BannerText colour="black">Log in successful.</BannerText>
|
||||
<Button
|
||||
|
|
@ -254,8 +184,8 @@ const responsePassGoogle = async (response) => {
|
|||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
onClick={() => { history.push("/")}}
|
||||
|
||||
>home</Button>
|
||||
|
||||
>home</Button>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
|
|
@ -264,22 +194,22 @@ const responsePassGoogle = async (response) => {
|
|||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
onClick={() => {logout(setUserData); history.push("/")}}
|
||||
|
||||
>Logout</Button>
|
||||
|
||||
|
||||
>Logout</Button>
|
||||
|
||||
</React.Fragment>
|
||||
|
||||
|
||||
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</AppForm>
|
||||
|
||||
</BaseApp>
|
||||
|
||||
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ import { Link, useHistory, withRouter } from "react-router-dom";
|
|||
|
||||
import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles'
|
||||
const Login = () => {
|
||||
|
||||
|
||||
const [email, setEmail] = useState();
|
||||
const [password, setPassword] = useState();
|
||||
const [error, setError] = useState();
|
||||
|
||||
const { userData,setUserData } = useContext(UserContext);
|
||||
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
const submit = async (e) => {
|
||||
|
|
@ -23,7 +23,6 @@ const Login = () => {
|
|||
"https://server-locaft.herokuapp.com/users/login",
|
||||
loginUser
|
||||
);
|
||||
console.dir("login res " + loginRes.data.user);
|
||||
setUserData({
|
||||
token: loginRes.data.token,
|
||||
user: loginRes.data.user,
|
||||
|
|
@ -33,9 +32,9 @@ const Login = () => {
|
|||
} catch (err) {
|
||||
err.response.data.msg && setError(err.response.data.msg);
|
||||
}
|
||||
};
|
||||
};
|
||||
return (
|
||||
|
||||
|
||||
<FormCenter>
|
||||
{error && (
|
||||
<ErrorNotice message={error} clearError={() => setError(undefined)} />
|
||||
|
|
@ -52,7 +51,7 @@ const Login = () => {
|
|||
</FormField>
|
||||
|
||||
<FormField>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
radiuscolor="#009578"
|
||||
|
|
@ -62,7 +61,7 @@ const Login = () => {
|
|||
>Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
|
||||
</FormField>
|
||||
</form>
|
||||
|
||||
|
||||
</FormCenter>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const Header = styled.header`
|
|||
display: fixed;
|
||||
`:css``};
|
||||
|
||||
|
||||
|
||||
& .logo {
|
||||
font-family: "Ubuntu";
|
||||
font-size: 2rem;
|
||||
|
|
@ -50,6 +50,7 @@ const List = styled.ul`
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 13px 50px;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 0px !important;
|
||||
|
||||
|
|
@ -75,7 +76,7 @@ const Anchor = styled.a`
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
`;
|
||||
const Linker = styled(Link)`
|
||||
color:#fff;
|
||||
|
|
@ -97,9 +98,9 @@ export const logout = (setUserData) => {
|
|||
};
|
||||
|
||||
export default function NavBar() {
|
||||
const [scrolled, setScrolled] = useState();
|
||||
const [scrolled, setScrolled] = useState();
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
|
||||
|
||||
const handleScroll=() => {
|
||||
const offset=window.scrollY;
|
||||
if(offset > 200 ){
|
||||
|
|
@ -114,11 +115,11 @@ const { userData, setUserData } = useContext(UserContext);
|
|||
})
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
<Header sticky = {scrolled} >
|
||||
|
||||
|
||||
<Anchor href="/" className="logo">locaft</Anchor>
|
||||
<List>
|
||||
<ListElement><Anchor href="/">Home</Anchor></ListElement>
|
||||
|
|
@ -129,7 +130,7 @@ const { userData, setUserData } = useContext(UserContext);
|
|||
<React.Fragment>
|
||||
<ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement>
|
||||
</React.Fragment>
|
||||
|
||||
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<ListElement><Linker to="/user/register">Register</Linker></ListElement>
|
||||
|
|
|
|||
|
|
@ -5,19 +5,11 @@ import Footer from "./Footer";
|
|||
import styled from 'styled-components';
|
||||
|
||||
const CardList = styled.div`
|
||||
display: grid;
|
||||
position: relative;
|
||||
margin: 15px;
|
||||
grid-template-rows: repeat(auto-fill,minmax(200px,1fr));
|
||||
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
|
||||
grid-gap: 30px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
export default function Options() {
|
||||
|
||||
|
|
@ -41,7 +33,7 @@ export default function Options() {
|
|||
content.innerText = `Step Number ${currentStep}`;
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
previousBtn.addEventListener('click', () => {
|
||||
|
|
@ -54,12 +46,12 @@ export default function Options() {
|
|||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
});
|
||||
|
||||
|
||||
|
||||
finishBtn.addEventListener('click', () => {
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -84,25 +76,14 @@ export default function Options() {
|
|||
<div className="bullet ">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p id="content" className="text-center">Step Number 1</p>
|
||||
|
||||
|
||||
<div id="main">
|
||||
<p id="content" className="text-center">Step Number 1</p>
|
||||
<button id="previousBtn" >Previous</button>
|
||||
<button id="nextBtn">Next</button>
|
||||
<button id="finishBtn" >Finish</button>
|
||||
</div>
|
||||
<CardList>
|
||||
<Card img="skyscraper.png" title="cardtitle" desc="description"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="indigo.jpg"/>
|
||||
<Card img="locaft.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
</CardList>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,8 +6,26 @@ import UserContext from "../context/UserContext";
|
|||
import { useHistory } from "react-router-dom";
|
||||
import Axios from 'axios';
|
||||
import { Button } from './miscellaneous/Styles';
|
||||
import { Device} from './miscellaneous/Responsive';
|
||||
|
||||
const size = {
|
||||
mobileS: '320px',
|
||||
mobileM: '375px',
|
||||
mobileL: '425px',
|
||||
tablet: '768px',
|
||||
laptop: '1024px',
|
||||
laptopL: '1440px',
|
||||
desktop: '2560px'
|
||||
}
|
||||
export const Device = {
|
||||
mobileS: `(min-width: ${size.mobileS})`,
|
||||
mobileM: `(min-width: ${size.mobileM})`,
|
||||
mobileL: `(min-width: ${size.mobileL})`,
|
||||
tablet: `(min-width: ${size.tablet})`,
|
||||
laptop: `(min-width: ${size.laptop})`,
|
||||
laptopL: `(min-width: ${size.laptopL})`,
|
||||
desktop: `(min-width: ${size.desktop})`,
|
||||
desktopL: `(min-width: ${size.desktop})`
|
||||
};
|
||||
const PricingPlanContainer = styled.div`
|
||||
|
||||
display:flex;
|
||||
|
|
@ -21,8 +39,8 @@ const PricingPlanContainer = styled.div`
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const Radio = styled.input`
|
||||
|
|
@ -57,10 +75,10 @@ const Pricing = styled.section`
|
|||
box-shadow: 0 0 15px rgba(0,0,0,0.4);
|
||||
transform: scale(1.05);
|
||||
|
||||
|
||||
|
||||
`:css``};
|
||||
|
||||
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const Text = styled.p`
|
||||
|
|
@ -105,7 +123,7 @@ const SpecialText = styled.div`
|
|||
color: #ffffff;
|
||||
background: #007c64;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
|
||||
|
||||
|
||||
&, ${Title}{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
|
@ -120,7 +138,7 @@ const Description = styled.div`
|
|||
|
||||
`;
|
||||
const List = styled.ul`
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
`;
|
||||
|
|
@ -130,7 +148,7 @@ const Feature = styled.li`
|
|||
position: relative;
|
||||
font-size: 0.9 em;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -173,9 +191,9 @@ const submit = async (props) => {
|
|||
"https://server-locaft.herokuapp.com/users/update", {
|
||||
id,
|
||||
pricing
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
|
|
@ -187,7 +205,7 @@ const submit = async (props) => {
|
|||
<div className="body">
|
||||
<NavBar />
|
||||
{ !purchased ? (
|
||||
|
||||
|
||||
<React.Fragment>
|
||||
<Heading>Pricing Plan</Heading>
|
||||
<PricingPlanContainer onChange={event => setPricing(event.target.value)}>
|
||||
|
|
@ -298,7 +316,7 @@ const submit = async (props) => {
|
|||
</div>
|
||||
|
||||
)
|
||||
|
||||
|
||||
|
||||
}
|
||||
export default PricingPlan;
|
||||
|
|
@ -13,6 +13,7 @@ const StyledMenu = styled.nav`
|
|||
height: 100vh;
|
||||
text-align: left;
|
||||
padding: 2rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
|
@ -42,11 +43,11 @@ const StyledMenu = styled.nav`
|
|||
}
|
||||
`
|
||||
|
||||
const Menu = ({open, setOpen}) => {
|
||||
const Menu = (props) => {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
return (
|
||||
<StyledMenu open={open} >
|
||||
<a href="/#about-us"onClick={() => setOpen(false)}>
|
||||
<StyledMenu open={props.open}>
|
||||
<a href="/#about-us">
|
||||
<span role="img" aria-label="about us">💁🏻♂️</span>
|
||||
About us
|
||||
</a>
|
||||
|
|
@ -54,18 +55,18 @@ const Menu = ({open, setOpen}) => {
|
|||
<span role="img" aria-label="pricing">💸</span>
|
||||
Pricing
|
||||
</a>
|
||||
<a href="/#footer"onClick={() => setOpen(false)}>
|
||||
<a href="/#footer">
|
||||
<span role="img" aria-label="contact us">📩</span>
|
||||
Contact
|
||||
</a>
|
||||
|
||||
|
||||
{userData.user ? (
|
||||
<Link >
|
||||
<span role="img" aria-label="{userData.user.username}">📩</span>
|
||||
{userData.user.username}
|
||||
</Link>
|
||||
|
||||
|
||||
|
||||
|
||||
):(
|
||||
<React.Fragment>
|
||||
<a href="/user/register">
|
||||
|
|
@ -78,7 +79,7 @@ const Menu = ({open, setOpen}) => {
|
|||
</a>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
</StyledMenu>
|
||||
)
|
||||
|
|
@ -150,13 +151,13 @@ const Sidebar = (props) => {
|
|||
const node = React.useRef();
|
||||
return (
|
||||
<div>
|
||||
|
||||
|
||||
<div ref={node}>
|
||||
<Burger open={open} setOpen={setOpen} />
|
||||
<Menu open={open} setOpen={setOpen} logout={props.logout} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const useOnClickOutside = (ref, handler) => {
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import {Modal, Button} from 'react-bootstrap';
|
||||
import React, {useState} from 'react';
|
||||
|
||||
export const CustomModal = (props) => {
|
||||
|
||||
const handleClose = () => props.setShow(false);
|
||||
const handleShow = () => props.setShow(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Modal show={props.show} onHide={handleClose}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{props.title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>{props.desc}</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleClose}>
|
||||
Log In
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
export const size = {
|
||||
mobileS: '320px',
|
||||
mobileM: '375px',
|
||||
mobileL: '425px',
|
||||
tablet: '768px',
|
||||
laptop: '1024px',
|
||||
laptopL: '1440px',
|
||||
desktop: '2560px'
|
||||
}
|
||||
export const Device = {
|
||||
mobileS: `(min-width: ${size.mobileS})`,
|
||||
mobileM: `(min-width: ${size.mobileM})`,
|
||||
mobileL: `(min-width: ${size.mobileL})`,
|
||||
tablet: `(min-width: ${size.tablet})`,
|
||||
laptop: `(min-width: ${size.laptop})`,
|
||||
laptopL: `(min-width: ${size.laptopL})`,
|
||||
desktop: `(min-width: ${size.desktop})`,
|
||||
desktopL: `(min-width: ${size.desktop})`
|
||||
};
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
|
|
|||
|
|
@ -7,13 +7,6 @@
|
|||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#main {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -58,7 +51,7 @@ color: #28a745;
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid black;
|
||||
|
|
@ -79,7 +72,7 @@ button:disabled:hover {
|
|||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
Loading…
Reference in New Issue