feat(style): priamry color changed and used

Author: smartapant

src/pages/comments/comments.html

@@ -6,7 +6,7 @@
 -->
 <ion-header>
 
-  <ion-navbar>
+  <ion-navbar color="primary">
     <ion-title>Comments</ion-title>
   </ion-navbar>
 
@@ -18,10 +18,10 @@
   <ion-card *ngIf="post.selftext">
     <ion-card-content>
       <p class="selftext">{{post.selftext}}</p>
-      <ion-row class="post-author">
+      <ion-row class="post-info">
         <ion-col center text-left>
-          <ion-note>
-            by {{post.author}}
+          <ion-note class="post-author">
+            {{post.author}}
           </ion-note>
         </ion-col>
         <ion-col center text-right>

src/pages/comments/comments.scss

@@ -1,7 +1,11 @@
 page-comments {
-  .post-author {
+  .post-info {
     font-size: 1.2rem;
     color: #2b2b2b;
+
+    .post-author {
+      color: color($colors, primary);
+    }
   }
 
   .comments-load-spinner {
@@ -11,5 +15,9 @@ page-comments {
     left: 0;
     right: 0;
     bottom: 0;
+
+    * {
+      stroke: color($colors, primary);
+    }
   }
 }

src/pages/comments/commentsList/commentsList.scss

@@ -16,6 +16,10 @@
     .comment-head {
       font-size: 1rem;
       margin-bottom: 5px;
+
+      .comment-author {
+        color: color($colors, primary);
+      }
     }
 
     ion-label {

src/pages/posts/posts.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-navbar>
+  <ion-navbar color="primary">
     <ion-title>
       Ionic2 Reddit Reader
     </ion-title>
@@ -29,7 +29,7 @@
         </ion-note>
       </ion-col>
       <ion-col>
-        <button ion-button icon-left clear small (click)="goToComments(post)">
+        <button ion-button icon-left clear small color="primary" (click)="goToComments(post)">
           <ion-icon name="ios-text-outline"></ion-icon>
           <div>{{post.num_comments}}</div>
         </button>
@@ -38,8 +38,8 @@
   </ion-card>
 
   <ion-infinite-scroll (ionInfinite)="loadMore($event)">
-    <ion-infinite-scroll-content>
-      loadingSpinner="bubbles"
+    <ion-infinite-scroll-content color="primary">
+      loadingSpinner="crescent"
       loadingText="Loading more fun...">
     </ion-infinite-scroll-content>
   </ion-infinite-scroll>

src/pages/posts/posts.scss

@@ -6,6 +6,16 @@ page-posts {
     left: 0;
     right: 0;
     bottom: 0;
+
+    * {
+      stroke: color($colors, primary);
+    }
+  }
+
+  ion-infinite-scroll .infinite-loading-spinner {
+    * {
+      stroke: color($colors, primary);
+    }
   }
 
   .post-title {

src/theme/variables.scss

@@ -23,14 +23,13 @@ $background-color:  #fff;
 // The "primary" color is the only required color in the map.
 
 $colors: (
-  primary:    #387ef5,
+  primary:    #089de3,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,
   dark:       #222
 );
 
-
 // App iOS Variables
 // --------------------------------------------------
 // iOS only Sass variables can go here