Implemented themr buttons for challenge tags

Author: Colinh84

src/shared/components/buttons/index.jsx

@@ -47,6 +47,7 @@ import dangerButton from './danger.scss';
 import defaultButton from './default.scss';
 import primaryDesignButton from './primaryDesign.scss';
 import secondaryButton from './secondary.scss';
+import tagButton from './tags.scss';
 
 /* Generic button, not wrapped by themr, but accepting theme property.
  * In most cases you will want to use some of the themable exports below
@@ -123,4 +124,7 @@ export const PrimaryButton =
 export const SecondaryButton =
   themr('SecondaryButton', secondaryButton)(GenericButton);
 
-export default undefined;
+export const TagButton =
+  themr('TagButton', tagButton)(GenericButton);
+
+  export default undefined;

src/shared/components/buttons/tags.scss

@@ -0,0 +1,39 @@
+/**
+ * Challenge tag button, default style with white text on light blue background.
+ */
+@import "~styles/tc-styles";
+ 
+@mixin feedback {
+  &:active, 
+  &:focus, 
+  &:hover {
+    color: $tc-white;       
+  }
+}
+
+.button {
+  border-radius: 3px;
+  font-family: roboto;
+  font-size: 10px;
+  line-height: 20px;
+  margin: 5px 5px 0 0;
+  display: inline-block;
+  text-align: center;
+  padding: 0 5px;
+  font-weight: 700;
+  color: $tc-white;
+  background-color: $tc-light-blue-10;
+  &,
+  &:visited {
+    color: $tc-white;
+  }
+}
+
+.disabled {
+  background-color: $tc-gray-20;
+}
+
+.link,
+.regular {
+  @include feedback;  
+}

src/shared/components/challenge-detail/Header/ChallengeTags.jsx

@@ -9,8 +9,8 @@
 import React from 'react';
 import PT from 'prop-types';
 import { Link } from 'utils/router';
-
-import './style.scss';
+import style from './style.scss';
+import { TagButton } from 'components/buttons';
 
 export default function ChallengeTags(props) {
   const {
@@ -23,34 +23,34 @@ export default function ChallengeTags(props) {
   } = props;
 
   return (
-    <div styleName="tag-holder">
+    <div>
       {
         subTrack &&
-        <Link
-          onClick={() => setChallengeListingFilter({ subtracks: [subTrack] })}
+        <TagButton
           to="/challenges"
-          styleName={`tag-common ${subTrackStyle}`}
-        >{subTrack}</Link>
+          onClick={() => setChallengeListingFilter({ subtracks: [subTrack] })}
+          theme={{ button: style[subTrackStyle] }}
+        >{subTrack}</TagButton>
       }
       {
         events.map(event => (
-          <a
-            href={`https://${event}.topcoder.com`}
+          <TagButton
+            to={`https://${event}.topcoder.com`}
+            theme={{ button: style[eventStyle] }}
             key={event}
-            styleName={`tag-common  ${eventStyle}`}
-          >{event}</a>
+          >{event}</TagButton>
         ))
       }
       {
         technPlatforms.map(
           tag =>
             (
-              <Link
-                key={tag}
-                onClick={() => setChallengeListingFilter({ tags: [tag] })}
+              <TagButton
                 to="/challenges"
-                styleName="tag-common misc-tag"
-              >{tag}</Link>
+                onClick={() => setChallengeListingFilter({ tags: [tag] })}
+                theme={{ button: style.miscTag }}
+                key={tag}
+              >{tag}</TagButton>
             ),
         )
       }

src/shared/components/challenge-detail/Header/style.scss

@@ -124,33 +124,17 @@
       }
     }
 
-    .tag-holder {
-      .tag-common {
-        border-radius: 3px;
-        font-family: roboto;
-        font-size: 10px;
-        line-height: 20px;
-        margin: 5px 5px 0 0;
-        display: inline-block;
-        text-align: center;
-        padding: 0 5px;
-        font-weight: 700;
-        color: $tc-white;
-        background-color: $tc-light-blue-10;
-      }
-
-      @include design-accent-bg;
-      @include develop-accent-bg;
-      @include datasci-accent-bg;
-      @include design-accent-clr;
-      @include develop-accent-clr;
-      @include datasci-accent-clr;
-
-      .misc-tag {
-        color: $tc-gray-80;
-        background-color: $tc-gray-neutral-dark;
-        cursor: pointer;
-      }
+    @include design-accent-bg;
+    @include develop-accent-bg;
+    @include datasci-accent-bg;
+    @include design-accent-clr;
+    @include develop-accent-clr;
+    @include datasci-accent-clr;
+
+    .miscTag {
+      color: $tc-gray-80;
+      background-color: $tc-gray-neutral-dark;
+      cursor: pointer;
     }
 
     .prizes-ops-container {