Merge pull request #6568 from topcoder-platform/f2f-30277179-4

Topcoder Reskin - Challenge Icons Colors

Author: dedywahyudi

__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap

@@ -5,15 +5,15 @@ exports[`Matches shallow shapshot 1`] = `
   className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
 >
   <div
-    className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
+    className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
   >
     CH
   </div>
   <a
     href="https://www.topcoder-dev.com/tco"
   >
     <div
-      className="src-shared-components-TrackIcon-___style__hidden___JXTEt"
+      className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7 src-shared-components-TrackIcon-___style__hidden___JXTEt"
     >
       TCO
     </div>
@@ -26,15 +26,15 @@ exports[`Matches shallow shapshot 2`] = `
   className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
 >
   <div
-    className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
+    className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
   >
     CH
   </div>
   <a
     href="https://www.topcoder-dev.com/tco"
   >
     <div
-      className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
+      className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
     >
       TCO
     </div>
@@ -47,15 +47,15 @@ exports[`Matches shallow shapshot 3`] = `
   className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
 >
   <div
-    className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
+    className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
   >
     CH
   </div>
   <a
     href="https://www.topcoder-dev.com/tco"
   >
     <div
-      className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
+      className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
     >
       TCO
     </div>

src/shared/components/TrackIcon/index.jsx

@@ -14,6 +14,10 @@ export default function TrackIcon({
 }) {
   const TCO_URL = `${MAIN_URL}/tco`;
   const trackStyle = track.replace(' ', '-').toLowerCase();
+  let abbreviationStyle = type.abbreviation;
+  if (['CH', 'F2F', 'TSK'].indexOf(abbreviationStyle) < 0) {
+    abbreviationStyle = '';
+  }
   return (
     <span styleName="trackIcon">
       {challengesUrl ? (
@@ -26,13 +30,13 @@ export default function TrackIcon({
         </a>
       ) : (
         <div
-          styleName={`${type.abbreviation} main-icon`}
+          styleName={`${abbreviationStyle} main-icon`}
         >
           {type.abbreviation}
         </div>
       )}
       <a href={`${TCO_URL}`}>
-        <div styleName={`${type.abbreviation} tco-icon ${tcoEligible ? '' : 'hidden'}`}>
+        <div styleName={`${abbreviationStyle} tco-icon ${tcoEligible ? '' : 'hidden'}`}>
           TCO
         </div>
       </a>