Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navbar issue resolved for all pages and also added navbar in contact page #88

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Navbar issue resolved for all pages and also added navbar in contact page #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 95 additions & 84 deletions src/components/Forget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,94 +2,105 @@ import React from 'react';
import "./Login.css";
import Navbar from "./Navbar";
import {
Button,
Heading,
HStack,
Input,
InputGroup,
InputLeftElement,
Link,
VStack,
Button,
Heading,
HStack,
Input,
InputGroup,
InputLeftElement,
Link,
VStack,
} from "@chakra-ui/react";
import { RiAccountPinBoxFill } from "react-icons/ri";
import { RiLockPasswordFill } from "react-icons/ri";


export default function Forget() {
return (
<>
<Navbar />
<div className="login">
<div className="login__container">
<div className="login__containerTop">
<div className="login__img"></div>
<p>Add a crisp to your bulky documents !!</p>
<h4>Welcome to the website</h4>
</div>
<div className="login__containerBottom">
<VStack className="input__container" w="65%" m="auto">
<Heading
fontSize="1.2rem"
color="blue.500"
fontWeight="semibold"
py={3}
>
FORGET PASSWORD
</Heading>
<InputGroup w="95%" borderRadius="full" bgColor="gray.200">
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input required
borderRadius="full"
type="tel"
placeholder="Email Address"
paddingLeft="60px"
/>
</InputGroup>
<InputGroup
className="login__input"
w="95%"
borderRadius="full"
bgColor="gray.200"
>
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input
type="tel" required
borderRadius="full"
placeholder="Password"
paddingLeft="60px"
/>
</InputGroup>
<HStack className="login__btn" alignSelf="flex-end">
<Button
colorScheme="pink"
px="6"
size="sm"
fontWeight="bold"
className="loginBtn"
>
SUBMIT
</Button>
<Link fontSize="sm" textDecoration="underline" color="blue">
<a href="/login" >Remember?</a>
</Link>
</HStack>
</VStack>
</div>
</div>
</div>
</>
return ( <
>
<
Navbar / >
<
div className = "login" >
<
div className = "login__container" >
<
div className = "login__containerTop" >
<
div className = "login__img" > < /div> <
p > Add a crisp to your bulky documents!! < /p> <
h4 > Welcome to the website < /h4> < /
div > <
div className = "login__containerBottom" >
<
VStack className = "input__container"
w = "65%"
m = "auto" >
<
Heading fontSize = "1.2rem"
color = "blue.500"
fontWeight = "semibold"
py = { 3 } >
FORGET PASSWORD <
/Heading> <
InputGroup w = "95%"
borderRadius = "full"
bgColor = "gray.200" >
<
InputLeftElement margin = "0 20px"
pointerEvents = "none"
children = { <
RiAccountPinBoxFill color = "#C6C6E8"
fontSize = "2.1rem" / >
}
/> <
Input required borderRadius = "full"
type = "tel"
placeholder = "Email Address"
paddingLeft = "60px" /
>
<
/InputGroup> <
InputGroup className = "login__input"
w = "95%"
borderRadius = "full"
bgColor = "gray.200" >
<
InputLeftElement margin = "0 20px"
pointerEvents = "none"
children = { <
RiLockPasswordFill color = "#C6C6E8"
fontSize = "2.1rem" / >
}
/> <
Input type = "tel"
required borderRadius = "full"
placeholder = "Password"
paddingLeft = "60px" /
>
<
/InputGroup> <
HStack className = "login__btn"
alignSelf = "flex-end" >
<
Button colorScheme = "pink"
px = "6"
size = "sm"
fontWeight = "bold"
className = "loginBtn" >
SUBMIT <
/Button> <
Link fontSize = "sm"
textDecoration = "underline"
color = "blue" >
<
a href = "/login" > Remember ? < /a> < /
Link > <
/HStack> < /
VStack > <
/div> < /
div > <
/div> < /
>
)
}

}
189 changes: 102 additions & 87 deletions src/components/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,98 +2,113 @@ import React from "react";
import "./Login.css";
import Navbar from "./Navbar";
import {
Button,
Heading,
HStack,
Input,
InputGroup,
InputLeftElement,
Link,
VStack,
Button,
Heading,
HStack,
Input,
InputGroup,
InputLeftElement,
Link,
VStack,
} from "@chakra-ui/react";
import { RiAccountPinBoxFill } from "react-icons/ri";
import { RiLockPasswordFill } from "react-icons/ri";


function Login() {
return (
<>
<Navbar />
<div className="login">
<div className="login__container">
<div className="login__containerTop">
<div className="login__img"></div>
<p>Add a crisp to your bulky documents !!</p>
<h4>Welcome to the website</h4>
</div>
<div className="login__containerBottom">
<VStack className="input__container" w="65%" m="auto">
<Heading
fontSize="1.2rem"
color="blue.500"
fontWeight="semibold"
py={3}
>
USER LOGIN
</Heading>
<InputGroup w="95%" borderRadius="full" bgColor="gray.200">
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input
borderRadius="full"
type="tel"
placeholder="Username"
paddingLeft="60px"
/>
</InputGroup>
<InputGroup
className="login__input"
w="95%"
borderRadius="full"
bgColor="gray.200"
>
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input
type="password"
borderRadius="full"
placeholder="Password"
paddingLeft="60px"
/>
</InputGroup>
<Link fontSize="sm" textDecoration="underline" color="blue">
<a href="/register" >Need Account ?</a>
</Link>
<HStack className="login__btn" alignSelf="flex-end">
<Button
colorScheme="pink"
px="6"
size="sm"
fontWeight="bold"
className="loginBtn"
>
LOGIN
</Button>
<Link fontSize="sm" textDecoration="underline" color="blue">
<a href="/forget" >Forgot password?</a>
</Link>
</HStack>
</VStack>
</div>
</div>
</div>
</>
);
return ( <
>
<
Navbar / >
<
div className = "login" >
<
div className = "login__container" >
<
div className = "login__containerTop" >
<
div className = "login__img" > < /div> <
p > Add a crisp to your bulky documents!! < /p> <
h4 > Welcome to the website < /h4> < /
div > <
div className = "login__containerBottom" >
<
VStack className = "input__container"
w = "65%"
m = "auto" >
<
Heading fontSize = "1.2rem"
color = "blue.500"
fontWeight = "semibold"
py = { 3 } >
USER LOGIN <
/Heading> <
InputGroup w = "95%"
borderRadius = "full"
bgColor = "gray.200" >
<
InputLeftElement margin = "0 20px"
pointerEvents = "none"
children = { <
RiAccountPinBoxFill color = "#C6C6E8"
fontSize = "2.1rem" / >
}
/> <
Input borderRadius = "full"
type = "tel"
placeholder = "Username"
paddingLeft = "60px" /
>
<
/InputGroup> <
InputGroup className = "login__input"
w = "95%"
borderRadius = "full"
bgColor = "gray.200" >
<
InputLeftElement margin = "0 20px"
pointerEvents = "none"
children = { <
RiLockPasswordFill color = "#C6C6E8"
fontSize = "2.1rem" / >
}
/> <
Input type = "password"
borderRadius = "full"
placeholder = "Password"
paddingLeft = "60px" /
>
<
/InputGroup> <
Link fontSize = "sm"
textDecoration = "underline"
color = "blue" >
<
a href = "/register" > Need Account ? < /a> < /
Link > <
HStack className = "login__btn"
alignSelf = "flex-end" >
<
Button colorScheme = "pink"
px = "6"
size = "sm"
fontWeight = "bold"
className = "loginBtn" >
LOGIN <
/Button> <
Link fontSize = "sm"
textDecoration = "underline"
color = "blue" >
<
a href = "/forget" > Forgot password ? < /a> < /
Link > <
/HStack> < /
VStack > <
/div> < /
div > <
/div> < /
>
);
}

export default Login;
export default Login;
Loading