introduction letter 80% done

frontend/angular/src/app/components/my-career-web/career-history/career-history/publish/publish.component.html

@@ -4,34 +4,34 @@
     <h4 class="tab-heading">Your Career Profile is ready, click the preview profile button to see a preview. </h4>
 
     <div class="d-flex justify-content-center mt-3">
-        <button class="mc-primary" pButton label="Preview Profile"></button>
+        <button class="mc-btn-primary" pButton label="Preview Profile"></button>
     </div>
 
 
     <div class="row">
         <div class="mt-3 col-md-6 d-flex justify-content-center">
-            <button class="mc-secondary" pButton label="Change Template" routerLink="/my-career-web/career-history/templates"></button>
+            <button class="mc-btn-secondary" pButton label="Change Template" routerLink="/my-career-web/career-history/templates"></button>
         </div>
         <div class="mt-3 col-md-6 d-flex justify-content-center">
-            <button class="mc-secondary" pButton label="Update Profile Info" routerLink="/my-career-web/career-history/personal-data"></button>
+            <button class="mc-btn-secondary" pButton label="Update Profile Info" routerLink="/my-career-web/career-history/personal-data"></button>
         </div>
     </div>
 
     <div class="row">
         <div class="mt-3 col-md-6 d-flex justify-content-center">
-            <button class="mc-secondary" pButton label="Update Work History" routerLink="/my-career-web/career-history/work-history"></button>
+            <button class="mc-btn-secondary" pButton label="Update Work History" routerLink="/my-career-web/career-history/work-history"></button>
         </div>
         <div class="mt-3 col-md-6 d-flex justify-content-center">
-            <button class="mc-secondary" pButton label="Update Educational Qualifications" routerLink="/my-career-web/career-history/education"></button>
+            <button class="mc-btn-secondary" pButton label="Update Educational Qualifications" routerLink="/my-career-web/career-history/education"></button>
         </div>
     </div>
 
     <div class="row">
         <div class="mt-3 col-md-6 d-flex justify-content-center">
-            <button class="mc-secondary" pButton label="Update Skills" routerLink="/my-career-web/career-history/skills"></button>
+            <button class="mc-btn-secondary" pButton label="Update Skills" routerLink="/my-career-web/career-history/skills"></button>
         </div>
         <div class="mt-3 col-md-6 d-flex justify-content-center">
-            <button class="mc-secondary" pButton label="Update Referees" routerLink="/my-career-web/career-history/references"></button>
+            <button class="mc-btn-secondary" pButton label="Update Referees" routerLink="/my-career-web/career-history/references"></button>
         </div>
     </div>
 
@@ -50,10 +50,10 @@
     </div>
 
     <div class="d-flex justify-content-center mt-5">
-        <button class="mc-secondary" pButton label="Download Profile"></button>
+        <button class="mc-btn-secondary" pButton label="Download Profile"></button>
     </div>
 
     <div class="d-flex justify-content-center mt-5">
-        <button class="mc-primary" pButton label="Complete"></button>
+        <button class="mc-btn-primary" pButton label="Complete"></button>
     </div>
 </div>

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

@@ -25,7 +25,8 @@ export const CLASSES = {
     QUESTION: 'performa.orm.Question',
     CAREER_SKILL: 'performa.orm.CareerProfileSkill',
     SKILL: 'performa.orm.Skill',
-    REFEREE: 'performa.orm.Referee'
+    REFEREE: 'performa.orm.Referee',
+    INTRO: 'performa.orm.IntroductionLetter'
 };
 
 export const SERVICES = {
@@ -41,6 +42,7 @@ export const SERVICES = {
     CERTIFICATIONS: 'Certifications',
     LOGIN_LINKEDIN: 'LoginWithLinkedIn',
     LOGIN_GOOGLE: 'LoginWithGoogle',
+    INTRODUCTION_LETTERS: 'IntroductionLetters',
 };
 
 export const SEARCH = {

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

@@ -8,6 +8,7 @@ import { HomeComponent } from './home/home.component';
 import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
 import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component';
 import { GoPremiumComponent } from './go-premium/go-premium.component';
+import { SummaryReportComponent } from './summary-report/summary-report.component';
 
 @NgModule({
     imports: [
@@ -20,7 +21,8 @@ import { GoPremiumComponent } from './go-premium/go-premium.component';
         HomeComponent,
         LeftSidebarComponent,
         ProfileTasksComponent,
-        GoPremiumComponent
+        GoPremiumComponent,
+        SummaryReportComponent
     ]
 })
 

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

@@ -53,7 +53,7 @@
 
                         <div class="mobile-nav-link" style="margin-top: 40px;" (click)="logout()"><i [ngClass]="isLoading ? 'fa fa-spin fa-spinner' : 'fa fa-sign-out'"></i> Logout</div>
 
-                        <a target="_blank" style="display: block;" [href]="unassumeLink" class="mobile-nav-link"><i class="fa fa-reply"></i> Unassume</a>
+                        <a style="display: block;" [href]="unassumeLink" class="mobile-nav-link"><i class="fa fa-reply"></i> Unassume</a>
                     </div>
                 </div>
             </div>

frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.html

@@ -65,7 +65,7 @@
             </span>
         </div>
 
-        <a class="sidebar-navigation-item" *ngIf="careerProfile.AssumedUser" target="_blank" [href]="unassumeLink">
+        <a class="sidebar-navigation-item" *ngIf="careerProfile.AssumedUser" [href]="unassumeLink">
             <span class="sidebar-navigation-item-icon">
                 <i class="fa fa-reply"></i>
             </span>

frontend/angular/src/app/components/my-career-web/dashboard/summary-report/summary-report.component.html

+<p>
+  summary-report works!
+</p>

frontend/angular/src/app/components/my-career-web/dashboard/summary-report/summary-report.component.ts

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

frontend/angular/src/app/components/my-career-web/intro-letters/intro-letter/intro-letter.component.html

+<div class="mc-page">
+
+    <div class="mc-page-header">
+        <div class="mc-page-header-logo">
+            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
+        </div>
+    </div>
+
+    <div class="mc-page-body container">
+        <form #form="ngForm" class="mc-card position-relative">
+            <app-overlay [isActive]="isLoading"></app-overlay>
+
+            <h4>Introduction Letter for {{introductionLetter.JobTitle || '-' }} at {{introductionLetter.Employer || '-'}} </h4>
+            <h6 class="mt-2">Provide details of for the Introduction letter</h6>
+
+            <div class="row">
+
+                <div class="col-md-6 form-group">
+                    <label>Job Title</label>
+                    <app-form-control>
+                        <input type="text" class="form-control" placeholder="Job Title" required name="JobTitle"
+                               [(ngModel)]="introductionLetter.JobTitle">
+                    </app-form-control>
+                </div>
+
+                <div class="col-md-6 form-group">
+                    <label>Employer</label>
+                    <app-form-control>
+                        <input type="text" class="form-control" placeholder="Employer" required name="Employer"
+                               [(ngModel)]="introductionLetter.Employer">
+                    </app-form-control>
+                </div>
+
+                <div class="col-md-6 form-group">
+                    <label>Contact Name</label>
+                    <app-form-control>
+                        <input type="text" class="form-control" placeholder="Contact Name" required name="ContactName"
+                               [(ngModel)]="introductionLetter.ContactName">
+                    </app-form-control>
+                </div>
+
+            </div>
+
+            <div class="row position-relative">
+                <app-overlay [isActive]="isLoadingSkillAndExp"></app-overlay>
+                <div class="col-md-6 mc-exp-table">
+                    <h5>Work Experience</h5>
+                    <p-table [columns]="[]" [value]="careerProfile.WorkExperiences" [reorderableColumns]="true">
+                        <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
+                            <tr [pReorderableRow]="index">
+                                <td>
+                                    <div class="exp-row">
+                                        <i class="fa fa-bars" pReorderableRowHandle></i>
+                                        <p-checkbox [value]="rowData.ObjectID"  [(ngModel)]="introductionLetter.WorkExperiences" name="EXP{{index}}" [label]="rowData?.ILOJobTitle?.JobTitle"></p-checkbox>
+                                    </div>
+                                </td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </div>
+
+                <div class="col-md-6 mc-skill-table">
+                    <h5>Skills</h5>
+                    <p-table [columns]="[]" [value]="careerProfile.Skills" [reorderableColumns]="true">
+                        <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
+                            <tr [pReorderableRow]="index">
+                                <td>
+                                    <div class="skill-row">
+                                        <i class="fa fa-bars" pReorderableRowHandle></i>
+                                        <p-checkbox [value]="rowData.ObjectID" [(ngModel)]="introductionLetter.Skills" name="SKILLS{{index}}" [label]="rowData?.Skill?.Description"></p-checkbox>
+                                    </div>
+                                </td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </div>
+            </div>
+
+            <div class="row mt-5">
+                <div class="col-md-6">
+                    <button pButton style="min-width: 180px;" label="Download" class="mc-btn-secondary"></button>
+                </div>
+                <div class="col-md-6 d-flex justify-content-end">
+                    <button (click)="saveIntroLetter()" pButton label="Update" class="mc-btn-primary"></button>
+                </div>
+            </div>
+
+        </form>
+    </div>
+</div>

frontend/angular/src/app/components/my-career-web/intro-letters/intro-letter/intro-letter.component.scss

+.mc-exp-table, .mc-skill-table {
+
+    ::ng-deep {
+
+        .ui-table-tbody {
+
+            tr {
+                background: transparent !important;
+
+                td {
+                    padding: 15px 20px;
+
+                    .exp-row, .skill-row {
+                        display: flex;
+                        align-items: center;
+
+                        .fa-bars {
+                            margin-right: 15px;
+                            cursor: grab;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

frontend/angular/src/app/components/my-career-web/intro-letters/intro-letter/intro-letter.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { BaseComponent } from '../../base/base.component';
+import { IntroductionLetterModel } from '../../models/introduction-letter.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { UtilsService } from '../../../../oneit/services/utils.service';
+import { PersonalDetailsService } from '../../services/personal-details.service';
+import { CareerProfileModel } from '../../models/career-profile.model';
+import { HelperService } from '../../services/helper.service';
+import { IntroLetterService } from '../../services/intro-letter.service';
+import { NgForm } from '@angular/forms';
+
+@Component({
+    selector: 'app-intro-letter',
+    templateUrl: './intro-letter.component.html',
+    styleUrls: ['./intro-letter.component.scss']
+})
+export class IntroLetterComponent extends BaseComponent implements OnInit {
+
+    introLetterId;
+    introductionLetter = new IntroductionLetterModel();
+    careerProfile = new CareerProfileModel();
+    isLoadingSkillAndExp = false;
+
+    @ViewChild('form') form: NgForm;
+
+    constructor(
+        private ar: ActivatedRoute,
+        private ps: PersonalDetailsService,
+        private is: IntroLetterService,
+        private hs: HelperService,
+        private us: UtilsService,
+        private r: Router
+    ) {
+        super();
+    }
+
+    ngOnInit() {
+        this.ar.params
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(params => {
+                if (params.id && params.id !== 'new') {
+                    this.isEditMode = true;
+                    this.introLetterId = params.id;
+                    this.getIntroLetter()
+                }
+            });
+        this.getCareerProfile();
+    }
+
+    getCareerProfile(): void {
+        this.isLoadingSkillAndExp = true;
+        const assocs = ['WorkExperiences', 'Skills.Skill'];
+        this.ps.getCareerProfile(assocs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoadingSkillAndExp = false;
+                this.hs.oneItHttpResponse(response);
+                this.careerProfile = response;
+                if (!this.isEditMode) {
+                    this.introductionLetter = new IntroductionLetterModel();
+                    this.introductionLetter.Candidate = this.careerProfile.Candidate;
+                    this.us.createObject(this.introductionLetter, this.createdObjs);
+                }
+                console.log(this.careerProfile);
+            }, err => {
+                this.isLoadingSkillAndExp = false;
+                this.hs.handleHttpError(err);
+            })
+    }
+
+    getIntroLetter(): void {
+        this.isLoading = true;
+        this.is.getIntroLetter(this.introLetterId)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.hs.oneItHttpResponse(response);
+                this.introductionLetter = response;
+                this.updatedObjs[this.introductionLetter.ObjectID] = this.introductionLetter;
+                console.log(this.introductionLetter);
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isLoading = false;
+            })
+    }
+
+    saveIntroLetter(): void {
+        this.hs.validateAllFormFields(this.form);
+        if (this.form.invalid) {
+            return;
+        }
+        this.isLoading = true;
+        this.is.saveIntroLetters(this.createdObjs, this.updatedObjs, this.deletedObjs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.hs.oneItHttpResponse(response);
+                if (response.created && response.created[this.introductionLetter.ObjectID]) {
+                    this.r.navigate([`my-career-web/intro-letters/${response.created[this.introductionLetter.ObjectID]}`])
+                }
+            }, err => {
+                this.isLoading = false;
+                this.hs.handleHttpError(err);
+            });
+    }
+
+}

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

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IntroLettersRouting } from './intro-letters.routing';
+import { IntroLettersComponent } from './intro-letters/intro-letters.component';
+import { IntroLetterComponent } from './intro-letter/intro-letter.component';
+import { McSharedModule } from '../mc-shared/mc-shared.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        McSharedModule,
+        IntroLettersRouting
+    ],
+    declarations: [
+        IntroLettersComponent,
+        IntroLetterComponent
+    ]
+})
+export class IntroLettersModule {
+}

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

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { IntroLettersComponent } from './intro-letters/intro-letters.component';
+import { IntroLetterComponent } from './intro-letter/intro-letter.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: IntroLettersComponent
+    },
+    {
+        path: ':id',
+        component: IntroLetterComponent
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class IntroLettersRouting { }

frontend/angular/src/app/components/my-career-web/intro-letters/intro-letters/intro-letters.component.html

+<div class="mc-page">
+
+    <div class="mc-page-header">
+        <div class="mc-page-header-logo">
+            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
+        </div>
+    </div>
+
+    <div class="mc-page-body container">
+        <div class="mc-card">
+            <app-overlay [isActive]="isLoading"></app-overlay>
+
+            <div class="mc-page-body-heading">Introduction Letters</div>
+
+            <div class="d-flex justify-content-end">
+                <button class="mc-btn-primary" pButton routerLink="/my-career-web/intro-letters/new" label="Add Introduction Letter"></button>
+            </div>
+
+            <div class="intro-letters">
+                <div class="intro-letter" *ngIf="introLetters.length === 0">
+                    <div class="letter-title text-center" style="flex: 1;">No Intro letters found. </div>
+                </div>
+
+                <div class="intro-letter" *ngFor="let letter of introLetters;">
+                    <div class="letter-title">{{letter.JobTitle}} - {{letter.Employer}} </div>
+                    <button class="mc-btn-secondary" pButton label="Edit" routerLink="/my-career-web/intro-letters/{{letter.ObjectID}}"></button>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+</div>

frontend/angular/src/app/components/my-career-web/intro-letters/intro-letters/intro-letters.component.scss

+@import "../../../../../styles/my-career-styles/variables";
+
+.intro-letters {
+    margin-top: 24px;
+
+    .intro-letter {
+        margin-bottom: 16px;
+        border: 1px solid #f2f2f2;
+        padding: 10px 15px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        transition: .3s;
+
+        &:hover {
+            background: #f2f2f2;
+        }
+
+        .mc-btn-secondary {
+            min-width: 100px;
+            height: 40px;
+        }
+    }
+}

frontend/angular/src/app/components/my-career-web/intro-letters/intro-letters/intro-letters.component.ts

+import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../../base/base.component';
+import { IntroLetterService } from '../../services/intro-letter.service';
+import { takeUntil } from 'rxjs/operators';
+import { HelperService } from '../../services/helper.service';
+import { IntroductionLetterModel } from '../../models/introduction-letter.model';
+
+@Component({
+    selector: 'app-intro-letters',
+    templateUrl: './intro-letters.component.html',
+    styleUrls: ['./intro-letters.component.scss']
+})
+export class IntroLettersComponent extends BaseComponent implements OnInit {
+
+    introLetters: IntroductionLetterModel[] = [];
+
+    constructor(
+        private introLetterService: IntroLetterService,
+        private helperService: HelperService
+    ) {
+        super();
+    }
+
+    ngOnInit() {
+        this.getIntroLetters();
+    }
+
+    getIntroLetters(): void {
+        this.isLoading = true;
+        this.introLetterService.getIntroLetters()
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.helperService.oneItHttpResponse(response);
+                this.introLetters = response;
+                console.log(this.introLetters);
+            }, err => {
+                this.isLoading = false;
+                this.helperService.handleHttpError(err);
+        })
+    }
+
+
+}

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

@@ -11,11 +11,18 @@ import { GooglePlacesAutocompleteDirective } from './google-places-autocomplete.
 import { OverlayComponent } from './overlay/overlay.component';
 import { PersonalDetailsComponent } from './personal-details/personal-details.component';
 import { TruncatePipe } from './truncate.pipe';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { TooltipModule } from 'primeng/tooltip';
+import { IntroLetterService } from '../services/intro-letter.service';
+import { TableModule } from 'primeng/table';
 
 const MODULES = [
     ReactiveFormsModule,
     FormsModule,
-    ...PrimeNGModules
+    ...PrimeNGModules,
+    ConfirmDialogModule,
+    TooltipModule,
+    TableModule
 ];
 
 const COMPONENTS = [
@@ -47,7 +54,8 @@ const PIPES = [
         ToasterService,
         HelperService,
         PersonalDetailsService,
-        AssessmentService
+        AssessmentService,
+        IntroLetterService
     ],
     declarations: [
         ...COMPONENTS,

frontend/angular/src/app/components/my-career-web/mc-shared/personal-details/personal-details.component.html

-<div class="mc-page-header" *ngIf="!asChildComponent">
+<div class="mc-page-header-text" *ngIf="!asChildComponent">
     Personal Information
 </div>
 

frontend/angular/src/app/components/my-career-web/models/introduction-letter.model.ts

+import { BaseModel } from './base.model';
+import { CLASSES } from '../config/constants';
+
+export class IntroductionLetterModel extends BaseModel {
+    ObjectClass = CLASSES.INTRO;
+    IsOriginalLetter: boolean;
+    JobTitle: string;
+    Employer: string;
+    ContactName: string;
+    Candidate: any;
+    Skills: any[];
+    WorkExperiences: any[];
+}

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

@@ -30,6 +30,11 @@ const routes: Routes = [
                 loadChildren: './career-history/career-history.module#CareerHistoryModule',
                 canActivate: [HomeGuard]
             },
+            {
+                path: 'intro-letters',
+                loadChildren: './intro-letters/intro-letters.module#IntroLettersModule',
+                canActivate: [HomeGuard]
+            },
             {path: '', component: WelcomeComponent, canActivate: [PublicGuard]}
         ]
     }

frontend/angular/src/app/components/my-career-web/services/intro-letter.service.ts

+import { Injectable } from '@angular/core';
+import { UtilsService } from '../../../oneit/services/utils.service';
+import { SearchService } from '../../../oneit/services/search.service';
+import { Observable } from 'rxjs';
+import { SERVICES } from '../config/constants';
+import { SaveService } from '../../../oneit/services/save.service';
+import { IntroductionLetterModel } from '../models/introduction-letter.model';
+
+@Injectable()
+export class IntroLetterService {
+
+    constructor(
+        private us: UtilsService,
+        private ss: SearchService,
+        private svs: SaveService
+    ) {
+    }
+
+
+    getIntroLetters(queryParams = {}, assocs = []): Observable<any> {
+        return this.ss.getObjects(SERVICES.INTRODUCTION_LETTERS, 'All', queryParams, assocs, null, null, null, null)
+            .map(
+                data => {
+                    return this.us.convertResponseToObjects(data, assocs);
+                }
+            )
+    }
+
+    getIntroLetter(id, assocs = []): Observable<IntroductionLetterModel> {
+        return this.ss.getObjects(SERVICES.INTRODUCTION_LETTERS, 'ByID', {id: id}, assocs, null, null, null, null)
+            .map(
+                data => {
+                    return this.us.convertResponseToObjects(data, assocs)[0];
+                }
+            )
+    }
+
+    saveIntroLetters(createdObjs, updatedObjs, deleteObjs): Observable<any> {
+        return this.svs.saveObjectsWithDefaultSvc(createdObjs, updatedObjs, deleteObjs, true);
+    }
+
+}

frontend/angular/src/styles/my-career-styles/_misc.scss

@@ -10,7 +10,7 @@
 }
 
 
-.mc-page-header {
+.mc-page-header-text {
     background: $darkColor;
     padding: 3% 8%;
     position: relative;
@@ -25,7 +25,7 @@
     padding: 24px;
     background: $white;
     border-radius: 4px;
-    box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
+    box-shadow: 0 0 20px 0 rgba(128, 130, 133, 0.13);
 }
 
 .uploaded-attachment {
@@ -71,6 +71,46 @@ label.with-help-text {
 }
 
 
+.mc-page {
+    background: #FAFCFD;
+    min-height: 100vh;
+    margin: 0 -15px;
+
+    &-header {
+        height: 76px;
+        background: $darkColor;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-logo {
+            width: 260px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #fff;
+            height: 100%;
+
+            img {
+                width: 164px;
+                height: 32px;
+            }
+        }
+    }
+
+    &-body {
+        margin-top: 32px;
+        min-height: calc(100vh - 108px);
+
+        &-heading {
+            color: $darkColor;
+            font-family: $headingFont;
+            font-size: 24px;
+            font-weight: bold;
+
+        }
+    }
+}
 
 
 @media only screen and (max-width: 768px) {

frontend/angular/src/styles/my-career-styles/_styles.scss

@@ -9,6 +9,8 @@
     @import "form";
     @import "misc";
     @import "auth";
+    @import "typography";
+
     @import "profile-builder";
     @import "primeng/radio";
     @import "primeng/checkbox";

frontend/angular/src/styles/my-career-styles/_typography.scss

+h4, h6 {
+    color: #58595B;
+    font-family: $headingFont;
+}
+
+h4 {
+    font-size: 18px;
+}
+
+h5 {
+    font-size: 16px;
+}
+
+h6 {
+    font-size: 14px;
+}

frontend/angular/src/styles/my-career-styles/primeng/_button.scss

@@ -27,8 +27,8 @@
         }
     }
 
-    &.mc-primary {
-        width: 260px;
+    &.mc-btn-primary {
+        min-width: 260px;
         height: 50px;
         border-radius: 73px;
         background-color: $primaryColor !important;
@@ -38,8 +38,8 @@
         }
     }
 
-    &.mc-secondary {
-        width: 260px;
+    &.mc-btn-secondary {
+        min-width: 260px;
         height: 50px;
         border-radius: 73px;
         background: $white;