Skip to content

Commit c7e4415

Browse files
ram2091999ram2091999
authored
Change Login styling (#11)
- Add welcome message - Add input labels
1 parent e240984 commit c7e4415

File tree

3 files changed

+109
-50
lines changed

3 files changed

+109
-50
lines changed

‎src/app/components/Authentication/Login.tsx‎

Lines changed: 37 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { faLock, faSpinner, faUser } from '@fortawesome/free-solid-svg-icons';
1+
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
33
import { Routes } from 'app/routes';
44
import * as styles from 'app/styles/Authentication.module.css';
@@ -58,46 +58,44 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
5858
}
5959

6060
return (
61-
<div>
61+
<div className={classnames(styles.root)}>
62+
<div className={classnames(styles.welcomeBack)}>
63+
<h1> Welcome! </h1>
64+
<p> Log in to access your dashboard and profile </p>
65+
<div
66+
className={classnames("text-center text-dark mb-2",styles['pragyan-login'])}
67+
>
68+
You can use your{' '}
69+
<a
70+
target="blank"
71+
href="https://pragyan.org"
72+
className={classnames(styles['create-one-button'])}
73+
>
74+
Pragyan
75+
</a>{' '}
76+
account credentials to login.
77+
</div>
78+
</div>
79+
6280
<Row>
6381
<div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
6482
<form
65-
className={classnames('loginForm')}
83+
className={classnames(styles.loginForm)}
6684
noValidate
6785
ref={this.loginRef}
6886
onSubmit={this.handleLogin}
6987
>
7088
<div className="form-row">
7189
<div className="col mb-4">
72-
<div
73-
className="text-center text-dark mb-2"
74-
style={{
75-
fontSize: '12px',
76-
}}
77-
>
78-
You can use your{' '}
79-
<a
80-
target="blank"
81-
href="https://pragyan.org"
82-
style={{
83-
textDecoration: 'none',
84-
}}
85-
>
86-
Pragyan
87-
</a>{' '}
88-
account credentials to login.
90+
<div className={classnames(styles['login-label'])}>
91+
{' '}
92+
Username{' '}
8993
</div>
9094
<div className="input-group">
91-
<div className="input-group-prepend">
92-
<span className="input-group-text" id="inputGroupPrepend">
93-
<FontAwesomeIcon icon={faUser} />
94-
</span>
95-
</div>
9695
<input
9796
type="email"
98-
className="form-control"
97+
className={classnames('form-control', styles['login-input'])}
9998
id="validationUsername"
100-
placeholder="Email"
10199
aria-describedby="inputGroupPrepend"
102100
required
103101
value={username}
@@ -107,23 +105,21 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
107105
})
108106
}
109107
/>
110-
<div className="invalid-feedback">Please enter a valid Email.</div>
108+
<div className={classnames('invalid-feedback', styles['login-error'])}>
109+
{' '}
110+
Please enter a valid Email.{' '}
111+
</div>
111112
</div>
112113
</div>
113114
</div>
114115
<div className="form-row">
115116
<div className="col mb-1">
117+
<div className={classnames(styles['login-label'])}> Password </div>
116118
<div className="input-group">
117-
<div className="input-group-prepend">
118-
<span className="input-group-text" id="inputGroupPrepend">
119-
<FontAwesomeIcon icon={faLock} />
120-
</span>
121-
</div>
122119
<input
123120
type="password"
124-
className="form-control"
121+
className={classnames('form-control', styles['login-input'])}
125122
id="validationPassword"
126-
placeholder="Password"
127123
aria-describedby="inputGroupPrepend"
128124
minLength={5}
129125
value={password}
@@ -134,22 +130,20 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
134130
}
135131
required
136132
/>
137-
<div className="invalid-feedback">Please enter the correct password.</div>
133+
<div className={classnames('invalid-feedback', styles['login-error'])}>
134+
Please enter the correct password.
135+
</div>
138136
</div>
139137
</div>
140138
</div>
141139
<div className="form-row">
142-
<div className="input-group" />
143140
<div className="col text-center mt -0 mb-2 errorMessage">{errorMessage}</div>
144141
</div>
145142
<div className="form-row">
146143
<div className="col text-center">
147144
<button
148-
className="btn btn-info"
145+
className={classnames('btn btn-info', styles.loginButton)}
149146
type="submit"
150-
style={{
151-
width: '100%',
152-
}}
153147
>
154148
Login &nbsp;
155149
{isLoginLoading ? <FontAwesomeIcon icon={faSpinner} spin /> : null}
@@ -159,20 +153,13 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
159153
</form>
160154
</div>
161155
</Row>
162-
<Row
163-
style={{
164-
borderTop: '2px solid #999',
165-
}}
166-
>
156+
<Row>
167157
<Col className="text-center my-3 ml-auto mr-auto">
168158
<div className="text-dark">
169159
Don't have an account?{' '}
170160
<a
171161
href={Routes.REGISTER}
172-
className="text-primary"
173-
style={{
174-
cursor: 'pointer',
175-
}}
162+
className={classnames(styles['create-one-button'])}
176163
onClick={() => {
177164
updateErrorMessage('');
178165
this.props.handleSelectPanel(AuthType.REGISTER);

‎src/app/styles/Authentication.module.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,74 @@
135135
.avatar-section::-webkit-scrollbar-thumb {
136136
background-color: darkgrey;
137137
}
138+
139+
.loginForm {
140+
margin: auto !important;
141+
width: 390px !important;
142+
margin-top: 3% !important;
143+
}
144+
145+
.login-error {
146+
background-color: #fee5d4;
147+
padding: 9px;
148+
margin-top: 0;
149+
}
150+
.login-label {
151+
text-align: left;
152+
margin-bottom: 3px;
153+
font-weight: bold;
154+
font-family: 'Poppins';
155+
}
156+
157+
.root {
158+
text-align: center;
159+
}
160+
161+
.welcomeBack {
162+
margin-top: 57px;
163+
margin-bottom: 10px;
164+
font-family: 'Poppins', sans-serif;
165+
}
166+
.pragyan-login{
167+
font-family: 'Poppins';
168+
font-size: 12px;
169+
margin-top: 0;
170+
}
171+
172+
.create-one-button{
173+
color: #4630eb;
174+
cursor: pointer;
175+
text-decoration: none;
176+
}
177+
178+
179+
180+
.login-input {
181+
height: 50px;
182+
border: 1px solid black;
183+
border-radius: 3px !important;
184+
}
185+
.login-input:focus,
186+
.login-input:active {
187+
outline: none !important;
188+
box-shadow: none !important;
189+
}
190+
.loginButton {
191+
background-color: #4630eb !important ;
192+
margin-top: 10px;
193+
width: 100%;
194+
}
195+
196+
.loginButton:hover {
197+
background-color: #4630eb;
198+
}
199+
200+
.loginButton:focus {
201+
background-color: #4630eb;
202+
}
203+
204+
.loginButton:focus,
205+
.loginButton:active {
206+
outline: none !important;
207+
box-shadow: none;
208+
}

‎src/assets/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
6+
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
67
<title>Code Character</title>
78
</head>
89
<body>

0 commit comments

Comments
 (0)