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

Merge branch 'client' into main

This commit is contained in:
Priyatham Sai Chand 2021-04-12 10:23:48 +05:30
parent 5867a8254b bc5052ba85
commit 6099c144b3
17 changed files with 992 additions and 1164 deletions
Show Stats Download Patch File Download Diff File 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*

1070
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -10,15 +10,15 @@
"@testing-library/jest-dom": "^5.11.5", "@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0", "axios": "^0.21.1",
"bootstrap": "^4.5.3", "bootstrap": "^4.6.0",
"install": "^0.13.0", "install": "^0.13.0",
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.4.0", "react-bootstrap": "^1.5.2",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"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"

4
public/index.html
View File

@ -27,12 +27,10 @@
--> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Stylesheets --> <!-- 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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap Scripts -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Locaft</title> <title>Locaft</title>
</head> </head>

36
src/components/ErrorNotice.js
View File

@ -1,35 +1,53 @@
import React from "react"; import React from "react";
import styled from 'styled-components'; import styled from 'styled-components';
import Footer from "./Footer";
export default function ErrorNotice(props) { export default function ErrorNotice(props) {
const ErrorNotice = styled.div` const ErrorNotice = styled.div`
margin: 1rem 0; margin: 1rem 0;
padding: 0.5rem;
border: 1px solid #e07c7c; border: 1px solid #e07c7c;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #f8d6d6; background-color: #f8d6d6;
padding: 10px;
`; `;
const ErrorMessage = styled.div` const ErrorMessage = styled.div`
color: #000000; color: #000000;
`; `;
const ErrorButton = styled.button const ErrorButton = styled.a
` `
width: 17px; color: red;
height: 28px; position: relative;
display:flex; width: 20px;
background-color: #df4343; height: 20px;
color: #ffffff; opacity: 0.3;
&:hover {
opacity: 1;
}
&:before, &:after {
position: absolute;
left: 15px;
content: ' ';
height: 19px;
width: 2px;
background-color: red;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
`; `;
return ( return (
<ErrorNotice> <ErrorNotice>
<ErrorMessage>{props.message}</ErrorMessage> <ErrorMessage>{props.message}</ErrorMessage>
<ErrorButton onClick={props.clearError}>x</ErrorButton> <ErrorButton onClick={props.clearError}></ErrorButton>
</ErrorNotice> </ErrorNotice>
); );
} }

19
src/components/HomePage.js
View File

@ -11,6 +11,9 @@ import { Bullseye } from "@styled-icons/fa-solid";
import { StyledIconBase } from '@styled-icons/styled-icon' import { StyledIconBase } from '@styled-icons/styled-icon'
import Sidebar from './Sidebar'; import Sidebar from './Sidebar';
const Body = styled.div`
`;
const IconStyler = styled.div` const IconStyler = styled.div`
${StyledIconBase} { ${StyledIconBase} {
width: ${props => props.width ? props.width : 26}px; width: ${props => props.width ? props.width : 26}px;
@ -93,8 +96,7 @@ export default function HomePage() {
return ( return (
<div className="HomePage"> <Body>
<NavBar />
<ColoredSection > <ColoredSection >
@ -228,7 +230,8 @@ export default function HomePage() {
</ContainerPadded> </ContainerPadded>
</ColoredSection> </ColoredSection>
<Sidebar /> <Sidebar logout="{logout}" />
<NavBar />
<div id="footer"> <div id="footer">
<Footer /> <Footer />
@ -236,15 +239,7 @@ export default function HomePage() {
</div> </Body>
); );
} }

222
src/components/LogInContainer.js
View File

@ -1,10 +1,12 @@
import React from 'react'; import React, {useContext} from 'react';
import { 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';
import Footer from './Footer'; import Footer from './Footer';
import styled, {css} from 'styled-components';
import '../login_reg.css'; import {Button} from './miscellaneous/Styles';
import UserContext from "../context/UserContext";
import {logout} from "./NavBar"
const BaseApp = styled.div` const BaseApp = styled.div`
display: flex; display: flex;
@ -13,7 +15,52 @@ const BaseApp = styled.div`
`; `;
const Aside = styled.div`
const AppSide = styled.div`
width: 50%;
background-color: #66bfbf;
display:flex;
flex-direction: column;
justify-content: flex-end;
`;
const AppForm = styled.div`
width: 50%;
background-color: #ffffff;
padding: 25px 40px;
overflow: auto;
`;
const PageSwitcherContainer = styled.div`
display: flex;
justify-content: flex-end;
margin-bottom: 10%;
`;
const BannerHeading = styled.h1`
position: relative;
text-align: center;
font-family: Ubuntu;
font-size: 5rem;
font-weight: bold;
color: #ffffff;
text-decoration: none;
text-transform: lowercase;
`;
const PlaneContainer = styled.div`
width:100px;
display:flex;
margin-bottom: 50px;
align-content: flex-start;
justify-content: flex-start;
`;
const TextContainer = styled.p`
width: 50%; width: 50%;
background-color: #66bfbf; background-color: #66bfbf;
display:flex; display:flex;
@ -22,44 +69,147 @@ const Aside = styled.div`
`; `;
const LogInContainer = (props) => { const BannerText = styled.p`
return (
<BrowserRouter basename="user">
<div className="Apper">
<div className="Apper__Aside">
<div className="Apper_logo">
<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>
</div> color:${props => props.colour ? props.colour : "white"};
<div className="Apper_Aside_image"> font-size: 1.25em;
font-style:italic;
`;
const SkyContainer = styled.div`
margin-top: 600px;
width: 100%;
background-size: 100%;
`;
const PageSwitcher = styled(NavLink)`
background-color: #4C5D72;
color: white;
padding: 10px 25px;
cursor: pointer;
font-size: .9em;
border: none;
outline: none;
display: inline-block;
text-decoration: none !important;
&.active{
background-color: #66bfbf;
color: white;
}
&: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 = () => {
const { userData, setUserData } = useContext(UserContext);
const history = useHistory();
return (
<BaseApp>
<AppSide>
<PlaneContainer>
<img src="/logo.jpg" alt="plane logo"></img>
</PlaneContainer>
<TextContainer>
<BannerHeading>locaft</BannerHeading>
<BannerText>Sit back, let us move you</BannerText>
</TextContainer>
<SkyContainer>
<img src="/skyscraper.png" alt="skyscraper"></img> <img src="/skyscraper.png" alt="skyscraper"></img>
</div> </SkyContainer>
</div> </AppSide>
<div className="Apper__Form"> <AppForm>
<div className="PageSwitcher"> {!userData.user ? (
<NavLink to="/login" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink> <BrowserRouter basename="user">
<NavLink to="/register" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink> <PageSwitcherContainer>
</div> <PageSwitcher to="/login" >Sign In</PageSwitcher>
<div className="FormTitle"> <PageSwitcher to="/register" >Sign Up</PageSwitcher>
<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> </PageSwitcherContainer>
</div> <FormTitle>
<FormLink to="/login" >Sign In</FormLink> or <FormLink to="/register">Sign Up</FormLink>
</FormTitle>
<Switch> <Switch>
<Route path="/register" component={Register} /> <Route path="/register" component={Register} />
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
</Switch> </Switch>
<p>
</p>
</div>
</div>
<Footer background="blue"/>
</BrowserRouter> </BrowserRouter>
) : (
<React.Fragment>
<BannerText colour="black">Log in successful.</BannerText>
<Button
type="submit"
radiuscolor="#009578"
textcolor="#009578"
hovercolor="#009578"
hovertextcolor="white"
onClick={() => { history.push("/")}}
>home</Button>
&nbsp;
<Button
type="submit"
radiuscolor="#009578"
textcolor="#009578"
hovercolor="#009578"
hovertextcolor="white"
onClick={() => {logout(setUserData); history.push("/")}}
>Logout</Button>
</React.Fragment>
)}
</AppForm>
</BaseApp>
); );
} }

34
src/components/Login.js
View File

@ -4,6 +4,7 @@ import Axios from "axios";
import ErrorNotice from "./ErrorNotice"; import ErrorNotice from "./ErrorNotice";
import { Link, useHistory, withRouter } from "react-router-dom"; import { Link, useHistory, withRouter } from "react-router-dom";
import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles'
const Login = () => { const Login = () => {
const [email, setEmail] = useState(); const [email, setEmail] = useState();
@ -34,27 +35,34 @@ const Login = () => {
}; };
return ( return (
<div className="FormCenter"> <FormCenter>
{error && ( {error && (
<ErrorNotice message={error} clearError={() => setError(undefined)} /> <ErrorNotice message={error} clearError={() => setError(undefined)} />
)} )}
<form className="FormFields" onSubmit={submit}> <form className="FormFields" onSubmit={submit}>
<div className="FormField"> <FormField>
<label className="FormField__Label" htmlFor="email">E-Mail Address</label> <FormLabel htmlFor="email">E-Mail Address</FormLabel>
<input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => setEmail(e.target.value)} /> <FormInput type="email" id="email" value={ email } placeholder="enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
</div> </FormField>
<div className="FormField"> <FormField>
<label className="FormField__Label" htmlFor="password">Password</label> <FormLabel htmlFor="password">Password</FormLabel>
<input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} /> <FormInput type="password" id="password" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
</div> </FormField>
<div className="FormField"> <FormField>
<button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/register" className="FormField__Link">Not a member?</Link>
</div> <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> </form>
</div> </FormCenter>
); );
} }

18
src/components/NavBar.js
View File

@ -1,4 +1,4 @@
import React, {useContext,useEffect } from 'react'; import React, { useState,useContext,useEffect } from 'react';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import UserContext from "../context/UserContext"; import UserContext from "../context/UserContext";
import styled,{ css } from 'styled-components'; import styled,{ css } from 'styled-components';
@ -15,7 +15,7 @@ const Header = styled.header`
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: 0.6s; transition: 0.6s;
padding: 10px 15px; padding: 5px 15px;
z-index: 100000; z-index: 100000;
font-family: Ubuntu; font-family: Ubuntu;
@ -89,11 +89,7 @@ const Linker = styled(Link)`
`; `;
export const logout = (setUserData) => {
export default function NavBar() {
const { userData, setUserData } = useContext(UserContext);
const logout = () => {
setUserData({ setUserData({
token: undefined, token: undefined,
user: undefined, user: undefined,
@ -101,8 +97,10 @@ export default function NavBar() {
localStorage.setItem("auth-token", ""); localStorage.setItem("auth-token", "");
}; };
export default function NavBar() {
const [scrolled, setScrolled] = useState();
const { userData, setUserData } = useContext(UserContext);
const [scrolled,setScrolled]=React.useState(false);
const handleScroll=() => { const handleScroll=() => {
const offset=window.scrollY; const offset=window.scrollY;
if(offset > 200 ){ if(offset > 200 ){
@ -126,11 +124,11 @@ export default function NavBar() {
<List> <List>
<ListElement><Anchor href="/">Home</Anchor></ListElement> <ListElement><Anchor href="/">Home</Anchor></ListElement>
<ListElement><Anchor href="/#about-us">About</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> <ListElement><Anchor href="/#footer">Contact us</Anchor></ListElement>
{userData.user ? ( {userData.user ? (
<React.Fragment> <React.Fragment>
<ListElement><Linker onClick={logout}>{userData.user.username}</Linker></ListElement> <ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement>
</React.Fragment> </React.Fragment>
) : ( ) : (

39
src/components/PricingPlan.js
View File

@ -3,9 +3,9 @@ import NavBar from './NavBar';
import Footer from './Footer'; import Footer from './Footer';
import styled,{css} from 'styled-components'; import styled,{css} from 'styled-components';
import UserContext from "../context/UserContext"; import UserContext from "../context/UserContext";
import Payment from "./Payment";
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';
const size = { const size = {
mobileS: '320px', mobileS: '320px',
@ -165,37 +165,13 @@ const Actions = styled.div`
display: flex; display: flex;
flex-direction: column; 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` const Heading = styled.h1`
color: #66bfbf; color: #309975;
margin-left: 20px; margin-left: 20px;
margin-top: 100px; margin-top: 100px;
font-weight: bold;
`; `;
@ -210,6 +186,7 @@ const submit = async (props) => {
props.preventDefault(); props.preventDefault();
try { try {
const id = userData.user.id; const id = userData.user.id;
console.log("Id " + id)
const pricingRes = await Axios.put( const pricingRes = await Axios.put(
"https://server-locaft.herokuapp.com/users/update", { "https://server-locaft.herokuapp.com/users/update", {
id, id,
@ -312,7 +289,13 @@ const submit = async (props) => {
</PricingPlanContainer> </PricingPlanContainer>
<PricingPlanContainer> <PricingPlanContainer>
<Button onClick={() => setPurchased(true) }>Purchase</Button> <Button
radiuscolor="#009578"
textcolor="#009578"
hovercolor="#009578"
hovertextcolor="white"
onClick={() => setPurchased(true)}
>Purchase</Button>
</PricingPlanContainer> </PricingPlanContainer>
</React.Fragment> </React.Fragment>
): ( ): (

102
src/components/Register.js
View File

@ -4,13 +4,38 @@ import UserContext from "../context/UserContext";
import Axios from "axios"; import Axios from "axios";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import ErrorNotice from "./ErrorNotice"; import ErrorNotice from "./ErrorNotice";
import styled from 'styled-components';
import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles'
const CheckBoxLabel = styled.label`
color: #646F7D;
font-size: .9em;
`;
const CheckBox = styled.input`
position: relative;
top: 1.5px;
`;
const TermsLink = styled.a`
color: #646F7D;
border-bottom: 1px solid #199087;
text-decoration: none;
display: inline-block;
padding-bottom: 2px;
margin-left: 5px;
`;
const Register = () => { const Register = () => {
const [email, setEmail] = useState(); const [email, setEmail] = useState();
const [password, setPassword] = useState(); const [password, setPassword] = useState();
const [phonenumber, setPhonenumber] = useState(); const [phonenumber, setPhonenumber] = useState();
const [username, setUsername] = useState(); const [username, setUsername] = useState();
const [error, setError] = useState(); const [error, setError] = useState();
const [contains8C, setContains8C] = useState(false);
const { setUserData } = useContext(UserContext); const { setUserData } = useContext(UserContext);
const history = useHistory(); const history = useHistory();
@ -20,6 +45,12 @@ import ErrorNotice from "./ErrorNotice";
try { try {
const newUser = { username,email,phonenumber,password}; const newUser = { username,email,phonenumber,password};
const isEmpty = !Object.values(newUser).some(x => (x !== null && x !== ''));
console.log("isempty: " + isEmpty )
if(isEmpty){
setError("Not all Fields are entered")
return;
}
await Axios.post("https://server-locaft.herokuapp.com/users/register", newUser); await Axios.post("https://server-locaft.herokuapp.com/users/register", newUser);
const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", { const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", {
email, email,
@ -35,67 +66,82 @@ import ErrorNotice from "./ErrorNotice";
return err.response.data.msg && setError(err.response.data.msg); return err.response.data.msg && setError(err.response.data.msg);
} }
}; };
const validatePassword = () => {
if(password.length >= 8) {
setContains8C(true)
setError(null)
}
else { setContains8C(false); setError("The Password needs to be atleast 8 characters") };
}
return ( return (
<div className="FormCenter"> <FormCenter>
{error && ( {error && (
<ErrorNotice message={error} clearError={() => setError(undefined)} /> <ErrorNotice message={error} clearError={() => setError(undefined)} />
)} )}
<form className="FormFields" onSubmit={submit}> <form className="FormFields" onSubmit={submit}>
<div className="FormField"> <FormField>
<label className="FormField__Label" htmlFor="name">UserName</label> <FormLabel htmlFor="name">UserName</FormLabel>
<input <FormInput
type="text" type="text"
id="name" id="name"
className="FormField__Input"
placeholder="Enter your full name" placeholder="Enter your full name"
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
/> />
</div> </FormField>
<div className="FormField"> <FormField>
<label className="FormField__Label" htmlFor="password">Password</label> <FormLabel htmlFor="password">Password</FormLabel>
<input <FormInput
type="password" type="password"
id="password" id="password"
className="FormField__Input" className="FormField__Input"
placeholder="Enter your password" placeholder="Enter your password"
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
onKeyUp={validatePassword}
/> />
</div> </FormField>
<div className="FormField"> <FormField>
<label className="FormField__Label" htmlFor="email">E-Mail Address</label> <FormLabel htmlFor="email">E-Mail Address</FormLabel>
<input <FormInput
type="email" type="email"
id="email" id="email"
className="FormField__Input" className="FormField__Input"
placeholder="Enter your email" placeholder="Enter your email"
onChange= { (e) => setEmail(e.target.value)} onChange= { (e) => setEmail(e.target.value)}
/> />
</div> </FormField>
<div className="FormField"> <FormField>
<label className="FormField__Label" htmlFor="phone">Phone number</label> <FormLabel htmlFor="phone">Phone number</FormLabel>
<input <FormInput
type="number" type="number"
id="phonenumber" id="phonenumber"
className="FormField__Input" className="FormField__Input"
placeholder="Enter your Phone no. (+91)" placeholder="Enter your Phone no. (+91)"
onChange={(e) => setPhonenumber(parseInt(e.target.value, 10))} onChange={(e) => setPhonenumber(parseInt(e.target.value, 10))}
/> />
</div> </FormField>
<div className="FormField"> <FormField>
<label className="FormField__CheckboxLabel"> <CheckBoxLabel>
<input className="FormField__Checkbox" type="checkbox" name="hasAgreed" required="true" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a> <CheckBox type="checkbox" name="hasAgreed" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
</label> </CheckBoxLabel>
</div> </FormField>
<div className="FormField"> <FormField>
<button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/login" className="FormField__Link">already a member?</Link> <Button
</div> type="submit"
radiuscolor="#009578"
textcolor="#009578"
hovercolor="#009578"
hovertextcolor="white"
>Sign Up</Button>
<FormLink to="/login">already a member?</FormLink>
</FormField>
</form> </form>
</div> </FormCenter>
); );
} }

45
src/components/Sidebar.js
View File

@ -1,10 +1,12 @@
import React, {useState} from 'react'; import React, {useState, useContext} from 'react';
import { Link } from 'react-router-dom'
import styled from 'styled-components'; import styled from 'styled-components';
import UserContext from '../context/UserContext';
const StyledMenu = styled.nav` const StyledMenu = styled.nav`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position:fixed !important;
justify-content: center; justify-content: center;
background: #EFFFFA; background: #EFFFFA;
transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'}; transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'};
@ -41,9 +43,10 @@ const StyledMenu = styled.nav`
} }
` `
const Menu = ({ open }) => { const Menu = (props) => {
const { userData, setUserData } = useContext(UserContext);
return ( return (
<StyledMenu open={open}> <StyledMenu open={props.open}>
<a href="/#about-us"> <a href="/#about-us">
<span role="img" aria-label="about us">💁🏻‍♂️</span> <span role="img" aria-label="about us">💁🏻‍♂️</span>
About us About us
@ -56,12 +59,34 @@ const Menu = ({ open }) => {
<span role="img" aria-label="contact us">📩</span> <span role="img" aria-label="contact us">📩</span>
Contact Contact
</a> </a>
{userData.user ? (
<Link >
<span role="img" aria-label="{userData.user.username}">📩</span>
{userData.user.username}
</Link>
):(
<React.Fragment>
<a href="/user/register">
<span role="img" aria-label="Register">📩</span>
Register
</a>
<a href="/user/login">
<span role="img" aria-label="Login">📩</span>
Login
</a>
</React.Fragment>
)
}
</StyledMenu> </StyledMenu>
) )
} }
const StyledBurger = styled.button` const StyledBurger = styled.button`
position: absolute; position: fixed;
top: 5%; top: 5%;
left: 2rem; left: 2rem;
display: flex; display: flex;
@ -78,6 +103,10 @@ const StyledBurger = styled.button`
&:focus { &:focus {
outline: none; outline: none;
} }
&:hover{
background: transparent;
}
div { div {
width: 2rem; width: 2rem;
@ -117,15 +146,15 @@ const Burger = ({ open, setOpen }) => {
} }
const Sidebar = () => { const Sidebar = (props) => {
const [open, setOpen] = React.useState(false); const [open, setOpen] = useState(false);
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} /> <Menu open={open} setOpen={setOpen} logout={props.logout} />
</div> </div>
</div> </div>
) )

72
src/components/miscellaneous/Styles.js Normal file
View File

@ -0,0 +1,72 @@
import styled from 'styled-components'
import { Link } from 'react-router-dom'
const FormCenter = styled.div`
margin-bottom: 100px;
`;
const FormField = styled.div`
margin-bottom: 40px;
`;
const FormLabel = styled.div`
display: block;
text-transform: uppercase;
font-size: 1.25em;
color: #4C5D72;
text-align: start;
`;
const FormInput = styled.input`
width: 85%;
background-color: transparent;
border: none;
color: #4C5D72;
outline: none;
border-bottom: 1px solid #445366;
font-size: .9em;
font-weight: 300;
padding-bottom: 10px;
margin-top: 10px;
&:placeholder {
color: #616E7F;
}
`;
const FormLink = styled(Link)`
color: #66707D;
text-decoration: none;
display: inline-block;
padding-bottom: 5px;
margin-left: 12px;
`;
const Button = styled.button`
display: inline-block;
margin: 15px auto;
padding: 8px 20px;
color: ${props => props.textcolor ? props.textcolor : "black"} !important;
background: ${props => props.displaycolor ? props.displaycolor : "white"} ;
border-radius: ${props => props.radius ? props.radius: "5"}px;
border: 1px solid;
border-color: ${props => props.radiuscolor ? props.radiuscolor : "black"};
text-transform: uppercase;
letter-spacing: 0.02em;
font-weight: bold;
text-align: center;
cursor: pointer;
&:hover {
background: ${props => props.hovercolor ? props.hovercolor : "white"} ;
color: ${props => props.hovertextcolor ? props.hovertextcolor : "black"}!important;
}
`;
export { Button, FormCenter, FormField, FormLabel, FormInput, FormLink };

116
src/homepage.css
View File

@ -1,116 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
div {
}
h1, h2, h3, h4, h5, h6 {
}
h1 {
color: white ;
}
p {
color: #8f8f8f;
}
/* Headings */
.big-heading {
font-family: "Montserrat-Black";
font-size: 3.5rem;
line-height: 1.5;
}
.section-heading {
font-size: 3rem;
line-height: 1.5;
}
*/
.container-fluid{
padding: 7% 15%;
}
.comment{
padding-bottom: 5%;
}
.submit{
margin-top: 5%;
}
.loginb {
margin: 5% 3% 5% 0;
}
/* Title Section */
#title {
background-color: #66bfbf;
color: #fff;
text-align: left;
}
#title .container-fluid {
padding: 3% 15% 7%;
}
/* Title Image */
.title-image {
width: 70%;
position: absolute;
right: 5%;
}
/* Features Section */
#features {
position: relative;
}
.icon:hover {
color: #66bfbf;
}
/* Testimonial Section */
#testimonials {
background-color: #66bfbf;
}
.testimonial-text {
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 20%;
border-radius: 100%;
margin: 20px;
}
@media (max-width: 1028px) {
#title {
text-align: center;
}
.title-image {
position: static;
transform: rotate(0);
}
}

178
src/login_reg.css
View File

@ -1,178 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
.Apper {
}
.Apper__Aside {
}
.Apper__Form {
width: 50%;
background-color: #ffffff;
padding: 25px 40px;
overflow: auto;
}
.PageSwitcher {
display: flex;
justify-content: flex-end;
margin-bottom: 10%;
}
.Apper_heading{
position: relative;
text-align: center;
font-family: Ubuntu;
font-size: 5rem;
font-weight: bold;
color: #ffffff;
text-decoration: none;
text-transform: lowercase;
}
.Apper_logo img{
width:100px;
display:flex;
margin-bottom: 50px;
align-content: flex-start;
justify-content: flex-start;
}
.Apper__Aside__text {
text-align: center;
margin-bottom: 25%;
}
.Apper_quote{
color:white;
font-size: 1.25em;
font-style:italic;
}
.Apper__Aside_image{
margin-top: 600px;
width: 100%;
background-size: 100%;
}
.PageSwitcher__Item {
background-color: #4C5D72;
color: white;
padding: 10px 25px;
cursor: pointer;
font-size: .9em;
border: none;
outline: none;
display: inline-block;
text-decoration: none;
}
.PageSwitcher__Item--Active {
background-color: #66bfbf;
color: white;
}
.PageSwitcher__Item:first-child {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.PageSwitcher__Item:last-child {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.FormCenter {
margin-bottom: 100px;
}
.FormTitle {
color: #000000;
font-weight: 300;
margin-bottom: 50px;
}
.FormTitle__Link {
color: #707C8B;
text-decoration: none;
display: inline-block;
font-size: 1.7em;
margin: 0 10px;
padding-bottom: 5px;
}
.FormTitle__Link:first-child {
margin-left: 0;
}
.FormTitle__Link--Active {
color: #707c8b;
border-bottom: 1px solid #199087;
}
.FormField {
margin-bottom: 40px;
}
.FormField__Label {
display: block;
text-transform: uppercase;
font-size: 1.25em;
color: #4C5D72;
text-align: start;
}
.FormField__Input {
width: 85%;
background-color: transparent;
border: none;
color: #4C5D72;
outline: none;
border-bottom: 1px solid #445366;
font-size: .9em;
font-weight: 300;
padding-bottom: 10px;
margin-top: 10px;
}
.FormField__Input::placeholder {
color: #616E7F;
}
.FormField__Button {
background-color: #52C4B9;
color: white;
border: none;
outline: none;
border-radius: 25px;
padding: 15px 70px;
font-size: .8em;
font-weight: 500;
}
.FormField__Link {
color: #66707D;
text-decoration: none;
display: inline-block;
padding-bottom: 5px;
margin-left: 12px;
}
.FormField__CheckboxLabel {
color: #646F7D;
font-size: .9em;
}
.FormField__Checkbox {
position: relative;
top: 1.5px;
}
.FormField__TermsLink {
color: #646F7D;
border-bottom: 1px solid #199087;
text-decoration: none;
display: inline-block;
padding-bottom: 2px;
margin-left: 5px;
}

92
src/navbar.css
View File

@ -1,92 +0,0 @@
* {
box-sizing: border-box;
text-decoration: none;
}
header{
background: #66bfbf;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 10px 15px;
z-index: 100000;
font-family: Ubuntu;
}
header.sticky{
padding: 3px 50px;
background: #66bfbf;
opacity: 0.85;
}
header .logo{
font-family: "Ubuntu";
font-size: 2rem;
font-weight: bold;
position: relative;
color: #fff;
text-decoration: none;
text-transform: lowercase;
padding-left: 100px;
transition: 0.6s;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
}
header ul li a {
position: absolute;
content: '';
left:0;
bottom: 0;
height: 5px;
text-decoration: none;
}
header.sticky ul li a{
color: #fff;
}
.checkbtn
{
color:white;
font-size: 30px;
float:right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}

72
src/pricing-plan.css
View File

@ -1,72 +0,0 @@
.pricing-plan-container
{
}
.pricing-plan {
}
.pricing-plan:hover .pricing-plan:active {
}
.pricing-plan__header{
}
.pricing-plan__special-text {
}
.pricing-plan__title,.pricing-plan__summary{
}
.pricing-plan__title{
}
.pricing-plan__summary {
}
.pricing-plan__desc {
}
.pricing-plan__list {
}
.pricing-plan__feature {
}
.pricing-plan__feature:not(:last-child) {
}
.pricing-plan__feature::before {
}
.pricing-plan__actions {
}
.pricing-plan__button {
}
.pricing-plan__button:hover{
}
.pricing-plan__cost{
}
.pricing-plan__text {
}
.pricing-plan-container{
}