Skip to content

Commit e5b270c

Browse files
BackendExpertBackendExpert
authored
Merge pull request #2 from TeamProjectsReact/v200
V200
2 parents 3e101ff + a9f3183 commit e5b270c

File tree

11 files changed

+374
-51
lines changed

11 files changed

+374
-51
lines changed

‎LoginSignUp/SignIn.jsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { useState } from 'react'
22
import { BsMortarboardFill } from "react-icons/bs";
33
import { Link } from 'react-router-dom';
4+
import './styles/app.css'
5+
import '@jehankandy/jkcss/src/layout/columns/columns.css'
6+
import '@jehankandy/jkcss/src/buttons/button.css'
47

58
const SignIn = () => {
69
// for login data
@@ -17,41 +20,41 @@ const SignIn = () => {
1720
// this will be updated in future versions
1821
}
1922
return (
20-
<div className='bg-gray-200 min-h-screen py-24 px-8'>
21-
<div className="md:grid grid-cols-3 gap-2">
22-
<div className=""></div>
23-
<div className="">
24-
<div className="bg-white py-16 px-8 rounded shadow-md w-full ">
25-
<center className='text-gray-500'>
23+
<div className='app-body'>
24+
<div className="line">
25+
<div className="rec-4"></div>
26+
<div className="rec-4">
27+
<div className="form-bg">
28+
<center className='' style={{ color: 'rgb(107 114 128)' }}>
2629
{/* change the Icon According to your needs */}
27-
<h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
28-
<p className="pt-4 text-2xl">Welcome Back</p>
30+
<h1 className=''><BsMortarboardFill className='logo'/></h1>
31+
<p className="" style={{ paddingTop: '16px', fontSize: '24px', lineHeight: '32px' }}>Welcome Back</p>
2932
<p className="">Your Project Name</p>
3033
</center>
31-
<hr className='my-2'/>
32-
<div className="my-4">
34+
<hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
35+
<div className="" style={{ marginTop: '16px', marginBottom: '16px' }}>
3336
<form onSubmit={headleSubmit}>
34-
<div className="my-2 md:mx-8">
37+
<div className="input-area">
3538
<label htmlFor="" className=''>Email : </label>
36-
<input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
39+
<input type="email" name="" id="" className="feild-input" required placeholder='Enter Email Address'
3740
onChange={e => SetLoginData({...LoginData, email:e.target.value})}/>
3841
</div>
39-
<div className="my-2 md:mx-8">
42+
<div className="input-area">
4043
<label htmlFor="" className=''>Password : </label>
41-
<input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password'
44+
<input type="password" name="" id="" className="feild-input" required placeholder='Enter Password'
4245
onChange={e => SetLoginData({...LoginData, password:e.target.value})}/>
4346
</div>
44-
<div className="my-2 md:mx-8">
45-
<button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>SignIn</button>
47+
<div className="input-area">
48+
<button type='submit' className='jkbtn jkbtn-blue' style={{ width: '100%', marginTop: '2rem' }}>SignIn</button>
4649
</div>
4750
</form>
48-
<Link><p className="my-2 md:mx-8 text-blue-500 font-semibold">Forget Password ? </p></Link>
51+
<Link><p className="link-text">Forget Password ? </p></Link>
4952
</div>
50-
<hr className='my-2'/>
51-
<p className="my-4">Don't have an Account ? <Link to={'/SignUp'}><span className="text-blue-500">SignUp</span></Link></p>
53+
<hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
54+
<p className="" style={{ marginTop: '16px', marginBottom: '16px' }}>Don't have an Account ? <Link to={'/SignUp'}><span className="" style={{ color: 'rgb(59 130 246)' }}>SignUp</span></Link></p>
5255
</div>
5356
</div>
54-
<div className=""></div>
57+
<div className="rec-4"></div>
5558
</div>
5659
</div>
5760
)

‎LoginSignUp/SignUp.jsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,45 +18,45 @@ const SignUp = () => {
1818
// this will be updated in future versions
1919
}
2020
return (
21-
<div className='bg-gray-200 min-h-screen py-24 px-8'>
22-
<div className="md:grid grid-cols-3 gap-2">
23-
<div className=""></div>
24-
<div className="">
25-
<div className="bg-white py-16 px-8 rounded shadow-md w-full ">
26-
<center className='text-gray-500'>
21+
<div className='app-body'>
22+
<div className="line">
23+
<div className="rec-4"></div>
24+
<div className="rec-4">
25+
<div className="form-bg">
26+
<center className='' style={{ color: 'rgb(107 114 128)' }}>
2727
{/* change the Icon According to your needs */}
28-
<h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
29-
<p className="pt-4 text-2xl">Welcome to</p>
28+
<h1 className=''><BsMortarboardFill className='logo'/></h1>
29+
<p className="" style={{ paddingTop: '16px', fontSize: '24px', lineHeight: '32px' }}>Welcome to</p>
3030
<p className="">Your Project Name</p>
3131
</center>
32-
<hr className='my-2'/>
33-
<div className="my-4">
32+
<hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
33+
<div className="" style={{ marginTop: '16px', marginBottom: '16px' }}>
3434
<form onSubmit={headleSubmit}>
35-
<div className="my-2 md:mx-8">
35+
<div className="input-area">
3636
<label htmlFor="" className=''>Username : </label>
37-
<input type="text" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Username'
37+
<input type="text" name="" id="" className="feild-input" required placeholder='Enter Username'
3838
onChange={e => SetSignUpData({...SignUpData, username:e.target.value})}/>
3939
</div>
40-
<div className="my-2 md:mx-8">
40+
<div className="input-area">
4141
<label htmlFor="" className=''>Email : </label>
42-
<input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
42+
<input type="email" name="" id="" className="feild-input" required placeholder='Enter Email Address'
4343
onChange={e => SetSignUpData({...SignUpData, email:e.target.value})}/>
4444
</div>
45-
<div className="my-2 md:mx-8">
45+
<div className="input-area">
4646
<label htmlFor="" className=''>Password : </label>
47-
<input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password'
47+
<input type="password" name="" id="" className="feild-input" required placeholder='Enter Password'
4848
onChange={e => SetSignUpData({...SignUpData, password:e.target.value})}/>
4949
</div>
50-
<div className="my-2 md:mx-8">
51-
<button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>Sign Up</button>
50+
<div className="input-area">
51+
<button type='submit' className='jkbtn jkbtn-blue' style={{ width: '100%', marginTop: '2rem' }}>Sign Up</button>
5252
</div>
5353
</form>
5454
</div>
55-
<hr className='my-2'/>
56-
<p className="my-4">Already have an Account ? <Link to={'/'}><span className="text-blue-500">SignUp</span></Link></p>
55+
<hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
56+
<p className="" style={{ marginTop: '16px', marginBottom: '16px' }}>Already have an Account ? <Link to={'/'}><span className="" style={{ color: 'rgb(59 130 246)' }}>SignIn</span></Link></p>
5757
</div>
5858
</div>
59-
<div className=""></div>
59+
<div className="rec-4"></div>
6060
</div>
6161
</div>
6262
)

‎LoginSignUp/styles/app.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.app-body {
2+
background: #e5e7eb;
3+
min-height: 100vh;
4+
padding-top: 6rem;
5+
padding-bottom: 6rem;
6+
padding-left: 2rem;
7+
padding-right: 2rem;
8+
}
9+
10+
.form-bg {
11+
background: white;
12+
padding-top: 4rem;
13+
padding-bottom: 4rem;
14+
padding-left: 2rem;
15+
padding-right: 2rem;
16+
width: 100%;
17+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
18+
}
19+
20+
.logo {
21+
height: 5rem;
22+
width: auto;
23+
}
24+
25+
.input-area, .link-text {
26+
margin-top: 8px;
27+
margin-bottom: 8px;
28+
}
29+
30+
.link-text {
31+
color: rgb(59, 130, 246);
32+
font-weight: 600;
33+
}
34+
35+
.feild-input {
36+
width: 100%;
37+
height: 3rem;
38+
padding-left: 0.5rem;
39+
background: rgb(229, 231, 235);
40+
border-radius: 0.25rem;
41+
}
42+
43+
@media (min-width: 768px) {
44+
.input-area, .link-text {
45+
margin-left: 2rem;
46+
margin-right: 2rem;
47+
}
48+
}

‎LoginSignUp/styles/app.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎LoginSignUp/styles/app.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.app-body{
2+
background: #e5e7eb; //#e5e7eb
3+
min-height: 100vh;
4+
padding-top: 6rem;
5+
padding-bottom: 6rem;
6+
padding-left: 2rem;
7+
padding-right: 2rem;
8+
}
9+
.form-bg{
10+
background: white;
11+
padding-top: 4rem;
12+
padding-bottom: 4rem;
13+
padding-left: 2rem;
14+
padding-right: 2rem;
15+
width: 100%;
16+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
17+
}
18+
.logo{
19+
height: 5rem;
20+
width: auto;
21+
}
22+
.input-area{
23+
margin-top: 8px;
24+
margin-bottom: 8px;
25+
}
26+
.link-text{
27+
@extend .input-area;
28+
color: rgb(59 130 246);
29+
font-weight: 600;
30+
}
31+
32+
.feild-input{
33+
width: 100%;
34+
height: 3rem;
35+
padding-left: 0.5rem;
36+
background: rgb(229 231 235);
37+
border-radius: 0.25rem;
38+
}
39+
40+
// responcive styles
41+
42+
@media (min-width: 768px) {
43+
.input-area{
44+
margin-left: 2rem;
45+
margin-right: 2rem;
46+
}
47+
}

‎LoginSignUpTW/SignIn.jsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React, { useState } from 'react'
2+
import { BsMortarboardFill } from "react-icons/bs";
3+
import { Link } from 'react-router-dom';
4+
5+
const SignIn = () => {
6+
// for login data
7+
const [LoginData, SetLoginData] = useState({
8+
email: '',
9+
password: ''
10+
})
11+
12+
// send data to backend using axios
13+
const headleSubmit = (e) => {
14+
e.preventDefault();
15+
16+
// login to system
17+
// this will be updated in future versions
18+
}
19+
return (
20+
<div className='bg-gray-200 min-h-screen py-24 px-8'>
21+
<div className="md:grid grid-cols-3 gap-2">
22+
<div className=""></div>
23+
<div className="">
24+
<div className="bg-white py-16 px-8 rounded shadow-md w-full ">
25+
<center className='text-gray-500'>
26+
{/* change the Icon According to your needs */}
27+
<h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
28+
<p className="pt-4 text-2xl">Welcome Back</p>
29+
<p className="">Your Project Name</p>
30+
</center>
31+
<hr className='my-2'/>
32+
<div className="my-4">
33+
<form onSubmit={headleSubmit}>
34+
<div className="my-2 md:mx-8">
35+
<label htmlFor="" className=''>Email : </label>
36+
<input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
37+
onChange={e => SetLoginData({...LoginData, email:e.target.value})}/>
38+
</div>
39+
<div className="my-2 md:mx-8">
40+
<label htmlFor="" className=''>Password : </label>
41+
<input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password'
42+
onChange={e => SetLoginData({...LoginData, password:e.target.value})}/>
43+
</div>
44+
<div className="my-2 md:mx-8">
45+
<button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>SignIn</button>
46+
</div>
47+
</form>
48+
<Link><p className="my-2 md:mx-8 text-blue-500 font-semibold">Forget Password ? </p></Link>
49+
</div>
50+
<hr className='my-2'/>
51+
<p className="my-4">Don't have an Account ? <Link to={'/SignUp'}><span className="text-blue-500">SignUp</span></Link></p>
52+
</div>
53+
</div>
54+
<div className=""></div>
55+
</div>
56+
</div>
57+
)
58+
}
59+
60+
export default SignIn

‎LoginSignUpTW/SignUp.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useState } from 'react'
2+
import { BsMortarboardFill } from "react-icons/bs";
3+
import { Link } from 'react-router-dom';
4+
5+
const SignUp = () => {
6+
// for login data
7+
const [SignUpData, SetSignUpData] = useState({
8+
username: '',
9+
email: '',
10+
password: ''
11+
})
12+
13+
// send data to backend using axios
14+
const headleSubmit = (e) => {
15+
e.preventDefault();
16+
17+
// signup to system
18+
// this will be updated in future versions
19+
}
20+
return (
21+
<div className='bg-gray-200 min-h-screen py-24 px-8'>
22+
<div className="md:grid grid-cols-3 gap-2">
23+
<div className=""></div>
24+
<div className="">
25+
<div className="bg-white py-16 px-8 rounded shadow-md w-full ">
26+
<center className='text-gray-500'>
27+
{/* change the Icon According to your needs */}
28+
<h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
29+
<p className="pt-4 text-2xl">Welcome to</p>
30+
<p className="">Your Project Name</p>
31+
</center>
32+
<hr className='my-2'/>
33+
<div className="my-4">
34+
<form onSubmit={headleSubmit}>
35+
<div className="my-2 md:mx-8">
36+
<label htmlFor="" className=''>Username : </label>
37+
<input type="text" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Username'
38+
onChange={e => SetSignUpData({...SignUpData, username:e.target.value})}/>
39+
</div>
40+
<div className="my-2 md:mx-8">
41+
<label htmlFor="" className=''>Email : </label>
42+
<input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
43+
onChange={e => SetSignUpData({...SignUpData, email:e.target.value})}/>
44+
</div>
45+
<div className="my-2 md:mx-8">
46+
<label htmlFor="" className=''>Password : </label>
47+
<input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password'
48+
onChange={e => SetSignUpData({...SignUpData, password:e.target.value})}/>
49+
</div>
50+
<div className="my-2 md:mx-8">
51+
<button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>Sign Up</button>
52+
</div>
53+
</form>
54+
</div>
55+
<hr className='my-2'/>
56+
<p className="my-4">Already have an Account ? <Link to={'/'}><span className="text-blue-500">SignUp</span></Link></p>
57+
</div>
58+
</div>
59+
<div className=""></div>
60+
</div>
61+
</div>
62+
)
63+
}
64+
65+
export default SignUp

0 commit comments

Comments
 (0)