From 14d2de13bb376f6c247e4070472077a96f8429f7 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 21 Jun 2017 23:37:53 +0300
Subject: [PATCH] fix(aio): fix links on `/about` in Firefox

Fixes #17661
---
 .../contributor/contributor.component.ts      | 24 ++++++-------
 aio/src/styles/2-modules/_contributor.scss    | 34 +++++++------------
 2 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/aio/src/app/embedded/contributor/contributor.component.ts b/aio/src/app/embedded/contributor/contributor.component.ts
index dd275d1a3f..2673c86edc 100644
--- a/aio/src/app/embedded/contributor/contributor.component.ts
+++ b/aio/src/app/embedded/contributor/contributor.component.ts
@@ -13,19 +13,17 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
             <div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
                 <div class="contributor-info">
-                    <button *ngIf="person.bio" >
-                        <a aria-label="View Bio">View Bio</a>
-                    </button>
-                    <button *ngIf="person.twitter" class="icon">
-                        <a href="https://twitter.com/{{person.twitter}}" target="_blank">
-                            <span class="fa fa-twitter fa-2x"></span>
-                        </a>
-                    </button>
-                    <button *ngIf="person.website" class="icon">
-                        <a href="{{person.website}}" target="_blank">
-                            <span class="fa fa-link fa-2x"></span>
-                        </a>
-                    </button>
+                    <a *ngIf="person.bio" md-button>
+                        View Bio
+                    </a>
+                    <a *ngIf="person.twitter" md-button class="icon"
+                        href="https://twitter.com/{{person.twitter}}" target="_blank" (click)="$event.stopPropagation()">
+                        <span class="fa fa-twitter fa-2x"></span>
+                    </a>
+                    <a *ngIf="person.website" md-button class="icon"
+                        href="{{person.website}}" target="_blank" (click)="$event.stopPropagation()">
+                        <span class="fa fa-link fa-2x"></span>
+                    </a>
                 </div>
             </div>
         </div>
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index aeb19ff14b..da4542f8d7 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -69,33 +69,25 @@ aio-contributor {
     opacity: 0;
     border-radius: 50%;
 
-    button {
-      background: none;
-      border: none;
-      padding: 0;
-      margin: 8px;
-      text-transform: uppercase;
-      cursor: pointer;
-
-      &.icon {
-        width: 20px;
-        min-width: 20px;
-      }
-
-    }
-
-    a {
+    [md-button] {
       color: $white;
       font-size: 14px;
       font-weight: 500;
-
-      .fa-2x {
-        font-size: 20px;
-      }
+      margin: 8px;
+      padding: 0;
 
       &:hover {
         color: $lightgray;
       }
+
+      &.icon {
+        min-width: 20px;
+        width: 20px;
+
+        .fa-2x {
+          font-size: 20px;
+        }
+      }
     }
   }
 
@@ -170,7 +162,7 @@ aio-contributor {
     margin: 8px auto;
     border: 2px solid $lightgray;
     transition: all .2s ease-in-out;
-    }
+  }
 
   section {
     font-size: 14px;