Slide 1 UI for signup

public/assets/images/signup/arrow-next.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.854" height="15.898" viewBox="0 0 18.854 15.898">
+  <path id="arrow-back-up" d="M19.86,16.489l4.494-4.494L19.86,7.5m4.494,4.494H11.994a4.494,4.494,0,1,0,0,8.989h1.124" transform="translate(-6.5 -6.086)" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

public/assets/images/signup/building.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.131" height="17.664" viewBox="0 0 14.131 17.664">
+  <path id="building" d="M7.766,3h10.6a1.766,1.766,0,0,1,1.766,1.766v15.9H6V4.766A1.766,1.766,0,0,1,7.766,3Zm0,15.9H11.3V15.365h3.533V18.9h3.533V4.766H7.766ZM13.949,6.533H16.6v2.65h-2.65ZM9.533,10.949h2.65V13.6H9.533Zm4.416,0H16.6V13.6h-2.65ZM9.533,6.533h2.65v2.65H9.533Z" transform="translate(-6 -3)" fill="#f7a057"/>
+</svg>

public/assets/images/signup/checkmark.svg

@@ -0,0 +1,3 @@
+<svg id="check-circle-fill" xmlns="http://www.w3.org/2000/svg" width="17.832" height="17.832" viewBox="0 0 17.832 17.832">
+  <path id="Path_299" data-name="Path 299" d="M17.832,8.916A8.916,8.916,0,1,1,8.916,0a8.916,8.916,0,0,1,8.916,8.916ZM13.407,5.539a.836.836,0,0,0-1.2.024L8.333,10.5,6,8.162A.836.836,0,0,0,4.819,9.343l2.949,2.95a.836.836,0,0,0,1.2-.022L13.42,6.709a.836.836,0,0,0-.011-1.17Z" fill="#2cc38c" fill-rule="evenodd"/>
+</svg>

public/assets/images/signup/skip.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.421" height="15.932" viewBox="0 0 15.421 15.932">
+  <g id="angle-double-right" transform="translate(15.787 -17.902) rotate(180)">
+    <path id="Path_298" data-name="Path 298" d="M9.657-32.509a.5.5,0,0,0-.16-.367l-.8-.8a.5.5,0,0,0-.367-.16.5.5,0,0,0-.367.16L.526-26.235a.5.5,0,0,0-.16.367.5.5,0,0,0,.16.367l7.439,7.439a.5.5,0,0,0,.367.16.5.5,0,0,0,.367-.16l.8-.8a.5.5,0,0,0,.16-.367.5.5,0,0,0-.16-.367L3.223-25.868,9.5-32.142a.5.5,0,0,0,.16-.367Zm6.13,0a.5.5,0,0,0-.16-.367l-.8-.8a.5.5,0,0,0-.367-.16.5.5,0,0,0-.367.16L6.656-26.235a.5.5,0,0,0-.16.367.5.5,0,0,0,.16.367L14.1-18.062a.5.5,0,0,0,.367.16.5.5,0,0,0,.367-.16l.8-.8a.5.5,0,0,0,.16-.367.5.5,0,0,0-.16-.367L9.354-25.868l6.274-6.274a.5.5,0,0,0,.16-.367Z" fill="silver"/>
+  </g>
+</svg>

public/assets/images/signup/user.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.667" height="19" viewBox="0 0 12.667 19">
+  <g id="user" transform="translate(-9 -4.5)">
+    <path id="Path_296" data-name="Path 296" d="M20.444,8.722A4.222,4.222,0,1,1,16.222,4.5,4.222,4.222,0,0,1,20.444,8.722Zm-2.111,0a2.111,2.111,0,1,1-2.111-2.111A2.111,2.111,0,0,1,18.333,8.722Z" transform="translate(-0.889)" fill="#51ccc7" fill-rule="evenodd"/>
+    <path id="Path_297" data-name="Path 297" d="M19.556,21.167A1.056,1.056,0,0,0,18.5,20.111H12.167a1.056,1.056,0,0,0-1.056,1.056V27.5H9V21.167A3.167,3.167,0,0,1,12.167,18H18.5a3.167,3.167,0,0,1,3.167,3.167V27.5H19.556Z" transform="translate(0 -4)" fill="#51ccc7"/>
+  </g>
+</svg>

src/pages/onboarding/Welcome.tsx

@@ -27,8 +27,7 @@ class WelcomePage extends Component<Props, OwnState> {
                     <div className={styles.container}>
                         <h2> Let's Get Started </h2>
                         <p>
-                            Welcome to <strong> WorkX </strong> <br/>
-                            Exclusive, Extreme &amp; Exuberant... 
+                            Welcome to <strong> WorkX </strong>                            
                         </p>
 
                         <div className={styles.actionButtonsHolder}>

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;
+    }
+}

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<Props, OwnState> {
     constructor(
@@ -20,34 +37,43 @@ class AdditionalQuestions extends Component<Props, OwnState> {
     ) {
         super(props);
         this.state = {
-            index: 0
+            index: 0,
+            userType: ''
         };
     }
 
+    getPadding = (digit: number)  => {
+        return digit.toString().padStart(2, '0');
+    }
+
     render() {
-        return <IonPage>
-            <IonContent fullscreen>
-                <header>
-                    <h4>
-                        { this.state.index } / 05
-                    </h4>
-                    <IonButton> Skip &gt;&gt; </IonButton>
-                </header>
-                <IonSlides pager={false} options={slideOpts}
-                className={styles.slides}>
-                    <IonSlide>
-                        <div className={styles.questionContainer}>
-                            <p> Select if you represent a <strong> company </strong> of if you're an <strong> individual </strong> </p>
-                            <p> Select answer below </p>
-                        </div>
-                        <div className={styles.choiceContainer}>
-                            <IonButton> Company </IonButton>
-                            <IonButton> Individual </IonButton>
-                        </div>
-                    </IonSlide>                    
-                </IonSlides>
-            </IonContent>
-        </IonPage>
+        return <IonContent fullscreen>
+            <header className={styles.slidersNavBar}>
+                <h4>
+                    { this.getPadding(this.state.index + 1)}<span>/05 </span>
+                </h4>
+                <IonButton> Skip <IonIcon src='assets/images/signup/skip.svg'></IonIcon> </IonButton>
+            </header>
+            <IonSlides options={slideOpts} className={styles.slides}>
+                <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 </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>                    
+            </IonSlides>
+
+            <IonButton className={styles.nextButton}>
+                Next <IonIcon src='assets/images/signup/arrow-next.svg'></IonIcon>
+            </IonButton>
+
+        </IonContent>
     };
 };
 

src/pages/signup/Signup.module.scss

@@ -158,13 +158,4 @@
         opacity: 1;
         transform: translateY(0vh);
     }
-}
-
-
-.slides {
-    width: 100%;
-    
-    ion-slide {
-        display: block;
-    }
 }

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;
-}