kj
/
webtrigon-workex-onboarding
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Slide 1 UI for signup

master
kj1352 4 years ago
parent
1bb2b17bb6
commit
8637870e66
10 changed files with 215 additions and 42 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      public/assets/images/signup/arrow-next.svg
  2. +3
    -0
      public/assets/images/signup/building.svg
  3. +3
    -0
      public/assets/images/signup/checkmark.svg
  4. +5
    -0
      public/assets/images/signup/skip.svg
  5. +6
    -0
      public/assets/images/signup/user.svg
  6. +1
    -2
      src/pages/onboarding/Welcome.tsx
  7. +136
    -0
      src/pages/signup/AdditionalQuestions.module.scss
  8. +53
    -27
      src/pages/signup/AdditionalQuestions.tsx
  9. +0
    -9
      src/pages/signup/Signup.module.scss
  10. +5
    -4
      src/theme/variables.css

+ 3
- 0
public/assets/images/signup/arrow-next.svg View File

@@ -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>

+ 3
- 0
public/assets/images/signup/building.svg View File

@@ -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>

+ 3
- 0
public/assets/images/signup/checkmark.svg View File

@@ -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>

+ 5
- 0
public/assets/images/signup/skip.svg View File

@@ -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>

+ 6
- 0
public/assets/images/signup/user.svg View File

@@ -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>

+ 1
- 2
src/pages/onboarding/Welcome.tsx View File

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


+ 136
- 0
src/pages/signup/AdditionalQuestions.module.scss View File

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

+ 53
- 27
src/pages/signup/AdditionalQuestions.tsx View File

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


+ 0
- 9
src/pages/signup/Signup.module.scss View File

@@ -158,13 +158,4 @@
opacity: 1;
transform: translateY(0vh);
}
}


.slides {
width: 100%;
ion-slide {
display: block;
}
}

+ 5
- 4
src/theme/variables.css View File

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

Write Preview
Loading…
Cancel
Save