priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: priyatham:client
Branches Tags
priyatham:main
priyatham:server
priyatham:client
priyatham:Priyatham-sai-chand/gitpod-setup
..
compare: priyatham:main
Branches Tags
priyatham:main
priyatham:server
priyatham:client
priyatham:Priyatham-sai-chand/gitpod-setup

12 Commits
client ... main

Author SHA1 Message Date
Priyatham Sai Chand e736aa99fb adding modal 2021-04-19 23:35:04 +05:30
Priyatham Sai Chand 508cbf5d63 house card hover fix 2021-04-18 22:25:21 +05:30
Priyatham Sai Chand 521219bbbb house card overlay add 2021-04-18 16:40:01 +05:30
Priyatham Sai Chand bd8c1d25a8 card placement 2021-04-17 22:25:54 +05:30
Priyatham Sai Chand 1f8b82a3ea house card start 2021-04-16 23:52:54 +05:30
Priyatham-sai-chand 5cc119b916 http to https fix 2021-04-15 21:55:00 +05:30
Priyatham-sai-chand ed392ef98d google meta tag 2021-04-15 21:47:31 +05:30
Priyatham Sai Chand 3d688dfbc8 log in responsive fix 2021-04-13 18:30:37 +05:30
Priyatham Sai Chand 01a1e2ceea google auth fix 2021-04-13 18:12:40 +05:30
Priyatham Sai Chand 6099c144b3 Merge branch 'client' into main 2021-04-12 10:23:48 +05:30
Priyatham Sai Chand bc5052ba85 modules reinstalled 2021-04-11 21:37:37 +05:30
Priyatham Sai Chand 5867a8254b start styled log in migration 2021-03-26 23:53:37 +05:30
18 changed files with 796 additions and 727 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -19,6 +19,7 @@ node_modules
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
.env
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*

1012
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -16,9 +16,10 @@
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.5.2", "react-bootstrap": "^1.5.2",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-google-login": "^5.2.2",
"react-lottie": "^1.2.3", "react-lottie": "^1.2.3",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0", "react-scripts": "^4.0.3",
"styled-components": "^5.2.1", "styled-components": "^5.2.1",
"styled-icons": "^10.22.0", "styled-icons": "^10.22.0",
"web-vitals": "^0.2.4" "web-vitals": "^0.2.4"

6
public/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="./src/style.css" rel="stylesheet"/> <link href="../src/index.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
@ -11,6 +11,7 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.jpg" /> <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 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/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -28,10 +29,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Styles--> <!-- 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> <title>Locaft</title>
</head> </head>
<body> <body>

11
src/App.js
View File

@ -11,6 +11,8 @@ import NavBar from "./components/NavBar";
import FillingDetails from "./components/FillingDetails"; import FillingDetails from "./components/FillingDetails";
import Error404 from './components/Error404'; import Error404 from './components/Error404';
import Payment from './components/Payment' import Payment from './components/Payment'
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() { export default function App() {
const [userData, setUserData ] = useState({ const [userData, setUserData ] = useState({
token: undefined, token: undefined,
@ -19,15 +21,16 @@ export default function App() {
useEffect(() => { useEffect(() => {
const checkLoggedIn = async () => { const checkLoggedIn = async () => {
let token = localStorage.getItem("auth-token"); let token = localStorage.getItem("auth-token");
console.log("app js " + token);
if (token == null) { if (token == null) {
localStorage.setItem("auth-token",""); localStorage.setItem("auth-token","");
token =""; token ="";
} }
const tokenRes = await Axios.post( const tokenRes = await Axios.post(
"https://server-locaft.herokuapp.com/users/tokenIsValid", "https://server-locaft.herokuapp.com/users/tokenIsValid",
null, null,
{headers: {"x-auth-token": token }} {headers: {"x-auth-token": token }}
); );
if (tokenRes.data) { if (tokenRes.data) {
const userRes = await Axios.get("https://server-locaft.herokuapp.com/users/", const userRes = await Axios.get("https://server-locaft.herokuapp.com/users/",
@ -40,7 +43,7 @@ export default function App() {
} }
}; };
checkLoggedIn(); checkLoggedIn();
@ -64,7 +67,7 @@ export default function App() {
</UserContext.Provider> </UserContext.Provider>
</BrowserRouter> </BrowserRouter>
</div> </div>
</> </>

14
src/components/Error404.js
View File

@ -4,7 +4,7 @@ import Lottie from 'react-lottie';
import animationData from '../lottie/box_error'; import animationData from '../lottie/box_error';
const Body = styled.div` 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%; font-size: 100%;
line-height: 1.5; line-height: 1.5;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
@ -13,7 +13,7 @@ const Body = styled.div`
align-items: center; align-items: center;
`; `;
const Container = styled.div` const Container = styled.div`
position: relative; position: relative;
background-color: #66bfbf; background-color: #66bfbf;
text-align: center; text-align: center;
@ -25,8 +25,8 @@ const Heading = styled.h1`
color: white; color: white;
font-size: 4rem; font-size: 4rem;
margin: 0px; margin: 0px;
`; `;
const defaultOptions = { const defaultOptions = {
loop: true, loop: true,
@ -35,7 +35,7 @@ const defaultOptions = {
rendererSettings: { rendererSettings: {
preserveAspectRatio: "xMidYMid slice" preserveAspectRatio: "xMidYMid slice"
} }
}; };
const Error404 = () => { const Error404 = () => {
return ( return (
@ -46,8 +46,8 @@ const Error404 = () => {
<Lottie height={500} width={500} options={defaultOptions} /> <Lottie height={500} width={500} options={defaultOptions} />
</Container> </Container>
</Body> </Body>

20
src/components/HomePage.js
View File

@ -20,7 +20,7 @@ const IconStyler = styled.div`
height: ${props => props.height ? props.height : 26}; height: ${props => props.height ? props.height : 26};
color: ${ props => props.color ? props.color: "white"}; color: ${ props => props.color ? props.color: "white"};
} }
@ -32,12 +32,16 @@ const defaultOptions = {
rendererSettings: { rendererSettings: {
preserveAspectRatio: "xMidYMid slice" preserveAspectRatio: "xMidYMid slice"
} }
}; };
const ColoredSection = styled.section` const ColoredSection = styled.section`
background-color:#66bfbf; background-color:#66bfbf;
color: #fff; color: #fff;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
`; `;
@ -73,13 +77,13 @@ const BigHeading = styled.h1`
font-family: "Ubuntu"; font-family: "Ubuntu";
color: white; color: white;
font-weight: bold; font-weight: bold;
`; `;
const FeatureTitle = styled.h3` const FeatureTitle = styled.h3`
font-size: 1.5rem; font-size: 1.5rem;
color:#8f8f8f; color:#8f8f8f;
align-self: center; align-self: center;
`; `;
const TestimonalTitle = styled.h2` const TestimonalTitle = styled.h2`
font-size: 3rem; font-size: 3rem;
@ -106,7 +110,7 @@ export default function HomePage() {
<FeatureCol lg="6"> <FeatureCol lg="6">
<BigHeading>Adapt to a new place easy peasy.</BigHeading> <BigHeading>Adapt to a new place easy peasy.</BigHeading>
<Button variant="info" onClick={() => { <Button variant="info" onClick={() => {
history.push("/user/login") history.push("/user/login")
}} >Log In</Button> &nbsp; }} >Log In</Button> &nbsp;
@ -116,7 +120,7 @@ export default function HomePage() {
</FeatureCol> </FeatureCol>
<FeatureCol lg="6"> <FeatureCol lg="6">
<Lottie options= { defaultOptions } /> <Lottie options= { defaultOptions } />
</FeatureCol> </FeatureCol>
@ -228,7 +232,7 @@ export default function HomePage() {
</FeatureCol> </FeatureCol>
</Row> </Row>
</ContainerPadded> </ContainerPadded>
</ColoredSection> </ColoredSection>
<Sidebar logout="{logout}" /> <Sidebar logout="{logout}" />
<NavBar /> <NavBar />

134
src/components/HouseCard.js
View File

@ -3,91 +3,81 @@ import styled from 'styled-components';
const Image = styled.img` const Image = styled.img`
display:block; display:block;
width: inherit;
height: inherit;
border-radius: 40px;
box-shadow: none;
object-fit:cover;
`; `;
const Tick = styled.input.attrs(props => ({ const Tick = styled.input.attrs(props => ({
type: "radio", type: "radio",
name: "radiobtn" name: "radiobtn"
}))` }))`
`;
const Hover = styled.div`
height: inherit;
width: inherit;
opacity: 0;
transition: opacity 350ms ease;
position: absolute;
`; `;
const Overlay = styled.div` const Overlay = styled.div`
position: block; height: inherit;
bottom: 0; width: inherit;
background: rgb(0, 0, 0); transition: black 350ms ease;
background: rgba(0, 0, 0, 0.5); background-color: transparent;
color: #f1f1f1; border-radius: 40px;
width: 100%; position: absolute;
transition: .5s ease; display: flex;
opacity:0; align-items: center;
color: white; justify-content: center;
font-size: 20px;
padding: 20px;
text-align: center; `;
margin-top: -90px; const CardTitle = styled.h2`
margin-top: 10px;
margin-left: 10px;
font-family: sans-serif;
box-shadow: none;
color: #fff;
`; `;
const Paragraph = styled.p`
margin-top: 10px;
margin-left: 10px;
color: #fff;
`;
const Card = styled.div` const Card = styled.div`
width: 300px; width: 200px;
height: 300px; height: 200px;
border-radius: 40px; 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); box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22);
cursor: pointer; cursor: pointer;
transition: 0.4s; transition: 0.4s;
position: relative;
background-image: url("${props => props.img ? props.img : "vrl.jpg"}");
background-size: cover;
& .card_image { &:hover ${Overlay} {
width: inherit; background-color: rgba(0,0,0,0.5);
height:inherit;
} }
&:hover ${CardTitle}, :hover ${Paragraph}{
& .card_image ${Image} { transform: translate3d(0,0,0);
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; opacity: 1;
} }
`; `;
@ -95,15 +85,15 @@ box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11)
const HouseCard = (props) => { const HouseCard = (props) => {
return ( return (
<Card img = {props.img}>
<Overlay>
<Card> <Hover>
<Card className="card_image"> <Image src={props.img} alt="asdf" /></Card> <CardTitle>{props.title ? props.title : "asdf"}</CardTitle>
<Card className="card_title"> <Paragraph>{props.desc ? props.desc: "zxcv"}</Paragraph>
<p>Card Title</p> </Hover>
</Card> </Overlay>
</Card> </Card>
); );

132
src/components/LogInContainer.js
View File

@ -1,4 +1,4 @@
import React, {useContext} from 'react'; import React, {useState, useContext} from 'react';
import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom'; import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
import Register from './Register'; import Register from './Register';
import Login from './Login'; import Login from './Login';
@ -7,28 +7,50 @@ import styled, {css} from 'styled-components';
import {Button} from './miscellaneous/Styles'; import {Button} from './miscellaneous/Styles';
import UserContext from "../context/UserContext"; import UserContext from "../context/UserContext";
import {logout} from "./NavBar" import {logout} from "./NavBar"
import { GoogleLogin } from 'react-google-login';
import Axios from "axios";
import { Device} from './miscellaneous/Responsive';
const BaseApp = styled.div` const BaseApp = styled.div`
display: flex; display: flex;
color: white; color: white;
height:100vh; height:100vh;
flex-direction: column;
@media ${Device.laptop} {
flex-direction: row;
}
`; `;
const AppSide = styled.div` const AppSide = styled.div`
width: 50%;
background-color: #66bfbf; background-color: #66bfbf;
display:flex; display: grid;
flex-direction: column; grid-template-columns: repeat(auto-fit, 300px);
justify-content: flex-end; justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
@media ${Device.laptop} {
width: 50%;
}
`; `;
const AppForm = styled.div` const AppForm = styled.div`
width: 50%;
background-color: #ffffff; background-color: #ffffff;
padding: 25px 40px; padding: 25px 40px;
overflow: auto; height: 100vh;
width: 100vw;
@media ${Device.laptop} {
width: 50%;
overflow:auto
}
`; `;
const PageSwitcherContainer = styled.div` const PageSwitcherContainer = styled.div`
@ -65,7 +87,7 @@ const TextContainer = styled.p`
display:flex; display:flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
`; `;
const BannerText = styled.p` const BannerText = styled.p`
@ -138,25 +160,73 @@ const FormTitle = styled.div`
font-weight: 300; font-weight: 300;
margin-bottom: 50px; margin-bottom: 50px;
`; `;
const LogInContainer = (props) => { 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 { userData, setUserData } = useContext(UserContext); const { userData, setUserData } = useContext(UserContext);
const [error, setError] = useState();
const [hasLogged, setHasLogged] = useState(false);
const history = useHistory(); 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 ( return (
<BaseApp> <BaseApp>
<meta name="google-signin-client_id"
content={`${process.env.REACT_APP_CLIENT_ID}.apps.googleusercontent.com`} />
<AppSide> <AppSide>
<PlaneContainer> {!hasLogged ? (
<img src="/logo.jpg" alt="plane logo"></img> <GoogleLogin
</PlaneContainer> clientId= {process.env.REACT_APP_CLIENT_ID}
<TextContainer> buttonText="Login with Google"
<BannerHeading>locaft</BannerHeading> onSuccess={responsePassGoogle}
<BannerText>Sit back, let us move you</BannerText> onFailure={responseFailGoogle}
cookiePolicy={'single_host_origin'}
/>
</TextContainer>
<SkyContainer> ): (
<img src="/skyscraper.png" alt="skyscraper"></img> <React.Fragment>
</SkyContainer> <p> username: {userData.user.username}</p>
<p> email: {userData.user.email}</p>
<p> pricing: {userData.user.pricing}</p>
</React.Fragment>
) }
</AppSide> </AppSide>
<AppForm> <AppForm>
{!userData.user ? ( {!userData.user ? (
@ -174,7 +244,7 @@ const LogInContainer = (props) => {
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
) : ( ) : (
<React.Fragment> <React.Fragment>
<BannerText colour="black">Log in successful.</BannerText> <BannerText colour="black">Log in successful.</BannerText>
<Button <Button
@ -184,8 +254,8 @@ const LogInContainer = (props) => {
hovercolor="#009578" hovercolor="#009578"
hovertextcolor="white" hovertextcolor="white"
onClick={() => { history.push("/")}} onClick={() => { history.push("/")}}
>home</Button> >home</Button>
&nbsp; &nbsp;
<Button <Button
type="submit" type="submit"
@ -194,22 +264,22 @@ const LogInContainer = (props) => {
hovercolor="#009578" hovercolor="#009578"
hovertextcolor="white" hovertextcolor="white"
onClick={() => {logout(setUserData); history.push("/")}} onClick={() => {logout(setUserData); history.push("/")}}
>Logout</Button> >Logout</Button>
</React.Fragment> </React.Fragment>
)} )}
</AppForm> </AppForm>
</BaseApp> </BaseApp>
); );
} }

13
src/components/Login.js
View File

@ -6,13 +6,13 @@ import { Link, useHistory, withRouter } from "react-router-dom";
import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles' import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles'
const Login = () => { const Login = () => {
const [email, setEmail] = useState(); const [email, setEmail] = useState();
const [password, setPassword] = useState(); const [password, setPassword] = useState();
const [error, setError] = useState(); const [error, setError] = useState();
const { userData,setUserData } = useContext(UserContext); const { userData,setUserData } = useContext(UserContext);
const history = useHistory(); const history = useHistory();
const submit = async (e) => { const submit = async (e) => {
@ -23,6 +23,7 @@ const Login = () => {
"https://server-locaft.herokuapp.com/users/login", "https://server-locaft.herokuapp.com/users/login",
loginUser loginUser
); );
console.dir("login res " + loginRes.data.user);
setUserData({ setUserData({
token: loginRes.data.token, token: loginRes.data.token,
user: loginRes.data.user, user: loginRes.data.user,
@ -32,9 +33,9 @@ const Login = () => {
} catch (err) { } catch (err) {
err.response.data.msg && setError(err.response.data.msg); err.response.data.msg && setError(err.response.data.msg);
} }
}; };
return ( return (
<FormCenter> <FormCenter>
{error && ( {error && (
<ErrorNotice message={error} clearError={() => setError(undefined)} /> <ErrorNotice message={error} clearError={() => setError(undefined)} />
@ -51,7 +52,7 @@ const Login = () => {
</FormField> </FormField>
<FormField> <FormField>
<Button <Button
type="submit" type="submit"
radiuscolor="#009578" radiuscolor="#009578"
@ -61,7 +62,7 @@ const Login = () => {
>Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink> >Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
</FormField> </FormField>
</form> </form>
</FormCenter> </FormCenter>
); );
} }

15
src/components/NavBar.js
View File

@ -27,7 +27,7 @@ const Header = styled.header`
display: fixed; display: fixed;
`:css``}; `:css``};
& .logo { & .logo {
font-family: "Ubuntu"; font-family: "Ubuntu";
font-size: 2rem; font-size: 2rem;
@ -50,7 +50,6 @@ const List = styled.ul`
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 13px 50px;
flex-wrap: nowrap; flex-wrap: nowrap;
margin-bottom: 0px !important; margin-bottom: 0px !important;
@ -76,7 +75,7 @@ const Anchor = styled.a`
`; `;
const Linker = styled(Link)` const Linker = styled(Link)`
color:#fff; color:#fff;
@ -98,9 +97,9 @@ export const logout = (setUserData) => {
}; };
export default function NavBar() { export default function NavBar() {
const [scrolled, setScrolled] = useState(); const [scrolled, setScrolled] = useState();
const { userData, setUserData } = useContext(UserContext); const { userData, setUserData } = useContext(UserContext);
const handleScroll=() => { const handleScroll=() => {
const offset=window.scrollY; const offset=window.scrollY;
if(offset > 200 ){ if(offset > 200 ){
@ -115,11 +114,11 @@ const { userData, setUserData } = useContext(UserContext);
}) })
return ( return (
<div className="navbar"> <div className="navbar">
<Header sticky = {scrolled} > <Header sticky = {scrolled} >
<Anchor href="/" className="logo">locaft</Anchor> <Anchor href="/" className="logo">locaft</Anchor>
<List> <List>
<ListElement><Anchor href="/">Home</Anchor></ListElement> <ListElement><Anchor href="/">Home</Anchor></ListElement>
@ -130,7 +129,7 @@ const { userData, setUserData } = useContext(UserContext);
<React.Fragment> <React.Fragment>
<ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement> <ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement>
</React.Fragment> </React.Fragment>
) : ( ) : (
<React.Fragment> <React.Fragment>
<ListElement><Linker to="/user/register">Register</Linker></ListElement> <ListElement><Linker to="/user/register">Register</Linker></ListElement>

41
src/components/Options.js
View File

@ -5,11 +5,19 @@ import Footer from "./Footer";
import styled from 'styled-components'; import styled from 'styled-components';
const CardList = styled.div` const CardList = styled.div`
z-index: 0; display: grid;
width: 100%; position: relative;
display: flex; margin: 15px;
justify-content: space-around; grid-template-rows: repeat(auto-fill,minmax(200px,1fr));
flex-wrap: wrap; grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-gap: 30px;
align-items: center;
justify-items: center;
`; `;
export default function Options() { export default function Options() {
@ -33,7 +41,7 @@ export default function Options() {
content.innerText = `Step Number ${currentStep}`; content.innerText = `Step Number ${currentStep}`;
}); });
previousBtn.addEventListener('click', () => { previousBtn.addEventListener('click', () => {
@ -46,12 +54,12 @@ export default function Options() {
} }
content.innerText = `Step Number ${currentStep}`; content.innerText = `Step Number ${currentStep}`;
}); });
finishBtn.addEventListener('click', () => { finishBtn.addEventListener('click', () => {
window.location.reload(); window.location.reload();
}); });
}) })
@ -76,14 +84,25 @@ export default function Options() {
<div className="bullet ">4</div> <div className="bullet ">4</div>
</div> </div>
</div> </div>
<div id="main">
<p id="content" className="text-center">Step Number 1</p> <p id="content" className="text-center">Step Number 1</p>
<div id="main">
<button id="previousBtn" >Previous</button> <button id="previousBtn" >Previous</button>
<button id="nextBtn">Next</button> <button id="nextBtn">Next</button>
<button id="finishBtn" >Finish</button> <button id="finishBtn" >Finish</button>
</div> </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 /> <Footer />
</div> </div>
) )

44
src/components/PricingPlan.js
View File

@ -6,26 +6,8 @@ import UserContext from "../context/UserContext";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import Axios from 'axios'; import Axios from 'axios';
import { Button } from './miscellaneous/Styles'; 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` const PricingPlanContainer = styled.div`
display:flex; display:flex;
@ -39,8 +21,8 @@ const PricingPlanContainer = styled.div`
} }
`; `;
const Radio = styled.input` const Radio = styled.input`
@ -75,10 +57,10 @@ const Pricing = styled.section`
box-shadow: 0 0 15px rgba(0,0,0,0.4); box-shadow: 0 0 15px rgba(0,0,0,0.4);
transform: scale(1.05); transform: scale(1.05);
`:css``}; `:css``};
`; `;
const Text = styled.p` const Text = styled.p`
@ -123,7 +105,7 @@ const SpecialText = styled.div`
color: #ffffff; color: #ffffff;
background: #007c64; background: #007c64;
box-shadow: 0 0 10px rgba(0,0,0,0.2) inset; box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
&, ${Title}{ &, ${Title}{
margin: 0; margin: 0;
text-align: center; text-align: center;
@ -138,7 +120,7 @@ const Description = styled.div`
`; `;
const List = styled.ul` const List = styled.ul`
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: left; text-align: left;
`; `;
@ -148,7 +130,7 @@ const Feature = styled.li`
position: relative; position: relative;
font-size: 0.9 em; font-size: 0.9 em;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 2em; margin-bottom: 2em;
} }
&::before { &::before {
@ -191,9 +173,9 @@ const submit = async (props) => {
"https://server-locaft.herokuapp.com/users/update", { "https://server-locaft.herokuapp.com/users/update", {
id, id,
pricing pricing
} }
); );
} catch (err) { } catch (err) {
console.log(err); console.log(err);
@ -205,7 +187,7 @@ const submit = async (props) => {
<div className="body"> <div className="body">
<NavBar /> <NavBar />
{ !purchased ? ( { !purchased ? (
<React.Fragment> <React.Fragment>
<Heading>Pricing Plan</Heading> <Heading>Pricing Plan</Heading>
<PricingPlanContainer onChange={event => setPricing(event.target.value)}> <PricingPlanContainer onChange={event => setPricing(event.target.value)}>
@ -316,7 +298,7 @@ const submit = async (props) => {
</div> </div>
) )
} }
export default PricingPlan; export default PricingPlan;

21
src/components/Sidebar.js
View File

@ -13,7 +13,6 @@ const StyledMenu = styled.nav`
height: 100vh; height: 100vh;
text-align: left; text-align: left;
padding: 2rem; padding: 2rem;
position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
@ -43,11 +42,11 @@ const StyledMenu = styled.nav`
} }
` `
const Menu = (props) => { const Menu = ({open, setOpen}) => {
const { userData, setUserData } = useContext(UserContext); const { userData, setUserData } = useContext(UserContext);
return ( return (
<StyledMenu open={props.open}> <StyledMenu open={open} >
<a href="/#about-us"> <a href="/#about-us"onClick={() => setOpen(false)}>
<span role="img" aria-label="about us">💁🏻‍♂️</span> <span role="img" aria-label="about us">💁🏻‍♂️</span>
About us About us
</a> </a>
@ -55,18 +54,18 @@ const Menu = (props) => {
<span role="img" aria-label="pricing">💸</span> <span role="img" aria-label="pricing">💸</span>
Pricing Pricing
</a> </a>
<a href="/#footer"> <a href="/#footer"onClick={() => setOpen(false)}>
<span role="img" aria-label="contact us">📩</span> <span role="img" aria-label="contact us">📩</span>
Contact Contact
</a> </a>
{userData.user ? ( {userData.user ? (
<Link > <Link >
<span role="img" aria-label="{userData.user.username}">📩</span> <span role="img" aria-label="{userData.user.username}">📩</span>
{userData.user.username} {userData.user.username}
</Link> </Link>
):( ):(
<React.Fragment> <React.Fragment>
<a href="/user/register"> <a href="/user/register">
@ -79,7 +78,7 @@ const Menu = (props) => {
</a> </a>
</React.Fragment> </React.Fragment>
) )
} }
</StyledMenu> </StyledMenu>
) )
@ -151,13 +150,13 @@ const Sidebar = (props) => {
const node = React.useRef(); const node = React.useRef();
return ( return (
<div> <div>
<div ref={node}> <div ref={node}>
<Burger open={open} setOpen={setOpen} /> <Burger open={open} setOpen={setOpen} />
<Menu open={open} setOpen={setOpen} logout={props.logout} /> <Menu open={open} setOpen={setOpen} logout={props.logout} />
</div> </div>
</div> </div>
) )
} }
const useOnClickOutside = (ref, handler) => { const useOnClickOutside = (ref, handler) => {

25
src/components/miscellaneous/Modal.js Normal file
View File

@ -0,0 +1,25 @@
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>
</>
);
}

19
src/components/miscellaneous/Responsive.js Normal file
View File

@ -0,0 +1,19 @@
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
src/index.css
View File

@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu'); @import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;

11
src/options.css
View File

@ -7,6 +7,13 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
#main {
display:flex;
justify-content: center;
align-items: center;
}
.step { .step {
text-align: center; text-align: center;
} }
@ -51,7 +58,7 @@ color: #28a745;
.hidden { .hidden {
display: none; display: none;
} }
button { button {
padding: 5px 10px; padding: 5px 10px;
border: 1px solid black; border: 1px solid black;
@ -72,7 +79,7 @@ button:disabled:hover {
.text-center { .text-center {
text-align: center; text-align: center;
} }
.container { .container {
max-width: 400px; max-width: 400px;
margin: 0 auto; margin: 0 auto;