go-premium mobile view completed

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

@@ -125,7 +125,7 @@
 
 
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 
     .header-actions {
         display: flex;

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

@@ -126,7 +126,7 @@
 
 
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 
     .header-actions {
         display: flex;

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

@@ -161,7 +161,7 @@
 
 
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 
     .header-actions {
         display: flex;

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

@@ -119,7 +119,7 @@
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .login-wrapper {
 
         .mc-login-logo {

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

@@ -139,7 +139,7 @@
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 
     .bck-link {
         display: flex;

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

@@ -147,7 +147,7 @@
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .signup-wrapper {
 
         .mc-signup-logo {

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

@@ -139,7 +139,7 @@
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .login-wrapper {
 
         .mc-login-logo {

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

@@ -161,7 +161,7 @@
 
 
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 
     .header-actions {
         display: flex;

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

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HomeComponent } from './home/home.component';
 import { PersonalDetailsComponent } from './personal-details/personal-details.component';
+import { GoPremiumComponent } from './go-premium/go-premium.component';
 
 const routes: Routes = [
     {
@@ -18,6 +19,10 @@ const routes: Routes = [
                 component: PersonalDetailsComponent
             },
             {
+                path: 'go-premium',
+                component: GoPremiumComponent
+            },
+            {
                 path: '',
                 redirectTo: 'home',
                 pathMatch: 'full'

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

@@ -47,7 +47,7 @@
                         <div class="mobile-nav-link"><i class="fa fa-gear"></i> My Account</div>
 
 
-                        <div class="go-premium">
+                        <div class="go-premium" (click)="goToPage('/my-career-web/dashboard/go-premium')">
                             <img src="assets/my-career-web/images/go-premium-temp.png" alt="">
                         </div>
 

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

@@ -12,6 +12,7 @@ import { takeUntil } from 'rxjs/operators';
 export class DashboardComponent extends BaseComponent implements OnInit {
 
     showMobileNav;
+
     constructor(
         private as: AuthService,
         private r: Router

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

@@ -2,7 +2,8 @@
 
     <div class="premium-header">
         <h4>Go Premium</h4>
-        <i class="fa fa-times closeable" (click)="close()"></i>
+        <i class="fa fa-times closeable" (click)="close()" *ngIf="!isMobileView"></i>
+        <i class="fa fa-times closeable" routerLink="/my-career-web/dashboard/home" *ngIf="isMobileView"></i>
 
         <p style="margin-bottom: 30px;">Our goal is to give you a highly functional app to support your career grow for FREE.</p>
         <p>But, we offer a Premium service to help you get a bit more out of <strong>Matchd Career</strong>.</p>

frontend/angular/src/app/components/my-career-web/dashboard/go-premium/go-premium.component.scss

@@ -96,3 +96,28 @@
     }
 
 }
+
+
+@media only screen and (max-width: 768px) {
+    .content-wrapper {
+        padding: 40px 10px;
+        margin-top: -70px;
+        background: #fff;
+
+        h4 {
+            margin-top: 20px !important;
+        }
+
+        .label-col {
+            min-width: 165px !important;
+        }
+
+        .free-col, .premium-col {
+            margin-left: 20px !important;
+        }
+
+        .premium-factor {
+            font-size: 12px;
+        }
+    }
+}

frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.scss

@@ -52,7 +52,7 @@
 }
 
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .personal-details {
         padding: 5%;
     }

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

@@ -86,7 +86,7 @@
     left: 0;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .login-wrapper {
 
         .mc-login-logo {

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

@@ -29,7 +29,7 @@
 }
 
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
 
     .mc-card {
         padding: 2px;

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

@@ -91,7 +91,7 @@
 
 
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
     .ui-toast {
         width: 90%;
         top: 10px;