From 8637870e661cd12975e77f2d124a12bae4ca140b Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 17 Feb 2021 16:12:54 +0530 Subject: [PATCH] Slide 1 UI for signup --- public/assets/images/signup/arrow-next.svg | 3 + public/assets/images/signup/building.svg | 3 + public/assets/images/signup/checkmark.svg | 3 + public/assets/images/signup/skip.svg | 5 + public/assets/images/signup/user.svg | 6 + src/pages/onboarding/Welcome.tsx | 3 +- .../signup/AdditionalQuestions.module.scss | 136 ++++++++++++++++++ src/pages/signup/AdditionalQuestions.tsx | 80 +++++++---- src/pages/signup/Signup.module.scss | 9 -- src/theme/variables.css | 9 +- 10 files changed, 215 insertions(+), 42 deletions(-) create mode 100644 public/assets/images/signup/arrow-next.svg create mode 100644 public/assets/images/signup/building.svg create mode 100644 public/assets/images/signup/checkmark.svg create mode 100644 public/assets/images/signup/skip.svg create mode 100644 public/assets/images/signup/user.svg create mode 100644 src/pages/signup/AdditionalQuestions.module.scss diff --git a/public/assets/images/signup/arrow-next.svg b/public/assets/images/signup/arrow-next.svg new file mode 100644 index 0000000..531579b --- /dev/null +++ b/public/assets/images/signup/arrow-next.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/building.svg b/public/assets/images/signup/building.svg new file mode 100644 index 0000000..f5a90ac --- /dev/null +++ b/public/assets/images/signup/building.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/checkmark.svg b/public/assets/images/signup/checkmark.svg new file mode 100644 index 0000000..efdc2b2 --- /dev/null +++ b/public/assets/images/signup/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/signup/skip.svg b/public/assets/images/signup/skip.svg new file mode 100644 index 0000000..0124f2c --- /dev/null +++ b/public/assets/images/signup/skip.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/assets/images/signup/user.svg b/public/assets/images/signup/user.svg new file mode 100644 index 0000000..424f899 --- /dev/null +++ b/public/assets/images/signup/user.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/pages/onboarding/Welcome.tsx b/src/pages/onboarding/Welcome.tsx index a39d436..69d066f 100644 --- a/src/pages/onboarding/Welcome.tsx +++ b/src/pages/onboarding/Welcome.tsx @@ -27,8 +27,7 @@ class WelcomePage extends Component {

Let's Get Started

- Welcome to WorkX
- Exclusive, Extreme & Exuberant... + Welcome to WorkX

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