diff --git a/public/assets/images/signup/modules/briefcase-outline.svg b/public/assets/images/signup/modules/briefcase-outline.svg new file mode 100644 index 0000000..db33c03 --- /dev/null +++ b/public/assets/images/signup/modules/briefcase-outline.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/images/signup/modules/bxs-user-badge.svg b/public/assets/images/signup/modules/bxs-user-badge.svg new file mode 100644 index 0000000..ddde84a --- /dev/null +++ b/public/assets/images/signup/modules/bxs-user-badge.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/modules/chat-bubble.svg b/public/assets/images/signup/modules/chat-bubble.svg new file mode 100644 index 0000000..a07112f --- /dev/null +++ b/public/assets/images/signup/modules/chat-bubble.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/signup/modules/lock.svg b/public/assets/images/signup/modules/lock.svg new file mode 100644 index 0000000..c86f913 --- /dev/null +++ b/public/assets/images/signup/modules/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/modules/mail-outline.svg b/public/assets/images/signup/modules/mail-outline.svg new file mode 100644 index 0000000..f2a6746 --- /dev/null +++ b/public/assets/images/signup/modules/mail-outline.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/images/signup/modules/money.svg b/public/assets/images/signup/modules/money.svg new file mode 100644 index 0000000..62337e4 --- /dev/null +++ b/public/assets/images/signup/modules/money.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/signup/modules/pen.svg b/public/assets/images/signup/modules/pen.svg new file mode 100644 index 0000000..868073d --- /dev/null +++ b/public/assets/images/signup/modules/pen.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/signup/modules/tasks-line.svg b/public/assets/images/signup/modules/tasks-line.svg new file mode 100644 index 0000000..c7e938c --- /dev/null +++ b/public/assets/images/signup/modules/tasks-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/signup/modules/tennisball-outline.svg b/public/assets/images/signup/modules/tennisball-outline.svg new file mode 100644 index 0000000..a778281 --- /dev/null +++ b/public/assets/images/signup/modules/tennisball-outline.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar1.svg b/public/assets/images/signup/profile-pictures/avatar1.svg new file mode 100644 index 0000000..33b3bc6 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar1.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar10.svg b/public/assets/images/signup/profile-pictures/avatar10.svg new file mode 100644 index 0000000..9230a5a --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar10.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar11.svg b/public/assets/images/signup/profile-pictures/avatar11.svg new file mode 100644 index 0000000..198b392 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar11.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar12.svg b/public/assets/images/signup/profile-pictures/avatar12.svg new file mode 100644 index 0000000..7663d2e --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar12.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar13.svg b/public/assets/images/signup/profile-pictures/avatar13.svg new file mode 100644 index 0000000..1ddf7b9 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar13.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar2.svg b/public/assets/images/signup/profile-pictures/avatar2.svg new file mode 100644 index 0000000..4cefac4 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar2.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar3.svg b/public/assets/images/signup/profile-pictures/avatar3.svg new file mode 100644 index 0000000..6e2109a --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar3.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar4.svg b/public/assets/images/signup/profile-pictures/avatar4.svg new file mode 100644 index 0000000..a0ca163 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar4.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar5.svg b/public/assets/images/signup/profile-pictures/avatar5.svg new file mode 100644 index 0000000..8c94fbf --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar5.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar6.svg b/public/assets/images/signup/profile-pictures/avatar6.svg new file mode 100644 index 0000000..1d28ab3 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar6.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar7.svg b/public/assets/images/signup/profile-pictures/avatar7.svg new file mode 100644 index 0000000..682712b --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar7.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar8.svg b/public/assets/images/signup/profile-pictures/avatar8.svg new file mode 100644 index 0000000..5819558 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar8.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/signup/profile-pictures/avatar9.svg b/public/assets/images/signup/profile-pictures/avatar9.svg new file mode 100644 index 0000000..ea316f1 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/avatar9.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/signup/AdditionalQuestions.module.scss b/src/pages/signup/AdditionalQuestions.module.scss index 2428d25..6f6c4f1 100644 --- a/src/pages/signup/AdditionalQuestions.module.scss +++ b/src/pages/signup/AdditionalQuestions.module.scss @@ -133,7 +133,128 @@ --knob-size: 20px; --bar-border-radius: 30px; } + + p { + text-align: center; + font-size: 30px; + color: var(--ash); + font-weight: 600; + letter-spacing: 1px; + } + + .modules { + list-style: none; + width: 100%; + position: relative; + text-align: center; + position: relative; + align-items: center; + justify-content: center; + display: grid; + grid-row-gap: 20px; + grid-column-gap: 10px; + margin: 0; + padding: 0; + + li:nth-of-type(1) { + grid-column: 1; + } + + li:nth-of-type(2) { + grid-column: 2; + } + + li:nth-of-type(3) { + grid-column: 3; + } + + li:nth-of-type(4) { + grid-column: 4; + } + + li:nth-of-type(5) { + grid-column: 1 / span 2; + grid-row: 2; + } + + li:nth-of-type(6) { + grid-column: 1 / span 5; + grid-row: 2; + } + + li:nth-of-type(7) { + grid-column: 3 / span 3; + grid-row: 2; + } + + li:nth-of-type(8) { + grid-column: 2; + } + + li:nth-of-type(9) { + grid-column: 3; + } + + button { + width: 18vw; + height: 18vw; + border-radius: 50%; + font-size: 10px; + display: inline-block; + outline: none; + background-color: var(--ash-dust); + color: var(--black-rock); + border: 2px solid var(--ash-dust); + transition: border-color 0.3s; + + &.active { + border-color: var(--shamrock); + box-shadow: 0px 0px 10px 0px var(--shamrock); + } + } + + ion-icon { + display: block; + margin: 0 auto 5px; + font-size: 24px; + } + } + .profileImages { + display: grid; + width: 100%; + list-style: none; + height: 100%; + overflow-y: hidden; + overflow-x: auto; + grid-template-columns: 50px 50px 50px 50px; + grid-template-rows: auto; + + button { + width: 15vw; + height: 15vw; + border-radius: 50%; + font-size: 10px; + display: inline-block; + outline: none; + background-color: var(--ash-dust); + color: var(--black-rock); + border: 0px solid var(--ash-dust); + transition: border-color 0.3s, border-width 0.3s; + margin: 10px; + + &.active { + border-color: var(--shamrock); + border-width: 2px; + box-shadow: 0px 0px 10px 0px var(--shamrock); + } + } + + ion-icon { + width: 100%; + height: 100%; + } + } } } @@ -150,6 +271,15 @@ --background: var(--shamrock); --color: white; font-size: 18px; + filter: grayscale(0%); + transition: filter 0.3s; + + transition: opacity 0.3; + + &.inactive { + pointer-events: none; + filter: grayscale(100%); + } ion-icon { font-size: 18px; @@ -169,6 +299,12 @@ --background: transparent; --border-radius: 50%; --border-width: 2px; + transition: opacity 0.3; + + &.inactive { + pointer-events: none; + opacity: 0; + } ion-icon { opacity: 0.4; diff --git a/src/pages/signup/AdditionalQuestions.tsx b/src/pages/signup/AdditionalQuestions.tsx index 9804fc4..4e01f1f 100644 --- a/src/pages/signup/AdditionalQuestions.tsx +++ b/src/pages/signup/AdditionalQuestions.tsx @@ -1,14 +1,14 @@ import { IonContent, IonRange, IonButton, IonSlides, IonSlide, IonIcon } from '@ionic/react'; -import React, { useState, useRef, createRef } from 'react'; +import React, { useState, useRef } from 'react'; import styles from './AdditionalQuestions.module.scss'; const slideOpts = { - initialSlide: 2, + initialSlide: 0, speed: 400, followFinger: false, draggable: false, longSwipes: false, - noSwiping: true + noSwiping: true, }; const jobSectors = [{ @@ -53,22 +53,86 @@ const jobSectors = [{ text: 'Others' }]; + +const pluginModules = [{ + value: 1, + icon: 'assets/images/signup/modules/tasks-line.svg', + text: 'Task' +}, { + value: 2, + icon: 'assets/images/signup/modules/briefcase-outline.svg', + text: 'Client' +}, { + value: 3, + icon: 'assets/images/signup/modules/bxs-user-badge.svg', + text: 'Employee' +}, { + value: 4, + icon: 'assets/images/signup/modules/pen.svg', + text: 'Training' +}, { + value: 5, + icon: 'assets/images/signup/modules/money.svg', + text: 'Financial' +}, { + value: 6, + icon: 'assets/images/signup/modules/chat-bubble.svg', + text: 'Chat' +}, { + value: 7, + icon: 'assets/images/signup/modules/tennisball-outline.svg', + text: 'Recreation' +}, { + value: 8, + icon: 'assets/images/signup/modules/mail-outline.svg', + text: 'Email' +}, { + value: 9, + icon: 'assets/images/signup/modules/lock.svg', + text: 'Password' +}]; + + +const profileImages = [ + 'assets/images/signup/profile-pictures/avatar1.svg', + 'assets/images/signup/profile-pictures/avatar2.svg', + 'assets/images/signup/profile-pictures/avatar3.svg', + 'assets/images/signup/profile-pictures/avatar4.svg', + 'assets/images/signup/profile-pictures/avatar5.svg', + 'assets/images/signup/profile-pictures/avatar6.svg', + 'assets/images/signup/profile-pictures/avatar7.svg', + 'assets/images/signup/profile-pictures/avatar8.svg', + 'assets/images/signup/profile-pictures/avatar9.svg', + 'assets/images/signup/profile-pictures/avatar10.svg', + 'assets/images/signup/profile-pictures/avatar11.svg', + 'assets/images/signup/profile-pictures/avatar12.svg', + 'assets/images/signup/profile-pictures/avatar13.svg' +] + const AdditionalQuestions: React.FC = () => { let [index, setIndex] = useState(0), [userType, changeUserType] = useState('INDIVIDUAL'), [userSector, changeUserSector] = useState(jobSectors[0]), - [showPicker, toggleShowPicker] = useState(false); + [showPicker, toggleShowPicker] = useState(false), + [totalSlides, setSlideCount] = useState(0), + [teamSize, setTeamSize] = useState({ + start: 1, + end: 10 + }), + [selectedModules, setModules] = useState([pluginModules[0].value]), + [selectedImage, setProfileImage] = useState(profileImages[0]); const additionalSlides: any = useRef(null); - const changeIndex = async (event: any) => { - await event.target.getActiveIndex().then((index: number) => setIndex(index = index)); - } - - const getPadding = (digit: number) => { + const getDigitPadding = (digit: number) => { return digit.toString().padStart(2, '0'); } + const changeIndex = async (event: any) => { + await event.target.getActiveIndex().then((index: number) => setIndex(index = index)); + await event.target.length().then((length: number) => { setSlideCount(totalSlides = length) }); + } + const nextSlide = async () => { const swiper: any = await additionalSlides.current?.getSwiper(); swiper.slideNext(); @@ -79,16 +143,31 @@ const AdditionalQuestions: React.FC = () => { swiper.slidePrev(); } + const toggleModule = (value: number) => { + let tempModules = selectedModules; + + if (tempModules.includes(value)) { + tempModules.splice(tempModules.indexOf(value), 1); + } else { + tempModules.push(value); + } + + setModules(selectedModules); + + } + return (

- { getPadding(index + 1)}/05 + { getDigitPadding(index + 1)}/{ getDigitPadding(totalSlides) }

Skip
- changeIndex(e)}> + changeIndex(e)} + onIonSlidesDidLoad={(e) => changeIndex(e)}>

Select if you represent a company or if you're an individual

@@ -125,28 +204,61 @@ const AdditionalQuestions: React.FC = () => {

Select answer below

- +

+ { teamSize.end > 9 && { getDigitPadding(teamSize.start) } to } { getDigitPadding(teamSize.end) } +

+ setTeamSize({ + start: (e.detail.value === 10 ? 1: e.detail.value - 10), + end: e.detail.value + }) } mode={'ios'} value={teamSize.end} min={10} max={100} step={10} snaps={true} />
-

Select the modules that will be used.

+

Select the modules that you would like to use.

Select answer below

+
    + { pluginModules.map((module) => { + return
  • + +
    • + }) } +
+
+ + +
+

Select a cool avatar or upload your ugly photo for profile picture

+

Select answer below

+
+
+
    + { profileImages.map((image) => { + return
  • + +
    • + }) } +
- prevSlide() }> + prevSlide() }> - nextSlide() }> + = (totalSlides - 1) ? styles.inactive : '')} onClick={ () => nextSlide() }> Next