Skip to content

Commit 5735837

Browse files
placideirandoraplacideirandora
authored
Merge pull request #14 from STACK-UP-3/ch-improve-ui-173376274
173376274 Improve signup UI
2 parents 7d60e63 + b31a4fa commit 5735837

File tree

13 files changed

+330
-395
lines changed

13 files changed

+330
-395
lines changed

‎__tests__/index.test.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import App from "../src/index";
4+
5+
jest.mock("react-dom", () => ({ render: jest.fn() }));
6+
7+
it("should render correctly", () => {
8+
ReactDOM.render(<App />);
9+
global.document.getElementById = id => id === "app";
10+
expect(ReactDOM.render).toHaveBeenCalledWith(<App />);
11+
});

‎src/Components/Auth/ForgetPassword/ChangePassword/ChangePassword.jsx

+7-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
77
import logo from "../../../../Assets/logo.svg";
88
import "./ChangePassword.scss";
99

10-
import ResetSideBar from "../../../Shared/ResetSideBar/ResetSideBar.jsx";
10+
import Sidebar from "../../../Shared/AuthSidebar/AuthSidebar.jsx";
1111
import { passwordUpdate } from "../../../../Redux/Actions/PasswordReset/passwordResetAction";
1212
import { succcessToast } from "../../../../Utils/toasts";
1313

@@ -84,7 +84,7 @@ export class UpdatePassword extends Component {
8484

8585
return (
8686
<div className="container">
87-
<ResetSideBar />
87+
<Sidebar active="signIn" />
8888
<section className="reset-password">
8989
<div className="update-password">
9090
<img
@@ -102,7 +102,7 @@ export class UpdatePassword extends Component {
102102
placeholder="New Password"
103103
onChange={this.onChange}
104104
required
105-
className="update-password__form--input"
105+
className="update-password__input"
106106
/>
107107
<input
108108
type="password"
@@ -112,16 +112,13 @@ export class UpdatePassword extends Component {
112112
placeholder="Confirm Password"
113113
onChange={this.onChange}
114114
required
115-
className="update-password__form--input"
115+
className="update-password__input"
116116
/>
117-
<Link
118-
to="/signin"
119-
className="update-password__form--backto-signin"
120-
>
117+
<Link to="/signin" className="update-password__link">
121118
go back to sign in
122119
</Link>
123-
<button type="submit" className="update-password__form--button">
124-
<div className="update-password__form--button-content">
120+
<button type="submit" className="update-password__button">
121+
<div className="update-password__button-content">
125122
{loading ? (
126123
<ScaleLoader
127124
loading={loading}

‎src/Components/Auth/ForgetPassword/ChangePassword/ChangePassword.scss

+68-109
Original file line numberDiff line numberDiff line change
@@ -40,55 +40,56 @@ sans-serif;
4040
margin-left: auto;
4141
padding: 10px;
4242
width: 65%;
43+
}
4344

44-
&--input {
45-
background-color: transparent;
46-
border: 0;
47-
border-bottom: $input-bottom-border-color solid 3px;
48-
color: $input-text-color;
49-
font: 24px / 33px $font-family;
50-
font-weight: bold;
51-
height: 30px;
52-
margin: 10px 0;
53-
padding: 5px;
54-
width: 55%;
55-
56-
&:focus {
57-
outline: none;
58-
}
59-
}
60-
61-
&--backto-signin {
62-
color: $blue-text-color;
63-
display: block;
64-
font: 18px / 21px $font-family;
65-
font-weight: bold;
66-
margin-bottom: 20px;
67-
margin-left: 10%;
68-
margin-top: 32px;
69-
position: relative;
70-
text-decoration: none;
71-
}
72-
73-
&--button {
74-
background-color: $button-background-color;
75-
border: 0;
76-
border-radius: 15px;
77-
box-shadow: 0 10px 15px $box-shadow-color;
78-
display: block;
79-
height: 61px;
80-
outline: none;
81-
width: 60%;
82-
}
45+
&__button {
46+
background-color: $button-background-color;
47+
border: 0;
48+
border-radius: 15px;
49+
box-shadow: 0 10px 15px $box-shadow-color;
50+
display: block;
51+
height: 61px;
52+
margin-left: -1%;
53+
outline: none;
54+
width: 60%;
8355

84-
&--button-content {
56+
&-content {
8557
color: $button-text-color;
8658
display: flex;
8759
flex-direction: row;
8860
font: 900 25px / 29px $font-family;
8961
justify-content: center;
9062
}
9163
}
64+
65+
&__input {
66+
background-color: transparent;
67+
border: 0;
68+
border-bottom: $input-bottom-border-color solid 3px;
69+
color: $input-text-color;
70+
font: 24px / 33px $font-family;
71+
font-weight: bold;
72+
height: 45px;
73+
margin: 10px 0;
74+
padding: 5px;
75+
width: 55%;
76+
77+
&:focus {
78+
outline: none;
79+
}
80+
}
81+
82+
&__link {
83+
color: $blue-text-color;
84+
display: block;
85+
font: 18px / 21px $font-family;
86+
font-weight: bold;
87+
margin-bottom: 20px;
88+
margin-left: 10%;
89+
margin-top: 32px;
90+
position: relative;
91+
text-decoration: none;
92+
}
9293
}
9394

9495
@media only screen and (max-width: 1000px) {
@@ -99,6 +100,15 @@ sans-serif;
99100
&__form {
100101
width: 70%;
101102
}
103+
104+
&__input {
105+
margin-left: -5%;
106+
width: 70%;
107+
}
108+
109+
&__link {
110+
margin-left: 7%;
111+
}
102112
}
103113
}
104114
}
@@ -119,69 +129,20 @@ sans-serif;
119129
font-size: 30px;
120130
font-weight: bold;
121131
margin-left: -7%;
122-
margin-top: 20%;
132+
margin-top: 30%;
123133
}
124134

125135
&__form {
126-
width: 70%;
127-
128-
&--input {
129-
margin-bottom: 20%;
130-
margin-left: -20%;
131-
width: 100%;
132-
}
133-
134-
&--backto-signin {
135-
margin-bottom: 20%;
136-
margin-left: -15%;
137-
}
138-
139-
&--button {
140-
margin-left: -30%;
141-
width: 120%;
142-
}
143-
}
144-
}
145-
}
146-
}
147-
148-
@media only screen and (max-width: 400px) {
149-
.reset-password {
150-
width: 90%;
151-
152-
.update-password {
153-
width: 80%;
154-
155-
&__mini-logo {
156-
display: none;
136+
margin-left: 2%;
137+
width: 90%;
157138
}
158139

159-
&__title {
160-
color: $blue-text-color;
161-
font-size: 30px;
162-
font-weight: bold;
163-
margin-left: -10%;
164-
margin-top: 20%;
140+
&__link {
141+
margin-left: 10%;
165142
}
166143

167-
&__form {
168-
width: 70%;
169-
170-
&--input {
171-
margin-bottom: 20%;
172-
margin-left: -30%;
173-
width: 110%;
174-
}
175-
176-
&--backto-signin {
177-
margin-bottom: 20%;
178-
margin-left: -15%;
179-
}
180-
181-
&--button {
182-
margin-left: -30%;
183-
width: 120%;
184-
}
144+
&__button {
145+
width: 90%;
185146
}
186147
}
187148
}
@@ -204,22 +165,20 @@ sans-serif;
204165
font-size: 25px;
205166
font-weight: bold;
206167
margin-left: 6%;
207-
margin-top: 20%;
168+
margin-top: 30%;
208169
}
209170

210171
&__form {
211-
width: 60%;
212-
213-
&--input {
214-
font-size: 22px;
215-
margin-bottom: 20%;
216-
margin-left: -35%;
217-
width: 125%;
218-
}
219-
220-
&--button {
221-
width: 130%;
222-
}
172+
margin-left: 5%;
173+
width: 90%;
174+
}
175+
176+
&__button {
177+
width: 90%;
178+
}
179+
180+
&__link {
181+
margin-left: 10%;
223182
}
224183
}
225184
}

‎src/Components/Auth/ForgetPassword/ResetPassword/ResetPassword.jsx

+6-9
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
77
import logo from "../../../../Assets/logo.svg";
88
import "./ResetPassword.scss";
99

10-
import ResetSideBar from "../../../Shared/ResetSideBar/ResetSideBar.jsx";
10+
import Sidebar from "../../../Shared/AuthSidebar/AuthSidebar.jsx";
1111
import { resetLink } from "../../../../Redux/Actions/PasswordReset/sendLinkAction";
1212
import { succcessToast } from "../../../../Utils/toasts";
1313

@@ -75,7 +75,7 @@ export class ResetPassword extends Component {
7575

7676
return (
7777
<div className="container">
78-
<ResetSideBar />
78+
<Sidebar active="signIn" />
7979
<section className="forget-password">
8080
<div className="change-password">
8181
<img
@@ -93,16 +93,13 @@ export class ResetPassword extends Component {
9393
placeholder="Enter your email"
9494
onChange={this.onChange}
9595
required
96-
className="change-password__form--input"
96+
className="change-password__input"
9797
/>
98-
<Link
99-
to="/signin"
100-
className="change-password__form--backto-signin"
101-
>
98+
<Link to="/signin" className="change-password__link">
10299
go back to sign in
103100
</Link>
104-
<button type="submit" className="change-password__form--button">
105-
<div className="change-password__form--button-content">
101+
<button type="submit" className="change-password__button">
102+
<div className="change-password__button-content">
106103
{loading ? (
107104
<ScaleLoader
108105
loading={loading}

0 commit comments

Comments
 (0)