Skip to content

Commit 901ac9f

Browse files
dave-armstrong-topcoderdave-armstrong-topcoder
authored
Merge pull request #162 from topcoder-platform/PROD-2435_basic-info-form-header
PROD-2435 basic info form header
2 parents d54e549 + 3c87ef2 commit 901ac9f

14 files changed

+372
-0
lines changed

‎src-ts/lib/styles/mixins/_breakpoints.mixins.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@
6767
}
6868
}
6969

70+
@mixin ltelg {
71+
@media (max-width: #{$lg-max}) {
72+
@content;
73+
}
74+
}
75+
7076
@mixin lg {
7177
@media (min-width: #{$lg-min}) and (max-width: #{$lg-max}){
7278
@content;

‎src-ts/tools/work/work-type-banner/WorkTypeBanner.module.scss

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
@import '../../../lib/styles/mixins';
2+
@import '../../../lib/styles/variables';
3+
4+
.heroContainer {
5+
display: flex;
6+
flex-direction: row;
7+
align-items: flex-start;
8+
padding: 0px 0px 0px 0px;
9+
gap: 24px;
10+
11+
12+
height: 104px;
13+
14+
background: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%);
15+
border-radius: 0px;
16+
17+
/* Inside auto layout */
18+
flex: none;
19+
order: 2;
20+
align-self: stretch;
21+
flex-grow: 0;
22+
23+
24+
&.website-design,
25+
&.website-design-legacy,
26+
&.data-exploration,
27+
&.review--payment {
28+
background: linear-gradient(84.92deg, #065D6E 2.08%, #06596E 2.09%, #3E3B91 97.43%);
29+
}
30+
31+
&.find-me-data,
32+
&.problem-statement--data-advisory {
33+
background: linear-gradient(84.92deg, #723390 2.08%, #8C384F 97.43%);
34+
}
35+
36+
&.website-bug-hunt {
37+
background: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%);
38+
}
39+
40+
margin-bottom: -35px;
41+
border-bottom-left-radius: 0;
42+
border-bottom-right-radius: 0;
43+
44+
45+
@include ltelg {
46+
height: 283px;
47+
overflow: hidden;
48+
flex-direction: column;
49+
align-items: flex-start;
50+
padding: 0px;
51+
grid-template-columns: auto;
52+
margin-top: 0 !important;
53+
border-radius: 0 !important;
54+
gap: 0px;
55+
}
56+
57+
.heroBackgroundContainer {
58+
position: static;
59+
width: 359px;
60+
left: 793px;
61+
top: 0px;
62+
margin: 0px;
63+
64+
flex: none;
65+
order: 1;
66+
align-self: stretch;
67+
flex-grow: 0;
68+
69+
border-radius: 0 8px 8px 0;
70+
71+
@include ltelg {
72+
width: 100%;
73+
height: 156px;
74+
order: 0;
75+
}
76+
77+
&.website-bug-hunt {
78+
background: url("./images/bug-hunt.png");
79+
background-size: cover;
80+
81+
@include ltelg {
82+
background: url("./images/bug-hunt-mobile.png");
83+
background-size: cover;
84+
background-position: bottom;
85+
}
86+
}
87+
88+
&.data-exploration {
89+
background: url("./images/data-exploration.png");
90+
background-size: cover;
91+
92+
@include ltelg {
93+
background: url("./images/data-exploration-mobile.png");
94+
background-size: cover;
95+
background-position: bottom;
96+
}
97+
}
98+
99+
&.find-me-data {
100+
background: url("./images/find-me-data.png");
101+
background-size: cover;
102+
103+
@include ltelg {
104+
background: url("./images/find-me-data-mobile.png");
105+
background-size: cover;
106+
background-position: bottom;
107+
}
108+
}
109+
110+
&.problem-statement--data-advisory {
111+
background: url("./images/problem-statement.png");
112+
background-size: cover;
113+
114+
@include ltelg {
115+
background: url("./images/problem-statement-mobile.png");
116+
background-size: cover;
117+
background-position: bottom;
118+
}
119+
}
120+
121+
&.website-design,
122+
&.website-design-legacy {
123+
background: url("./images/website-design-v2.png");
124+
background-size: cover;
125+
126+
@include ltelg {
127+
background: url("./images/website-design-banner-mobile.png");
128+
background-size: cover;
129+
background-position: bottom;
130+
}
131+
}
132+
}
133+
134+
.heroContent {
135+
display: flex;
136+
flex-direction: column;
137+
align-items: flex-start;
138+
padding: 16px 0px;
139+
color: $tc-white;
140+
141+
position: static;
142+
left: 32px;
143+
top: 0px;
144+
145+
/* Inside auto layout */
146+
flex: none;
147+
order: 0;
148+
flex-grow: 1;
149+
margin: 0px 24px;
150+
151+
@include ltelg {
152+
margin: 0px 16px;
153+
padding: 8px 0px;
154+
}
155+
156+
.heroHeader {
157+
/* Auto layout */
158+
display: flex;
159+
flex-direction: row;
160+
align-items: flex-start;
161+
padding: 0px;
162+
163+
position: static;
164+
left: 0px;
165+
top: 0px;
166+
167+
/* Inside auto layout */
168+
flex: none;
169+
order: 0;
170+
align-self: stretch;
171+
flex-grow: 0;
172+
173+
.heroIconContainer {
174+
/* Auto layout */
175+
display: flex;
176+
flex-direction: row;
177+
align-items: flex-start;
178+
margin-right: 16px;
179+
180+
position: static;
181+
width: 40px;
182+
left: 0px;
183+
top: 0px;
184+
}
185+
186+
.heroHeaderContent {
187+
/* Auto layout */
188+
display: flex;
189+
flex-direction: column;
190+
align-items: flex-start;
191+
row-gap: 16px;
192+
padding: 0px;
193+
194+
position: static;
195+
left: 56px;
196+
top: 0px;
197+
198+
/* Inside auto layout */
199+
flex: none;
200+
order: 1;
201+
flex-grow: 1;
202+
203+
font-size: 42px;
204+
font-weight: 400;
205+
206+
@include ltelg {
207+
flex: auto;
208+
}
209+
210+
.heroHeaderTitle {
211+
height: 32px;
212+
font-family: 'Barlow Condensed';
213+
font-style: normal;
214+
font-weight: 600;
215+
font-size: 34px;
216+
line-height: 32px;
217+
text-transform: uppercase;
218+
color: #FFFFFF;
219+
220+
/* Inside auto layout */
221+
flex: none;
222+
order: 0;
223+
align-self: stretch;
224+
flex-grow: 0;
225+
226+
@include ltelg {
227+
font-size: 28px;
228+
line-height: 32px;
229+
width: 288px;
230+
}
231+
}
232+
233+
.heroHeaderSubtitle {
234+
height: 24px;
235+
font-family: 'Roboto';
236+
font-style: normal;
237+
font-weight: 700;
238+
font-size: 16px;
239+
line-height: 24px;
240+
color: #FFFFFF;
241+
242+
/* Inside auto layout */
243+
flex: none;
244+
order: 1;
245+
align-self: stretch;
246+
flex-grow: 0;
247+
248+
@include ltelg {
249+
font-size: 14px;
250+
line-height: 20px;
251+
width: 288px;
252+
height: 60px;
253+
}
254+
}
255+
}
256+
}
257+
258+
.heroText {
259+
position: static;
260+
// height: 96px;
261+
left: 0px;
262+
top: 64px;
263+
max-width: 713px;
264+
265+
/* desktop/body-large */
266+
font-family: Roboto;
267+
font-style: normal;
268+
font-weight: normal;
269+
font-size: 24px;
270+
line-height: 32px;
271+
/* or 133% */
272+
273+
/* gray/white */
274+
color: #FFFFFF;
275+
276+
/* Inside auto layout */
277+
order: 1;
278+
margin: 16px 0px;
279+
flex: none;
280+
align-self: stretch;
281+
flex-grow: 0;
282+
}
283+
}
284+
}
285+
286+
.cardContainer {
287+
display: flex;
288+
column-gap: 8px;
289+
justify-content: space-around;
290+
291+
@include ltelg {
292+
flex-direction: column;
293+
justify-content: flex-start;
294+
align-items: center;
295+
row-gap: 8px;
296+
}
297+
298+
.card {
299+
/* Auto layout */
300+
display: flex;
301+
flex-direction: column;
302+
justify-content: flex-start;
303+
align-items: center;
304+
row-gap: 8px;
305+
padding: 32px;
306+
307+
position: static;
308+
min-width: 500px;
309+
max-width: 568px;
310+
height: 172px;
311+
312+
/* gray/white */
313+
background: $tc-white;
314+
/* Button hover shadow */
315+
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
316+
border-radius: 8px;
317+
318+
.title {
319+
font-size: 24px;
320+
}
321+
322+
.text {
323+
font-size: 16px;
324+
line-height: 28px;
325+
text-align: center;
326+
}
327+
}
328+
}

‎src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { FC } from 'react'
2+
3+
import styles from './WorkTypeBanner.module.scss'
4+
5+
interface WorkTypeBannerProps {
6+
subTitle: string,
7+
title: string,
8+
workType: string
9+
}
10+
11+
export const WorkTypeBanner: FC<WorkTypeBannerProps> = (props: WorkTypeBannerProps) => {
12+
13+
const styleType: string = props.workType
14+
.toLowerCase()
15+
.split(' ')
16+
.join('-')
17+
.split('&')
18+
.join('')
19+
20+
return (
21+
<div className={`${styles.heroContainer} ${styles[styleType]}`}>
22+
<div
23+
className={`${styles.heroBackgroundContainer} ${styles[styleType]}`}
24+
></div>
25+
<div className={styles.heroContent}>
26+
<div className={styles.heroHeader}>
27+
<div className={styles.heroHeaderContent}>
28+
<div className={styles.heroHeaderTitle}>{props.title}</div>
29+
<div className={styles.heroHeaderSubtitle}>{props.subTitle}</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
)
35+
}
36+
37+
export default WorkTypeBanner

‎src-ts/tools/work/work-type-banner/images/bug-hunt-mobile.png

252 KB
Loading

‎src-ts/tools/work/work-type-banner/images/bug-hunt.png

230 KB
Loading

‎src-ts/tools/work/work-type-banner/images/data-exploration-mobile.png

316 KB
Loading

‎src-ts/tools/work/work-type-banner/images/data-exploration.png

404 KB
Loading

‎src-ts/tools/work/work-type-banner/images/find-me-data-mobile.png

315 KB
Loading

‎src-ts/tools/work/work-type-banner/images/find-me-data.png

377 KB
Loading

‎src-ts/tools/work/work-type-banner/images/problem-statement-mobile.png

150 KB
Loading

‎src-ts/tools/work/work-type-banner/images/problem-statement.png

54.5 KB
Loading

‎src-ts/tools/work/work-type-banner/images/website-design-banner-mobile.png

220 KB
Loading

‎src-ts/tools/work/work-type-banner/images/website-design-v2.png

57.9 KB
Loading

‎src-ts/tools/work/work-type-banner/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as WorkTypeBanner } from './WorkTypeBanner'

0 commit comments

Comments
 (0)