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
18 changed files with 796 additions and 727 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
@ -16,9 +16,10 @@
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^17.0.1",
+    "react-google-login": "^5.2.2",
    "react-lottie": "^1.2.3",
    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.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/
@ -28,10 +29,9 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

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


-     
+
    <title>Locaft</title>
  </head>
  <body>
--- 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,15 +21,16 @@ export default function App() {
  useEffect(() => {
    const checkLoggedIn = async () => {
      let token = localStorage.getItem("auth-token");
+      console.log("app js " + token);
      if (token == null) {
        localStorage.setItem("auth-token","");
        token ="";
      }
      const tokenRes = await Axios.post(
        "https://server-locaft.herokuapp.com/users/tokenIsValid",
-        null, 
+        null,
        {headers: {"x-auth-token": token }}
-        
+
        );
        if (tokenRes.data) {
          const userRes = await Axios.get("https://server-locaft.herokuapp.com/users/",
@ -40,7 +43,7 @@ export default function App() {
        }

    };
-    
+

    checkLoggedIn();

@ -64,7 +67,7 @@ export default function App() {
          </UserContext.Provider>
        </BrowserRouter>

-        
+
      </div>
      </>

--- 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;
@ -13,7 +13,7 @@ const Body = styled.div`
  align-items: center;
 `;
 const Container = styled.div`
- 
+
  position: relative;
  background-color: #66bfbf;
  text-align: center;
@ -25,8 +25,8 @@ const Heading = styled.h1`
  color: white;
  font-size: 4rem;
  margin: 0px;
-  
- 
+
+
  `;
 const defaultOptions = {
      loop: true,
@ -35,7 +35,7 @@ const defaultOptions = {
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
-    }; 
+    };

 const Error404 = () => {
  return (
@ -46,8 +46,8 @@ const Error404 = () => {
       <Lottie height={500} width={500} options={defaultOptions} />
       </Container>

-    
-      
+
+
    </Body>


--- a/src/components/HomePage.js
+++ b/src/components/HomePage.js
@ -20,7 +20,7 @@ const IconStyler = styled.div`
    height: ${props => props.height ? props.height : 26};
    color: ${ props => props.color ? props.color: "white"};

-    
+
  }


@ -32,12 +32,16 @@ const defaultOptions = {
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
-    }; 
+    };

-const ColoredSection = styled.section`  
+const ColoredSection = styled.section`

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


 `;
@ -73,13 +77,13 @@ const BigHeading = styled.h1`
  font-family: "Ubuntu";
  color: white;
  font-weight: bold;
-  
+
 `;
 const FeatureTitle = styled.h3`
  font-size: 1.5rem;
  color:#8f8f8f;
  align-self: center;
-          
+
 `;
 const TestimonalTitle = styled.h2`
  font-size: 3rem;
@ -106,7 +110,7 @@ export default function HomePage() {

            <FeatureCol lg="6">
              <BigHeading>Adapt to a new place easy peasy.</BigHeading>
-            
+
              <Button variant="info" onClick={() => {
                history.push("/user/login")
              }} >Log In</Button> &nbsp;
@ -116,7 +120,7 @@ export default function HomePage() {
            </FeatureCol>

            <FeatureCol lg="6">
-              
+
              <Lottie options= { defaultOptions } />
            </FeatureCol>

@ -228,7 +232,7 @@ export default function HomePage() {
          </FeatureCol>
          </Row>
        </ContainerPadded>
-      
+
      </ColoredSection>
      <Sidebar logout="{logout}" />
      <NavBar />
--- a/src/components/HouseCard.js
+++ b/src/components/HouseCard.js
@ -3,91 +3,81 @@ import styled from 'styled-components';

 const Image = styled.img`
    display:block;
+    width: inherit;
+    height: inherit;
+      border-radius: 40px;
+      box-shadow: none;
+      object-fit:cover;
 `;
 const Tick = styled.input.attrs(props => ({
    type: "radio",
    name: "radiobtn"

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

    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,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 Register from './Register';
 import Login from './Login';
@ -7,28 +7,50 @@ import styled, {css} from 'styled-components';
 import {Button} from './miscellaneous/Styles';
 import UserContext from "../context/UserContext";
 import {logout} from "./NavBar"
+import { GoogleLogin } from 'react-google-login';
+import Axios from "axios";
+import { Device} from './miscellaneous/Responsive';

 const BaseApp = styled.div`
  display: flex;
  color: white;
  height:100vh;
+  flex-direction: column;

+@media ${Device.laptop} {
+  flex-direction: row;
+}

 `;
+
 const AppSide = styled.div`
-  width: 50%;
  background-color: #66bfbf;
-  display:flex;
-  flex-direction: column;
-  justify-content: flex-end;
- 
+ 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`

-  width: 50%;
  background-color: #ffffff;
  padding: 25px 40px;
-  overflow: auto;
+  height: 100vh;
+  width: 100vw;
+
+  @media ${Device.laptop} {
+    width: 50%;
+    overflow:auto
+  }

 `;
 const PageSwitcherContainer = styled.div`
@ -65,7 +87,7 @@ const TextContainer = styled.p`
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
- 
+
 `;

 const BannerText = styled.p`
@ -138,25 +160,73 @@ const FormTitle = styled.div`
  font-weight: 300;
  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 [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>
-            <PlaneContainer>
-            <img src="/logo.jpg" alt="plane logo"></img>
-            </PlaneContainer>
-            <TextContainer>
-              <BannerHeading>locaft</BannerHeading>
-              <BannerText>Sit back, let us move you</BannerText>
+            {!hasLogged ? (
+            <GoogleLogin
+    clientId= {process.env.REACT_APP_CLIENT_ID}
+    buttonText="Login with Google"
+    onSuccess={responsePassGoogle}
+    onFailure={responseFailGoogle}
+    cookiePolicy={'single_host_origin'}
+  />

-            </TextContainer>
-             <SkyContainer>
-                <img src="/skyscraper.png" alt="skyscraper"></img>
-              </SkyContainer>
+
+            ): (
+              <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 ? (
@ -174,7 +244,7 @@ const LogInContainer = (props) => {
          </Switch>
        </BrowserRouter>
       ) :  (
-         
+
              <React.Fragment>
              <BannerText colour="black">Log in successful.</BannerText>
              <Button
@ -184,8 +254,8 @@ const LogInContainer = (props) => {
                  hovercolor="#009578"
                  hovertextcolor="white"
                  onClick={() => { history.push("/")}}
-                  
-             >home</Button> 
+
+             >home</Button>
              &nbsp;
              <Button
                  type="submit"
@ -194,22 +264,22 @@ const LogInContainer = (props) => {
                  hovercolor="#009578"
                  hovertextcolor="white"
                  onClick={() => {logout(setUserData); history.push("/")}}
-                  
-             >Logout</Button> 
-              
+
+             >Logout</Button>
+
              </React.Fragment>

-            
+
            )}


-         
+

          </AppForm>

        </BaseApp>
-        
-          
+
+
    );
  }

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

 import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink  } from './miscellaneous/Styles'
 const Login = () => {
-    
+
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();
  const [error, setError] = useState();

 const { userData,setUserData } = useContext(UserContext);
-  
+
  const history = useHistory();

  const submit = async (e) => {
@ -23,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,
@ -32,9 +33,9 @@ const Login = () => {
    } catch (err) {
      err.response.data.msg && setError(err.response.data.msg);
    }
-  }; 
+  };
        return (
-          
+
        <FormCenter>
          {error && (
        <ErrorNotice message={error} clearError={() => setError(undefined)} />
@ -51,7 +52,7 @@ const Login = () => {
              </FormField>

              <FormField>
-  
+
              <Button
                  type="submit"
                  radiuscolor="#009578"
@ -61,7 +62,7 @@ const Login = () => {
                  >Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
              </FormField>
            </form>
-            
+
          </FormCenter>
        );
    }
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@ -27,7 +27,7 @@ const Header = styled.header`
  display: fixed;
  `:css``};

-  
+
   & .logo {
  font-family: "Ubuntu";
  font-size: 2rem;
@ -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;

@ -76,7 +75,7 @@ const Anchor = styled.a`



-    
+
 `;
 const Linker = styled(Link)`
 	color:#fff;
@ -98,9 +97,9 @@ export  const logout = (setUserData) => {
  };

 export default function NavBar() {
-  const [scrolled, setScrolled] = useState(); 
+  const [scrolled, setScrolled] = useState();
 const { userData, setUserData } = useContext(UserContext);
-  
+
  const handleScroll=() => {
    const offset=window.scrollY;
    if(offset > 200 ){
@ -115,11 +114,11 @@ const { userData, setUserData } = useContext(UserContext);
  })


-  
+
  return (
    <div className="navbar">
      <Header sticky = {scrolled} >
-       
+
        <Anchor href="/" className="logo">locaft</Anchor>
        <List>
          <ListElement><Anchor href="/">Home</Anchor></ListElement>
@ -130,7 +129,7 @@ const { userData, setUserData } = useContext(UserContext);
            <React.Fragment>
            <ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement>
            </React.Fragment>
-            
+
          ) : (
              <React.Fragment>
              <ListElement><Linker  to="/user/register">Register</Linker></ListElement>
--- 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() {

@ -33,7 +41,7 @@ export default function Options() {
                content.innerText = `Step Number ${currentStep}`;

            });
-        
+


            previousBtn.addEventListener('click', () => {
@ -46,12 +54,12 @@ export default function Options() {
                }
                content.innerText = `Step Number ${currentStep}`;
            });
-        
+

            finishBtn.addEventListener('click', () => {
                window.location.reload();
            });
-        
+

    })

@ -76,14 +84,25 @@ export default function Options() {
                    <div className="bullet ">4</div>
                </div>
            </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
@ -6,26 +6,8 @@ import UserContext from "../context/UserContext";
 import { useHistory } from "react-router-dom";
 import Axios from 'axios';
 import { Button } from './miscellaneous/Styles';
+import { Device} from './miscellaneous/Responsive';

-const size = {
-  mobileS: '320px',
-  mobileM: '375px',
-  mobileL: '425px',
-  tablet: '768px',
-  laptop: '1024px',
-  laptopL: '1440px',
-  desktop: '2560px'
-}
-export const Device = {
-  mobileS: `(min-width: ${size.mobileS})`,
-  mobileM: `(min-width: ${size.mobileM})`,
-  mobileL: `(min-width: ${size.mobileL})`,
-  tablet: `(min-width: ${size.tablet})`,
-  laptop: `(min-width: ${size.laptop})`,
-  laptopL: `(min-width: ${size.laptopL})`,
-  desktop: `(min-width: ${size.desktop})`,
-  desktopL: `(min-width: ${size.desktop})`
-};
 const PricingPlanContainer = styled.div`

    display:flex;
@ -39,8 +21,8 @@ const PricingPlanContainer = styled.div`
    }


-    
-    
+
+
 `;

 const Radio = styled.input`
@ -75,10 +57,10 @@ const Pricing = styled.section`
        box-shadow: 0 0 15px rgba(0,0,0,0.4);
        transform: scale(1.05);

-    
+
    `:css``};
-    
-     
+
+
 `;

 const Text = styled.p`
@ -123,7 +105,7 @@ const SpecialText = styled.div`
    color: #ffffff;
    background: #007c64;
    box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
-    
+
    &, ${Title}{
    margin: 0;
    text-align: center;
@ -138,7 +120,7 @@ const Description = styled.div`

 `;
 const List = styled.ul`
-    padding: 0; 
+    padding: 0;
    margin: 0;
    text-align: left;
 `;
@ -148,7 +130,7 @@ const Feature = styled.li`
    position: relative;
    font-size: 0.9 em;
    &:not(:last-child) {
-        margin-bottom: 2em; 
+        margin-bottom: 2em;
    }

    &::before {
@ -191,9 +173,9 @@ const submit = async (props) => {
            "https://server-locaft.herokuapp.com/users/update", {
            id,
            pricing
-                
+
        }
-        
+
        );
    } catch (err) {
        console.log(err);
@ -205,7 +187,7 @@ const submit = async (props) => {
            <div className="body">
                <NavBar />
               { !purchased ? (
-                
+
               <React.Fragment>
                <Heading>Pricing Plan</Heading>
                <PricingPlanContainer onChange={event => setPricing(event.target.value)}>
@ -316,7 +298,7 @@ const submit = async (props) => {
            </div>

        )
-    
+

 }
 export default PricingPlan;
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@ -13,7 +13,6 @@ const StyledMenu = styled.nav`
  height: 100vh;
  text-align: left;
  padding: 2rem;
-  position: absolute;
  top: 0;
  left: 0;
  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);
  return (
-    <StyledMenu open={props.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>
@ -55,18 +54,18 @@ const Menu = (props) => {
        <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">
@ -79,7 +78,7 @@ const Menu = (props) => {
        </a>
 </React.Fragment>
        )
-      
+
      }
    </StyledMenu>
  )
@ -151,13 +150,13 @@ const Sidebar = (props) => {
  const node = React.useRef();
  return (
    <div>
-    
+
      <div ref={node}>
        <Burger open={open} setOpen={setOpen} />
        <Menu open={open} setOpen={setOpen} logout={props.logout} />
      </div>
    </div>
-  )  
+  )
 }

 const useOnClickOutside = (ref, handler) => {
--- 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/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/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;
 }
@ -51,7 +58,7 @@ color:  #28a745;
 .hidden  {
 	display:  none;
 }
- 
+
 button  {
 	padding:  5px  10px;
 	border:  1px  solid  black;
@ -72,7 +79,7 @@ button:disabled:hover  {
 .text-center  {
 	text-align:  center;
 }
-  
+
 .container  {
 	max-width:  400px;
 	margin:  0  auto;
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