Partial commit

public/assets/images/signup/options.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8.183" height="15.226" viewBox="0 0 8.183 15.226">
+  <g id="Group_35" data-name="Group 35" transform="translate(-3847 -497)">
+    <path id="arrow-down-fill" d="M13.09,18.136a1.173,1.173,0,0,1-.907-.436l-2.87-3.477a1.432,1.432,0,0,1-.177-1.507A1.2,1.2,0,0,1,10.219,12H15.96a1.2,1.2,0,0,1,1.084.716,1.432,1.432,0,0,1-.177,1.507L14,17.7A1.173,1.173,0,0,1,13.09,18.136Z" transform="translate(3838.002 494.09)" fill="silver"/>
+    <path id="arrow-down-fill-2" data-name="arrow-down-fill" d="M4.091,6.136A1.173,1.173,0,0,1,3.185,5.7L.314,2.223A1.432,1.432,0,0,1,.137.716,1.2,1.2,0,0,1,1.221,0H6.962A1.2,1.2,0,0,1,8.046.716a1.432,1.432,0,0,1-.177,1.507L5,5.7A1.173,1.173,0,0,1,4.091,6.136Z" transform="translate(3855.183 503.136) rotate(180)" fill="silver"/>
+  </g>
+</svg>

src/pages/signup/AdditionalQuestions.module.scss

@@ -71,9 +71,8 @@
         padding: 40px 7%;
         border-top-left-radius: 35px;
         border-top-right-radius: 35px;
-
-
-        button {
+        
+        .optionButtons button {
             width: 100%;
             text-align: left;
             outline: none;
@@ -88,11 +87,16 @@
             margin-bottom: 30px;
             transition: box-shadow 0.3s, color 0.3s;
 
+            &.optionButton {
+                color: white;
+                padding-right: 15px;
+            }
+
             &.active {
                 color: white;
                 box-shadow: 0px 0px 10px 1px var(--shamrock);
 
-                ion-icon:nth-child(2) {
+                ion-icon.checkmark {
                     opacity: 1;
                 }
             }
@@ -102,16 +106,21 @@
                 vertical-align: middle;
                 transition: opacity 0.3s;
                 
-                &:nth-child(1) {
+                &.leftIcon {
                     margin-right: 15px;
                 }
 
-                &:nth-child(2) {
+                &.checkmark {
                     opacity: 0;
                     float: right;
                 }
+
+                &.option {
+                    float: right;
+                }
             }
         }
+        
     }
 }
 
@@ -152,4 +161,36 @@
         opacity: 0.4;
         transform: rotateY(180deg);
     }
+}
+
+.picker {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100vh;
+    background-color: var(--dark-charcoal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .container {
+
+        ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            color: white;
+        }
+
+        ion-range {
+            position: absolute;
+            right: 5%;
+            top: 0;
+            transform: rotate(90deg);
+            width: 100px;
+            height: 100%;
+        }
+    }
 }

src/pages/signup/AdditionalQuestions.tsx

@@ -1,4 +1,4 @@
-import { IonContent, IonButton, IonSlides, IonSlide, IonIcon } from '@ionic/react';
+import { IonContent, IonRange, IonButton, IonSlides, IonSlide, IonIcon } from '@ionic/react';
 import { Component } from 'react';
 import styles from './AdditionalQuestions.module.scss';
 
@@ -6,28 +6,30 @@ type Props = { };
 
 type OwnState = {
     index: number,
-    userType: 'INDIVIDUAL' | 'COMPANY' | ''
+    userType: 'INDIVIDUAL' | 'COMPANY' | '',
+    userSector: number,
+    showPicker: boolean,
 };
 
 const slideOpts = {
-    initialSlide: 0,
+    initialSlide: 3,
     speed: 400,
     followFinger: false,
     draggable: false,
 };
 
 const jobSectors = [{
-    id: 1,
-    name: 'Information Technology'
+    value: 1,
+    text: 'Information Technology',
 }, {
-    id: 2,
-    name: 'Health Care'
+    value: 2,
+    text: 'Health Care'
 }, {
-    id: 3,
-    name: 'Finance'
+    value: 3,
+    text: 'Finance'
 }, {
-    id: 4,
-    name: 'Communication Services'
+    value: 4,
+    text: 'Communication Services'
 }];
 
 
@@ -39,7 +41,9 @@ class AdditionalQuestions extends Component<Props, OwnState> {
         super(props);
         this.state = {
             index: 0,
-            userType: ''
+            userType: 'INDIVIDUAL',
+            showPicker: false,
+            userSector: 0,
         };
 
         
@@ -76,25 +80,50 @@ class AdditionalQuestions extends Component<Props, OwnState> {
                         <p className={styles.hint}> Select answer below </p>
                     </div>
                     <div className={styles.choiceContainer}>
-                        <button className={ this.state.userType === 'COMPANY' ? styles.active : '' }
-                        onClick={e => this.setState({ userType: 'COMPANY' })}> <IonIcon src='assets/images/signup/building.svg'></IonIcon> Company <IonIcon src='assets/images/signup/checkmark.svg'></IonIcon> </button>
-                        <button className={ this.state.userType === 'INDIVIDUAL' ? styles.active : '' }
-                        onClick={e => this.setState({ userType: 'INDIVIDUAL' })}> <IonIcon src='assets/images/signup/user.svg'></IonIcon> Individual <IonIcon src='assets/images/signup/checkmark.svg'></IonIcon> </button>
+                        <div className={styles.optionButtons}>
+                            <button className={ this.state.userType === 'COMPANY' ? styles.active : '' }
+                                onClick={e => this.setState({ userType: 'COMPANY' })}> <IonIcon className={styles.leftIcon} src='assets/images/signup/building.svg'></IonIcon> Company <IonIcon className={styles.checkmark} src='assets/images/signup/checkmark.svg'></IonIcon> </button>
+                            <button className={ this.state.userType === 'INDIVIDUAL' ? styles.active : '' }
+                                onClick={e => this.setState({ userType: 'INDIVIDUAL' })}> <IonIcon className={styles.leftIcon} src='assets/images/signup/user.svg'></IonIcon> Individual <IonIcon className={styles.checkmark} src='assets/images/signup/checkmark.svg'></IonIcon> </button>
+                        </div>
                     </div>
                 </IonSlide>
 
                 <IonSlide>
                     <div className={styles.questionContainer}>
-                        <p className={styles.question}> Select if you represent a <strong> company </strong> or if you're an <strong> individual </strong> </p>
-                        <p className={styles.hint}> Select answer below 1 </p>
+                        <p className={styles.question}> Which <strong> sector </strong> 
+                        { this.state.userType === 'COMPANY' && <span> does your company below to? </span> } 
+                        { this.state.userType === 'INDIVIDUAL' && <span> do you work under? </span> } </p>
+                        <p className={styles.hint}> Select answer below </p>
+                    </div>
+                    <div className={styles.choiceContainer}>
+                        <div className={styles.optionButtons}>
+                            <button className={styles.optionButton} onClick={ () => this.setState({ showPicker: true })}> { this.state.userSector ? <span> { this.state.userSector } </span> : <span> Select an Option </span> } <IonIcon className={styles.option} src='assets/images/signup/options.svg'></IonIcon> </button>
+                        </div>
+                    </div>
+                </IonSlide>
+
+
+                <IonSlide>
+                    <div className={styles.questionContainer}>
+                        <p className={styles.question}> What is your working <strong> team size? </strong>  </p>
+                        <p className={styles.hint}> Select answer below </p>
                     </div>
                     <div className={styles.choiceContainer}>
-                        <button className={ this.state.userType === 'COMPANY' ? styles.active : '' }
-                        onClick={e => this.setState({ userType: 'COMPANY' })}> <IonIcon src='assets/images/signup/building.svg'></IonIcon> Company <IonIcon src='assets/images/signup/checkmark.svg'></IonIcon> </button>
-                        <button className={ this.state.userType === 'INDIVIDUAL' ? styles.active : '' }
-                        onClick={e => this.setState({ userType: 'INDIVIDUAL' })}> <IonIcon src='assets/images/signup/user.svg'></IonIcon> Individual <IonIcon src='assets/images/signup/checkmark.svg'></IonIcon> </button>
+                                                
                     </div>
-                </IonSlide>                    
+                </IonSlide>
+
+
+                <IonSlide>
+                    <div className={styles.questionContainer}>
+                        <p className={styles.question}> Select the <strong> modules </strong> that will be used.  </p>
+                        <p className={styles.hint}> Select answer below </p>
+                    </div>
+                    <div className={styles.choiceContainer}>
+
+                    </div>
+                </IonSlide>             
             </IonSlides>
 
 
@@ -106,6 +135,15 @@ class AdditionalQuestions extends Component<Props, OwnState> {
                 Next <IonIcon src='assets/images/signup/arrow-next.svg'></IonIcon>
             </IonButton>
 
+
+            { this.state.showPicker && <section className={styles.picker}>
+                <div className={styles.container}>
+                    <ul>
+                        { jobSectors.map((sector) => <li key={sector.value}> { this.state.userSector === sector.value ? '*' : '' } { sector.value }. { sector.text } </li>) }
+                    </ul>
+                </div>
+            </section> }
+
         </IonContent>
     };
 };

src/pages/signup/Signup.tsx

@@ -24,7 +24,8 @@ class SignupPage extends Component<Props, OwnState> {
 
     render() {
         return <IonPage>
-            { this.state.signupStep === 'BASIC' && <IonContent fullscreen>
+            { this.state.signupStep === 'BASIC' && 
+            <IonContent fullscreen>
                 <section className={styles.upfold}>
                     <div className={styles.container}>
                         <figure>
@@ -69,8 +70,7 @@ class SignupPage extends Component<Props, OwnState> {
 
                 <div className={ styles.navigationLink }> Already have an account? <Link to='/login'> <span> Login </span> </Link> </div>
             </IonContent> }
-
-
+            
             { this.state.signupStep === 'ADDITIONAL' && <AdditionalQuestions /> }
         </IonPage>
     };