refactor(teams pages): use classes for icon color

+ use darker color for linkedIn, for accessability

Author: fredrik-lundin

src/app/team/social-sharing/social-sharing.component.html

@@ -1,9 +1,9 @@
 <a *ngIf="!!githubUrl" mat-button [href]="githubUrl">
-  <mat-icon [ngStyle]="{'color': '#6f066f'}" fontSet="fa" fontIcon="fa-github"></mat-icon>
+  <mat-icon class="icon-github" fontSet="fa" fontIcon="fa-github"></mat-icon>
 </a>
 <a *ngIf="!!twitterUrl" mat-button [href]="twitterUrl">
-  <mat-icon [ngStyle]="{'color': '#4073d4'}" fontSet="fa" fontIcon="fa-twitter"></mat-icon>
+  <mat-icon class="icon-twitter" fontSet="fa" fontIcon="fa-twitter"></mat-icon>
 </a>
 <a *ngIf="!!linkedinUrl" mat-button [href]="linkedinUrl">
-  <mat-icon [ngStyle]="{'color': '#4288b3'}" fontSet="fa" fontIcon="fa-linkedin"></mat-icon>
+  <mat-icon class="icon-linkedin" fontSet="fa" fontIcon="fa-linkedin"></mat-icon>
 </a>

src/app/team/social-sharing/social-sharing.component.scss

@@ -1,3 +1,18 @@
+@import "../../../styles/colors";
+
 a.mat-button {
   font-size: 25px;
 }
+
+.icon-github {
+  color: $icon-color-github;
+}
+
+.icon-twitter {
+  color: $icon-color-twitter;
+
+}
+
+.icon-linkedin {
+  color: $icon-color-linkedin;
+}

src/styles/_colors.scss

@@ -0,0 +1,3 @@
+$icon-color-github: #6f066f;
+$icon-color-twitter: #4073d4;
+$icon-color-linkedin: #3D7CA4;