Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 4bc2baa

Browse files
mbaghelmbaghel
committed
Finished results page. Made mock search longer.
1 parent ec053f0 commit 4bc2baa

File tree

8 files changed

+264
-29
lines changed

8 files changed

+264
-29
lines changed

‎src/assets/images/curve.svg

+11
Loading

‎src/assets/images/icon-multiple-users.svg

+1
Loading

‎src/assets/images/icon-team-meeting-chat.svg

+1
Loading

‎src/routes/CreateNewTeam/index.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import IconMultipleActionsCheck from "../../assets/images/icon-multiple-actions-
88
import IconListQuill from "../../assets/images/icon-list-quill.svg";
99
import IconOfficeFileText from "../../assets/images/icon-office-file-text.svg";
1010
import { postProject } from "services/teams";
11+
import { toastr } from "react-redux-toastr";
1112

1213
function CreateNewTeam() {
1314
const createProject = async () => {
@@ -17,6 +18,7 @@ function CreateNewTeam() {
1718
navigate(`/taas/myteams/createnewteam/${id}/skills`);
1819
})
1920
.catch((err) => {
21+
toastr.warning("Error", "Failed to create a new team.");
2022
console.error(err);
2123
});
2224
};

‎src/routes/InputSkills/components/ResultCard/index.jsx

+104-23
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import "./styles.module.scss";
33
import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
4+
import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg";
5+
import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
6+
import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-chat.svg";
7+
import Curve from "../../../../assets/images/curve.svg";
48
import Button from "components/Button";
59

610
function ResultCard() {
11+
const [showRates, setShowRates] = useState(false);
12+
713
return (
814
<div styleName="result-card">
915
<div styleName="heading">
@@ -13,32 +19,107 @@ function ResultCard() {
1319
We have qualified candidates who match 80% or more of your job
1420
requirements.
1521
</p>
22+
<Curve styleName="curve" />
23+
<IconEarthCheck styleName="transparent-icon" />
1624
</div>
17-
<div styleName="card-body">
18-
<div styleName="button-group">
19-
<Button type="segment-selected" size="small">
20-
Overview
21-
</Button>
22-
<Button type="segment" size="small">
23-
Rate Details
24-
</Button>
25-
</div>
26-
<div styleName="content">
27-
<div>
28-
<h4>80%</h4>
29-
<p>Matching rate</p>
25+
<div styleName="button-group">
26+
<Button
27+
type={!showRates ? "segment-selected" : "segment"}
28+
size="small"
29+
onClick={() => setShowRates(false)}
30+
>
31+
Overview
32+
</Button>
33+
<Button
34+
type={showRates ? "segment-selected" : "segment"}
35+
size="small"
36+
onClick={() => setShowRates(true)}
37+
>
38+
Rate Details
39+
</Button>
40+
</div>
41+
{showRates ? (
42+
<div styleName="rate-content">
43+
<div styleName="rate-left-side">
44+
<div styleName="cost-info">
45+
<div styleName="rate-type">
46+
<h6>Full-Time</h6>
47+
<p>(40h / week)</p>
48+
</div>
49+
<div styleName="weekly-rate">
50+
<h5>$1,800</h5>
51+
<p>/Week</p>
52+
</div>
53+
</div>
54+
<div styleName="cost-info">
55+
<div styleName="rate-type">
56+
<h6>Part-Time</h6>
57+
<p>(30h / week)</p>
58+
</div>
59+
<div styleName="weekly-rate">
60+
<h5>$1,250</h5>
61+
<p>/Week</p>
62+
</div>
63+
</div>
64+
<div styleName="cost-info">
65+
<div styleName="rate-type">
66+
<h6>Part-Time</h6>
67+
<p>(20h / week)</p>
68+
</div>
69+
<div styleName="weekly-rate">
70+
<h5>$800</h5>
71+
<p>/Week</p>
72+
</div>
73+
</div>
3074
</div>
31-
<div>
32-
<h4>300+</h4>
33-
<p>Members matched</p>
75+
<div styleName="vertical-line" />
76+
<div styleName="rate-right-side">
77+
<div styleName="timeline-info">
78+
<IconMultipleActionsCheck />
79+
<div>
80+
<p>Qualified candidates within</p>
81+
<h6>24h</h6>
82+
</div>
83+
</div>
84+
<div styleName="timeline-info">
85+
<IconTeamMeetingChat />
86+
<div>
87+
<p>Interviews can start within</p>
88+
<h6>48h</h6>
89+
</div>
90+
</div>
3491
</div>
3592
</div>
36-
<div>
37-
<p>60% of members are available 20 hours / week (part time)</p>
38-
<p>20% of members are available 30 hours / week (part time)</p>
39-
<p>10% of members are available 40 hours / week (full time)</p>
40-
</div>
41-
</div>
93+
) : (
94+
<>
95+
<div styleName="content">
96+
<div>
97+
<h4>80%</h4>
98+
<p>Matching rate</p>
99+
</div>
100+
<div styleName="vertical-line" />
101+
<div>
102+
<IconMultipleUsers styleName="users" />
103+
<h4>300+</h4>
104+
<p>Members matched</p>
105+
</div>
106+
</div>
107+
<div styleName="footer">
108+
<p>
109+
<span>60%</span> of members are available 20 hours / week (part
110+
time)
111+
</p>
112+
<p>
113+
<span>20%</span> of members are available 30 hours / week (part
114+
time)
115+
</p>
116+
<p>
117+
<span>10%</span> of members are available 40 hours / week (full
118+
time)
119+
</p>
120+
</div>
121+
</>
122+
)}
42123
</div>
43124
);
44125
}

‎src/routes/InputSkills/components/ResultCard/styles.module.scss

+142-3
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@
1313
flex-direction: column;
1414
justify-content: flex-start;
1515
align-items: center;
16-
padding: 30px 0 30px 0;
16+
padding: 30px 0 60px 0;
1717
margin-bottom: 30px;
1818
color: #fff;
1919
background-image: linear-gradient(225deg, #0ab88a 0%, #137d60 100%);
20+
position: relative;
21+
text-align: center;
22+
border-radius: 8px 8px 0 0;
2023

2124
svg {
2225
margin-bottom: 8px;
@@ -30,6 +33,7 @@
3033
text-transform: uppercase;
3134
font-size: 34px;
3235
margin-bottom: 8px;
36+
font-weight: 500;
3337
}
3438

3539
p {
@@ -42,13 +46,16 @@
4246
flex-direction: row;
4347
align-items: center;
4448
justify-content: center;
49+
margin-bottom: 42px;
4550
}
4651

4752
.content {
4853
display: flex;
4954
flex-direction: row;
5055
align-items: center;
5156
justify-content: center;
57+
height: 170px;
58+
margin-bottom: 35px;
5259

5360
> div {
5461
display: flex;
@@ -57,21 +64,153 @@
5764
justify-content: flex-start;
5865
}
5966

67+
> div.vertical-line {
68+
display: block;
69+
height: 100%;
70+
width: 1px;
71+
background-color: #e9e9e9;
72+
margin: 0 40px;
73+
}
74+
6075
h4 {
6176
@include font-barlow-condensed;
6277
font-size: 48px;
6378
margin-bottom: 14px;
79+
font-weight: 500;
6480
}
6581

6682
p {
6783
font-size: 14px;
6884
}
6985
}
7086

71-
.card-body {
87+
.users {
88+
margin-bottom: 8px;
89+
}
90+
91+
.curve {
92+
position: absolute;
93+
left: 0;
94+
bottom: -70px;
95+
width: 100%;
96+
}
97+
98+
.transparent-icon {
99+
position: absolute;
100+
top: -40px;
101+
right: 10px;
102+
opacity: 12%;
103+
height: 142px;
104+
width: 142px;
105+
}
106+
107+
.footer {
108+
text-align: center;
109+
font-size: 14px;
110+
line-height: 26px;
111+
112+
span {
113+
font-weight: 900;
114+
}
115+
}
116+
117+
.rate-content {
118+
display: flex;
119+
flex-direction: row;
120+
justify-content: center;
121+
align-items: center;
122+
height: 200px;
123+
}
124+
125+
.vertical-line {
126+
display: block;
127+
height: 100%;
128+
width: 1px;
129+
background-color: #e9e9e9;
130+
margin: 0 40px;
131+
}
132+
133+
.timeline-info {
134+
display: flex;
135+
flex-direction: row;
136+
align-items: center;
137+
justify-content: flex-start;
138+
139+
svg {
140+
height: 36px;
141+
width: 36px;
142+
margin-right: 16px;
143+
144+
g {
145+
stroke: #000;
146+
}
147+
}
148+
149+
p {
150+
font-size: 14px;
151+
line-height: 22px;
152+
}
153+
154+
h6 {
155+
@include font-roboto;
156+
font-size: 22px;
157+
font-weight: 700;
158+
}
159+
}
160+
161+
.rate-right-side {
72162
display: flex;
73163
flex-direction: column;
164+
align-items: flex-start;
165+
justify-content: space-evenly;
166+
height: 100%;
167+
}
168+
169+
.weekly-rate {
170+
display: flex;
171+
flex-direction: row;
172+
align-items: baseline;
173+
justify-content: flex-end;
174+
margin-left: 30px;
175+
176+
h5 {
177+
@include font-barlow-condensed;
178+
font-size: 48px;
179+
font-weight: 500;
180+
margin-right: 4px;
181+
}
182+
183+
p {
184+
font-size: 14px;
185+
color: #555;
186+
}
187+
}
188+
189+
.rate-type {
190+
h6 {
191+
@include font-barlow;
192+
font-size: 16px;
193+
text-transform: uppercase;
194+
font-weight: 900;
195+
line-height: 20px;
196+
}
197+
p {
198+
font-size: 14px;
199+
color: #555;
200+
}
201+
}
202+
203+
.cost-info {
204+
display: flex;
205+
flex-direction: row;
74206
align-items: center;
207+
justify-content: flex-end;
208+
}
209+
210+
.rate-left-side {
211+
display: flex;
212+
flex-direction: column;
213+
align-items: flex-start;
75214
justify-content: space-between;
76-
height: 55vh;
215+
height: 100%;
77216
}

‎src/routes/InputSkills/components/SearchCard/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ function SearchCard() {
1414
setSearchState("state1");
1515
timer2 = setTimeout(() => {
1616
setSearchState("state2");
17-
}, 500);
18-
}, 500);
17+
}, 800);
18+
}, 800);
1919

2020
return () => {
2121
clearTimeout(timer1);

‎src/routes/InputSkills/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function InputSkills({ projectId }) {
6464
setSearchState("searching");
6565
searchTimer = setTimeout(() => {
6666
setSearchState("done");
67-
}, 2000);
67+
}, 3000);
6868
};
6969

7070
useEffect(() => clearTimeout(searchTimer));

0 commit comments

Comments
 (0)