Complete UX: To be discussed upon completion.

WebPlusOne/src/app/app.component.html

@@ -1,3 +1,7 @@
-<h1>
-  {{title}}
-</h1>
+<nav class="navbar">
+  <a class="navbar-brand" routerLink="/">
+    <img src="/assets/logo1.svg"/>
+    Plus One
+  </a>
+</nav>
+<router-outlet></router-outlet>

WebPlusOne/src/app/app.component.scss

@@ -0,0 +1,41 @@
+$primary: #4284CF;
+$accent: #70ABEF;
+$shadow: rgba(0,0,0,0.25);
+$grey1: #FAFAFA;
+$grey2: #F4F4F4;
+$grey3: #CBCBCB;
+
+nav.navbar {
+  background: $accent;
+  a.navbar-brand {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    color: white;
+    img {
+      width: 40px;
+      margin-right: 15px;
+    }
+  }
+}
+
+div.container {
+  height: calc(100vh - 64px);
+  div.card {
+    height: 100%;
+    div.card-block {
+      overflow: auto;
+      min-height: 100%;
+      box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding-bottom: 100px;
+      &.block {
+        display: block;
+      }
+    }
+  }
+}

WebPlusOne/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'app works!';

WebPlusOne/src/app/app.module.ts

@@ -2,17 +2,64 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
+import { OnboardingComponent } from './onboarding/onboarding.component';
+import { MainComponent } from './main/main.component';
+import { FooterComponent } from './footer/footer.component';
+import { ChatComponent } from './chat/chat.component';
+import { ProfileComponent } from './profile/profile.component';
+import { MessageComponent } from './message/message.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    LoginComponent,
+    OnboardingComponent,
+    MainComponent,
+    FooterComponent,
+    ChatComponent,
+    ProfileComponent,
+    MessageComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    RouterModule.forRoot([
+      {
+        path: '',
+        component: HomeComponent
+      },
+      {
+        path: 'login',
+        component: LoginComponent
+      },
+      {
+        path: 'onboarding',
+        component: OnboardingComponent
+      },
+      {
+        path: 'home',
+        component: MainComponent
+      },
+      {
+        path: 'chat',
+        component: ChatComponent
+      },
+      {
+        path: 'profile',
+        component: ProfileComponent
+      },
+      {
+        path: 'message',
+        component: MessageComponent
+      }
+    ])
   ],
   providers: [],
   bootstrap: [AppComponent]

WebPlusOne/src/app/chat/chat.component.html

@@ -0,0 +1,28 @@
+<div class="container">
+  <app-footer></app-footer>
+  <div class="card">
+    <div class="card-block block">
+      <h2 class="text-center">Contact List</h2>
+      <div class="match">
+        <img src="http://placehold.it/300x300">
+        <div class="text-wrap">
+          <h3>Chris Cates</h3>
+          <div class="button-wrap">
+            <a class="plus-button">About Chris</a>
+            <a class="plus-button" routerLink="/message">Chat with Chris</a>
+          </div>
+        </div>
+      </div>
+      <div class="match">
+        <img src="http://placehold.it/300x300">
+        <div class="text-wrap">
+          <h3>Chris Cates</h3>
+          <div class="button-wrap">
+            <a class="plus-button">About Chris</a>
+            <a class="plus-button" routerLink="/message">Chat with Chris</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

WebPlusOne/src/app/chat/chat.component.scss

@@ -0,0 +1,41 @@
+@import "../app.component.scss";
+
+a.plus-button {
+  color: white;
+}
+
+div.match {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: auto;
+  padding-bottom: 50px;
+  img {
+    border-radius: 50%;
+    width: 65px;
+    height: 65px;
+    box-shadow: 2.5px 2.5px 5px $shadow;
+    margin-right: 15px;
+  }
+  div.text-wrap {
+    width: calc(100% - 65px);
+    height: auto;
+    div.button-wrap {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      h2, p {
+        margin: 0;
+      }
+      h2 {
+        font-size: 18px;
+      }
+      a {
+        width: 50%;
+        font-size: 14px;
+        padding: 5px;
+        margin: 5px;
+      }
+    }
+  }
+}

WebPlusOne/src/app/chat/chat.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ChatComponent } from './chat.component';
+
+describe('ChatComponent', () => {
+  let component: ChatComponent;
+  let fixture: ComponentFixture<ChatComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

WebPlusOne/src/app/chat/chat.component.ts

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

WebPlusOne/src/app/footer/footer.component.html

@@ -0,0 +1,11 @@
+<div id="footer">
+  <a class="footer-nav" routerLink="/home">
+    Matches
+  </a>
+  <a class="footer-nav" routerLink="/chat">
+    Chat
+  </a>
+  <a class="footer-nav" routerLink="/profile">
+    Profile
+  </a>
+</div>

WebPlusOne/src/app/footer/footer.component.scss

@@ -0,0 +1,23 @@
+@import "../app.component.scss";
+
+div#footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  box-shadow: 0px 0px 5px $shadow;
+  a.footer-nav {
+    width: 33.33%;
+    background: $accent;
+    color: white;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+}

WebPlusOne/src/app/footer/footer.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

WebPlusOne/src/app/footer/footer.component.ts

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

WebPlusOne/src/app/home/home.component.html

@@ -0,0 +1,13 @@
+<div class="container">
+  <div class="card">
+    <div class="card-block">
+      <h2 class="text-center">Welcome to +One.</h2>
+      <a class="plus-button" routerLink="/onboarding">
+        I am new to +One
+      </a>
+      <a class="plus-button" routerLink="/login">
+        I am already a +One user
+      </a>
+    </div>
+  </div>
+</div>

WebPlusOne/src/app/home/home.component.scss

@@ -0,0 +1 @@
+@import "../app.component.scss";

WebPlusOne/src/app/home/home.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

WebPlusOne/src/app/home/home.component.ts

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