Skip to content

Commit 9b04680

Browse files
Urmila Shahi ThakuriUrmila Shahi Thakuri
Urmila Shahi Thakuri
authored and
Urmila Shahi Thakuri
committed
forget -assword design fix
1 parent 15d4f89 commit 9b04680

File tree

5 files changed

+134
-94
lines changed

5 files changed

+134
-94
lines changed

‎app/assets/sass/components/_form.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,23 @@ color: $primary;
5353

5454
.form-ant-items{
5555
.ant-input{
56-
padding-left: 15px;
56+
padding-left: 15px !important;
5757
}
58+
}
59+
.ant-input{
60+
&:placeholder-shown{
61+
text-transform: capitalize;
62+
}
63+
}
64+
65+
.ant-form-item-label{
66+
text-transform: capitalize;
67+
}
68+
69+
.ant-progress-steps-item-active{
70+
background: $primary;
71+
}
72+
73+
.ant-progress-steps-outer{
74+
margin-bottom: 15px;
5875
}

‎app/assets/sass/layout/_navbar.scss‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,30 @@
3232
@include d-y-center;
3333
flex-grow: 1;
3434
font-weight: 900;
35-
color: $primary;
35+
color: #637381;
3636
font-size: 24px;
3737
text-shadow: #e0e0e0 1px 1px 0;
3838
}
3939
.header-main{
40-
width: calc(100% - 250px);
4140
@include d-y-center;
41+
list-style: none;
42+
margin: 0;
43+
li{
44+
margin-left: 50px;
45+
a{
46+
font-size: 16px;
47+
color: #637381;
48+
&.active{
49+
color: $primary;
50+
51+
}
52+
&:hover{
53+
text-decoration: none;
54+
color: $primary;
55+
}
56+
}
57+
}
58+
4259
}
4360
}
4461
.ant-layout-header {

‎app/common/layout/Navbar.js‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
1-
import { Menu } from 'antd';
21
import { Header } from 'antd/lib/layout/layout';
32
import React from 'react';
43
import { FormattedMessage } from 'react-intl';
5-
import { Link } from 'react-router-dom';
4+
import { NavLink } from 'react-router-dom';
65
import messages from 'containers/HomePage/messages';
6+
import LocaleToggle from 'containers/LocaleToggle';
77

88
function Navbar() {
99
return (
1010
<div className="navbar">
1111
<Header className="d-flex w-100 headers">
1212
<div className="container-fluid d-flex w-100">
1313
<div className="logos"> Truthy</div>
14-
<div className="header-main">
15-
<div className="ml-auto">
16-
<Menu mode="horizontal" defaultSelectedKeys={['1']}>
17-
<Menu.Item key="1">
18-
<Link className="login-form-forgot" to="/">
19-
<FormattedMessage {...messages.home} />
20-
</Link>
21-
</Menu.Item>
22-
<Menu.Item key="2">
23-
<Link className="login-form-forgot" to="/login">
24-
<FormattedMessage {...messages.login} />
25-
</Link>
26-
</Menu.Item>
27-
</Menu>
28-
</div>
29-
</div>
14+
<ul className="header-main ml-auto">
15+
<li>
16+
<NavLink className="login-form-forgot" to="/">
17+
<FormattedMessage {...messages.home} />
18+
</NavLink>
19+
</li>
20+
<li>
21+
<NavLink className="login-form-forgot" to="/login">
22+
<FormattedMessage {...messages.login} />
23+
</NavLink>
24+
</li>
25+
<li>
26+
<LocaleToggle />
27+
</li>
28+
</ul>
3029
</div>
3130
</Header>
3231
</div>

‎app/containers/ForgotPassword/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default function ForgotPasswordPage() {
8787
values={initialValues}
8888
formInstance={form}
8989
onFinish={onFinish}
90-
className="login-page-form form-ant-items"
90+
classname="login-page-form form-ant-items"
9191
name="forgot-password-form"
9292
>
9393
<Title level={3}>

‎app/containers/ResetPassword/index.js‎

Lines changed: 79 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,11 @@ import messages from 'containers/ResetPassword/messages';
2929
import commonMessages from 'common/messages';
3030
import FormButtonWrapper from 'components/FormButtonWrapper';
3131
import FormInputWrapper from 'components/FormInputWrapper';
32-
import { Form, Progress, Typography } from 'antd';
32+
import { Progress, Row, Form, Typography, Col } from 'antd';
3333
import { checkIfStrongPassword } from 'common/validator';
3434
import usePasswordStrengthCheckHook from 'common/hooks/passwordStrengthHook';
3535
import AlertMessage from 'containers/AlertMessage';
36+
import FormWrapper from 'components/FormWrapper';
3637

3738
const key = 'resetPassword';
3839

@@ -101,84 +102,90 @@ export default function ResetPassword() {
101102
}, [errors]);
102103

103104
return (
104-
<div className="content-page">
105+
<div className="login-page mh-100">
105106
<FormattedMessage {...messages.helmetResetPasswordTitle}>
106107
{(title) => (
107108
<Helmet>
108109
<title>{title}</title>
109110
</Helmet>
110111
)}
111112
</FormattedMessage>
112-
113-
<Form
114-
{...formItemLayout}
115-
form={form}
116-
name="register"
117-
onFinish={onFinish}
118-
scrollToFirstError
119-
>
120-
<Title level={2}>
121-
<FormattedMessage {...messages.resetPassword} />
122-
</Title>
123-
124-
<AlertMessage />
125-
126-
<FormInputWrapper
127-
passwordInput
128-
label={commonMessages.passwordPlaceHolder}
129-
rules={[
130-
{
131-
required: true,
132-
whitespace: true,
133-
message: (
134-
<FormattedMessage {...commonMessages.passwordRequired} />
135-
),
136-
},
137-
{
138-
validator: checkIfStrongPassword,
139-
},
140-
]}
141-
name="password"
142-
id="password"
143-
type="password"
144-
placeholder={commonMessages.passwordPlaceHolder}
145-
>
146-
<Progress
147-
percent={
148-
((lowerCheck + charCheck + upperCheck + numChecker) / 4) * 100
149-
}
150-
steps={4}
151-
/>
152-
</FormInputWrapper>
153-
154-
<FormInputWrapper
155-
passwordInput
156-
label={commonMessages.confirmPasswordLabel}
157-
rules={[
158-
{
159-
required: true,
160-
whitespace: true,
161-
message: (
162-
<FormattedMessage {...commonMessages.confirmPasswordRequired} />
163-
),
164-
},
165-
{
166-
validator: checkConfirm,
167-
},
168-
]}
169-
name="confirmPassword"
170-
id="confirmPassword"
171-
type="password"
172-
placeholder={commonMessages.confirmPasswordLabel}
173-
/>
174-
175-
<FormButtonWrapper
176-
variant="primary"
177-
disabled={isLoading}
178-
form={form}
179-
label={messages.resetPasswordBtn}
180-
/>
181-
</Form>
113+
<Row className="login-center">
114+
<Col xl={8} className="m-auto">
115+
<FormWrapper
116+
{...formItemLayout}
117+
form={form}
118+
name="register"
119+
onFinish={onFinish}
120+
scrollToFirstError
121+
classname="login-page-form form-ant-items"
122+
>
123+
<Title level={2}>
124+
<FormattedMessage {...messages.resetPassword} />
125+
</Title>
126+
127+
<AlertMessage />
128+
129+
<FormInputWrapper
130+
passwordInput
131+
label={commonMessages.passwordPlaceHolder}
132+
rules={[
133+
{
134+
required: true,
135+
whitespace: true,
136+
message: (
137+
<FormattedMessage {...commonMessages.passwordRequired} />
138+
),
139+
},
140+
{
141+
validator: checkIfStrongPassword,
142+
},
143+
]}
144+
name="password"
145+
id="password"
146+
type="password"
147+
placeholder={commonMessages.passwordPlaceHolder}
148+
>
149+
<Progress
150+
percent={
151+
((lowerCheck + charCheck + upperCheck + numChecker) / 4) * 100
152+
}
153+
steps={4}
154+
/>
155+
</FormInputWrapper>
156+
157+
<FormInputWrapper
158+
passwordInput
159+
label={commonMessages.confirmPasswordLabel}
160+
rules={[
161+
{
162+
required: true,
163+
whitespace: true,
164+
message: (
165+
<FormattedMessage
166+
{...commonMessages.confirmPasswordRequired}
167+
/>
168+
),
169+
},
170+
{
171+
validator: checkConfirm,
172+
},
173+
]}
174+
name="confirmPassword"
175+
id="confirmPassword"
176+
type="password"
177+
placeholder={commonMessages.confirmPasswordLabel}
178+
/>
179+
180+
<FormButtonWrapper
181+
variant="primary"
182+
disabled={isLoading}
183+
form={form}
184+
label={messages.resetPasswordBtn}
185+
/>
186+
</FormWrapper>
187+
</Col>
188+
</Row>
182189
</div>
183190
);
184191
}

0 commit comments

Comments
 (0)