diff --git a/src/pages/signup/AdditionalQuestions.module.scss b/src/pages/signup/AdditionalQuestions.module.scss
new file mode 100644
index 0000000..dc75449
--- /dev/null
+++ b/src/pages/signup/AdditionalQuestions.module.scss
@@ -0,0 +1,136 @@
+.slidersNavBar {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ h4 {
+ width: 60%;
+ text-align: right;
+ font-size: 24px;
+ color: var(--charcoal);
+
+ span {
+ font-size: 18px;
+ font-weight: 400;
+ color: var(--ash);
+ }
+ }
+
+ ion-button {
+ --background: transparent;
+ --color: var(--ash);
+ --box-shadow: none;
+ font-size: 14px;
+ margin-left: auto;
+ margin-right: 5%;
+
+ ion-icon {
+ font-size: 16px;
+ margin-left: 5px;
+ transform: translateY(2px);
+ }
+ }
+}
+
+.slides {
+ width: 100%;
+ margin-top: 20px;
+ overflow: hidden;
+ height: calc(100vh - 60px - 20px);
+
+ ion-slide {
+ text-align: left;
+ display: block;
+ }
+
+ .questionContainer {
+ height: 35%;
+ position: relative;
+ padding: 0 7%;
+
+ .question {
+ word-spacing: 1px;
+ font-size: 28px;
+ font-weight: 400;
+ color: var(--charcoal);
+ }
+
+ .hint {
+ position: absolute;
+ bottom: 40px;
+ left: 7%;
+ font-size: 14px;
+ color: var(--grey-rock);
+ }
+ }
+
+ .choiceContainer {
+ height: 65%;
+ background-color: var(--dark-charcoal);
+ padding: 40px 7%;
+ border-top-left-radius: 35px;
+ border-top-right-radius: 35px;
+
+
+ button {
+ width: 100%;
+ text-align: left;
+ outline: none;
+ padding: 0 30px;
+ display: block;
+ background-color: var(--charcoal);
+ box-shadow: 0px 0px 10px black;
+ border-radius: 10px;
+ height: 55px;
+ font-size: 17px;
+ color: var(--grey-rock);
+ margin-bottom: 30px;
+ transition: box-shadow 0.3s, color 0.3s;
+
+ &.active {
+ color: white;
+ box-shadow: 0px 0px 10px 1px var(--shamrock);
+
+ ion-icon:nth-child(2) {
+ opacity: 1;
+ }
+ }
+
+ ion-icon {
+ font-size: 20px;
+ vertical-align: middle;
+ transition: opacity 0.3s;
+
+ &:nth-child(1) {
+ margin-right: 15px;
+ }
+
+ &:nth-child(2) {
+ opacity: 0;
+ float: right;
+ }
+ }
+ }
+ }
+}
+
+
+.nextButton {
+ position: fixed;
+ bottom: 5%;
+ right: 7%;
+ z-index: 1;
+ width: 150px;
+ height: 60px;
+ --border-radius: 30px;
+ --box-shadow: none;
+ --background: var(--shamrock);
+ --color: white;
+ font-size: 18px;
+
+ ion-icon {
+ font-size: 18px;
+ margin-left: 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/signup/AdditionalQuestions.tsx b/src/pages/signup/AdditionalQuestions.tsx
index 6c2e731..b2908f4 100644
--- a/src/pages/signup/AdditionalQuestions.tsx
+++ b/src/pages/signup/AdditionalQuestions.tsx
@@ -1,18 +1,35 @@
-import { IonContent, IonButton, IonPage, IonSlides, IonSlide } from '@ionic/react';
+import { IonContent, IonButton, IonPage, IonSlides, IonSlide, IonIcon } from '@ionic/react';
import { Component } from 'react';
-import styles from './Signup.module.scss';
+import styles from './AdditionalQuestions.module.scss';
type Props = { };
type OwnState = {
index: number,
+ userType: 'INDIVIDUAL' | 'COMPANY' | ''
};
const slideOpts = {
initialSlide: 1,
- speed: 400
+ speed: 400,
+ followFinger: false,
+ draggable: false,
};
+const jobSectors = [{
+ id: 1,
+ name: 'Information Technology'
+}, {
+ id: 2,
+ name: 'Health Care'
+}, {
+ id: 3,
+ name: 'Finance'
+}, {
+ id: 4,
+ name: 'Communication Services'
+}];
+
class AdditionalQuestions extends Component
{
constructor(
@@ -20,34 +37,43 @@ class AdditionalQuestions extends Component {
) {
super(props);
this.state = {
- index: 0
+ index: 0,
+ userType: ''
};
}
+ getPadding = (digit: number) => {
+ return digit.toString().padStart(2, '0');
+ }
+
render() {
- return
-
-
-
- { this.state.index } / 05
-
- Skip >>
-
-
-
-
-
Select if you represent a company of if you're an individual
-
Select answer below
-
- Company
- Individual
-
-
-
-
-
+ return
+
+
+ { this.getPadding(this.state.index + 1)}/05
+
+ Skip
+
+
+
+
+
Select if you represent a company or if you're an individual
+
Select answer below
+
+
+
+
+
+
+
+
+ Next
+
+
+
};
};
diff --git a/src/pages/signup/Signup.module.scss b/src/pages/signup/Signup.module.scss
index 2f4ae2a..d93b273 100644
--- a/src/pages/signup/Signup.module.scss
+++ b/src/pages/signup/Signup.module.scss
@@ -158,13 +158,4 @@
opacity: 1;
transform: translateY(0vh);
}
-}
-
-
-.slides {
- width: 100%;
-
- ion-slide {
- display: block;
- }
}
\ No newline at end of file
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 9f70891..13630f8 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -14,12 +14,17 @@ ion-button {
--padding-bottom: 0;
--padding-top: 0;
--padding-end: 0;
+ text-transform: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
+ion-content {
+ --background: white;
+}
+
/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */
@@ -121,7 +126,3 @@ http://ionicframework.com/docs/theming/ */
--ivory: #f4f4f4;
--pearl: #f7f7f7;
}
-
-ion-content {
- --background: white;
-}