feat(static): adjust about page content

- add more blog links
- change action button styles
- adjust warn color to better fit blue theme

Author: tomastrajan

src/app/static/about/about.component.html

@@ -4,23 +4,43 @@
       <h1>Angular ngRx Material Starter</h1>
       <div class="actions">
         <a [ngClass]="animateOnRouteEnter"
-           mat-raised-button color="primary" routerLink="../features">
-          Check Features
+           mat-raised-button class="actions-main" color="primary" routerLink="../features">
+          Features
         </a>
-        <a mat-raised-button color="accent" routerLink="../examples"
+        <a mat-raised-button class="actions-main" color="accent" routerLink="../examples"
            [ngClass]="animateOnRouteEnter">
-          Check Examples
+          Examples
         </a>
-        <a mat-raised-button routerLink="../settings"
+        <a mat-raised-button class="actions-main" color="warn" routerLink="../settings"
            [ngClass]="animateOnRouteEnter">
-          Change Theme
+          <i class="fa fa-gear"></i> Change Theme
         </a>
-        <span [ngClass]="animateOnRouteEnter">or</span>
+        <br>
+        <span [ngClass]="animateOnRouteEnter">or check blogs about</span>
+        <br>
         <a mat-raised-button
            [ngClass]="animateOnRouteEnter"
            target="_blank"
            href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1">
-          <i class="fa fa-medium"></i> Check Blog Post
+          <i class="fa fa-medium"></i> Material Theming
+        </a>
+        <a mat-raised-button
+           [ngClass]="animateOnRouteEnter"
+           target="_blank"
+           href="https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81">
+          <i class="fa fa-medium"></i> Angular Cli Tips
+        </a>
+        <a mat-raised-button
+           [ngClass]="animateOnRouteEnter"
+           target="_blank"
+           href="https://medium.com/@tomastrajan/object-assign-vs-object-spread-in-angular-ngrx-reducers-3d62ecb4a4b0">
+          <i class="fa fa-medium"></i> Ngrx Typescript Tips
+        </a>
+        <a mat-raised-button
+           [ngClass]="animateOnRouteEnter"
+           target="_blank"
+           href="https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554">
+          <i class="fa fa-medium"></i> App Loading Style
         </a>
       </div>
       <div class="get-started" [ngClass]="animateOnRouteEnter">

src/app/static/about/about.component.scss

@@ -18,11 +18,21 @@
     span {
       display: inline-block;
       font-weight: bold;
-      padding: 10px;
+      padding: 10px 10px 20px 10px;
     }
 
     a {
-      margin: 0 0 10px 0;
+      margin: 0 5px 10px 0;
+
+      &.actions-main {
+        text-transform: uppercase;
+        padding: 3px 24px;
+      }
+
+      i {
+        position: relative;
+        top: -1px;
+      }
     }
   }
 

src/themes/default-theme.scss

@@ -1,5 +1,5 @@
 $anms-primary: mat-palette($mat-indigo, 800, 300, 900);
 $anms-accent: mat-palette($mat-light-blue);
-$anms-warn: mat-palette($mat-deep-orange, A200);
+$anms-warn: mat-palette($mat-deep-orange, 200);
 
 $anms-theme: mat-light-theme($anms-primary, $anms-accent, $anms-warn);