From 16bafcef5a68ad1553e4c3de85b98b1e4611681a Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Sun, 3 Dec 2023 11:43:01 +1100
Subject: [PATCH] Remove differentiation for special tags

https://github.com/topcoder-platform/community-app/issues/6943
---
 .../challenge-detail/Header/ChallengeTags.jsx |  27 ++--
 .../challenge-detail/Header/style.scss        | 147 +++---------------
 2 files changed, 38 insertions(+), 136 deletions(-)

diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
index e6092ac0c..2c85a903a 100644
--- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
+++ b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
@@ -16,7 +16,6 @@ import {
   DevelopmentTrackTag,
 } from 'topcoder-react-ui-kit';
 
-import { COMPETITION_TRACKS } from 'utils/tc';
 import VerifiedTag from 'components/challenge-listing/VerifiedTag';
 import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore';
 import { calculateScore } from '../../../utils/challenge-listing/helper';
@@ -27,7 +26,6 @@ export default function ChallengeTags(props) {
     isSelfService,
     challengeId,
     challengesUrl,
-    track,
     challengeType,
     events,
     technPlatforms,
@@ -58,10 +56,10 @@ export default function ChallengeTags(props) {
   }
 
   return (
-    <div>
+    <div styleName="block-tags-container">
       {
         abbreviation && (
-          <div styleName={`type-tag ${abbreviation} ${track === COMPETITION_TRACKS.QA ? 'qa' : ''}`}>
+          <div styleName="tag">
             <Tag
               onClick={() => (
                 setImmediate(() => setChallengeListingFilter(
@@ -80,7 +78,7 @@ export default function ChallengeTags(props) {
         abbreviation ? events.map(event => (
           <div
             key={event}
-            styleName={`event-tag ${abbreviation}`}
+            styleName="tag"
           >
             <Tag
               to={`https://${event}.topcoder.com`}
@@ -99,17 +97,21 @@ export default function ChallengeTags(props) {
       }
       {
         matchSkills.map(item => (
-          <VerifiedTag
-            item={item}
-            challengesUrl={challengesUrl}
-          />
+          <div styleName="tag">
+            <VerifiedTag
+              item={item}
+              challengesUrl={challengesUrl}
+            />
+          </div>
         ))
       }
       {
         isSelfService && (
-          <DevelopmentTrackTag>
-            <span>On Demand</span>
-          </DevelopmentTrackTag>
+          <div styleName="tag">
+            <DevelopmentTrackTag>
+              <span>On Demand</span>
+            </DevelopmentTrackTag>
+          </div>
         )
       }
       {
@@ -163,7 +165,6 @@ ChallengeTags.propTypes = {
   isSelfService: PT.bool,
   challengeId: PT.string.isRequired,
   challengesUrl: PT.string.isRequired,
-  track: PT.string.isRequired,
   events: PT.arrayOf(PT.string),
   technPlatforms: PT.arrayOf(PT.string),
   skills: PT.arrayOf(PT.string),
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 2693efa21..fc6db81ab 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -242,114 +242,6 @@
   }
 }
 
-.type-tag {
-  display: inline-block;
-
-  a {
-    color: $tc-white;
-
-    &:active,
-    &:focus,
-    &:hover {
-      color: $tc-white;
-    }
-  }
-
-  &.CH {
-    a {
-      background: $track-code-green;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $track-code-green;
-      }
-    }
-  }
-
-  &.F2F {
-    a {
-      background: $track-code-blue;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $track-code-blue;
-      }
-    }
-  }
-
-  &.TSK {
-    a {
-      background: $track-code-turquose;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $track-code-turquose;
-      }
-    }
-  }
-}
-
-.event-tag {
-  display: inline-block;
-
-  &.CH {
-    a {
-      background-color: $track-code-green-light;
-      color: $track-code-green;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $track-code-green-light;
-        color: $track-code-green;
-      }
-    }
-  }
-
-  &.F2F {
-    a {
-      background-color: $track-code-blue-light;
-      color: $track-code-blue;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $track-code-blue-light;
-        color: $track-code-blue;
-      }
-    }
-  }
-
-  &.TSK {
-    a {
-      background-color: $track-code-turquose-light;
-      color: $track-code-turquose;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: $track-code-turquose-light;
-        color: $track-code-turquose;
-      }
-    }
-  }
-}
-
-.qa {
-  :global {
-    a {
-      background-color: #0ab88a !important;
-
-      &:hover {
-        background-color: darken(#0ab88a, 10%) !important;
-      }
-    }
-  }
-}
-
 .challenge-outer-container {
   background: $tc-white;
   border-radius: (3 * $corner-radius) (3 * $corner-radius) 0 0;
@@ -759,20 +651,12 @@
   padding: 0;
 }
 
-.qaTrackEventTag {
-  color: #0ab88a;
-  background: #c1f5e7;
-
-  &:active,
-  &:focus,
-  &:hover {
-    color: lighten(#0ab88a, 2%);
-    background: darken(#c1f5e7, 5%);
-  }
-
-  &:visited {
-    color: lighten(#0ab88a, 2%);
-  }
+.block-tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 5px;
+  row-gap: 2px;
+  margin-bottom: 2px;
 }
 
 .skill {
@@ -780,6 +664,7 @@
     color: $color-black-100;
     background-color: $color-black-10 !important;
     border: none;
+    margin: 0;
 
     &:hover {
       background-color: #d4d4d4 !important;
@@ -788,9 +673,25 @@
 }
 
 .tag {
-  & > a {
+  svg {
+    display: none;
+  }
+
+  span {
+    margin-left: 0;
+    color: $color-black-80;
+  }
+
+  div {
+    margin: 0;
+  }
+
+  button,
+  a {
     background-color: white !important;
     border: 1px solid $color-black-60;
+    color: $color-black-80;
+    margin: 0;
 
     &:hover {
       background-color: #d4d4d4 !important;