Reskin various updates

.circleci/config.yml

@@ -363,14 +363,14 @@ workflows:
           filters:
             branches:
               only:
-                - reskin-profile
+                - free
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
           filters:
             branches:
               only:
-                - reskin-profile
+                - footer-update
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global

__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={`${trackStyle} main-icon`}
+          styleName={`${abbreviationStyle} main-icon`}
         >
           {type.abbreviation}
         </div>
       )}
       <a href={`${TCO_URL}`}>
-        <div styleName={tcoEligible ? `${trackStyle} tco-icon` : 'hidden'}>
+        <div styleName={`${abbreviationStyle} tco-icon ${tcoEligible ? '' : 'hidden'}`}>
           TCO
         </div>
       </a>

src/shared/components/TrackIcon/style.scss

@@ -5,9 +5,6 @@ $track-space-10: $base-unit * 2;
 $track-space-15: $base-unit * 3;
 $track-space-20: $base-unit * 4;
 $track-radius-4: $corner-radius * 2;
-$track-code-green: #35ac35;
-$track-code-blue: #2984bd;
-$track-code-turquose: #0ab88a;
 
 .trackIcon {
   display: flex;
@@ -34,25 +31,16 @@ $track-code-turquose: #0ab88a;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
-    &.design,
-    &.generic {
-      background: $track-code-blue;
-    }
-
-    &.develop,
-    &.development {
+    &.CH {
       background: $track-code-green;
     }
 
-    &.qa,
-    &.quality-assurance {
-      background: $track-code-turquose;
+    &.F2F {
+      background: $track-code-blue;
     }
 
-    &.data_science,
-    &.data-science,
-    &.data {
-      background: $tc-orange-110;
+    &.TSK {
+      background: $track-code-turquose;
     }
   }
 
@@ -69,29 +57,19 @@ $track-code-turquose: #0ab88a;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 
-    &.design,
-    &.generic {
-      color: $tc-light-blue-110;
-      background: $tc-light-blue-10;
-    }
-
-    &.develop,
-    &.development {
-      color: $tc-green-110;
-      background: $tc-green-10;
+    &.CH {
+      color: $track-code-green;
+      background: $track-code-green-light;
     }
 
-    &.qa,
-    &.quality-assurance {
-      color: #0ab88a;
-      background: #c1f5e7;
+    &.F2F {
+      color: $track-code-blue;
+      background: $track-code-blue-light;
     }
 
-    &.data_science,
-    &.data-science,
-    &.data {
-      color: $tc-orange-110;
-      background: $tc-orange-10;
+    &.TSK {
+      color: $track-code-turquose;
+      background: $track-code-turquose-light;
     }
   }
 

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

@@ -13,21 +13,14 @@ import { config } from 'topcoder-react-utils';
 
 import {
   Tag,
-  DataScienceTrackTag,
-  DataScienceTrackEventTag,
-  DesignTrackTag,
-  DesignTrackEventTag,
   DevelopmentTrackTag,
-  DevelopmentTrackEventTag,
-  QATrackTag,
-  QATrackEventTag,
 } 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';
-import style from './style.scss';
+import './style.scss';
 
 export default function ChallengeTags(props) {
   const {
@@ -42,66 +35,59 @@ export default function ChallengeTags(props) {
     openForRegistrationChallenges,
   } = props;
 
-  let EventTag;
-  let TrackTag;
-  switch (track) {
-    case COMPETITION_TRACKS.DS:
-      EventTag = DataScienceTrackEventTag;
-      TrackTag = DataScienceTrackTag;
-      break;
-    case COMPETITION_TRACKS.DES:
-      EventTag = DesignTrackEventTag;
-      TrackTag = DesignTrackTag;
-      break;
-    case COMPETITION_TRACKS.DEV:
-      EventTag = DevelopmentTrackEventTag;
-      TrackTag = DevelopmentTrackTag;
-      break;
-    case COMPETITION_TRACKS.QA:
-      EventTag = QATrackEventTag;
-      TrackTag = QATrackTag;
-      break;
-    default:
-      throw new Error('Wrong competition track value');
-  }
-
-
   const filteredChallenge = _.find(openForRegistrationChallenges, { id: challengeId });
   const matchSkills = filteredChallenge ? filteredChallenge.match_skills || [] : [];
   const matchScore = filteredChallenge ? filteredChallenge.jaccard_index || [] : 0;
 
   const tags = technPlatforms.filter(tag => !matchSkills.includes(tag));
+  const abbreviationName = challengeType ? challengeType.name : null;
+  let abbreviation;
+  switch (abbreviationName) {
+    case 'First2Finish':
+      abbreviation = 'F2F';
+      break;
+    case 'Challenge':
+      abbreviation = 'CH';
+      break;
+    case 'Task':
+      abbreviation = 'TSK';
+      break;
+    default:
+      abbreviation = null;
+  }
 
   return (
     <div>
       {
-        challengeType
-        && (
-          <div styleName={`type-tag ${track === COMPETITION_TRACKS.QA ? 'qa' : ''}`}>
-            <TrackTag
+        abbreviation && (
+          <div styleName={`type-tag ${abbreviation} ${track === COMPETITION_TRACKS.QA ? 'qa' : ''}`}>
+            <Tag
               onClick={() => (
                 setImmediate(() => setChallengeListingFilter(
-                  { types: [challengeType.abbreviation] },
+                  { types: [abbreviation] },
                 ))
               )
               }
-              to={`${challengesUrl}?types[]=${encodeURIComponent(challengeType.abbreviation)}`}
+              to={`${challengesUrl}?types[]=${encodeURIComponent(abbreviation)}`}
             >
-              {challengeType.name}
-            </TrackTag>
+              {abbreviationName}
+            </Tag>
           </div>
         )
       }
       {
-        events.map(event => (
-          <EventTag
-            to={`https://${event}.topcoder.com`}
+        abbreviation ? events.map(event => (
+          <div
             key={event}
-            theme={track === COMPETITION_TRACKS.QA ? { button: style.qaTrackEventTag } : undefined}
+            styleName={`event-tag ${abbreviation}`}
           >
-            {event}
-          </EventTag>
-        ))
+            <Tag
+              to={`https://${event}.topcoder.com`}
+            >
+              {event}
+            </Tag>
+          </div>
+        )) : null
       }
       {
         matchScore > 0 && config.ENABLE_RECOMMENDER && (

src/shared/components/challenge-detail/Header/TabSelector/index.jsx

@@ -39,6 +39,7 @@ export default function ChallengeViewSelector(props) {
     hasRegistered,
     mySubmissions,
     onSort,
+    viewAsTable,
   } = props;
 
   const { type, tags } = challenge;
@@ -85,8 +86,8 @@ export default function ChallengeViewSelector(props) {
     { field: 'Final Score', sort: 'asc', name: 'Final Score: Low to High' },
     { field: 'Provisional Score', sort: 'desc', name: 'Provisional Score: High to Low' },
     { field: 'Provisional Score', sort: 'asc', name: 'Provisional Score: Low to High' },
-    { field: 'Submission Date', sort: 'desc', name: 'Submission Date: New to Old' },
-    { field: 'Submission Date', sort: 'asc', name: 'Submission Date: Old to New' },
+    { field: 'Time', sort: 'desc', name: 'Submission Date: New to Old' },
+    { field: 'Time', sort: 'asc', name: 'Submission Date: Old to New' },
   ];
 
   const MySubmissionsSortOptions = [
@@ -376,7 +377,7 @@ export default function ChallengeViewSelector(props) {
         }
             </div>
             {
-              isSubmissionTabSelected && (
+              isSubmissionTabSelected && !viewAsTable && (
                 <div
                   styleName="mobile-sort-icon"
                   role="button"
@@ -468,4 +469,5 @@ ChallengeViewSelector.propTypes = {
   hasRegistered: PT.bool.isRequired,
   mySubmissions: PT.arrayOf(PT.shape()).isRequired,
   onSort: PT.func.isRequired,
+  viewAsTable: PT.bool.isRequired,
 };

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

@@ -59,6 +59,7 @@ export default function ChallengeHeader(props) {
     mySubmissions,
     openForRegistrationChallenges,
     onSort,
+    viewAsTable,
   } = props;
 
   const {
@@ -479,6 +480,7 @@ export default function ChallengeHeader(props) {
           checkpointCount={checkpointCount}
           mySubmissions={mySubmissions}
           onSort={onSort}
+          viewAsTable={viewAsTable}
         />
       </div>
     </div>
@@ -544,4 +546,5 @@ ChallengeHeader.propTypes = {
   mySubmissions: PT.arrayOf(PT.shape()).isRequired,
   openForRegistrationChallenges: PT.shape().isRequired,
   onSort: PT.func.isRequired,
+  viewAsTable: PT.bool.isRequired,
 };