Fixed icons from ActionBar

Author: jdnichollsc

nativescript/src/_app-common.scss

@@ -10,4 +10,8 @@
 
 .ion-icon {
     font-family: 'Ionicons';
+
+    ActionBar & {
+        font-size: 35;
+    }
 }

src/app/+about/about.module.tns.ts

@@ -1,8 +1,10 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptRouterModule } from 'nativescript-angular';
 import { SHARED_MODULES, COMPONENT_DECLARATIONS } from './about.common';
 
 @NgModule({
     imports: [
+        NativeScriptRouterModule,
         ...SHARED_MODULES,
     ],
     declarations: [

src/app/+about/components/about/about.component.scss

@@ -0,0 +1,5 @@
+img {
+    max-height: 355px;
+    width: auto;
+    margin: 0 auto;
+}

src/app/+about/components/about/about.component.tns.html

@@ -1,4 +1,10 @@
-<GridLayout rows="auto,auto">
-    <Label class="h1 title"
-        text="About me!"></Label>
-</GridLayout>
+<Page>
+    <ActionBar title="About">
+        <ActionItem ios.position="left" [nsRouterLink]="['/home']">
+            <Button class="ion-icon" text="{{ '\uF30C' }}"></Button>
+        </ActionItem>
+    </ActionBar>
+    <GridLayout rows="auto, *">
+        <Label class="h1 title" text="About me!"></Label>
+    </GridLayout>
+</Page>

src/app/home/components/home/home.component.scss

@@ -1,8 +1,5 @@
 img{
     width: auto;
     max-height: 300px;
-}
-
-.ion-icon.contact {
-    font-size: 35;
+    margin: 0 auto;
 }

src/app/home/components/home/home.component.tns.html

@@ -1,7 +1,7 @@
 <Page xmlns:Card="nativescript-cardview">
     <ActionBar title="NativeScript Mobile App, yay!">
-        <ActionItem ios.position="right">
-            <Button class="ion-icon contact" text="{{ '\uf41a' }}" [routerLink]="'/about'"></Button>
+        <ActionItem ios.position="right" [nsRouterLink]="['/about']">
+            <Button class="ion-icon" text="{{ '\uf41a' }}"></Button>
         </ActionItem>
     </ActionBar>
     <scroll-view>

src/app/home/home.module.tns.ts

@@ -1,10 +1,12 @@
 import { NgModule, Optional, SkipSelf, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptRouterModule } from 'nativescript-angular';
 // app
 import { HomeComponent } from './components/home/home.component';
 import { SHARED_MODULES } from './home.common';
 
 @NgModule({
     imports: [
+        NativeScriptRouterModule,
         ...SHARED_MODULES
     ],
     declarations: [HomeComponent],