diff --git a/src/pages/signup/AdditionalQuestions.module.scss b/src/pages/signup/AdditionalQuestions.module.scss index dc75449..4f36d47 100644 --- a/src/pages/signup/AdditionalQuestions.module.scss +++ b/src/pages/signup/AdditionalQuestions.module.scss @@ -133,4 +133,23 @@ font-size: 18px; margin-left: 10px; } +} + +.prevButton { + position: fixed; + bottom: 5%; + left: 7%; + z-index: 1; + width: 60px; + height: 60px; + --border-color: var(--rock); + --color: var(--rock); + --background: transparent; + --border-radius: 50%; + --border-width: 2px; + + ion-icon { + opacity: 0.4; + transform: rotateY(180deg); + } } \ No newline at end of file diff --git a/src/pages/signup/AdditionalQuestions.tsx b/src/pages/signup/AdditionalQuestions.tsx index b2908f4..7d8ec71 100644 --- a/src/pages/signup/AdditionalQuestions.tsx +++ b/src/pages/signup/AdditionalQuestions.tsx @@ -1,4 +1,4 @@ -import { IonContent, IonButton, IonPage, IonSlides, IonSlide, IonIcon } from '@ionic/react'; +import { IonContent, IonButton, IonSlides, IonSlide, IonIcon } from '@ionic/react'; import { Component } from 'react'; import styles from './AdditionalQuestions.module.scss'; @@ -10,7 +10,7 @@ type OwnState = { }; const slideOpts = { - initialSlide: 1, + initialSlide: 0, speed: 400, followFinger: false, draggable: false, @@ -31,7 +31,8 @@ const jobSectors = [{ }]; -class AdditionalQuestions extends Component { + +class AdditionalQuestions extends Component { constructor( props: Props ) { @@ -40,12 +41,26 @@ class AdditionalQuestions extends Component { index: 0, userType: '' }; + + } getPadding = (digit: number) => { return digit.toString().padStart(2, '0'); } + nextSlide = async () => { + let slides: any = document.querySelector('#slides'); + const swiper: any = await slides?.getSwiper(); + swiper.slideNext(); + } + + prevSlide = async () => { + let slides: any = document.querySelector('#slides'); + const swiper: any = await slides?.getSwiper(); + swiper.slidePrev(); + } + render() { return
@@ -54,7 +69,7 @@ class AdditionalQuestions extends Component { Skip
- +

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

@@ -66,10 +81,28 @@ class AdditionalQuestions extends Component {
+
+ + +
+

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

+

Select answer below 1

+
+
+ + +
- + + this.prevSlide() }> + + + + this.nextSlide() }> Next