work preference completed

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

-<p>
-  work-preference works!
-</p>
+<div class="assessment-wrapper row">
+
+    <div class="col-12" style="padding: 0;">
+        <div class="assessment-header">
+            <div class="header-logo" *ngIf="!isMobileView">
+                <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>
+        <p-progressBar [value]="20"></p-progressBar>
+
+        <div class="assessment-body container">
+
+            <div class="assessment-body-header">
+                <div class="assessment-heading">Workplace Preferences</div>
+
+                <span class="assessment-estimation"> <i class="fa fa-clock-o"></i> <strong>Estimated time to complete</strong>: 5 mins</span>
+            </div>
+
+            <div class="assessment-body-description">
+                A job isn't just about what one does, but the environment where one does it. This questionnaire will help us both learn what's most important to you in a workplace environment. There are no right or wrong answers, so please choose what best fits you (not what you think might be right for a particular job).
+            </div>
+
+
+            <div class="assessment-body-question-wrapper mc-card">
+
+                <div class="question-completed">0%</div>
+
+                <div class="answer-options">
+                    <div class="answer-option">
+                        <p-radioButton label="I am a very practical person"></p-radioButton>
+                    </div>
+                    <div class="answer-option">
+                        <p-radioButton label="I am a somewhat practical person"></p-radioButton>
+                    </div>
+                    <div class="answer-option">
+                        <p-radioButton label="I am not generally idealistic"></p-radioButton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

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

+@import "~styles/my-career-styles/variables";
+
+.assessment-wrapper {
+    background: #FAFCFD;
+    min-height: 100vh;
+
+    .assessment {
+
+        &-header {
+            height: 76px;
+            background: $darkColor;
+            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;
+                }
+            }
+        }
+
+        &-body {
+            margin-top: 32px;
+
+            &-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 8px;
+
+                .assessment-heading {
+                    color: $darkColor;
+                    font-family: $headingFont;
+                    font-size: 24px;
+                    font-weight: bold;
+                }
+
+                .assessment-estimation {
+                    color: $darkColor;
+                    font-family: $bodyFont;
+                    font-size: 14px;
+
+                    .fa {
+                        font-size: 16px;
+                        color: $primaryColor;
+                        margin-right: 8px;
+                    }
+                }
+            }
+
+
+            &-description {
+                color: $darkColor;
+                font-family: $bodyFont;
+                font-size: 18px;
+            }
+
+
+            &-question-wrapper {
+                margin-top: 32px;
+                position: relative;
+
+
+                .question-completed {
+                    color: $darkColor;
+                    font-family: $bodyFont;
+                    font-size: 18px;
+                    position: absolute;
+                    right: 24px;
+                    top: 24px;
+                }
+
+                .answer-options {
+                    //display: flex;question-completed
+                    //justify-content: space-between;
+                    //align-items: center;
+
+                    .answer-option {
+                        margin-bottom: 10px;
+
+                        p-radioButton {
+                            color: $darkColor;
+                            font-family: $bodyFont;
+                            cursor: pointer;
+
+                            ::ng-deep {
+                                label {
+                                    margin-left: 12px;
+                                    font-size: 16px;
+                                    cursor: pointer;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+
+@media only screen and (max-width: 600px) {
+
+    .header-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+        width: 100%;
+    }
+
+
+    .assessment-body {
+        margin-top: 16px !important;
+
+        &-header {
+            padding: 0 4px;
+            margin-bottom: 16px !important;
+
+            .assessment-estimation {
+                margin-left: 32px;
+                text-align: center;
+                position: relative;
+
+                .fa {
+                    position: absolute;
+                    left: -16px;
+                }
+            }
+        }
+
+        &-description {
+            text-align: center;
+        }
+
+
+        &-question-wrapper {
+            margin-top: 24px !important;
+
+            .question-title {
+                margin-bottom: 16px !important;
+                width: 80% !important;
+            }
+
+            .question-completed {
+                position: absolute;
+                right: 0 !important;
+                top: -18px !important;
+                font-weight: bold;
+            }
+
+            .question-tag {
+                margin-bottom: 24px !important;
+            }
+
+            .answer-wrapper {
+                position: relative;
+
+                .extreme-label-right, .extreme-label-left {
+                    font-size: 12px !important;
+                    font-family: $bodyFont;
+                    position: absolute;
+                    bottom: -24px;
+                }
+
+                .extreme-label-right {
+                    right: 0;
+                }
+
+                .extreme-label-left {
+                    left: 0;
+                }
+
+                .answer-options {
+                    justify-content: space-between;
+                    width: 100%;
+
+                    .option-value {
+                        width: unset;
+                        height: unset;
+                        border: none !important;
+                        margin: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+
+}

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

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