made some UI changes and rectified a few typos, included angular material

angular.json

@@ -25,6 +25,9 @@
               "src/manifest.json"
             ],
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               "src/styles.scss"
             ],
             "scripts": []
@@ -75,6 +78,9 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               "styles.scss"
             ],
             "scripts": [],

package.json

@@ -22,6 +22,7 @@
     "@angular/core": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
+    "@angular/material": "^6.4.7",
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/pwa": "^0.6.0",
@@ -33,7 +34,8 @@
     "core-js": "^2.5.4",
     "normalize.css": "^7.0.0",
     "rxjs": "^6.0.0",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.8.26",
+    "@angular/cdk": "^6.2.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.6.0",

src/app/about/about.component.html

@@ -1,11 +1,13 @@
-<h1>NG-Pokédex</h1>
-<p>A open source Pokédex</p>
+<div class="mat-typography">
+<h1 class="mat-display-1">NG-Pokédex</h1>
+<p class="mat-subheading-1">An open source Pokédex</p>
 <ul>
   <li>Open Source built with <a href="https://angular.io">Angular</a></li>
   <li>Data and sprites from the <a href="https://pokeapi.co/">https://pokeapi.co/</a> and
     <a href="http://pokemondb.net/">http://pokemondb.net/</a>.
   </li>
   <li>
-    Insperation from <a href="https://www.pokedex.org/">https://www.pokedex.org/</a>.
+    Inspiration from <a href="https://www.pokedex.org/">https://www.pokedex.org/</a>.
   </li>
 </ul>
+</div>

src/app/about/about.component.scss

@@ -0,0 +1,20 @@
+div{
+    text-align: center;
+    margin-top:60px;
+}
+ul{
+    list-style-type: none;
+
+}
+h1{
+    font-size: 45px;
+}
+li{
+    font-size: 25px;
+}
+p{
+    font-size: 35px;
+}
+a{
+    text-decoration: none;
+}

src/app/app.module.ts

@@ -3,10 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
-
+import { MatInputModule, MatDialogModule } from '@angular/material';
 import { SharedModule } from './common/shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
@@ -17,7 +18,9 @@ import { AppComponent } from './app.component';
     }),
     HttpClientModule,
     SharedModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatInputModule, MatDialogModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/common/shared/components/form-search/form-search.component.html

@@ -1,3 +1,3 @@
 <form [formGroup]="searchForm" class="input">
-  <input type="text" aria-label="Search" placeholder="Search" formControlName="search" />
+  <input matInput type="text" aria-label="Search" placeholder="Search" formControlName="search" />
 </form>

src/app/pokemon/pokemon-detail/pokemon-detail.component.html

@@ -1,5 +1,5 @@
 <ngx-modal [visible]="true" (visibleChange)="close($event)">
-  <div bp="grid" #view *ngIf="pokemon | async; let pokemon">
+  <div bp="grid" #view *ngIf="pokemon | async; let pokemon" class="modal">
     <i bp="5@sm 4@md" [class]="'sprite sprite-' + pokemon.id"></i>
     <div bp="7@sm 8@md">
       <h1>{{pokemon.name}} #{{pokemon.id}}</h1>

src/app/pokemon/pokemon-detail/pokemon-detail.component.scss

@@ -8,7 +8,6 @@ h1 {
 .sprite {
   transform: scale(1.6);
   margin: 20px auto;
-
   @media (min-width: 420px) {
     transform: scale(2);
     margin: 30px auto;

src/app/pokemon/pokemon-list/pokemon-list.component.scss

@@ -5,4 +5,10 @@
 
 .card--media {
   height: 175px;
+  box-shadow: 3px 3px 10px rgb(168, 155, 155);
+  transition:all .2s;
+}
+.card--media:hover{
+  background-color: rgb(250, 255, 255);
+  transform: scale(1.06,1.06);
 }

src/index.html

@@ -1,6 +1,8 @@
 <!doctype html>
 <html lang="en-US">
 <head>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <meta charset="utf-8">
   <title>NG-Pokédex</title>
   <base href="/">

src/styles.scss

@@ -10,4 +10,6 @@
 @import './styles/components/_card';
 @import './styles/components/_inputs';
 @import './styles/components/_modal';
-@import './styles/_sprites';
+@import './styles/_sprites';
+html, body { height: 100%; }
+body { margin: 0; font-family: 'Roboto', sans-serif; }

src/styles/components/_modal.scss

@@ -6,13 +6,17 @@
   button {
     color: $color-white;
     background-color: transparent;
+    outline:none;
 
     &:hover {
       background-color: darken($color-pokedex-red, 5%);
     }
   }
 }
+.ngx-modal{
+    box-shadow: 2px 2px rgb(218, 198, 198);
 
+}
 @media (min-width: 720px) {
   .ngx-modal {
     max-width: 720px !important;