Added material io

package.json

@@ -11,12 +11,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.3",
+    "@angular/animations": "^6.1.10",
+    "@angular/cdk": "^7.0.1",
     "@angular/common": "^6.0.3",
     "@angular/compiler": "^6.0.3",
     "@angular/core": "^6.0.3",
     "@angular/forms": "^6.0.3",
     "@angular/http": "^6.0.3",
+    "@angular/material": "^7.0.1",
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
@@ -28,10 +30,9 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.3",
     "@angular-devkit/build-angular": "~0.6.8",
-    "typescript": "~2.7.2",
     "@angular/cli": "~6.0.8",
+    "@angular/compiler-cli": "^6.0.3",
     "@angular/language-service": "^6.0.3",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
@@ -44,8 +45,9 @@
     "karma-coverage-istanbul-reporter": "~2.0.0",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.3.0",
+    "protractor": "^5.4.1",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1"
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2"
   }
 }

src/app/app.module.ts

@@ -2,6 +2,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule, MatCheckboxModule } from '@angular/material';
 
 import { AppRoutingModule } from './app-routing/app-routing.module';
 
@@ -57,7 +59,10 @@ import { HomeComponent } from './content/image-container/home/home.component';
     BrowserModule,
     HttpModule,
     FormsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatCheckboxModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/content/header/header.component.html

@@ -1,9 +1,9 @@
 <div id="content" class="container-fluid">
   <div class="row">
-    <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
+    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
       <app-search></app-search>
     </div>
-    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
+    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 custom-app-tools">
       <app-tools></app-tools>
     </div>
   </div>

src/app/content/header/header.component.scss

@@ -19,4 +19,8 @@ $theme-supplementer: #5D001E;
 .container-fluid {
     padding-right: 0px;
     padding-left: 0px;
+}
+
+.custom-app-tools {
+    padding: 0;
 }

src/app/content/header/tools/tools.component.html

@@ -1,18 +1,21 @@
 <div class="navbar-collapse" id="navbarSupportedContent">
   <ul class="nav ml-auto">
-    <li id="btnFavorites" class="nav-item">
+    <li id="btnFavorites" class="nav-item float-right">
       <a class="nav-link" href="#">
-        <i class="far fa-star"></i>
+        <i class="material-icons md-light md-36">star</i>
+        <!-- <i class="far fa-star"></i> -->
       </a>
     </li>
-    <li id="btnClearCommand" class="nav-item">
+    <li id="btnClearCommand" class="nav-item float-right">
       <a class="nav-link" href="#">
-        <i class="far fa-trash-alt"></i>
+        <i class="material-icons md-light md-36">delete_outline</i>
+        <!-- <i class="far fa-trash-alt"></i> -->
       </a>
     </li>
-    <li id="btnFireCommand" class="nav-item">
+    <li id="btnFireCommand" class="nav-item float-right">
       <a class="nav-link" href="#">
-        <i class="far fa-paper-plane"></i>
+        <i class="material-icons md-light md-36">arrow_forward_ios</i>
+        <!-- <i class="far fa-paper-plane"></i> -->
       </a>
     </li>
   </ul>

src/app/content/header/tools/tools.component.scss

@@ -22,12 +22,15 @@ a[data-toggle="collapse"] {
 div.navbar-collapse li {
     float: left;
     a.nav-link i.far {
-        color: $theme-supplementer;
+        color: $themeColor-Light;
         font-size: 1.6em;
         padding: 0.2em;
     }
 }
 
+.material-icons.md-light { color: rgba(255, 255, 255, 1); }
+.material-icons.md-36 { font-size: 36px; }
+
 //OVERWRITES
 .nav-link {
     padding: .7rem 0.5rem;

src/app/content/image-container/image-container.component.scss

@@ -1,3 +1,16 @@
 p {
     padding: 20px;
+}
+
+.row { 
+    display: flex; flex-flow: row wrap; 
+} 
+.row:after { 
+    content: ''; width: 100%; 
+} 
+.box { 
+    flex: 1; 
+} 
+.box:nth-of-type(n + 4) { 
+    order: 1; 
 }

src/app/content/image-container/image/image.component.scss

@@ -1,5 +1,11 @@
 //OVERWRITES
+:host {
+    margin: 0 20px;
+    overflow: auto;
+
+}
 .card {
     width: 20rem;
     margin: 20px auto;
+    overflow: auto
 }

src/app/content/image-viewer/image/image.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-image',
   templateUrl: './image.component.html',
-  styleUrls: ['./image.component.css']
+  styleUrls: ['./image.component.scss']
 })
 export class ImageComponent implements OnInit {
 

src/index.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
       crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.css

@@ -0,0 +1 @@
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";