Skill Information Ui changes --Partial Commit

src/app/app-routing.module.ts

@@ -1,6 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AssignmentComponent } from './pages/dashboard/assignment/assignment.component';
+import { CelebrationComponent } from './pages/dashboard/celebration/celebration.component';
+import { ClosingdocsComponent } from './pages/dashboard/closingdocs/closingdocs.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
+import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finalinterview.component';
+import { JoiningletterComponent } from './pages/dashboard/joiningletter/joiningletter.component';
+import { PreliminaryComponent } from './pages/dashboard/preliminary/preliminary.component';
+import { SkillinformationComponent } from './pages/dashboard/skillinformation/skillinformation.component';
+import { TechnicalComponent } from './pages/dashboard/technical/technical.component';
 import { LoginComponent } from './pages/onboarding/login/login.component';
 import { OtpComponent } from './pages/onboarding/signup/otp/otp.component';
 import { SignupComponent } from './pages/onboarding/signup/signup.component';
@@ -13,6 +21,14 @@ const routes: Routes = [
     { component: SignupComponent, path: 'signup' },
     { component: OtpComponent, path: 'otp' },
     { component: DashboardComponent, path: 'dashboard' },
+    { component: AssignmentComponent, path: 'dashboard/assignment' },
+    { component: PreliminaryComponent, path: 'dashboard/preliminary' },
+    { component: CelebrationComponent, path: 'dashboard/celebration' },
+    { component: ClosingdocsComponent, path: 'dashboard/closingdocs' },
+    { component: JoiningletterComponent, path: 'dashboard/joiningletter' },
+    { component: TechnicalComponent, path: 'dashboard/technincalinterview' },
+    { component: SkillinformationComponent, path: 'dashboard/skillinformation' },
+    { component: FinalinterviewComponent, path: 'dashboard/finaiinterview' },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -8,6 +8,14 @@ import { LoginComponent } from './pages/onboarding/login/login.component';
 import { SignupComponent } from './pages/onboarding/signup/signup.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { WelcomeComponent } from './pages/onboarding/welcome/welcome.component';
+import { SkillinformationComponent } from './pages/dashboard/skillinformation/skillinformation.component';
+import { PreliminaryComponent } from './pages/dashboard/preliminary/preliminary.component';
+import { TechnicalComponent } from './pages/dashboard/technical/technical.component';
+import { AssignmentComponent } from './pages/dashboard/assignment/assignment.component';
+import { ClosingdocsComponent } from './pages/dashboard/closingdocs/closingdocs.component';
+import { JoiningletterComponent } from './pages/dashboard/joiningletter/joiningletter.component';
+import { CelebrationComponent } from './pages/dashboard/celebration/celebration.component';
+import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finalinterview.component';
 
 @NgModule({
   declarations: [
@@ -17,6 +25,14 @@ import { WelcomeComponent } from './pages/onboarding/welcome/welcome.component';
     SignupComponent,
     DashboardComponent,
     WelcomeComponent,
+    SkillinformationComponent,
+    PreliminaryComponent,
+    TechnicalComponent,
+    AssignmentComponent,
+    ClosingdocsComponent,
+    JoiningletterComponent,
+    CelebrationComponent,
+    FinalinterviewComponent,
   ],
   imports: [
     BrowserModule,

src/app/pages/dashboard/_commonheader.scss

@@ -0,0 +1,48 @@
+@import "../../../theme";
+
+header {
+    background-color: $background-color;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+    top: 0;
+    left: 0;
+    padding: 0 10px;
+
+    .logo {
+        display: flex;
+        flex-direction: column;
+        padding: 6px 10px;
+
+        h5 {
+            font-family: "Oswald", sans-serif;
+            color: $text-color;
+            font-weight: 100;
+            left: 0;
+            letter-spacing: 1.5px;
+            font-size: 21px;
+        }
+        span {
+            color: $white;
+            font-family: "Poppins", sans-serif;
+            font-size: 12px;
+            font-weight:500;
+        }
+    }
+
+    .cross-icon {
+        button {
+            border: none;
+            background-color: transparent;
+            width: 30px;
+            height: 30px;
+            margin: 14px;
+            cursor: pointer;
+        }
+        img {
+            width: 30px;
+            // padding-left: 10px;
+        }
+    }
+}

src/app/pages/dashboard/assignment/assignment.component.html

@@ -0,0 +1 @@
+<p>assignment works!</p>

src/app/pages/dashboard/assignment/assignment.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AssignmentComponent } from './assignment.component';
+
+describe('AssignmentComponent', () => {
+  let component: AssignmentComponent;
+  let fixture: ComponentFixture<AssignmentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AssignmentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AssignmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/assignment/assignment.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-assignment',
+  templateUrl: './assignment.component.html',
+  styleUrls: ['./assignment.component.scss']
+})
+export class AssignmentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/celebration/celebration.component.html

@@ -0,0 +1 @@
+<p>celebration works!</p>

src/app/pages/dashboard/celebration/celebration.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CelebrationComponent } from './celebration.component';
+
+describe('CelebrationComponent', () => {
+  let component: CelebrationComponent;
+  let fixture: ComponentFixture<CelebrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CelebrationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CelebrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/celebration/celebration.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-celebration',
+  templateUrl: './celebration.component.html',
+  styleUrls: ['./celebration.component.scss']
+})
+export class CelebrationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/closingdocs/closingdocs.component.html

@@ -0,0 +1 @@
+<p>closingdocs works!</p>

src/app/pages/dashboard/closingdocs/closingdocs.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClosingdocsComponent } from './closingdocs.component';
+
+describe('ClosingdocsComponent', () => {
+  let component: ClosingdocsComponent;
+  let fixture: ComponentFixture<ClosingdocsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ClosingdocsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClosingdocsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/closingdocs/closingdocs.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-closingdocs',
+  templateUrl: './closingdocs.component.html',
+  styleUrls: ['./closingdocs.component.scss']
+})
+export class ClosingdocsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/dashboard.component.html

@@ -20,7 +20,7 @@
             </div>
             <img [src]="selectedStep.imageSrc">
             <p [innerHtml]="selectedStep.content"></p>
-            <button [routerLink]="['/signup']">{{selectedStep.redirectText}}</button>
+            <button [routerLink]="selectedStep.redirectUrl">{{selectedStep.redirectText}}</button>
         </li>
     </ul>
 </section>

src/app/pages/dashboard/dashboard.component.ts

@@ -10,61 +10,53 @@ export class DashboardComponent implements OnInit {
     selectedSegment: number = 0;
 
     selectedSteps = [{
-        step: 1,
         heading: 'Skill Information',
         imageSrc: 'assets/skill information.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: "Let's start now!",
-        redirectUrl: '/welcome'
+        redirectUrl: '/dashboard/skillinformation/'
     }, {
-        step: 2,
         heading: 'Preliminary Round',
         imageSrc: 'assets/Preliminary Round.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: 'Lets do this!',
-        redirectUrl: ''
+        redirectUrl: 'dashboard/preliminary'
     }, {
-        step: 3,
         heading: 'Technical Interview',
         imageSrc: 'assets/Technical Interview.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: 'Schedule meeting!',
-        redirectUrl: ''
+        redirectUrl: 'dashboard/technincalround'
     }, {
-        step: 4,
         heading: 'Assignment',
         imageSrc: 'assets/Assignment.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: 'Show details!',
-        redirectUrl: ''
+        redirectUrl: 'dashboard/assignment'
     }, {
-        step: 5,
         heading: 'Final Interview',
         imageSrc: 'assets/Final Interview.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: 'Schedule meeting!',
-        redirectUrl: ''
+        redirectUrl: 'dashboard/finaiinterview'
     }, {
-        step: 6,
         heading: 'Closing Docs',
         imageSrc: 'assets/Closing Docs.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: 'Upload docs!',
-        redirectUrl: ''
+        redirectUrl: 'dashboard/closingdocs'
     }, {
-        step: 7,
         heading: 'Joining Letter',
         imageSrc: 'assets/Joining Letter.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: 'Show details',
-        redirectUrl: ''
+        redirectUrl: 'dashboard/joiningletter'
     }, {
-        step: 8,
         heading: 'Celebrations',
         imageSrc: 'assets/Celebrations.svg',
         content: "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>",
         redirectText: 'Join Workex',
-        redirectUrl: ''
+        redirectUrl: 'dashboard/celebration'
     }]
 
     ngOnInit(): void {

src/app/pages/dashboard/finalinterview/finalinterview.component.html

@@ -0,0 +1 @@
+<p>finalinterview works!</p>

src/app/pages/dashboard/finalinterview/finalinterview.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FinalinterviewComponent } from './finalinterview.component';
+
+describe('FinalinterviewComponent', () => {
+  let component: FinalinterviewComponent;
+  let fixture: ComponentFixture<FinalinterviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FinalinterviewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FinalinterviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/finalinterview/finalinterview.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-finalinterview',
+  templateUrl: './finalinterview.component.html',
+  styleUrls: ['./finalinterview.component.scss']
+})
+export class FinalinterviewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/joiningletter/joiningletter.component.html

@@ -0,0 +1 @@
+<p>joiningletter works!</p>

src/app/pages/dashboard/joiningletter/joiningletter.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JoiningletterComponent } from './joiningletter.component';
+
+describe('JoiningletterComponent', () => {
+  let component: JoiningletterComponent;
+  let fixture: ComponentFixture<JoiningletterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ JoiningletterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JoiningletterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/joiningletter/joiningletter.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-joiningletter',
+  templateUrl: './joiningletter.component.html',
+  styleUrls: ['./joiningletter.component.scss']
+})
+export class JoiningletterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/preliminary/preliminary.component.html

@@ -0,0 +1 @@
+<p>preliminary works!</p>

src/app/pages/dashboard/preliminary/preliminary.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreliminaryComponent } from './preliminary.component';
+
+describe('PreliminaryComponent', () => {
+  let component: PreliminaryComponent;
+  let fixture: ComponentFixture<PreliminaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PreliminaryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PreliminaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/preliminary/preliminary.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-preliminary',
+  templateUrl: './preliminary.component.html',
+  styleUrls: ['./preliminary.component.scss']
+})
+export class PreliminaryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/skillinformation/skillinformation.component.html

@@ -0,0 +1,17 @@
+<header>
+    <div class="logo">
+        <span>Step 1</span>
+        <h5>Skill Information</h5>
+    </div>
+    <div class="cross-icon">
+        <button [routerLink] ="['/dashboard']">
+            <img src="../../../../assets/close_white_18dp.svg" alt="">
+        </button>
+    </div>
+</header>
+
+<section>
+    <h3>What are we good at?</h3>
+    <p>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.</p>
+</section>

src/app/pages/dashboard/skillinformation/skillinformation.component.scss

@@ -0,0 +1,2 @@
+@import '../commonheader';
+@import '../../../../theme';

src/app/pages/dashboard/skillinformation/skillinformation.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkillinformationComponent } from './skillinformation.component';
+
+describe('SkillinformationComponent', () => {
+  let component: SkillinformationComponent;
+  let fixture: ComponentFixture<SkillinformationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SkillinformationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SkillinformationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/skillinformation/skillinformation.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-skillinformation',
+  templateUrl: './skillinformation.component.html',
+  styleUrls: ['./skillinformation.component.scss']
+})
+export class SkillinformationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/technical/technical.component.html

@@ -0,0 +1 @@
+<p>technical works!</p>

src/app/pages/dashboard/technical/technical.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TechnicalComponent } from './technical.component';
+
+describe('TechnicalComponent', () => {
+  let component: TechnicalComponent;
+  let fixture: ComponentFixture<TechnicalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TechnicalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TechnicalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/technical/technical.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-technical',
+  templateUrl: './technical.component.html',
+  styleUrls: ['./technical.component.scss']
+})
+export class TechnicalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/assets/close_icon..svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

src/assets/close_white_18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#c8c8c8"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>