Fix tooltip in challenge listing page

Author: luizrrodrigues

__tests__/shared/components/challenge-listing/Tooltips/__snapshots__/TrackAbbreviationTooltip.jsx.snap

@@ -7,7 +7,7 @@ exports[`Matches shallow shapshot 1`] = `
   content={
     <Tip
       subTrack="CODE"
-      track="DEVELOP"
+      track="development"
     />
   }
   defaultVisible={false}
@@ -37,7 +37,7 @@ exports[`Matches shallow shapshot 2`] = `
   content={
     <Tip
       subTrack="CODE"
-      track="DEVELOP"
+      track="development"
     />
   }
   defaultVisible={false}

src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx

@@ -88,23 +88,17 @@ const HEADER = {
   WIREFRAMES: 'Wireframe (Wf)',
 };
 
-const TRACK_COLOR_CLASS = {
-  DESIGN: 'blue',
-  DEVELOP: 'green',
-  DATA_SCIENCE: 'orange',
-  QA: 'purple',
-};
-
 /**
  * Renders the tooltip's content.
  */
 function Tip({
   subTrack,
   track,
 }) {
+  const trackStyle = track.replace(' ', '-').toLowerCase();
   return (
     <div styleName="track-abbreviation-tooltip">
-      <div styleName={`header ${TRACK_COLOR_CLASS[track]}`}>
+      <div styleName={`header ${trackStyle}`}>
         {HEADER[subTrack]}
       </div>
       <div styleName="body">
@@ -116,7 +110,7 @@ function Tip({
 
 Tip.defaultProps = {
   subTrack: 'CODE',
-  track: 'DEVELOP',
+  track: 'development',
 };
 
 Tip.propTypes = {
@@ -152,7 +146,7 @@ function TrackAbbreviationTooltip({
 
 TrackAbbreviationTooltip.defaultProps = {
   subTrack: 'CODE',
-  track: 'DEVELOP',
+  track: 'development',
 };
 
 TrackAbbreviationTooltip.propTypes = {

src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss

@@ -14,19 +14,19 @@ $track-radius-4: $corner-radius * 2;
     font-weight: 700;
     padding-left: $base-unit * 2;
 
-    &.blue {
+    &.design {
       border-left: $track-radius-4 solid $tc-light-blue;
     }
 
-    &.green {
+    &.development {
       border-left: $track-radius-4 solid $tc-green;
     }
 
-    &.orange {
+    &.data-science {
       border-left: $track-radius-4 solid $tc-orange;
     }
 
-    &.purple {
+    &.quality-assurance {
       border-left: $track-radius-4 solid $tc-purple;
     }
   }