Skip to content

Commit 2e6aa83

Browse files
sirwisdomsirwisdom
committed
Fix for the Responsiveness of the Login Form, Completion of the about page, contact page, footer and navbar components.
1 parent 648f68b commit 2e6aa83

File tree

6 files changed

+137
-58
lines changed

6 files changed

+137
-58
lines changed

‎src/App.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,26 @@ import './App.scss';
44
import '../node_modules/@fortawesome/fontawesome-free/css/all.min.css';
55
import Login from './components/Login/Login';
66
import Signup from './components/Signup/Signup';
7+
import Navbar from './components/Navbar/Navbar';
8+
import Footer from './components/Footer/Footer';
9+
import About from './components/About/About';
10+
import Contact from './components/ContactUs/Contact';
711

812
function App() {
913
return (
1014
<div>
1115
<BrowserRouter>
12-
<Switch>
13-
<Route path="/login" component={Login} />
14-
<Route path="/signup" component={Signup} />
15-
</Switch>
16+
<Navbar />
17+
<div className="app-wrapper">
18+
<Switch>
19+
<Route path="/login" component={Login} />
20+
<Route path="/contact" component={Contact} />
21+
<Route path="/signup" component={Signup} />
22+
<Route path="/about" component={About} />
23+
</Switch>
24+
</div>
25+
26+
<Footer />
1627
</BrowserRouter>
1728
</div>
1829
);

‎src/App.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,16 @@ $greenColor: #209403;
22
$yellowColor: #d39000;
33
$blackColor: #04070e;
44

5-
.App {
6-
text-align: center;
5+
*,
6+
*:hover,
7+
*:after {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
11+
}
12+
13+
.app-wrapper {
14+
min-height: 60vh;
715
}
816

917
.App-logo {

‎src/components/Login/Login.jsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import { loginUser } from '../../redux/actions/userActions';
99

1010
const Login = () => {
1111
const initialValues = {
12-
email: '',
12+
emailAddress: '',
1313
password: ''
1414
};
1515

1616
const dispatch = useDispatch();
1717

1818
let loginSchema = yup.object().shape({
19-
email: yup.string().email(),
19+
emailAddress: yup.string().email('Login with a valid email'),
2020
password: yup.string()
2121
});
2222

@@ -27,8 +27,10 @@ const Login = () => {
2727
<>
2828
<div className="form-wrapper">
2929
<h2 className="welcome-text">Welcome to FarmReach</h2>
30+
<br />
3031
<div className="form-container">
31-
<p>
32+
<br />
33+
<p className="login-text">
3234
<strong>Login</strong>
3335
</p>
3436
<div className="form">
@@ -44,32 +46,32 @@ const Login = () => {
4446
{({ errors, touched }) => (
4547
<Form>
4648
<div className="form-div">
47-
<span>
48-
<i className="fas fa-user login-icon"></i>
49-
</span>
50-
<Field type="email" className="form-control" id="email" name="email" placeholder="Email" />
51-
{errors.email && touched.email ? <div className="text-danger">{errors.email}</div> : null}
49+
<Field type="email" className="form-control" id="email" name="emailAddress" placeholder="Email" />
50+
<i className="fas fa-user login-icon"></i>
51+
{errors.email && touched.emailAddress ? (
52+
<div className="text-danger">{errors.emailAddress}</div>
53+
) : null}
5254
</div>
5355
<div className="form-div">
54-
<span>
55-
<i className="fas fa-lock login-icon"></i>
56-
</span>
5756
<Field
5857
type="password"
5958
className="form-control"
6059
id="password"
6160
name="password"
6261
placeholder="Password"
6362
/>
63+
<i className="fas fa-lock login-icon"></i>
6464
{errors.password && touched.password ? <div className="text-danger">{errors.password}</div> : null}
6565
</div>
6666
<p className="forgot-password">
6767
<Link to="/">Forgot Password</Link>
6868
</p>
6969

70-
<button type="submit" className="login-btn">
71-
Login
72-
</button>
70+
<div className="form-div">
71+
<button type="submit" className="login-btn">
72+
Login
73+
</button>
74+
</div>
7375

7476
<br />
7577
<p>

‎src/components/Login/login.scss‎

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,28 @@ $blackColor: #04070e;
66
}
77

88
.form-wrapper {
9-
height: 80vh;
10-
width: 100%;
9+
height: 65vh;
10+
width: 90%;
11+
margin: 0 auto;
1112
display: flex;
1213
flex-direction: column;
1314
justify-content: center;
1415
align-items: center;
16+
overflow: hidden;
1517

1618
.welcome-text {
17-
font-weight: 500;
19+
font-weight: 400;
1820
text-align: center;
1921
}
2022

2123
.form-container {
22-
width: 80%;
24+
width: 100%;
2325
display: flex;
2426
flex-direction: column;
2527
justify-content: center;
2628
align-items: center;
2729
position: relative;
28-
max-width: 700px;
29-
padding: 8px;
30+
max-width: 600px;
3031
padding-bottom: 30px;
3132
border-top-left-radius: 7px;
3233
border-top-right-radius: 7px;
@@ -38,36 +39,49 @@ $blackColor: #04070e;
3839
top: 0;
3940
left: 0;
4041
right: 0;
41-
height: 10px;
42+
height: 7px;
4243
width: 100%;
4344
background: $greenColor;
4445
border-top-left-radius: 7px;
4546
border-top-right-radius: 7px;
4647
}
48+
49+
.login-text {
50+
text-align: center;
51+
margin: 7px auto;
52+
}
4753
}
4854
}
4955

5056
.form {
5157
padding: 7px;
5258
height: 100%;
53-
width: 80%;
54-
@include customShadow();
59+
width: 95%;
60+
margin: 0 auto;
61+
// @include customShadow();
5562

5663
.form-div {
5764
width: 100%;
58-
margin: 7px 2px;
65+
position: relative;
66+
display: block;
5967

6068
.login-icon {
61-
transform: translateX(20px);
69+
position: absolute;
70+
top: 10px;
71+
left: 3px;
72+
padding: 8px;
6273
}
6374
.form-control {
64-
width: 90%;
65-
height: 30px;
66-
margin: 8px 0px;
75+
width: 100%;
76+
height: 34px;
77+
margin: 10px 0px;
6778
padding-left: 30px;
68-
background: transparent;
6979
border: 1px solid #d1cece;
7080
border-radius: 4px;
81+
82+
&:focus + .login-icon {
83+
color: $yellowColor;
84+
}
7185
}
7286
.forgot-password {
7387
text-align: right;
@@ -79,9 +93,10 @@ $blackColor: #04070e;
7993
border: none;
8094
text-align: center;
8195
background: $yellowColor;
96+
text-transform: uppercase;
8297
height: 34px;
83-
margin-left: 15px;
84-
width: 95%;
98+
99+
width: 100%;
85100
}
86101

87102
.forgot-password {

‎src/components/Signup/Signup.jsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const SignUp = () => {
1111
const initialValues = {
1212
firstName: '',
1313
lastName: '',
14-
email: '',
14+
emailAddress: '',
1515
phoneNumber: '',
1616
password: '',
1717
confirmPassword: ''
@@ -20,13 +20,13 @@ const SignUp = () => {
2020
const dispatch = useDispatch();
2121

2222
let loginSchema = yup.object().shape({
23-
firstName: yup.string().required(),
24-
lastName: yup.string().required(),
25-
phoneNumber: yup.string().required(),
26-
email: yup.string().email().required(),
27-
password: yup.string().required(),
28-
confirmPassword: yup.string().required(),
29-
termsAndCondition: yup.string().required()
23+
firstName: yup.string().required('This is a required field'),
24+
lastName: yup.string().required('This is a required field'),
25+
phoneNumber: yup.string().required('This is a required field'),
26+
emailAddress: yup.string().email().required('This is a required field'),
27+
password: yup.string().required('This is a required field'),
28+
confirmPassword: yup.string().required()
29+
// termsAndCondition: yup.string().required()
3030
});
3131

3232
const handleSubmit = (data) => {
@@ -40,6 +40,7 @@ const SignUp = () => {
4040
<p>
4141
<strong>Let's Get Started</strong>
4242
</p>
43+
<br />
4344
<div className="signup-form">
4445
<Formik
4546
initialValues={initialValues}
@@ -63,8 +64,10 @@ const SignUp = () => {
6364
{errors.lastName && touched.lastName ? <div className="text-danger">{errors.lastName}</div> : null}
6465
</div>
6566
<div className="form-div">
66-
<Field type="email" className="form-control" name="email" placeholder="Email" />
67-
{errors.email && touched.email ? <div className="text-danger">{errors.email}</div> : null}
67+
<Field type="email" className="form-control" name="emailAddress" placeholder="Email" />
68+
{errors.emailAddress && touched.emailAddress ? (
69+
<div className="text-danger">{errors.emailAddress}</div>
70+
) : null}
6871
</div>
6972
<div className="form-div">
7073
<Field type="tel" className="form-control" name="phoneNumber" placeholder="Phone Number" />
@@ -96,13 +99,14 @@ const SignUp = () => {
9699
<button type="submit" className="signup-btn">
97100
SIGN UP
98101
</button>
102+
<br />
99103
<p className="login-text">
100104
{' '}
101105
I already have an account &nbsp;
102106
<Link to="/login">Login</Link>
103107
</p>
104108

105-
<div className="form-div-checkbox">
109+
{/* <div className="form-div-checkbox">
106110
<Field
107111
type="checkbox"
108112
className="form-control-check"
@@ -111,7 +115,7 @@ const SignUp = () => {
111115
placeholder="Confirm Password"
112116
/>
113117
<label htmlFor="terms">I agree to the terms and conditions</label>
114-
</div>
118+
</div> */}
115119
</Form>
116120
)}
117121
</Formik>

0 commit comments

Comments
 (0)