work assessment ui started

frontend/angular/src/app/components/my-career-web/assessment/assessment.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AssessmentRouting } from './assessment.routing';
+import { WorkStyleComponent } from './work-style/work-style.component';
+import { WorkPreferenceComponent } from './work-preference/work-preference.component';
+import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component';
+import { McSharedModule } from '../mc-shared/mc-shared.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        McSharedModule,
+        AssessmentRouting
+    ],
+    declarations: [
+        WorkStyleComponent,
+        WorkPreferenceComponent,
+        DiversityProfileComponent
+    ]
+})
+export class AssessmentModule {
+}

frontend/angular/src/app/components/my-career-web/assessment/assessment.routing.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { WorkStyleComponent } from './work-style/work-style.component';
+import { WorkPreferenceComponent } from './work-preference/work-preference.component';
+import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component';
+
+const routes: Routes = [
+    {
+        path: 'work-style',
+        component: WorkStyleComponent
+    },
+    {
+        path: 'work-preference',
+        component: WorkPreferenceComponent
+    },
+    {
+        path: 'diversity-profile',
+        component: DiversityProfileComponent
+    },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AssessmentRouting { }

frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.html

+<p>
+  diversity-profile works!
+</p>

frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-diversity-profile',
+  templateUrl: './diversity-profile.component.html',
+  styleUrls: ['./diversity-profile.component.scss']
+})
+export class DiversityProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

frontend/angular/src/app/components/my-career-web/assessment/work-preference/work-preference.component.html

+<p>
+  work-preference works!
+</p>

frontend/angular/src/app/components/my-career-web/assessment/work-preference/work-preference.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-work-preference',
+  templateUrl: './work-preference.component.html',
+  styleUrls: ['./work-preference.component.scss']
+})
+export class WorkPreferenceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

frontend/angular/src/app/components/my-career-web/assessment/work-style/work-style.component.html

+<div class="assessment-wrapper row">
+
+    <div class="col-12" style="padding: 0;">
+        <div class="assessment-header">
+            <div class="header-logo">
+                <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
+            </div>
+
+            <div class="header-actions">
+                <span class="auto-saved">Auto saved 1 min ago</span>
+
+                <button pButton label="Save & exit" class="ui-button-info"></button>
+            </div>
+        </div>
+        <div class="assessment-progress">
+
+        </div>
+
+        <div class="assessment-body container">
+            <div class="assessment-body-header">
+                <div class="assessment-heading">Work Style</div>
+
+                <span class="assessment-estimation"> <i class="fa fa-clock-o"></i> <strong>Estimated time to complete</strong>: 20 mins</span>
+            </div>
+        </div>
+    </div>
+
+</div>

frontend/angular/src/app/components/my-career-web/assessment/work-style/work-style.component.scss

+@import "~styles/my-career-styles/variables";
+
+.assessment-wrapper {
+    background: #FAFCFD;
+    min-height: 100vh;
+
+    .assessment {
+
+        &-header {
+            height: 76px;
+            background: #58595B;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .header-logo {
+                width: 260px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #fff;
+                height: 100%;
+
+                img {
+                    width: 164px;
+                    height: 32px;
+                }
+            }
+
+            .header-actions {
+                padding: 0 24px;
+                font-weight: 600;
+
+                .auto-saved {
+                    color: #FFFFFF;
+                    font-family: $bodyFont;
+                    font-size: 14px;
+                }
+
+                button {
+                    margin-left: 24px;
+                }
+            }
+        }
+
+        &-progress {
+            height: 8px;
+            background: #E0E0E0;
+            width: 100%;
+            position: relative;
+        }
+
+        &-body {
+            margin-top: 32px;
+
+            &-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .assessment-heading {
+                    color: #58595B;
+                    font-family: $headingFont;
+                    font-size: 24px;
+                    font-weight: bold;
+                }
+
+                .assessment-estimation {
+                    color: #58595B;
+                    font-family: $bodyFont;
+                    font-size: 14px;
+
+                    .fa {
+                        font-size: 16px;
+                        color: $primaryColor;
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
+    }
+}

frontend/angular/src/app/components/my-career-web/assessment/work-style/work-style.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-work-style',
+  templateUrl: './work-style.component.html',
+  styleUrls: ['./work-style.component.scss']
+})
+export class WorkStyleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

frontend/angular/src/app/components/my-career-web/auth/login/login.component.html

+<div class="bck-link mc-nav-link" routerLink="/my-career-web"><i class="fa fa-chevron-left"></i><span>Back</span></div>
 <div class="row login-wrapper">
     <div class="col-md-offset-4 col-md-4">
         <div class="mc-login-logo d-flex justify-content-center">

frontend/angular/src/app/components/my-career-web/auth/login/login.component.scss

 @import "~styles/my-career-styles/variables";
 
+
+.bck-link {
+    position: absolute;
+    color: #12A8DE;
+    line-height: 21px;
+    z-index: 1000;
+    top: 15px;
+    left: 25px;
+    border: 0;
+    align-items: center;
+    display: none;
+
+    span {
+        font-family: $bodyFont;
+        font-size: 14px;
+        letter-spacing: 0;
+        padding-left: 10px;
+    }
+
+    .fa {
+        font-size: 18px;
+    }
+}
+
 .login-wrapper {
     position: relative;
     margin-bottom: 45px;
@@ -112,6 +136,11 @@
 }
 
 @media only screen and (max-width: 600px) {
+
+    .bck-link {
+        display: flex;
+    }
+
     .login-wrapper {
 
         .mc-login-logo {

frontend/angular/src/app/components/my-career-web/my-career-web.routing.ts

@@ -20,6 +20,11 @@ const routes: Routes = [
                 loadChildren: './dashboard/dashboard.module#DashboardModule',
                 canActivate: [HomeGuard]
             },
+            {
+                path: 'assessments',
+                loadChildren: './assessment/assessment.module#AssessmentModule',
+                canActivate: [HomeGuard]
+            },
             {path: '', component: WelcomeComponent, canActivate: [PublicGuard]}
         ]
     }