fix(tab-android): blurry font icons (#82)

Author: manoldonev

packages/template-tab-navigation-ng/src/_app-common.scss

@@ -2,8 +2,13 @@
 // This is where the vast majority of your CSS code goes.
 // Font icon class
 .fa {
-   font-family: "FontAwesome";
+    font-family: "FontAwesome";
 }
+
+.t-36 {
+    font-size: 36;
+}
+
 // Common page class
 .page-content {
     .page-placeholder {
@@ -25,4 +30,4 @@
 //Action bar
 ActionBar .action-bar-title {
     horizontal-align: center;
-}
+}

packages/template-tab-navigation-ng/src/app/app.component.html

@@ -17,15 +17,15 @@
                 will "adopt"; any other layout elements you try to specify will be ignored
             -->
             <Label text="Home"></Label>
-            <Image src="font://&#xf015;" class="fa"></Image>
+            <Image src="font://&#xf015;" class="fa t-36"></Image>
         </TabStripItem>
         <TabStripItem>
             <Label text="Browse"></Label>
-            <Image src="font://&#xf1ea;" class="fa"></Image>
+            <Image src="font://&#xf1ea;" class="fa t-36"></Image>
         </TabStripItem>
         <TabStripItem>
             <Label text="Search"></Label>
-            <Image src="font://&#xf002;" class="fa"></Image>
+            <Image src="font://&#xf002;" class="fa t-36"></Image>
         </TabStripItem>
     </TabStrip>
 

packages/template-tab-navigation/app/_app-common.scss

@@ -4,41 +4,46 @@
 .fa {
     font-family: "FontAwesome";
  }
- // Common page class
- .page-content {
-     .page-placeholder {
-         color: $page-icon-color;
-         font-size: $page-content-placeholder-font-size;
-         vertical-align: center;
-         horizontal-align: center;
-     }
-
-     .page-icon {
-         font-size: 72;
-         vertical-align: top;
-         horizontal-align: center;
-         color: $page-icon-color;
-         margin-top: 20%;
-     }
- }
 
- //Action bar
- ActionBar .action-bar-title {
-     horizontal-align: center;
- }
+.t-36 {
+    font-size: 36;
+}
 
- TabStripItem Label {
-     color: $blue-dark;
- }
+// Common page class
+.page-content {
+    .page-placeholder {
+        color: $page-icon-color;
+        font-size: $page-content-placeholder-font-size;
+        vertical-align: center;
+        horizontal-align: center;
+    }
 
- TabStripItem:active Label {
-     color: $item-active-color;
- }
+    .page-icon {
+        font-size: 72;
+        vertical-align: top;
+        horizontal-align: center;
+        color: $page-icon-color;
+        margin-top: 20%;
+    }
+}
 
- TabStripItem Image {
-     color: $blue-dark;
- }
+//Action bar
+ActionBar .action-bar-title {
+    horizontal-align: center;
+}
 
- TabStripItem:active Image {
-     color: $item-active-color;
- }
+TabStripItem Label {
+    color: $blue-dark;
+}
+
+TabStripItem:active Label {
+    color: $item-active-color;
+}
+
+TabStripItem Image {
+    color: $blue-dark;
+}
+
+TabStripItem:active Image {
+    color: $item-active-color;
+}

packages/template-tab-navigation/app/app-root.xml

@@ -25,15 +25,15 @@ https://docs.nativescript.org/angular/ui/ng-ui-widgets/tabs.
                 will "adopt"; any other layout elements you try to specify will be ignored
             -->
             <Label text="Home" />
-            <Image src="font://&#xf015;" class="fa" />
+            <Image src="font://&#xf015;" class="fa t-36" />
         </TabStripItem>
         <TabStripItem>
             <Label text="Browse" />
-            <Image src="font://&#xf1ea;" class="fa" />
+            <Image src="font://&#xf1ea;" class="fa t-36" />
         </TabStripItem>
         <TabStripItem>
             <Label text="Search" />
-            <Image src="font://&#xf002;" class="fa" />
+            <Image src="font://&#xf002;" class="fa t-36" />
         </TabStripItem>
     </TabStrip>