From b3595b74f86f605cd35461bf7a74189b0f9c2c32 Mon Sep 17 00:00:00 2001 From: prahalad Date: Tue, 5 Oct 2021 18:22:04 +0530 Subject: [PATCH] Dashboard Changes --Partial Commit --- src/app/common/styles/colors.scss | 3 + src/app/common/styles/theme.scss | 77 +++++++++++++++ src/app/pages/dashboard/_commonheader.scss | 54 +++++------ .../preliminary/preliminary.component.html | 50 ++++++---- .../preliminary/preliminary.component.scss | 50 +++++----- .../preliminaryresult.component.html | 17 ++-- .../preliminaryresult.component.scss | 88 +++++++++++------- .../preliminary/quiz/quiz.component.scss | 93 ++++++++----------- .../skillinformation.component.html | 57 ++++++------ .../skillinformation.component.scss | 49 +++++++--- src/styles.scss | 7 +- 11 files changed, 332 insertions(+), 213 deletions(-) diff --git a/src/app/common/styles/colors.scss b/src/app/common/styles/colors.scss index e69de29..826a36d 100644 --- a/src/app/common/styles/colors.scss +++ b/src/app/common/styles/colors.scss @@ -0,0 +1,3 @@ +$grey-shades: #f7f7f7, #939393, #151515; +$teal: #33ce93; +$greenishyellow: #6bd534; diff --git a/src/app/common/styles/theme.scss b/src/app/common/styles/theme.scss index e69de29..50a10d8 100644 --- a/src/app/common/styles/theme.scss +++ b/src/app/common/styles/theme.scss @@ -0,0 +1,77 @@ +@import "./colors.scss"; + +%Commonheader { + background-color: nth($grey-shades, 3); + display: flex; + justify-content: space-between; + align-items: center; + height: 9rem; + padding: 0 2.5rem 0 3.5rem; + + h5 { + color: lighten($color: nth($grey-shades, 3), $amount: 70%); + font-weight: 300; + left: 0; + font-size: 2.4rem; + letter-spacing: 0.03rem; + } + .step { + color: white; + letter-spacing: 0.03rem; + font-size: 1.25rem; + font-weight: 500; + } + + .cross-icon { + button { + border: none; + background-color: transparent; + width: 3rem; + height: 3rem; + cursor: pointer; + margin-top: 0.7rem; + } + img { + width: 3rem; + } + } +} + +%CommonUpfold { + padding: 2rem; + + img { + display: block; + width: 7em; + margin: 0 auto; + padding: 1.3rem 0; + } + h3 { + color: lighten($color: nth($grey-shades, 3), $amount: 25%); + text-align: center; + font-weight: 300; + padding: 3rem 0; + font-size: 2.4rem; + letter-spacing: 0.05rem; + } + p { + color: lighten($color: nth($grey-shades, 3), $amount: 50%); + text-align: center; + font-size: 1.4rem; + line-height: 2.8rem; + font-weight: 400; + } +} + +%CommonButton { + margin: 0 auto; + padding: 2rem; + + button { + width: 100%; + height: 5rem; + background-color: $teal; + border: none; + border-radius: 3rem; + } +} diff --git a/src/app/pages/dashboard/_commonheader.scss b/src/app/pages/dashboard/_commonheader.scss index 0cf13ea..87690d5 100644 --- a/src/app/pages/dashboard/_commonheader.scss +++ b/src/app/pages/dashboard/_commonheader.scss @@ -5,38 +5,38 @@ header { display: flex; align-items: center; justify-content: space-between; - height: 90px; + height: 9rem; top: 0; left: 0; - padding-left:25px; + padding-left: 2.5rem; .logo { display: flex; flex-direction: column; - padding: 6px 14px; + padding: 0.6rem 1.4rem; h5 { color: $text-color; font-weight: 300; left: 0; - font-size: 24px; - letter-spacing: 0.3px; + font-size: 2.4rem; + letter-spacing: 0.03rem; } span { color: $white; - letter-spacing: 0.3px; - font-size: 13px; + letter-spacing: 0.03rem; + font-size: 1.3rem; font-weight: 500; } } .cross-icon { - padding-right: 10px; + padding-right: 1rem; button { border: none; background-color: transparent; - width: 30px; - height: 30px; + width: 3rem; + height: 3rem; margin: 14px; cursor: pointer; } @@ -47,11 +47,11 @@ header { } .footer-btn { - border-radius: 25px; - height: 45px; - font-size: 14px; + border-radius: 2.5rem; + height: 4.5rem; + font-size: 1.4rem; border: none; - margin: 5px 0; + margin: 0.5rem 0; font-weight: 600; width: 100%; background-color: $green; @@ -59,33 +59,33 @@ header { } .upfold { - padding: 30px 25px 0px; + padding: 3rem 2.5rem 0; h3 { - font-size: 24px; + font-size: 2.4rem; color: lighten($color: $heading-color, $amount: 20%); text-align: center; font-weight: 300; - padding-top: 13px; + padding-top: 1.3rem; } p { color: $content-color; text-align: center; - font-size: 14px; - line-height: 28px; - padding: 15px 0; + font-size: 1.4rem; + line-height: 2.8rem; + padding: 1.5rem 0; font-weight: 400; } - h5{ - font-size: 15px; + h5 { + font-size: 1.5rem; font-weight: 300; } } button { - border-radius: 30px; - height: 50px; - font-size: 16px; + border-radius: 3rem; + height: 5rem; + font-size: 1.6rem; border: none; - margin: 5px; + margin: 0.5rem; font-weight: 600; -} \ No newline at end of file +} diff --git a/src/app/pages/dashboard/preliminary/preliminary.component.html b/src/app/pages/dashboard/preliminary/preliminary.component.html index 12dd5ff..016f5d5 100644 --- a/src/app/pages/dashboard/preliminary/preliminary.component.html +++ b/src/app/pages/dashboard/preliminary/preliminary.component.html @@ -1,37 +1,47 @@
- -
  • + +
    -
    • +
    -
    - -

    Let us check your knowledge.

    -

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

    +
    + +

    Let us check your knowledge.

    +

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

    -
    +
    -
    + +

    Quiz

      -
    • 20 questions
      • -
    • 20 mins + 10 mins grace
      • -
    • Note: 85% of result minimum
      • +
    • + 20 + questions +
      • +
    • + 20 mins + 10 mins grace +
      • +
    • + Note: 85% of + result minimum +
    -
    - +
    + All the best! -
    \ 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 b24d4d0..b5a806f 100644 --- a/src/app/pages/dashboard/preliminary/preliminary.component.scss +++ b/src/app/pages/dashboard/preliminary/preliminary.component.scss @@ -1,21 +1,21 @@ -@import "../commonheader"; +@import "../../../common/styles/theme.scss"; +@import "../../../common/styles/colors.scss"; + +header { + @extend %Commonheader; +} .upfold { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; + @extend %CommonUpfold; - img { - padding: 15px; - width: 100px; + .upfold-heading { + padding: 2rem 0; } } .quiz-section-header { div:nth-child(1) { - background-color: $background-color; + background-color: nth($grey-shades, 3); position: absolute; width: 100%; height: 25px; @@ -24,7 +24,7 @@ div:nth-child(2) { width: 50%; height: 20px; - background-color: $background-color; + background-color: nth($grey-shades, 3); } } @@ -33,7 +33,7 @@ h3 { color: nth($grey-shades, 2); - background-color: $background-color; + background-color: nth($grey-shades, 3); font-weight: 300; padding-left: 24px; padding-bottom: 20px; @@ -41,13 +41,13 @@ } ul { padding-left: 20px; - background-color: $background-color; + background-color: nth($grey-shades, 3); background-image: url("../../../../assets/Sprinklers3.svg"); padding-top: 2px; li { display: flex; list-style: none; - color: $white; + color: white; font-size: 14px; line-height: 35px; font-weight: 600; @@ -63,24 +63,22 @@ } } -.btn-section { - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - background-color: nth($grey-shades, 5); - height: 18vh; +.submit { + @extend %CommonButton; + background-color: nth($grey-shades, 3); button { - background-color: $teal; - width: 87vw; color: white; + font-size: 1.7rem; + font-weight: 600; } span { - font-size: 18px; - color: nth($grey-shades, 2 ); - padding: 15px; + color: white; + text-align: center; + display: block; + font-size: 1.7em; font-weight: 300; + margin: 1.5rem; } } diff --git a/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.html b/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.html index 544e621..0450241 100644 --- a/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.html +++ b/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.html @@ -1,13 +1,13 @@
    - -
  • + +
    -
    • +
    @@ -25,7 +25,7 @@
    -

    Quiz

    +

    Quiz Results

    • 17 questions @@ -36,7 +36,7 @@
    -
    +
    @@ -44,6 +44,7 @@ [routerLink]="['/dashboard/technincalinterview']" class="technical-btn" > - Goto next Step Technical Interview + Goto next Step
    + Technical Interview
    diff --git a/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.scss b/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.scss index e2cb62f..0d34fe1 100644 --- a/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.scss +++ b/src/app/pages/dashboard/preliminary/preliminaryresult/preliminaryresult.component.scss @@ -1,30 +1,43 @@ -@import "../../commonheader"; +@import "../../../../common/styles/theme.scss"; +@import "../../../../common/styles/colors.scss"; + +header { + @extend %Commonheader; +} .upfold { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; + h3 { + font-size: 3.8rem; + padding: 0; + font-weight: 600; + } img { - width: 130px; - margin: 20px; + padding: 0rem 0; + width: 13.5em; + margin-top: 2rem; } + + h5 { + font-size: 2.5rem; + font-weight: 300; + text-align: center; + } + @extend %CommonUpfold; } .quiz-section-header { div:nth-child(1) { - background-color: $background-color; + background-color: nth($grey-shades, 3); position: absolute; width: 100%; - height: 25px; + height: 2.5rem; transform: skew(-1deg, 3deg); } div:nth-child(2) { width: 50%; - height: 20px; - background-color: $background-color; + height: 2rem; + background-color: nth($grey-shades, 3); } } @@ -33,59 +46,68 @@ h3 { color: nth($grey-shades, 2); - background-color: $background-color; + background-color: nth($grey-shades, 3); font-weight: 300; - padding-left: 24px; - padding-bottom: 20px; - font-size: 24px; + padding-left: 2.4rem; + padding-bottom: 2rem; + font-size: 2.4rem; } ul { - padding-left: 20px; - background-color: $background-color; - // background-image: url("../../../../assets/Sprinklers3.svg"); - padding-top: 2px; + padding-left: 2rem; + background-color: nth($grey-shades, 3); + background-image: url("../../../../../assets/Sprinklers3.svg"); + padding-top: 0.2rem; li { display: flex; list-style: none; - color: $white; - font-size: 14px; - line-height: 35px; + color: white; + font-size: 1.4rem; + line-height: 3.5rem; font-weight: 600; opacity: 90%; - padding-bottom: 10px; - padding-left: 9px; + padding-bottom: 1rem; + padding-left: 0.9rem; img { - width: 38.5px; - padding-right: 20px; + width: 3.85rem; + padding-right: 2rem; } } } } -.btn-section { +.submit { + @extend %CommonButton; + + background-color: nth($grey-shades, 3); display: flex; align-items: center; flex-direction: row; justify-content: center; - background-color: nth($grey-shades, 5); - height: 18vh; + height: 16vh; .dashboard-btn { + margin: 0 0.5rem; width: 42vw; - border: 2px solid $teal; + border: 0.2rem solid $teal; background-color: transparent; color: $teal; + font-size: 1.5rem; + font-weight: 500; } .technical-btn { + margin: 0 0.5rem; color: white; width: 42vw; background-color: $teal; + font-size: 1.5rem; + font-weight: 500; + span { - font-size: 13px; + font-size: 1.1rem; color: white; - padding: 15px; + padding: 1.5rem; font-weight: 300; } } diff --git a/src/app/pages/dashboard/preliminary/quiz/quiz.component.scss b/src/app/pages/dashboard/preliminary/quiz/quiz.component.scss index 3603f80..4ef9aa7 100644 --- a/src/app/pages/dashboard/preliminary/quiz/quiz.component.scss +++ b/src/app/pages/dashboard/preliminary/quiz/quiz.component.scss @@ -1,83 +1,69 @@ -@import "../../../../../_theme.scss"; +@import "../../../../common/styles/theme.scss"; header { + @extend %Commonheader; display: flex; justify-content: center; text-align: center; align-items: center; - background-color: $background-color; - height: 90px; - top: 0; - left: 0; h3 { - color: nth($grey-shades, 2); + color: nth($grey-shades, 1); font-weight: 300; - font-size: 24px; - padding: 15px; - padding-bottom: 5px; + font-size: 2.4rem; + padding: 1.5rem; + padding-bottom: 0.5rem; } span { color: white; - font-size: 12px; + font-size: 1.2rem; font-weight: 600; } .cross-icon { - padding-right: 10px; + padding-right: 2rem; position: absolute; right: 0; - - button { - border: none; - background-color: transparent; - width: 30px; - height: 30px; - margin: 14px; - cursor: pointer; - } - img { - width: 30px; - } } } + .upfold { - background-color: $background-color; + background-color: nth($grey-shades, 3); background-image: url("../../../../../assets/Sprinklers3.svg"); - height: 30vh; - width: 100%; - display: flex; - justify-content: center; - flex-direction: column; h5 { - color: nth($grey-shades, 2); - font-size: 23px; + color: nth($grey-shades, 1); + font-size: 2.3rem; font-weight: 300; - padding: 30px 50px; + padding: 3rem 5rem; text-align: center; - line-height: 45px; + line-height: 4.5rem; + opacity: 80%; } div { display: flex; + position: absolute; justify-content: center; align-items: center; - align-self: center; - width: 60px; - height: 60px; - border: 3.5px solid $greenishyellow; - border-radius: 50px; + width: 6rem; + height: 6rem; + border: 0.35rem solid $greenishyellow; + border-radius: 5rem; color: white; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; span { - font-size: 13px; + font-size: 1.3rem; } } + } .upfold-img { background-color: white; - img { width: 100%; } @@ -94,36 +80,35 @@ header { align-items: center; justify-content: start; list-style: none; - border: 2px solid nth($grey-shades, 1); - margin: 10px 17px; - height: 50px; - border-radius: 30px; + border: 0.2rem solid nth($grey-shades, 1); + margin: 1rem 1.7rem; + height: 5rem; + border-radius: 3rem; input { - margin: 0 20px; + margin: 0 2rem; } label { - font-size: 14px; + font-size: 1.4rem; } } } } - -.next-page{ +.next-page { display: flex; justify-content: center; align-items: center; bottom: 0; - + button { - border-radius: 30px; - height: 50px; + border-radius: 3rem; + height: 5rem; width: 92vw; - font-size: 16px; + font-size: 1.6rem; border: none; - margin: 5px; + margin: 0.5rem; font-weight: 600; } -} \ No newline at end of file +} diff --git a/src/app/pages/dashboard/skillinformation/skillinformation.component.html b/src/app/pages/dashboard/skillinformation/skillinformation.component.html index dba3aa0..ad65eda 100644 --- a/src/app/pages/dashboard/skillinformation/skillinformation.component.html +++ b/src/app/pages/dashboard/skillinformation/skillinformation.component.html @@ -1,81 +1,84 @@
    -
  • +
    -
    • +
    -

    What are we good at?

    -

    Please note that you should have knowledge of at least 1 tech stack in each category & must know the basics of - HTML/CSS/JS, Git.

    +

    What are you good at?

    +

    + Please note that you should have knowledge of at least 1 tech stack in + each category & must know the basics of HTML/CSS/JS, Git. +

    -
    +

    Front-end:

    • - + Angular8+
    • - + ReactJS/ ReactTS+
    • - + Ionic Frameword
    • - + React Native
    • - + VueJS+
    -
    -
    -

    Back-End:

    +
    +

    Backend:

    • - + NodeJS
    • - + ExpressJS
    • - + Django Framework
    -
    -
    +

    Beneficial:

    • - + Firebase
    • - - DevOps
      (Docker/
      Kubernetes)       + + DevOps
      (Docker/
      + Kubernetes)
    -
    - -
    \ 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 dcaab58..fd96e86 100644 --- a/src/app/pages/dashboard/skillinformation/skillinformation.component.scss +++ b/src/app/pages/dashboard/skillinformation/skillinformation.component.scss @@ -1,38 +1,59 @@ -@import "../commonheader"; +// @import "../commonheader"; @import "../../../../theme"; +@import "../../../common/styles/theme.scss"; -section { - padding: 0 20px; +header { + @extend %Commonheader; +} + +.upfold { + @extend %CommonUpfold; +} + +.backend, +.frontend, +.beneficial { + padding: 0 2rem; h3 { text-align: center; - color: lighten($color: $heading-color, $amount: 0%); - padding-bottom: 10px; - font-size: 16px; + color: lighten($color: nth($grey-shades, 3), $amount:10%); + font-size: 1.8rem; font-weight: 300; - padding: 10px 0; + padding: 1.8rem 0; } ul { display: grid; grid-template-columns: repeat(2, 2fr); - padding: 15px 0; + padding: 1.5rem 0; li { - margin: 5px; + margin: 0.6rem; display: flex; align-items: center; list-style: none; - box-shadow: 0px 0px 3px 0px $button-color; - border-radius: 10px; + box-shadow: 0 0 0.3rem 0 lighten($color:nth($grey-shades, 2), $amount: 30%); + border-radius: 2.5rem; span { color: $content-color; - font-size: 11.5px; + font-size: 1.4rem; + line-height: 1.8rem; } img { - padding: 12px; - width: 60px; + padding: 1.7rem; + width: 7rem; } } } } + +.submit{ + @extend %CommonButton; + + button{ + color: white; + font-size: 1.7rem; + font-weight: 600; + } +} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index b7b8b5f..26ce80f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,15 +5,14 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); -// :root{ -// font-size: 62.5%; -// } +:root{ + font-size: 62.5%; +} * { box-sizing: border-box; margin: 0; padding: 0; - // background-color: $background-color; } h1,