adding modal

house card hover fix
house card overlay add
2021-04-19 23:35:04 +05:30 · 2021-04-18 22:25:21 +05:30 · 2021-04-18 16:40:01 +05:30 · 2021-04-17 22:25:54 +05:30 · 2021-04-16 23:52:54 +05:30 · 2021-04-15 21:55:00 +05:30
25 changed files with 1277 additions and 1320 deletions
--- a/.gitignore
+++ b/.gitignore
@ -19,6 +19,7 @@ node_modules
 .env.development.local
 .env.test.local
 .env.production.local
+.env

 npm-debug.log*
 yarn-debug.log*
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -10,15 +10,16 @@
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
-    "axios": "^0.21.0",
-    "bootstrap": "^4.5.3",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
    "install": "^0.13.0",
    "react": "^17.0.1",
-    "react-bootstrap": "^1.4.0",
+    "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.0",
+    "react-scripts": "^4.0.3",
    "styled-components": "^5.2.1",
    "styled-icons": "^10.22.0",
    "web-vitals": "^0.2.4"
--- a/public/index.html
+++ b/public/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <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="theme-color" content="#000000" />
    <meta
@ -11,6 +11,7 @@
      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/
@ -27,12 +28,9 @@
    -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

-  <!-- CSS Stylesheets -->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <!-- CSS Styles-->


-  <!-- 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>
  </head>
--- a/src/App.js
+++ b/src/App.js
@ -11,6 +11,8 @@ 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,
@ -19,6 +21,7 @@ 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 ="";
--- a/src/components/Error404.js
+++ b/src/components/Error404.js
@ -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;
--- a/src/components/ErrorNotice.js
+++ b/src/components/ErrorNotice.js
@ -1,35 +1,53 @@
 import React from "react";
 import styled from 'styled-components';
-import Footer from "./Footer";


 export default function ErrorNotice(props) {
  const ErrorNotice = styled.div`
  margin: 1rem 0;
-  padding: 0.5rem;
  border: 1px solid #e07c7c;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8d6d6;
+  padding: 10px;
 `;
  const ErrorMessage = styled.div`
 color: #000000;
 `;

-  const ErrorButton = styled.button
+  const ErrorButton = styled.a
    `
-  width: 17px;
-  height: 28px;
-  display:flex;
-  background-color: #df4343;
-  color: #ffffff;
+  color: red;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  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 (
    <ErrorNotice>
      <ErrorMessage>{props.message}</ErrorMessage>
-      <ErrorButton onClick={props.clearError}>x</ErrorButton>
+      <ErrorButton onClick={props.clearError}></ErrorButton>
    </ErrorNotice>
  );
 }
--- a/src/components/HomePage.js
+++ b/src/components/HomePage.js
@ -11,6 +11,9 @@ import { Bullseye } from "@styled-icons/fa-solid";
 import { StyledIconBase } from '@styled-icons/styled-icon'
 import Sidebar from './Sidebar';

+const Body = styled.div`
+`;
+
 const IconStyler = styled.div`
  ${StyledIconBase} {
    width: ${props => props.width ? props.width : 26}px;
@ -35,6 +38,10 @@ const ColoredSection = styled.section`

  background-color:#66bfbf;
  color: #fff;
+    background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;


 `;
@ -93,8 +100,7 @@ export default function HomePage() {

  return (

-    <div className="HomePage">
-      <NavBar />
+    <Body>

      <ColoredSection >

@ -228,7 +234,8 @@ export default function HomePage() {
        </ContainerPadded>

      </ColoredSection>
-      <Sidebar />
+      <Sidebar logout="{logout}" />
+      <NavBar />

      <div id="footer">
        <Footer />
@ -236,15 +243,7 @@ export default function HomePage() {



-    </div>
-
-
-
-
-
-
-
-
+    </Body>
  );
 }

--- a/src/components/HouseCard.js
+++ b/src/components/HouseCard.js
@ -3,6 +3,11 @@ 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",
@ -10,84 +15,69 @@ const Tick = styled.input.attrs(props => ({

 }))`

+`;
+const Hover = styled.div`
+    height: inherit;
+    width: inherit;
+    opacity: 0;
+    transition: opacity 350ms ease;
+    position: absolute;
 `;
 const Overlay = styled.div`
-  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;
+  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;
+
+
+
+
 `;

+const Paragraph = styled.p`
+
+  margin-top: 10px;
+  margin-left: 10px;
+color: #fff;
+
+
+`;

 const Card = styled.div`
-  width: 300px;
-  height: 300px;
+  width: 200px;
+  height: 200px;
  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;

-
-  & .card_image {
-      width: inherit;
-      height:inherit;
-      
+  &:hover ${Overlay} {
+    background-color: rgba(0,0,0,0.5);
  }
-
-   & .card_image  ${Image}  {
-      width: inherit;
-      height:inherit;
-      border-radius: 40px;
-      object-fit:cover;
+  &:hover ${CardTitle}, :hover ${Paragraph}{
+    transform: translate3d(0,0,0);
  }
-
-  & .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}{
+  &:hover ${Hover}{
    opacity: 1;

-}
+  }
 `;


@ -95,13 +85,13 @@ 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) => {

    return (
-        
-            
-        <Card>
-            <Card className="card_image"> <Image src={props.img} alt="asdf" /></Card> 
-            <Card className="card_title">
-                <p>Card Title</p>
-            </Card>
+        <Card img = {props.img}>
+            <Overlay>
+                <Hover>
+                    <CardTitle>{props.title ? props.title : "asdf"}</CardTitle>
+                    <Paragraph>{props.desc ? props.desc: "zxcv"}</Paragraph>
+                </Hover>
+            </Overlay>
        </Card>


--- a/src/components/LogInContainer.js
+++ b/src/components/LogInContainer.js
@ -1,19 +1,87 @@
-import React from 'react';
-import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
+import React, {useState, useContext} from 'react';
+import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
 import Register from './Register';
 import Login from './Login';
 import Footer from './Footer';
-
-import '../login_reg.css';
+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 Aside = styled.div`
+const AppSide = styled.div`
+  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%;
+  }
+
+
+
+
+`;
+const AppForm = styled.div`
+
+  background-color: #ffffff;
+  padding: 25px 40px;
+  height: 100vh;
+  width: 100vw;
+
+  @media ${Device.laptop} {
+    width: 50%;
+    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%;
  background-color: #66bfbf;
  display:flex;
@ -22,44 +90,196 @@ const Aside = styled.div`

 `;

-const LogInContainer = (props) => {
-    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>
+const BannerText = styled.p`

-            </div>
-             <div className="Apper_Aside_image">
-                <img src="/skyscraper.png" alt="skyscraper"></img>
-              </div>
-          </div>
-          <div className="Apper__Form">
-              <div className="PageSwitcher">
-                <NavLink to="/login" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
-                <NavLink to="/register" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
-              </div>
-              <div className="FormTitle">
-                  <NavLink to="/login" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/register" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
-              </div>
+  color:${props => props.colour ? props.colour : "white"};
+  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 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 [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'}
+  />
+
+
+            ): (
+              <React.Fragment>
+                <p> username: {userData.user.username}</p>
+                <p> email: {userData.user.email}</p>
+                <p> pricing: {userData.user.pricing}</p>
+              </React.Fragment>
+
+            ) }
+          </AppSide>
+          <AppForm>
+            {!userData.user ? (
+        <BrowserRouter basename="user">
+              <PageSwitcherContainer>
+                <PageSwitcher to="/login" >Sign In</PageSwitcher>
+                <PageSwitcher to="/register" >Sign Up</PageSwitcher>
+              </PageSwitcherContainer>
+              <FormTitle>
+                  <FormLink to="/login" >Sign In</FormLink> or <FormLink  to="/register">Sign Up</FormLink>
+              </FormTitle>
          <Switch>
            <Route path="/register" component={Register} />
            <Route path="/login" component={Login} />
          </Switch>
-          <p>
-
-          </p>
-
-          </div>
-
-        </div>
-          <Footer background="blue"/>
        </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>
+
+
    );
  }

--- a/src/components/Login.js
+++ b/src/components/Login.js
@ -4,6 +4,7 @@ import Axios from "axios";
 import ErrorNotice from "./ErrorNotice";
 import { Link, useHistory, withRouter } from "react-router-dom";

+import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink  } from './miscellaneous/Styles'
 const Login = () => {

  const [email, setEmail] = useState();
@ -22,6 +23,7 @@ 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,
@ -34,27 +36,34 @@ const Login = () => {
  };
        return (

-        <div className="FormCenter">
+        <FormCenter>
          {error && (
        <ErrorNotice message={error} clearError={() => setError(undefined)} />
      )}
            <form  className="FormFields" onSubmit={submit}>
-            <div className="FormField">
-                <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
-                <input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
-              </div>
+            <FormField>
+                <FormLabel htmlFor="email">E-Mail Address</FormLabel>
+                <FormInput type="email" id="email"  value={ email } placeholder="enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
+              </FormField>

-              <div className="FormField">
-                <label className="FormField__Label" htmlFor="password">Password</label>
-                <input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
-              </div>
+              <FormField>
+                <FormLabel htmlFor="password">Password</FormLabel>
+                <FormInput type="password" id="password" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
+              </FormField>

-              <div className="FormField">
-                  <button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/register" className="FormField__Link">Not a member?</Link>
-              </div>
+              <FormField>
+
+              <Button
+                  type="submit"
+                  radiuscolor="#009578"
+                  textcolor="#009578"
+                  hovercolor="#009578"
+                  hovertextcolor="white"
+                  >Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
+              </FormField>
            </form>

-          </div>
+          </FormCenter>
        );
    }

--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@ -1,4 +1,4 @@
-import React, {useContext,useEffect } from 'react';
+import React, { useState,useContext,useEffect } from 'react';
 import { Link } from "react-router-dom";
 import  UserContext  from "../context/UserContext";
 import styled,{ css } from 'styled-components';
@ -15,7 +15,7 @@ const Header = styled.header`
  justify-content: space-between;
  align-items: center;
  transition: 0.6s;
-  padding: 10px 15px;
+  padding: 5px 15px;
  z-index: 100000;
  font-family: Ubuntu;

@ -50,7 +50,6 @@ const List = styled.ul`
  flex-direction: row;
  justify-content: center;
  align-items: center;
-  padding: 13px 50px;
  flex-wrap: nowrap;
  margin-bottom: 0px !important;

@ -89,11 +88,7 @@ const Linker = styled(Link)`

 `;

-
-export default function NavBar() {
-  const { userData, setUserData } = useContext(UserContext);
-  
-  const logout = () => {
+export  const logout = (setUserData) => {
    setUserData({
      token: undefined,
      user: undefined,
@ -101,8 +96,10 @@ export default function NavBar() {
    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 offset=window.scrollY;
    if(offset > 200 ){
@ -126,11 +123,11 @@ export default function NavBar() {
        <List>
          <ListElement><Anchor href="/">Home</Anchor></ListElement>
          <ListElement><Anchor href="/#about-us">About</Anchor></ListElement>
-          <ListElement><Anchor href="/#services">Services</Anchor></ListElement>
+          <ListElement><Anchor href="/pricing">Pricing</Anchor></ListElement>
          <ListElement><Anchor href="/#footer">Contact us</Anchor></ListElement>
          {userData.user ? (
            <React.Fragment>
-            <ListElement><Linker onClick={logout}>{userData.user.username}</Linker></ListElement>
+            <ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement>
            </React.Fragment>

          ) : (
--- a/src/components/Options.js
+++ b/src/components/Options.js
@ -5,11 +5,19 @@ import Footer from "./Footer";
 import styled from 'styled-components';

 const CardList = styled.div`
-    z-index: 0;
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
+  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;
+
+
+
+
+
 `;
 export default function Options() {

@ -78,12 +86,23 @@ export default function Options() {
            </div>


-                <div id="main">
                <p id="content" className="text-center">Step Number 1</p>
+                <div id="main">
                <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>
    )
--- a/src/components/PricingPlan.js
+++ b/src/components/PricingPlan.js
@ -3,29 +3,11 @@ import NavBar from './NavBar';
 import Footer from './Footer';
 import styled,{css} from 'styled-components';
 import UserContext from "../context/UserContext";
-import Payment from "./Payment";
 import { useHistory } from "react-router-dom";
 import Axios from 'axios';
+import { Button } from './miscellaneous/Styles';
+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;
@ -165,37 +147,13 @@ const Actions = styled.div`
    display: flex;
    flex-direction: column;

-`;
-const Button = styled.a`
-
-    display: inline-block;
-    margin: 15px auto;
-    padding: 8px 20px;
-    color: #009578;
-    background: #ffffff;
-    border-radius: 5px;
-    border: 1px solid #009578;
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-    font-weight: bold;
-    text-align: center;
-    cursor: pointer;
-
-    &:hover {
-
-    background: #009578;
-    color: white !important;
-
-    }
-
-
 `;

 const Heading = styled.h1`
-    color: #66bfbf;
+    color: #309975;
    margin-left: 20px;
    margin-top: 100px;
-
+    font-weight: bold;

 `;

@ -210,6 +168,7 @@ const submit = async (props) => {
    props.preventDefault();
    try {
        const id = userData.user.id;
+        console.log("Id " + id)
        const pricingRes = await Axios.put(
            "https://server-locaft.herokuapp.com/users/update", {
            id,
@ -312,7 +271,13 @@ const submit = async (props) => {

                </PricingPlanContainer>
                <PricingPlanContainer>
-                            <Button onClick={() =>  setPurchased(true) }>Purchase</Button>
+                            <Button
+                                radiuscolor="#009578"
+                                textcolor="#009578"
+                                hovercolor="#009578"
+                                hovertextcolor="white"
+                                onClick={() => setPurchased(true)}
+                            >Purchase</Button>
                </PricingPlanContainer>
                </React.Fragment>
             ): (
--- a/src/components/Register.js
+++ b/src/components/Register.js
@ -4,13 +4,38 @@ import UserContext from "../context/UserContext";
 import Axios from "axios";
 import { Link } from "react-router-dom";
 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 [email, setEmail] = useState();
  const [password, setPassword] = useState();
  const [phonenumber, setPhonenumber] = useState();
  const [username, setUsername] = useState();
  const [error, setError] = useState();
+  const [contains8C, setContains8C] = useState(false);

  const { setUserData } = useContext(UserContext);
  const history = useHistory();
@ -20,6 +45,12 @@ import ErrorNotice from "./ErrorNotice";

    try {
      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);
      const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", {
        email,
@ -35,67 +66,82 @@ import ErrorNotice from "./ErrorNotice";
      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 (
-    <div className="FormCenter">
+    <FormCenter>
      {error && (
        <ErrorNotice message={error} clearError={() => setError(undefined)} />
      )}
      <form className="FormFields" onSubmit={submit}>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="name">UserName</label>
-          <input 
+        <FormField>
+          <FormLabel htmlFor="name">UserName</FormLabel>
+          <FormInput
            type="text"
            id="name"
-          className="FormField__Input" 
            placeholder="Enter your full name"
-          onChange= { (e) => setUsername(e.target.value)}
+            onChange={(e) => setUsername(e.target.value)}
          />
-        </div>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="password">Password</label>
-          <input 
+        </FormField>
+        <FormField>
+          <FormLabel htmlFor="password">Password</FormLabel>
+          <FormInput
            type="password"
            id="password"
            className="FormField__Input"
            placeholder="Enter your password"
-          onChange= { (e) => setPassword(e.target.value)}
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyUp={validatePassword}
          />
-        </div>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
-          <input 
+        </FormField>
+        <FormField>
+          <FormLabel htmlFor="email">E-Mail Address</FormLabel> 
+          <FormInput
          type="email" 
          id="email" 
          className="FormField__Input" 
          placeholder="Enter your email"
          onChange= { (e) => setEmail(e.target.value)}
-          
          />
-        </div>
-        <div className="FormField">
-          <label className="FormField__Label" htmlFor="phone">Phone number</label>
-          <input 
+        </FormField>
+        <FormField>
+          <FormLabel htmlFor="phone">Phone number</FormLabel>
+          <FormInput
          type="number" 
          id="phonenumber" 
            className="FormField__Input"
            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">
-          <label className="FormField__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>
-          </label>
-        </div>
+        <FormField>
+          <CheckBoxLabel>
+            <CheckBox type="checkbox" name="hasAgreed" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
+          </CheckBoxLabel>
+        </FormField>

-        <div className="FormField">
-          <button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/login" className="FormField__Link">already a member?</Link>
-        </div>
+        <FormField>
+          <Button
+            type="submit"
+             radiuscolor="#009578"
+             textcolor="#009578"
+             hovercolor="#009578"
+             hovertextcolor="white"
+          
+          >Sign Up</Button>
+          <FormLink to="/login">already a member?</FormLink>
+        </FormField>
      </form>
-    </div>
+    </FormCenter>
  );
 }

--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@ -1,17 +1,18 @@
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
+import { Link } from 'react-router-dom'
 import styled from 'styled-components';
-
+import UserContext from '../context/UserContext';
 const StyledMenu = styled.nav`

  display: flex;
  flex-direction: column;
+  position:fixed !important;
  justify-content: center;
  background: #EFFFFA;
  transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'};
  height: 100vh;
  text-align: left;
  padding: 2rem;
-  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;
@ -41,10 +42,11 @@ const StyledMenu = styled.nav`
  }
 `

-const Menu = ({ open }) => {
+const Menu = ({open, setOpen}) => {
+  const { userData, setUserData } = useContext(UserContext);
  return (
-    <StyledMenu open={open}>
-      <a href="/#about-us">
+    <StyledMenu open={open} >
+      <a href="/#about-us"onClick={() => setOpen(false)}>
        <span role="img" aria-label="about us">💁🏻‍♂️</span>
        About us
      </a>
@ -52,16 +54,38 @@ const Menu = ({ open }) => {
        <span role="img" aria-label="pricing">💸</span>
        Pricing
        </a>
-      <a href="/#footer">
+      <a href="/#footer"onClick={() => setOpen(false)}>
        <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">
+        <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>
  )
 }

 const StyledBurger = styled.button`
-  position: absolute;
+  position: fixed;
  top: 5%;
  left: 2rem;
  display: flex;
@ -78,6 +102,10 @@ const StyledBurger = styled.button`
  &:focus {
    outline: none;
  }
+  &:hover{
+  background: transparent;
+
+  }

  div {
    width: 2rem;
@ -117,15 +145,15 @@ const Burger = ({ open, setOpen }) => {
 }


-const Sidebar = () => {
-  const [open, setOpen] = React.useState(false);
+const Sidebar = (props) => {
+  const [open, setOpen] = useState(false);
  const node = React.useRef();
  return (
    <div>

      <div ref={node}>
        <Burger open={open} setOpen={setOpen} />
-        <Menu open={open} setOpen={setOpen} />
+        <Menu open={open} setOpen={setOpen} logout={props.logout} />
      </div>
    </div>
  )
--- a/src/components/miscellaneous/Modal.js
+++ b/src/components/miscellaneous/Modal.js
@ -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>
+    </>
+  );
+}
--- a/src/components/miscellaneous/Responsive.js
+++ b/src/components/miscellaneous/Responsive.js
@ -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})`
+};
--- a/src/components/miscellaneous/Styles.js
+++ b/src/components/miscellaneous/Styles.js
@ -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 };
--- a/src/homepage.css
+++ b/src/homepage.css
@ -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);
-  }
-}
-
--- a/src/index.css
+++ b/src/index.css
@ -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=Montserrat|Ubuntu');
+
 * {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
--- a/src/login_reg.css
+++ b/src/login_reg.css
@ -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;
-}
-
--- a/src/navbar.css
+++ b/src/navbar.css
@ -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;
-}
-
-
--- a/src/options.css
+++ b/src/options.css
@ -7,6 +7,13 @@
 	margin-bottom:  40px;
 }

+#main {
+	display:flex;
+	justify-content:  center;
+	align-items:  center;
+
+}
+
 .step  {
 text-align:  center;
 }
--- a/src/pricing-plan.css
+++ b/src/pricing-plan.css
@ -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{
-
-}
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	f8f8ef9327	add after log in	2021-04-05 16:11:07 +05:30
Priyatham-sai-chand	80db290d4d	error notice modify	2021-03-31 23:54:24 +05:30
Priyatham Sai Chand	63a68d51e7	Added Jest mock package	2021-03-30 23:49:23 +05:30
Priyatham Sai Chand	950d4a9072	modify sidebar	2021-03-29 18:17:28 +05:30
Priyatham Sai Chand	8408889432	Merge branch 'client' of github.com:Priyatham-sai-chand/locaft into client	2021-03-29 15:51:53 +05:30
Priyatham Sai Chand	54295a18f6	web bootstrap reset	2021-03-29 15:51:01 +05:30
Priyatham Sai Chand	3c360a9276	remove web bootstrap	2021-03-29 15:23:01 +05:30
Priyatham Sai Chand	7e7fb6d46a	finish log in styled	2021-03-28 23:54:40 +05:30
Priyatham Sai Chand	235711d3d6	finish pricing styled	2021-03-28 23:54:21 +05:30
Priyatham Sai Chand	88f2d51a33	Button styled export	2021-03-28 18:38:40 +05:30
Priyatham Sai Chand	66e24f5d3c	log in styled change	2021-03-27 23:52:22 +05:30
Priyatham Sai Chand	a818be5766	start styled log in migration	2021-03-26 23:54:56 +05:30