started on the new design

.vscode/settings.json

 {
-    "vsicons.presets.angular": true
+	"vsicons.presets.angular": true
 }
\ No newline at end of file

angular-cli.json

 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.31",
+    "version": "1.0.0-rc.4",
     "name": "whats-open-web"
   },
   "apps": [
@@ -19,13 +19,13 @@
       "tsconfig": "tsconfig.json",
       "prefix": "app",
       "styles": [
-        "styles.scss"
+        "styles.scss",
+        "../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"
       ],
       "scripts": [
-        "./sw-loader.js"
       ],
+      "environmentSource": "environments/environment.ts",
       "environments": {
-        "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }

package.json

-  {
+{
   "name": "whats-open-web",
   "version": "0.0.0",
   "license": "MIT",
@@ -17,6 +17,7 @@
     "@angular/core": "^2.4.0",
     "@angular/forms": "^2.4.0",
     "@angular/http": "^2.4.0",
+    "@angular/material": "^2.0.0-beta.2",
     "@angular/platform-browser": "^2.4.0",
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
@@ -26,7 +27,7 @@
     "zone.js": "^0.7.2"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-beta.31",
+    "@angular/cli": "^1.0.0-rc.4",
     "@angular/compiler-cli": "^2.4.0",
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.42",
@@ -36,8 +37,8 @@
     "karma": "1.2.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
     "karma-coverage-istanbul-reporter": "^0.2.0",
+    "karma-jasmine": "^1.0.2",
     "protractor": "~5.1.0",
     "ts-node": "1.2.1",
     "tslint": "^4.3.0",

src/_color-palette.scss

@@ -6,6 +6,7 @@ $pale-grey: #dfe3e9;
 $background-color: #eff3f6;
 $open-green:#3AC550;
 $closed-grey:#C4B9B9;
+$shadow-color:rgba(43,61,73,.15);
 // $color-palette: (
 // 'white' : #ffffff,
 // 'primary' : #354052,

src/_global-styles.scss

 @import "color-palette";
 @import "text-styles";
+
 .light-card {
     background-color: $white;
     border-radius: 4px;
     border-width: 1px;
     border-style: solid;
     border-color: $border-color;
+}
+.shadows{
+   box-shadow: 12px 15px 20px 0px $shadow-color;
 }
\ No newline at end of file

src/_text-styles.scss

-// @import "color-palette";
+ // @import "color-palette";
+
 /* Text styles */
 
 .selected-nav {
@@ -10,6 +11,7 @@
 	text-align: center;
 	color: $primary;
 }
+
 .deselected-nav {
 	font-family: HelveticaNeue-Medium;
 	font-size: 14px;
@@ -72,8 +74,9 @@
 	text-align: left;
 	color: $bluegrey;
 }
-.tag-text{
-	width:20px;
+
+.tag-text {
+	width: 20px;
 	font-family: HelveticaNeue-Bold;
 	font-size: 8px;
 	font-weight: normal;
@@ -82,6 +85,7 @@
 	text-align: center;
 	color: $white;
 }
+
 .timeline-text {
 	width: 36px;
 	height: 16px;
@@ -93,7 +97,8 @@
 	text-align: center;
 	color: $primary;
 }
-.campus-location-text{
+
+.campus-location-text {
 	font-family: HelveticaNeue-Light;
 	font-size: 13px;
 	font-weight: normal;
@@ -102,31 +107,31 @@
 	text-align: center;
 	color: $primary;
 }
-.search-box-text{
-    font-family: HelveticaNeue-Medium;
-	font-size: 12px;
-	font-weight: normal;
-	font-style: normal;
-	font-stretch: normal;
-	// text-align: center;
-	color: $primary;
+
+.search-bar-text {
+	font-family: NunitoSans-Regular;
+	font-size: 18px;
+	color: rgba(53, 64, 82, 0.15);
+	letter-spacing: -0.45px;
 }
+
 .area-title {
 	font-family: HelveticaNeue-Medium;
 	font-size: 20px;
 	font-weight: normal;
 	font-style: normal;
 	font-stretch: normal;
-    text-align: center;
-    color:#68768C;
+	text-align: center;
+	color: #68768C;
 }
-.content-bar-title{
-font-family: HelveticaNeue-Medium;
+
+.content-bar-title {
+	font-family: HelveticaNeue-Medium;
 	font-size: 32px;
 	font-weight: 500;
 	font-style: normal;
 	font-stretch: normal;
 	text-align: left;
 	color: $primary;
-    margin-left: 50.5px;
-}
\ No newline at end of file
+	margin-left: 50.5px;
+}

src/app/app.component.html

 <div class="app-container">
     <app-nav-bar></app-nav-bar>
   <div class="main-content">
-    <app-filter-bar></app-filter-bar>
-    <div class="place-window">
+    <app-search-bar></app-search-bar>
+    <!--<div class="place-window">
       <app-place-window></app-place-window>
-    </div>
-    <app-context-bar></app-context-bar>
+    </div>-->
+    <!--<app-context-bar></app-context-bar>-->
   </div>
 </div>

src/app/app.component.scss

@@ -6,8 +6,8 @@
     width:100%;
     height: 100%;
     display: flex;
-    flex-direction: row;
-    padding-top: 50px;
+    flex-direction: column;
+    // padding-top: 50px;
 } 
 
 .place-window{

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-// import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { MaterialModule } from '@angular/material';
 
 import { AppComponent } from './app.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
@@ -13,8 +14,9 @@ import { SafeUrlPipe } from './safe-url.pipe';
 import { PlaceWindowComponent } from './place-window/place-window.component';
 import { PlaceCardComponent } from './place-window/area/place-card/place-card.component';
 import { AreaComponent } from './place-window/area/area.component';
-import { FilterBarComponent } from './filter-bar/filter-bar.component';
 import { ShowHideArrowComponent } from './context-bar/show-hide-arrow/show-hide-arrow.component';
+import { FeedbackDialogComponent } from './place-window/area/place-card/feedback-dialog/feedback-dialog.component';
+import { SearchBarComponent } from './search-bar/search-bar.component';
 @NgModule({
 	declarations: [
 		AppComponent,
@@ -27,15 +29,18 @@ import { ShowHideArrowComponent } from './context-bar/show-hide-arrow/show-hide-
 		PlaceWindowComponent,
 		PlaceCardComponent,
 		AreaComponent,
-		FilterBarComponent,
-		ShowHideArrowComponent
+		ShowHideArrowComponent,
+		FeedbackDialogComponent,
+		SearchBarComponent
 	],
 	imports: [
 		BrowserModule,
-		// FormsModule,
-		HttpModule
+		FormsModule,
+		HttpModule,
+		MaterialModule.forRoot()
 	],
 	providers: [],
-	bootstrap: [AppComponent]
+	bootstrap: [AppComponent],
+	entryComponents:[FeedbackDialogComponent]
 })
 export class AppModule { }

src/app/context-bar/context-bar.component.html

 <div class="context-bar-button-container">
     <!--<button class="show-hide-button"(click)="show=!show">Click Me</button>-->
-    <app-show-hide-arrow class="show-hide-button" [isRight]='true' (change)="show = $event"></app-show-hide-arrow>
-    <button (click)="tempf()">Click</button>
+    <app-show-hide-arrow class="show-hide-button" [isRight]='false' (change)="show = $event"></app-show-hide-arrow>
+    <!--<button (click)="tempf()">Click</button>-->
     <div [ngClass]="(show)?'light-card context-bar-open' : 'light-card context-bar-closed'">
 
         <div class="context-bar-header">

src/app/context-bar/context-bar.component.ts

@@ -8,7 +8,7 @@ import { Place } from '../place';
 })
 
 export class ContextBarComponent implements OnInit {
-	show = true;
+	show = false;
 	place: Place = new Place();
 	error: any;
 	constructor(private dataProvider: DataProviderService) { }
@@ -21,10 +21,10 @@ export class ContextBarComponent implements OnInit {
 		);
 	}
 	tempf() {
-		if(localStorage.getItem('facilities')){
-			console.log(localStorage.getItem('facilities'))
-		}else{
-			localStorage.setItem('facilities','hi');
-		}
+		// if(localStorage.getItem('facilities')){
+		// 	console.log(localStorage.getItem('facilities'))
+		// }else{
+		// 	localStorage.setItem('facilities','hi');
+		// }
 	}
 }

src/app/data-provider.service.ts

@@ -12,6 +12,7 @@ import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/share';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/DefaultIfEmpty';
 
 @Injectable()
 export class DataProviderService {
@@ -31,19 +32,19 @@ export class DataProviderService {
 			return this.placesObs;
 		} else {
 			const facilities = localStorage.getItem('facilities');
-			if (facilities){
+			if (facilities) {
 				this.places = this.extractData(JSON.parse(facilities));
 				this.placesObs = Observable.of(this.places);
 				return this.placesObs;
 			} else {
+
 				this.placesObs = this.http.get(this.Url)
-					.map((data) => {
+				.map((data) => {
 						this.placesObs = null;
 						data = data.json();
 						this.places = this.extractData(data);
 						this.contextPlace = this.places[0];
-						localStorage.setItem('facilities',JSON.stringify(data));
-						// console.log(this.contextPlace);
+						localStorage.setItem('facilities', JSON.stringify(data));
 						return this.places;
 					})
 					.catch(this.handleError).share();
@@ -97,7 +98,6 @@ export class DataProviderService {
 		}
 		return places;
 	}
-
 	private handleError(error: Response | any) {
 		// In a real world app, we might use a remote logging infrastructure
 		let errMsg: string;

src/app/filter-bar/filter-bar.component.html

-<div class=" filter-bar">
-  <div class="campus-location">
-    <i class="fa fa-map-marker campus-location-icon" aria-hidden="true"></i>
-    <div class="campus-location-text">GMU, Fairfax Campus</div>
-  </div>
-  <div>
-    <!--<i class="fa fa-search search-box-icon" aria-hidden="true"></i>-->
-    <input type="text" class="form-control search-box search-box-text" placeholder="Search a location">
-  </div>
-</div>

src/app/filter-bar/filter-bar.component.scss

-@import '../../global-styles';
-.filter-bar {
-  width: 176.48px;
-  display: flex;
-  flex-direction: column;
-  padding-left: 8px;
-  box-sizing: content-box;
-  background-color: rgba(255,255,255,0);
-  position:absolute;
-}
-
-.search-box {
-  border-width: 1px;
-  border-radius: 4px;
-  width: 157px;
-  height: 31px;
-  border-color: $primary;
-  border-style: solid;
-  padding: 0px;
-  padding-left: 5px;
-}
-
-.input-group {
-  width: 157px;
-  height: 31px;
-  position: relative;
-}
-
-.campus-location {
-  display: flex;
-  flex-direction: row;
-}
-
-.campus-location-icon {
-  margin-right: 8px;
-}

src/app/filter-bar/filter-bar.component.ts

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

src/app/nav-bar/nav-bar.component.html

-<div class="nav-bar">
- <div class="nav-icon"></div>
-<a class="selected-nav nav-link" href="#">What's Open</a>
-<a class="deselected-nav nav-link"href="#">Feedback</a>
-<a class="deselected-nav nav-link"href="#">About</a>
+<!-- <div class="nav-bar"> -->
+<!--  <div class="nav-icon"></div> -->
+<!-- <a class="selected-nav nav-link" href="#">What's Open</a> -->
+<!-- <a class="deselected-nav nav-link"href="#">Feedback</a> -->
+<!-- <a class="deselected-nav nav-link"href="#">About</a> -->
+<!--  -->
+<!-- <i class="fa fa-user-circle fa-2x user-icon"></i> -->
+<!-- <img class="menu-arrow" src="../../assets/menu-arrow.png"> -->
+<!-- </div> -->
+ <div class="nav-bar-background">
+ 	<div class="white-gradient"></div>
+ </div>
 
-<i class="fa fa-user-circle fa-2x user-icon"></i>
-<img class="menu-arrow" src="../../assets/menu-arrow.png">
-</div>

src/app/nav-bar/nav-bar.component.scss

 @import "../../color-palette"; 
 @import "../../text-styles"; 
 
-.nav-icon {
-    height: 40px;
-    width: 40px;
-    margin-right: 17px;
-    margin-left: 24px;
-    background-color: $background-color;
+.nav-bar-background{
+	position: relative;
+	width: 100%;
+	height:55%;
+	top:0px;
+	left:0px;
+	background:#efefef;
+	overflow:hidden;
 }
 
-.nav-link {
-    margin-right: 12px;
+.phone-background{
+	position:absolute;
+	width:1080px;
+	height:1080px;
+	background-color:#006633;
+	top:-248px;
+	left: 700px;
+	border-radius:100%;
+	// opacity:0;
 }
-.nav-bar {
-    background-color: $white;
-    height: 50px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top:0px;
-    // border-radius: 0;
-    // margin-bottom: 0;
-}
-.user-icon {
-    margin-left: auto;
+
+.white-gradient{
+	z-index:5;
+	position:absolute;
+	width: 43%;
+	height:100%;
+	top:0px;
+	right:0px;
+ background: #006633;
+background-image: radial-gradient(48% 50%, rgba(255,255,255,0.54) 51%, rgba(255,255,255,0.00) 100%);
+background-image: radial-gradient(52% 50%, rgba(255,255,255,0.20) 47%, rgba(255,255,255,0.00) 100%);
 }
-.menu-arrow {
-   margin-left: 6px;
-   margin-right: 40px;
-}
\ No newline at end of file
+
+
+

src/app/place-window/area/area.component.html

-<div class="area-card-header">
+<!--<div class="area-card-header">-->
     <!--<div class="hexagon center">
         <div class="hexTop"></div>
         <div class="hexBottom"></div>
     </div>-->
-    <div class="area-title">FAVORITES</div>
-    <hr>
-</div>
+    <!--<div class="area-title">FAVORITES</div>-->
+    <!--<hr>-->
+<!--</div>-->
 <div class="place-card-holder">
     <div *ngFor="let place of places; let i = index;">
         <app-place-card [place]="place"></app-place-card>

src/app/place-window/area/area.component.scss

@@ -5,7 +5,6 @@ $hex-border-color: #C1C7CD;
   width: 60px; 
   height: 34.64px;
   margin: 17.32px 0;
-  background-image: url("../../assets/JC.jpg");
   background-size: auto 64.4323px;
   background-position: center;
   border-left: solid 2.1px $hex-border-color;

src/app/place-window/area/place-card/feedback-dialog/feedback-dialog.component.html

+<h1 md-dialog-title>Dialog</h1>
+<div md-dialog-content>What would you like to do?</div>
+<div md-dialog-actions>
+  <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
+  <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
+</div>