From 3289dd4c191d529f4cb892f9526074965f188a15 Mon Sep 17 00:00:00 2001
From: "Luiz R. Rodrigues" <contato@luizrrodrigues.com.br>
Date: Thu, 6 Aug 2020 19:03:19 -0300
Subject: [PATCH] Fix tooltip in challenge listing page

---
 .../TrackAbbreviationTooltip.jsx.snap              |  4 ++--
 .../Tooltips/TrackAbbreviationTooltip/index.jsx    | 14 ++++----------
 .../Tooltips/TrackAbbreviationTooltip/style.scss   |  8 ++++----
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/__tests__/shared/components/challenge-listing/Tooltips/__snapshots__/TrackAbbreviationTooltip.jsx.snap b/__tests__/shared/components/challenge-listing/Tooltips/__snapshots__/TrackAbbreviationTooltip.jsx.snap
index 45118a90e1..dea04181d5 100644
--- a/__tests__/shared/components/challenge-listing/Tooltips/__snapshots__/TrackAbbreviationTooltip.jsx.snap
+++ b/__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}
diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx
index 026209837e..aab76ff2e6 100644
--- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx
+++ b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx
@@ -88,13 +88,6 @@ const HEADER = {
   WIREFRAMES: 'Wireframe (Wf)',
 };
 
-const TRACK_COLOR_CLASS = {
-  DESIGN: 'blue',
-  DEVELOP: 'green',
-  DATA_SCIENCE: 'orange',
-  QA: 'purple',
-};
-
 /**
  * Renders the tooltip's content.
  */
@@ -102,9 +95,10 @@ 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 = {
diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss
index aab74eb239..6666a51588 100644
--- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss
+++ b/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;
     }
   }