Skip to content

Commit 4dbb2e0

Browse files
suppermancoolsuppermancool
committed
Onboarding: work experience page and education page
1 parent 2e6fe88 commit 4dbb2e0

File tree

33 files changed

+1656
-58
lines changed

33 files changed

+1656
-58
lines changed

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,15 @@
7474
"react-contenteditable": "^3.3.6",
7575
"react-css-super-themr": "^2.2.0",
7676
"react-date-range": "^1.1.3",
77+
"react-datepicker": "^4.14.1",
7778
"react-dom": "^18.2.0",
7879
"react-dropzone": "^11.3.2",
7980
"react-elastic-carousel": "^0.11.5",
8081
"react-gtm-module": "^2.0.11",
8182
"react-helmet": "^6.1.0",
8283
"react-html-parser": "^2.0.2",
8384
"react-markdown": "8.0.6",
85+
"react-overlays": "^5.2.1",
8486
"react-redux": "^8.0.4",
8587
"react-redux-toastr": "^7.6.10",
8688
"react-responsive": "^9.0.0-beta.5",
@@ -149,6 +151,7 @@
149151
"@types/node": "^18.8.5",
150152
"@types/reach__router": "^1.3.11",
151153
"@types/react": "^18.0.21",
154+
"@types/react-datepicker": "^4.11.2",
152155
"@types/react-dom": "^18.0.6",
153156
"@types/react-gtm-module": "^2.0.1",
154157
"@types/react-helmet": "^6.1.6",

‎src/apps/onboarding/src/assets/images/edit.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/apps/onboarding/src/assets/images/trash.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/apps/onboarding/src/components/DateInput/index.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/* eslint-disable ordered-imports/ordered-imports */
2+
/* eslint-disable react/jsx-no-bind */
3+
/* eslint-disable unicorn/no-null */
4+
/* eslint-disable max-len */
5+
/* eslint-disable react/destructuring-assignment */
6+
/**
7+
* DateInput
8+
*
9+
* Date Input control.
10+
*/
11+
import React, { FC, createRef, useState } from 'react'
12+
import DatePicker from 'react-datepicker'
13+
import { Portal } from 'react-overlays'
14+
import cn from 'classnames'
15+
import moment from 'moment'
16+
17+
import 'react-datepicker/dist/react-datepicker.css'
18+
19+
import styles from './styles.module.scss'
20+
21+
const CalendarIcon: any = () => (
22+
<svg
23+
width='16'
24+
height='16'
25+
viewBox='0 0 16 16'
26+
fill='none'
27+
xmlns='http://www.w3.org/2000/svg'
28+
>
29+
<path
30+
d='M13.1849 2.66659H12.4441V1.33325H10.9626V2.66659H5.03671V1.33325H3.55523V2.66659H2.81449C1.99227 2.66659 1.34042 3.26659 1.34042 3.99992L1.33301 13.3333C1.33301 14.0666 1.99227 14.6666 2.81449 14.6666H13.1849C13.9997 14.6666 14.6663 14.0666 14.6663 13.3333V3.99992C14.6663 3.26659 13.9997 2.66659 13.1849 2.66659ZM13.1849 13.3333H2.81449V5.99992H13.1849V13.3333ZM4.29597 7.33325H7.99967V10.6666H4.29597V7.33325Z'
31+
fill='#7F7F7F'
32+
/>
33+
</svg>
34+
)
35+
const ArrowIcon: any = () => (
36+
<svg
37+
height='20'
38+
width='20'
39+
viewBox='0 0 20 20'
40+
aria-hidden='true'
41+
focusable='false'
42+
>
43+
<path
44+
d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'
45+
/>
46+
</svg>
47+
)
48+
49+
interface CalendarContainerProps {
50+
children?: any
51+
}
52+
const CalendarContainer: FC<CalendarContainerProps> = ({ children }: CalendarContainerProps) => {
53+
const el: any = document.getElementById('calendar-portal')
54+
55+
return <Portal container={el}>{children}</Portal>
56+
}
57+
58+
interface DateInputProps {
59+
style2?: boolean
60+
className?: string
61+
placeholder?: string
62+
value?: Date
63+
onChange?: (date: Date | null) => void
64+
onBlur?: () => void
65+
onFocus?: () => void
66+
allowFutureDate?: boolean
67+
disabled?: boolean
68+
}
69+
70+
const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
71+
const [open, setOpen] = useState(false)
72+
const calendarRef: any = createRef<any>()
73+
return (
74+
<div
75+
className={cn(
76+
styles['datepicker-wrapper'],
77+
props.className,
78+
props.style2 ? styles.style2 : '',
79+
)}
80+
>
81+
<div
82+
onClick={() => calendarRef.current.setOpen(true)}
83+
className={cn(styles.icon, styles['icon-calendar'])}
84+
>
85+
<CalendarIcon />
86+
</div>
87+
<DatePicker
88+
ref={calendarRef}
89+
dateFormat='MM/dd/yyyy'
90+
placeholderText={props.placeholder}
91+
selected={props.value}
92+
onChange={props.onChange as any}
93+
onBlur={props.onBlur}
94+
onCalendarClose={() => {
95+
setOpen(false)
96+
}}
97+
onFocus={props.onFocus}
98+
showYearDropdown
99+
onCalendarOpen={() => setOpen(true)}
100+
maxDate={
101+
props.allowFutureDate ? null : moment()
102+
.subtract(1, 'days')
103+
.toDate()
104+
}
105+
disabled={props.disabled}
106+
popperContainer={CalendarContainer}
107+
/>
108+
<div
109+
className={cn(
110+
styles.icon,
111+
styles['icon-arrow'],
112+
open ? styles['icon-arrow-open'] : '',
113+
)}
114+
onClick={() => calendarRef.current.setOpen(true)}
115+
>
116+
<ArrowIcon />
117+
</div>
118+
</div>
119+
)
120+
}
121+
122+
export default DateInput

‎src/apps/onboarding/src/components/DateInput/styles.module.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.datepicker-wrapper {
2+
position: relative;
3+
padding: 0 10px;
4+
height: 36px;
5+
display: flex;
6+
align-items: center;
7+
8+
.icon {
9+
position: absolute;
10+
display: flex;
11+
padding: 8px 0 8px 4px;
12+
align-items: center;
13+
14+
&>svg {
15+
width: 20px;
16+
height: 20px;
17+
}
18+
}
19+
20+
.icon-calendar {
21+
left: 8px;
22+
cursor: pointer;
23+
}
24+
25+
.icon-arrow {
26+
right: 8px;
27+
top: 0;
28+
29+
&>svg {
30+
color: hsl(0, 0%, 80%);
31+
}
32+
33+
&:hover {
34+
&>svg {
35+
color: hsl(0, 0%, 60%);
36+
}
37+
}
38+
39+
&.icon-arrow-open {
40+
&>svg {
41+
color: hsl(0, 0%, 40%);
42+
}
43+
}
44+
}
45+
46+
&.error {
47+
input {
48+
border-color: #fe665d;
49+
}
50+
}
51+
52+
&>div:nth-child(2) {
53+
margin-left: 24px;
54+
}
55+
56+
&.style2 input {
57+
border: none !important;
58+
box-shadow: none !important;
59+
margin-bottom: 0 !important;
60+
font-size: 14px;
61+
font-weight: 400;
62+
63+
&::placeholder {
64+
color: #aaa;
65+
font-size: 14px;
66+
font-weight: 400;
67+
text-transform: none !important;
68+
}
69+
}
70+
}
71+
72+
.datepicker-wrapper>div:nth-child(2)>div:nth-child(2)>div:nth-child(2) {
73+
z-index: 100;
74+
}

‎src/apps/onboarding/src/components/FormField/index.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* eslint-disable ordered-imports/ordered-imports */
2+
/* eslint-disable react/jsx-no-bind */
3+
/* eslint-disable react/destructuring-assignment */
4+
/* eslint-disable unicorn/no-null */
5+
/**
6+
* FormField
7+
*
8+
* A Form Field Is a wrapper for input to add the label to it
9+
*/
10+
import React, { FC } from 'react'
11+
import classNames from 'classnames'
12+
13+
import { IconSolid } from '~/libs/ui'
14+
15+
import styles from './styles.module.scss'
16+
17+
interface FormFieldProps {
18+
children?: any
19+
className?: string
20+
label?: string
21+
error?: string
22+
}
23+
24+
const FormField: FC<FormFieldProps> = ({
25+
children,
26+
className,
27+
label,
28+
...props
29+
}: FormFieldProps) => {
30+
const handleClick: any = (e: any) => {
31+
// focus on input label click
32+
const inputElement: any = e.target.closest('.form-field')
33+
.querySelector('input')
34+
inputElement?.focus()
35+
}
36+
37+
return (
38+
<div
39+
className={classNames(styles['form-field-wrapper'], className || '')}
40+
>
41+
<div className={classNames(styles['form-field'])} {...props}>
42+
<div className={styles.label} onClick={handleClick}>
43+
{label}
44+
</div>
45+
{children}
46+
</div>
47+
<div className={classNames(styles.error, 'd-flex align-items-center')}>
48+
{props.error ? (<IconSolid.ExclamationIcon width={12} height={12} />) : null}
49+
{props.error}
50+
</div>
51+
</div>
52+
)
53+
}
54+
55+
export default FormField

‎src/apps/onboarding/src/components/FormField/styles.module.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
$green1: #137d60;
2+
3+
.form-field-wrapper {
4+
position: relative;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: flex-start;
8+
margin-bottom: 18px;
9+
10+
.form-field {
11+
border: 1px solid #b7b7b7;
12+
border-radius: 4px;
13+
background: white;
14+
padding-top: 24px;
15+
margin-bottom: 10px;
16+
17+
.label {
18+
position: absolute;
19+
top: 5px;
20+
left: 15px;
21+
color: $green1;
22+
font-size: 11px;
23+
font-weight: 500;
24+
}
25+
}
26+
27+
.error {
28+
color: #ec2710;
29+
font-size: 11px;
30+
gap: 4px;
31+
}
32+
}

‎src/apps/onboarding/src/components/connect-linked-in/index.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* eslint-disable ordered-imports/ordered-imports */
2+
/* eslint-disable react/jsx-no-bind */
3+
import React, { FC } from 'react'
4+
5+
import { Button } from '~/libs/ui'
6+
7+
const ConnectLinkedIn: FC<{}> = () => (
8+
<div className='d-flex flex-column align-items-end'>
9+
<span>Wait! Get my skills from LinkedIn instead...</span>
10+
<Button
11+
size='lg'
12+
secondary
13+
iconToLeft
14+
className='mt-30'
15+
>
16+
connect to linked in
17+
</Button>
18+
</div>
19+
)
20+
21+
export default ConnectLinkedIn

0 commit comments

Comments
 (0)