diff --git a/public/assets/images/signup/categories/cog-outline.svg b/public/assets/images/signup/categories/cog-outline.svg new file mode 100644 index 0000000..3acad10 --- /dev/null +++ b/public/assets/images/signup/categories/cog-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/categories/headset.svg b/public/assets/images/signup/categories/headset.svg new file mode 100644 index 0000000..d692b0b --- /dev/null +++ b/public/assets/images/signup/categories/headset.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/images/signup/categories/industry.svg b/public/assets/images/signup/categories/industry.svg new file mode 100644 index 0000000..70dbd97 --- /dev/null +++ b/public/assets/images/signup/categories/industry.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/categories/laptop.svg b/public/assets/images/signup/categories/laptop.svg new file mode 100644 index 0000000..4249b5b --- /dev/null +++ b/public/assets/images/signup/categories/laptop.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/images/signup/categories/line-chart-line.svg b/public/assets/images/signup/categories/line-chart-line.svg new file mode 100644 index 0000000..7037d83 --- /dev/null +++ b/public/assets/images/signup/categories/line-chart-line.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/images/signup/categories/medical-cross.svg b/public/assets/images/signup/categories/medical-cross.svg new file mode 100644 index 0000000..47ab512 --- /dev/null +++ b/public/assets/images/signup/categories/medical-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/categories/money.svg b/public/assets/images/signup/categories/money.svg new file mode 100644 index 0000000..62337e4 --- /dev/null +++ b/public/assets/images/signup/categories/money.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/signup/categories/night-lightning.svg b/public/assets/images/signup/categories/night-lightning.svg new file mode 100644 index 0000000..d629377 --- /dev/null +++ b/public/assets/images/signup/categories/night-lightning.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/categories/pattern.svg b/public/assets/images/signup/categories/pattern.svg new file mode 100644 index 0000000..f477f01 --- /dev/null +++ b/public/assets/images/signup/categories/pattern.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/categories/sprout.svg b/public/assets/images/signup/categories/sprout.svg new file mode 100644 index 0000000..9e1a06d --- /dev/null +++ b/public/assets/images/signup/categories/sprout.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/signup/AdditionalQuestions.module.scss b/src/pages/signup/AdditionalQuestions.module.scss index 3befe95..2428d25 100644 --- a/src/pages/signup/AdditionalQuestions.module.scss +++ b/src/pages/signup/AdditionalQuestions.module.scss @@ -82,7 +82,7 @@ box-shadow: 0px 0px 10px black; border-radius: 10px; height: 55px; - font-size: 17px; + font-size: 16px; color: var(--grey-rock); margin-bottom: 30px; transition: box-shadow 0.3s, color 0.3s; @@ -118,8 +118,21 @@ &.option { float: right; } + + &.sectorIcon { + margin-right: 10px; + } } } + + + ion-range { + --bar-height: 5px; + --bar-background: var(--black-rock); + --bar-background-active: var(--shamrock); + --knob-size: 20px; + --bar-border-radius: 30px; + } } } @@ -176,21 +189,40 @@ justify-content: center; .container { + width: 100%; + height: 90%; + overflow: auto; + padding: 10% 0; ul { list-style: none; padding: 0; margin: 0; color: white; + width: 100%; + display: block; } - ion-range { - position: absolute; - right: 5%; - top: 0; - transform: rotate(90deg); - width: 100px; - height: 100%; + li { + height: 60px; + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + padding: 0 10%; + font-size: 14px; + opacity: 0.5; + transition: box-shadow 0.3s, opacity 0.3s; + + &.active { + box-shadow: 0px 0px 10px black; + opacity: 1; + } + + ion-icon { + font-size: 20px; + margin-right: 20px; + } } } } \ No newline at end of file diff --git a/src/pages/signup/AdditionalQuestions.tsx b/src/pages/signup/AdditionalQuestions.tsx index cc52c94..df559e2 100644 --- a/src/pages/signup/AdditionalQuestions.tsx +++ b/src/pages/signup/AdditionalQuestions.tsx @@ -7,29 +7,63 @@ type Props = { }; type OwnState = { index: number, userType: 'INDIVIDUAL' | 'COMPANY' | '', - userSector: number, + userSector: { + value: number, + icon: string, + text: string + } | undefined, showPicker: boolean, }; const slideOpts = { - initialSlide: 3, + initialSlide: 2, speed: 400, followFinger: false, draggable: false, + longSwipes: false, + noSwiping: true }; const jobSectors = [{ value: 1, + icon: 'assets/images/signup/categories/laptop.svg', text: 'Information Technology', }, { value: 2, + icon: 'assets/images/signup/categories/medical-cross.svg', text: 'Health Care' }, { value: 3, + icon: 'assets/images/signup/categories/money.svg', text: 'Finance' }, { value: 4, + icon: 'assets/images/signup/categories/headset.svg', text: 'Communication Services' +}, { + value: 5, + icon: 'assets/images/signup/categories/industry.svg', + text: 'Industrials' +}, { + value: 6, + icon: 'assets/images/signup/categories/line-chart-line.svg', + text: 'Consumer Staples' +}, { + value: 7, + icon: 'assets/images/signup/categories/night-lightning.svg', + text: 'Energy' +}, { + value: 8, + icon: 'assets/images/signup/categories/cog-outline.svg', + text: 'Utilities' +}, { + value: 9, + icon: 'assets/images/signup/categories/sprout.svg', + text: 'Real Estate' +}, { + value: 10, + icon: 'assets/images/signup/categories/pattern.svg', + text: 'Others' }]; @@ -43,7 +77,7 @@ class AdditionalQuestions extends Component { index: 0, userType: 'INDIVIDUAL', showPicker: false, - userSector: 0, + userSector: undefined, }; @@ -98,7 +132,7 @@ class AdditionalQuestions extends Component { - this.setState({ showPicker: true })}> { this.state.userSector ? { this.state.userSector } : Select an Option } + this.setState({ showPicker: true })}> { this.state.userSector ? { this.state.userSector.text } : Select an Option } @@ -110,7 +144,7 @@ class AdditionalQuestions extends Component { Select answer below - + @@ -139,7 +173,11 @@ class AdditionalQuestions extends Component { { this.state.showPicker && - { jobSectors.map((sector) => { this.state.userSector === sector.value ? '*' : '' } { sector.value }. { sector.text } ) } + { jobSectors.map((sector) => this.setState({ userSector: sector, showPicker: false })}> + { sector.text } + ) } }
Select answer below