From 8fcedb2479ac82a6be11da53b7880fb5178dc426 Mon Sep 17 00:00:00 2001 From: prahalad Date: Mon, 4 Oct 2021 11:44:23 +0530 Subject: [PATCH] Onboarding Ui Changes --Partial Commit --- src/_theme.scss | 2 +- src/app/app-routing.module.ts | 2 +- src/app/pages/dashboard/_commonheader.scss | 29 +++- .../pages/dashboard/dashboard.component.ts | 14 +- .../preliminary/preliminary.component.html | 35 ++++- .../preliminary/preliminary.component.scss | 38 +++++ .../skillinformation.component.html | 2 +- .../skillinformation.component.scss | 20 --- src/app/pages/onboarding/_commonheader.scss | 13 +- .../onboarding/login/login.component.html | 2 +- .../onboarding/signup/otp/otp.component.html | 2 +- .../onboarding/signup/signup.component.html | 2 +- .../onboarding/signup/signup.component.scss | 1 + .../onboarding/welcome/welcome.component.scss | 11 +- src/assets/Step 2.svg | 145 ++++++++++++++++++ src/assets/check-circle-fill.svg | 3 + src/assets/question-circle-fill.svg | 3 + src/assets/time.svg | 3 + src/styles.scss | 7 +- 19 files changed, 287 insertions(+), 47 deletions(-) create mode 100644 src/assets/Step 2.svg create mode 100644 src/assets/check-circle-fill.svg create mode 100644 src/assets/question-circle-fill.svg create mode 100644 src/assets/time.svg diff --git a/src/_theme.scss b/src/_theme.scss index f397f5e..6420d87 100644 --- a/src/_theme.scss +++ b/src/_theme.scss @@ -8,4 +8,4 @@ $button-color: #d1d1d1; $step-color: #a3a3a3; $heading-color: #363636; $content-color: #868686; -$segment-section: #f7f7f7; +$segment-section: #f7f7f7; \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 800f888..794a25e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -28,7 +28,7 @@ const routes: Routes = [ { component: JoiningletterComponent, path: 'dashboard/joiningletter' }, { component: TechnicalComponent, path: 'dashboard/technincalinterview' }, { component: SkillinformationComponent, path: 'dashboard/skillinformation' }, - { component: FinalinterviewComponent, path: 'dashboard/finaiinterview' }, + { component: FinalinterviewComponent, path: 'dashboard/finalinterview' }, ]; @NgModule({ diff --git a/src/app/pages/dashboard/_commonheader.scss b/src/app/pages/dashboard/_commonheader.scss index 59eab3f..ca84518 100644 --- a/src/app/pages/dashboard/_commonheader.scss +++ b/src/app/pages/dashboard/_commonheader.scss @@ -5,10 +5,10 @@ header { display: flex; align-items: center; justify-content: space-between; - height: 70px; + height: 90px; top: 0; left: 0; - padding: 0 10px; + padding: 0 20px; .logo { display: flex; @@ -18,15 +18,14 @@ header { h5 { font-family: "Oswald", sans-serif; color: $text-color; - font-weight: 100; + font-weight: 300; left: 0; - letter-spacing: 1.5px; font-size: 21px; } span { color: $white; font-family: "Poppins", sans-serif; - font-size: 12px; + font-size: 10px; font-weight: 500; } } @@ -58,3 +57,23 @@ header { background-color: $green; color: $white; } + +.upfold { + padding: 30px 25px 0px; + h3 { + font-size: 21px; + color: lighten($color: $heading-color, $amount: 20%); + text-align: center; + font-weight: 300; + padding-top: 10px; + } + p { + color: $content-color; + text-align: center; + font-size: 12.5px; + line-height: 25px; + font-weight: 500; + padding: 15px 0; + font-weight: 300; + } +} diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index d908098..12f5e52 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -20,43 +20,43 @@ export class DashboardComponent implements OnInit { imageSrc: 'assets/Preliminary Round.svg', content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", redirectText: 'Lets do this!', - redirectUrl: 'dashboard/preliminary' + redirectUrl: '/dashboard/preliminary' }, { heading: 'Technical Interview', imageSrc: 'assets/Technical Interview.svg', content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", redirectText: 'Schedule meeting!', - redirectUrl: 'dashboard/technincalround' + redirectUrl: '/dashboard/technincalround' }, { heading: 'Assignment', imageSrc: 'assets/Assignment.svg', content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", redirectText: 'Show details!', - redirectUrl: 'dashboard/assignment' + redirectUrl: '/dashboard/assignment' }, { heading: 'Final Interview', imageSrc: 'assets/Final Interview.svg', content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", redirectText: 'Schedule meeting!', - redirectUrl: 'dashboard/finaiinterview' + redirectUrl: '/dashboard/finaiinterview' }, { heading: 'Closing Docs', imageSrc: 'assets/Closing Docs.svg', content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", redirectText: 'Upload docs!', - redirectUrl: 'dashboard/closingdocs' + redirectUrl: '/dashboard/closingdocs' }, { heading: 'Joining Letter', imageSrc: 'assets/Joining Letter.svg', content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", redirectText: 'Show details', - redirectUrl: 'dashboard/joiningletter' + redirectUrl: '/dashboard/joiningletter' }, { heading: 'Celebrations', imageSrc: 'assets/Celebrations.svg', content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", redirectText: 'Join Workex', - redirectUrl: 'dashboard/celebration' + redirectUrl: '/dashboard/celebration' }] ngOnInit(): void { diff --git a/src/app/pages/dashboard/preliminary/preliminary.component.html b/src/app/pages/dashboard/preliminary/preliminary.component.html index 26bad01..0f50ee4 100644 --- a/src/app/pages/dashboard/preliminary/preliminary.component.html +++ b/src/app/pages/dashboard/preliminary/preliminary.component.html @@ -1 +1,34 @@ -

preliminary works!

+
+ +
  • + +
    • +
    + +
    + +

    Lets us check your knowledge.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna + aliqua.

    +
    + +
    +

    Quiz

    + + + +
    + + \ No newline at end of file diff --git a/src/app/pages/dashboard/preliminary/preliminary.component.scss b/src/app/pages/dashboard/preliminary/preliminary.component.scss index e69de29..d903d46 100644 --- a/src/app/pages/dashboard/preliminary/preliminary.component.scss +++ b/src/app/pages/dashboard/preliminary/preliminary.component.scss @@ -0,0 +1,38 @@ +@import "../commonheader"; + +.upfold { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + + img { + padding: 20px; + width: 100px; + } +} + +.quiz-section { + background-color: $background-color; + background-image: url("../../../../assets/Sprinklers.svg"); + padding: 25px; + + h3 { + color: $white; + font-weight: 300; + } + li { + display: flex; + list-style: none; + color: $white; + font-size: 12px; + line-height: 35px; + font-weight: 600; + opacity: 90%; + + img { + width: 35px; + padding-right: 20px; + } + } +} diff --git a/src/app/pages/dashboard/skillinformation/skillinformation.component.html b/src/app/pages/dashboard/skillinformation/skillinformation.component.html index 1e8af21..b4f99de 100644 --- a/src/app/pages/dashboard/skillinformation/skillinformation.component.html +++ b/src/app/pages/dashboard/skillinformation/skillinformation.component.html @@ -77,5 +77,5 @@
    - +
    \ No newline at end of file diff --git a/src/app/pages/dashboard/skillinformation/skillinformation.component.scss b/src/app/pages/dashboard/skillinformation/skillinformation.component.scss index 094972b..dcaab58 100644 --- a/src/app/pages/dashboard/skillinformation/skillinformation.component.scss +++ b/src/app/pages/dashboard/skillinformation/skillinformation.component.scss @@ -1,26 +1,6 @@ @import "../commonheader"; @import "../../../../theme"; -.upfold { - padding: 30px 25px 0px; - h3 { - font-size: 21px; - color: lighten($color: $heading-color, $amount: 20%); - text-align: center; - font-weight: 300; - padding-top: 10px; - } - p { - color: $content-color; - text-align: center; - font-size: 12.5px; - line-height: 25px; - font-weight: 500; - padding: 15px 0; - font-weight: 300; - } -} - section { padding: 0 20px; diff --git a/src/app/pages/onboarding/_commonheader.scss b/src/app/pages/onboarding/_commonheader.scss index 40f592e..32ea5be 100644 --- a/src/app/pages/onboarding/_commonheader.scss +++ b/src/app/pages/onboarding/_commonheader.scss @@ -12,7 +12,7 @@ header { .logo { display: flex; - padding: 6px; + padding: 5px; align-items: center; } @@ -48,13 +48,13 @@ header { background-color: $background-color; background-image: url("../../../assets/Sprinklers.svg"); background-repeat: repeat; - padding: 20px 6px; + padding: 50px 5%; h3 { text-align: center; color: $white; font-weight: 200; - font-size: 27px; + font-size: 30px; letter-spacing: 1px; opacity: 85%; } @@ -62,7 +62,7 @@ header { p { text-align: center; color: $text-color; - font-size: 13px; + font-size: 15px; opacity: 70%; padding: 0 10px; line-height: 30px; @@ -70,6 +70,11 @@ header { } } +.upfold-img{ + background-image: url('../../../assets/Sprinklers.svg'); + // background-color: white; +} + button { border-radius: 25px; height: 45px; diff --git a/src/app/pages/onboarding/login/login.component.html b/src/app/pages/onboarding/login/login.component.html index e007ed9..42aadbf 100644 --- a/src/app/pages/onboarding/login/login.component.html +++ b/src/app/pages/onboarding/login/login.component.html @@ -17,7 +17,7 @@ -
    +
    -
    +
    -
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/check-circle-fill.svg b/src/assets/check-circle-fill.svg new file mode 100644 index 0000000..3383e73 --- /dev/null +++ b/src/assets/check-circle-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/question-circle-fill.svg b/src/assets/question-circle-fill.svg new file mode 100644 index 0000000..2b8c580 --- /dev/null +++ b/src/assets/question-circle-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/time.svg b/src/assets/time.svg new file mode 100644 index 0000000..b174b0f --- /dev/null +++ b/src/assets/time.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index b16b5ac..b7b8b5f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,6 +4,11 @@ @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@100;200;300;400&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); + +// :root{ +// font-size: 62.5%; +// } + * { box-sizing: border-box; margin: 0; @@ -23,6 +28,6 @@ h6 { span, p, button, -label { +label, li { font-family: "Poppins", sans-serif; }