Skip to content

Commit e11dc4e

Browse files
aadityarajkumawataadityarajkumawat
committed
styled login page
1 parent 9771a8e commit e11dc4e

File tree

10 files changed

+2382
-364
lines changed

10 files changed

+2382
-364
lines changed

‎client/package-lock.json‎

Lines changed: 2256 additions & 129 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@chakra-ui/react": "^1.3.4",
7+
"@emotion/react": "^11.1.5",
8+
"@emotion/styled": "^11.1.5",
69
"@material-ui/core": "^4.11.0",
710
"@testing-library/jest-dom": "^4.2.4",
811
"@testing-library/react": "^9.5.0",
@@ -11,7 +14,7 @@
1114
"draft-js": "^0.11.7",
1215
"draft-js-export-html": "^1.4.1",
1316
"draftjs-raw-parser": "^1.0.2",
14-
"framer-motion": "^2.7.7",
17+
"framer-motion": "^3.10.0",
1518
"html-react-parser": "^0.13.0",
1619
"react": "^16.13.1",
1720
"react-dom": "^16.13.1",
@@ -45,6 +48,5 @@
4548
"last 1 firefox version",
4649
"last 1 safari version"
4750
]
48-
},
49-
"devDependencies": {}
51+
}
5052
}

‎client/public/index.html‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap"
16+
rel="stylesheet"
17+
/>
18+
<link
19+
href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
20+
rel="stylesheet"
21+
/>
22+
<title>DevHelp</title>
23+
</head>
324

4-
<head>
5-
<meta charset="utf-8" />
6-
<link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<meta name="theme-color" content="#000000" />
9-
<meta name="description" content="Web site created using create-react-app" />
10-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
13-
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
14-
<link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet">
15-
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
16-
<title>DevHelp</title>
17-
</head>
18-
19-
<body>
20-
<noscript>You need to enable JavaScript to run this app.</noscript>
21-
<div id="root" style="width: 100%; height: 100%;"></div>
22-
<!-- JS, Popper.js, and jQuery -->
23-
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
24-
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
25-
</script>
26-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
27-
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
28-
</script>
29-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
30-
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
31-
</script>
32-
<script src="https://kit.fontawesome.com/845fe5dfd9.js" crossorigin="anonymous"></script>
33-
</body>
34-
35-
</html>
25+
<body>
26+
<noscript>You need to enable JavaScript to run this app.</noscript>
27+
<div id="root" style="width: 100%; height: 100%"></div>
28+
<script
29+
src="https://kit.fontawesome.com/845fe5dfd9.js"
30+
crossorigin="anonymous"
31+
></script>
32+
</body>
33+
</html>

‎client/src/App.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { loadUser } from "./actions/authAction";
1717
import Navbar from "./components/navbar/Navbar";
1818
import PopupModal from "./components/popup-modal/PopupModal";
1919

20+
import { Flex } from "@chakra-ui/react";
21+
2022
if (localStorage.getItem("token")) {
2123
setAuthToken(localStorage.getItem("token"));
2224
}
@@ -30,11 +32,11 @@ function App() {
3032
<Router>
3133
<Navbar />
3234
<PopupModal />
33-
<div className="d-flex justify-content-center container-fluid">
35+
<Flex justifyContent="space-between" alignItems="flex-start">
3436
<Switch>
3537
<Routes />
3638
</Switch>
37-
</div>
39+
</Flex>
3840
</Router>
3941
</Provider>
4042
);

‎client/src/App.scss‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎client/src/_mixins.scss‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎client/src/components/alerts/Alert.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
import React from 'react';
2-
import { connect } from 'react-redux';
1+
import {
2+
Alert as A,
3+
AlertIcon,
4+
AlertTitle,
5+
AlertDescription,
6+
} from "@chakra-ui/react";
7+
import React from "react";
8+
import { connect } from "react-redux";
39

410
const Alert = ({ alert }) =>
5-
alert.length > 0 &&
6-
alert.map((alertItem) => (
7-
<div className='alert alert-danger' role='alert'>
8-
<strong>Alert:</strong> {alertItem.msg}
9-
</div>
10-
));
11+
alert.length > 0 &&
12+
alert.map((alertItem) => (
13+
<A status="error" w="450px" margin="auto" mb="20px">
14+
<AlertIcon />
15+
<AlertTitle mr={2}>Alert:</AlertTitle>
16+
<AlertDescription>{alertItem.msg}</AlertDescription>
17+
</A>
18+
));
1119

1220
const mapStateToProps = (state) => {
13-
return {
14-
alert: state.alert,
15-
};
21+
return {
22+
alert: state.alert,
23+
};
1624
};
1725

1826
export default connect(mapStateToProps, null)(Alert);

‎client/src/components/auth/Login.js‎

Lines changed: 57 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@ import { Link } from "react-router-dom";
99
// Assets import
1010
import auth from "../../assets/auth.jpg";
1111
import Alert from "../alerts/Alert";
12+
import {
13+
Box,
14+
Flex,
15+
Heading,
16+
Image,
17+
Text,
18+
Input,
19+
HStack,
20+
Button,
21+
} from "@chakra-ui/react";
1222

1323
const Login = ({
1424
auth: { isAuthenticated },
@@ -20,7 +30,6 @@ const Login = ({
2030
}) => {
2131
useEffect(() => {
2232
removeNav();
23-
2433
// eslint-disable-next-line
2534
}, []);
2635

@@ -39,8 +48,7 @@ const Login = ({
3948
});
4049
};
4150

42-
const onSubmit = (e) => {
43-
e.preventDefault();
51+
const onSubmit = () => {
4452
setLoading(true);
4553
login(user);
4654
};
@@ -59,65 +67,70 @@ const Login = ({
5967

6068
return (
6169
<Fragment>
62-
<div className="d-flex flex-column align-items-center justify-content-start left">
63-
<div className="top text-center">
64-
<h1>Welcome to DevHelp</h1>
65-
<p>
70+
<Box w="calc(100% - 700px)">
71+
<Flex alignItems="center" flexDirection="column" pt="2.5rem">
72+
<Heading as="h1">Welcome to DevHelp</Heading>
73+
<Text color='#00000080'>
6674
DevHelp has a pool of highly experienced developers in their
6775
respective tech stacks
68-
</p>
69-
<h2>Login</h2>
70-
</div>
76+
</Text>
77+
<Heading as="h2" fontSize="25px" py="20px" mt='100px'>
78+
Login
79+
</Heading>
80+
</Flex>
7181
<Alert />
72-
<form
73-
className="d-flex flex-column align-items-center justify-content-start sign-up-form"
74-
onSubmit={onSubmit}
75-
>
76-
<div className="d-flex flex-row name-inp">
77-
<span className="d-flex justify-content-center align-items-center user-cont">
82+
<Flex flexDirection="column" alignItems="center">
83+
<HStack mb="1rem" w="450px">
84+
<Box>
7885
<i className="fas fa-envelope"></i>
79-
</span>
80-
<input
86+
</Box>
87+
<Input
8188
type="email"
82-
className="name-inp-cls"
8389
name="email"
8490
placeholder="Email"
8591
value={email}
8692
onChange={onChange}
8793
/>
88-
</div>
89-
<div className="d-flex flex-row name-inp">
90-
<span className="d-flex justify-content-center align-items-center user-cont">
94+
</HStack>
95+
<HStack mb="1rem" w="450px">
96+
<Box>
9197
<i className="fas fa-lock"></i>
92-
</span>
93-
<input
98+
</Box>
99+
<Input
94100
type="password"
95-
className="name-inp-cls"
96101
name="password"
97102
placeholder="Password"
98103
value={password}
99104
onChange={onChange}
100105
/>
101-
</div>
102-
<button className="btn btn-dark" type="submit">
103-
{loading && alert.length === 0 && (
104-
<span
105-
className="spinner-border spinner-border-sm"
106-
aria-hidden="true"
107-
></span>
108-
)}
109-
110-
<span>{loading && alert.length === 0 ? "" : "Login"}</span>
111-
</button>
112-
</form>
113-
<p className="wrong-pg">
106+
</HStack>
107+
<Button
108+
isLoading={loading}
109+
loadingText="Logging In"
110+
colorScheme="blackAlpha"
111+
w="450px"
112+
type="submit"
113+
onClick={onSubmit}
114+
>
115+
Login
116+
</Button>
117+
</Flex>
118+
<Flex justifyContent="center" className="wrong-pg">
114119
New user?{" "}
115-
<Link to="sign-up">Sign Up</Link>
116-
</p>
117-
</div>
118-
<div className="right">
119-
<img src={auth} alt="" />
120-
</div>
120+
<Link to="sign-up">
121+
<Text ml='5px' color="#0066ff">Sign Up</Text>
122+
</Link>
123+
</Flex>
124+
</Box>
125+
<Box>
126+
<Image
127+
src={auth}
128+
alt="random"
129+
width="700px"
130+
height="100vh"
131+
maxWidth="700px"
132+
/>
133+
</Box>
121134
</Fragment>
122135
);
123136
};

0 commit comments

Comments
 (0)