From 0189f74634cc251240807d2192d2b8427ec8515b Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 7 Jun 2022 17:50:12 +0700
Subject: [PATCH 01/37] Revert "improvement(reskin-profile): qa link"

This reverts commit 57c945d1d873aeb5769b12fd30261a8c3db84b21.
---
 .../components/ProfilePage/Activity/ActivityCard/index.jsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
index 505a9215f3..d7028d17f5 100644
--- a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
+++ b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
@@ -42,7 +42,7 @@ const ActivityCard = ({
           subTracks.map((subtrack, index) => (
             <div styleName="sub-track-item" key={index}>
               <span styleName="title">
-                {_.upperFirst(subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ').toLowerCase())}
+                {subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')}
               </span>
 
               <div styleName="right">
@@ -96,7 +96,7 @@ const ActivityCard = ({
                     }
                 <Link
                   styleName="link-button"
-                  to={`/members/${handle}/details/?track=${trackName === 'QA' ? 'DEVELOP' : trackName}&subTrack=${subtrack.name.replace(' ', '_')}`}
+                  to={`/members/${handle}/details/?track=${trackName}&subTrack=${subtrack.name.replace(' ', '_')}`}
                 >
                   <LinkButton />
                 </Link>

From eb42961a7bd4ffacf911f786e192d8152677bc5d Mon Sep 17 00:00:00 2001
From: diazz <dat.nguyen.supper@gmail.com>
Date: Tue, 28 Jun 2022 19:05:27 +0700
Subject: [PATCH 02/37] Challenge Icons Colors

---
 .../TrackIcon/__snapshots__/index.jsx.snap    | 12 +--
 src/shared/components/TrackIcon/index.jsx     |  8 +-
 src/shared/components/TrackIcon/style.scss    | 50 +++-------
 .../challenge-detail/Header/ChallengeTags.jsx | 80 +++++++---------
 .../challenge-detail/Header/style.scss        | 93 +++++++++++++++++++
 src/styles/_mixins/_variables.scss            |  8 ++
 6 files changed, 160 insertions(+), 91 deletions(-)

diff --git a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
index ffff9deca3..e7b8818dcb 100644
--- a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
@@ -5,7 +5,7 @@ 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>
@@ -13,7 +13,7 @@ exports[`Matches shallow shapshot 1`] = `
     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,7 +26,7 @@ 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>
@@ -34,7 +34,7 @@ exports[`Matches shallow shapshot 2`] = `
     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,7 +47,7 @@ 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>
@@ -55,7 +55,7 @@ exports[`Matches shallow shapshot 3`] = `
     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>
diff --git a/src/shared/components/TrackIcon/index.jsx b/src/shared/components/TrackIcon/index.jsx
index 411c71bf60..3553d8cf55 100644
--- a/src/shared/components/TrackIcon/index.jsx
+++ b/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>
diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss
index 62ef3d0b69..e8eb09ffab 100644
--- a/src/shared/components/TrackIcon/style.scss
+++ b/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;
     }
   }
 
diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
index e9150ce43f..4c211c9c8e 100644
--- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
+++ b/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 && (
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 341a5372e7..16115573b9 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 @import '~styles/mixins';
 
 .challengeAction {
@@ -159,6 +160,98 @@
 
 .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 {
diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss
index 1d0be4396c..0acd0a36f6 100644
--- a/src/styles/_mixins/_variables.scss
+++ b/src/styles/_mixins/_variables.scss
@@ -45,3 +45,11 @@ $listing-avatar-white: #f0f0f0;
 $profile-skill-badge: #227681;
 $profile-member-wins: #1e94a3;
 $profile-border-gray: #e9e9e9;
+
+/* track color */
+$track-code-green: #35ac35;
+$track-code-green-light: #d8fdd8;
+$track-code-blue: #2984bd;
+$track-code-blue-light: #bae1f9;
+$track-code-turquose: #0ab88a;
+$track-code-turquose-light: #c1f5e7;

From eb11611e15230a94522a476ce46c0bd9a82c70e5 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Thu, 7 Jul 2022 15:49:15 +0700
Subject: [PATCH 03/37] ci: set reskin to qa & beta

---
 .circleci/config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 62b48152fc..34ea11b470 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -363,7 +363,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - reskin
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
@@ -371,7 +371,7 @@ workflows:
             branches:
               only:
                 - footer-update
-                - reskin-profile
+                - reskin
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global

From 41a5f7afdd13087f1f134aaf3f985a007ef24886 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 8 Jul 2022 14:21:32 +0700
Subject: [PATCH 04/37] improvement(reskin): mm submission mobile

---
 .../Header/TabSelector/index.jsx              |   4 +-
 .../challenge-detail/Header/index.jsx         |   3 +
 .../Submissions/SubmissionRow/index.jsx       |  37 +++----
 .../Submissions/SubmissionRow/style.scss      | 101 +++++++++++++++---
 .../challenge-detail/Submissions/index.jsx    |  39 +++++--
 .../challenge-detail/Submissions/style.scss   |  58 ++++++++++
 .../icons/view-as-list-active.svg             |   4 +
 .../icons/view-as-list-inactive.svg           |   4 +
 .../icons/view-as-table-active.svg            |   4 +
 .../icons/view-as-table-inactive.svg          |   4 +
 .../containers/challenge-detail/index.jsx     |   5 +
 11 files changed, 223 insertions(+), 40 deletions(-)
 create mode 100644 src/shared/components/challenge-detail/icons/view-as-list-active.svg
 create mode 100644 src/shared/components/challenge-detail/icons/view-as-list-inactive.svg
 create mode 100644 src/shared/components/challenge-detail/icons/view-as-table-active.svg
 create mode 100644 src/shared/components/challenge-detail/icons/view-as-table-inactive.svg

diff --git a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
index 4b23fda667..c3d3fada3e 100644
--- a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
+++ b/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;
@@ -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,
 };
diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx
index 0d11a811ee..08a055d3a4 100644
--- a/src/shared/components/challenge-detail/Header/index.jsx
+++ b/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,
 };
diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx
index d9de9b9717..b7e550869f 100644
--- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx
+++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx
@@ -20,7 +20,7 @@ import style from './style.scss';
 
 export default function SubmissionRow({
   isMM, openHistory, member, submissions, score, toggleHistory,
-  isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating,
+  isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating, viewAsTable,
 }) {
   const {
     submissionTime, provisionalScore, status, submissionId,
@@ -59,19 +59,19 @@ export default function SubmissionRow({
   };
 
   return (
-    <div styleName="wrapper">
+    <div styleName={`wrapper ${viewAsTable ? 'wrapper-as-table' : ''} `}>
       <div styleName="row">
         {
           isMM ? (
             <React.Fragment>
-              <div styleName="col-1 col">
-                <div styleName="mobile-header">FINAL RANK</div>
+              <div styleName={`col-1 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
+                <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>FINAL RANK</div>
                 {
                     isReviewPhaseComplete ? finalRank || 'N/A' : 'N/A'
                   }
               </div>
-              <div styleName="mobile-header">PROVISIONAL RANK</div>
-              <div styleName="col-2 col">
+              <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>PROVISIONAL RANK</div>
+              <div styleName={`col-2 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
                 <div>
                   { provisionalRank || 'N/A' }
                 </div>
@@ -79,14 +79,14 @@ export default function SubmissionRow({
             </React.Fragment>
           ) : null
         }
-        <div styleName="col-3 col">
-          <div styleName="mobile-header">RATING</div>
+        <div styleName={`col-3 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
+          <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>RATING</div>
           <span styleName={`col level-${getRatingLevel(rating)}`}>
             {rating || '-'}
           </span>
         </div>
-        <div styleName="col-4 col">
-          <div styleName="mobile-header">USERNAME</div>
+        <div styleName={`col-4 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
+          <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>USERNAME</div>
           <a
             href={`${window.origin}/members/${member}`}
             target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
@@ -96,26 +96,26 @@ export default function SubmissionRow({
             {member || '-'}
           </a>
         </div>
-        <div styleName="col-5 col">
-          <div styleName="mobile-header">FINAL SCORE</div>
+        <div styleName={`col-5 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
+          <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>FINAL SCORE</div>
           <div>
             {getFinalReviewResult()}
           </div>
         </div>
-        <div styleName="col-6 col">
-          <div styleName="mobile-header">PROVISIONAL SCORE</div>
+        <div styleName={`col-6 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
+          <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>PROVISIONAL SCORE</div>
           <div>
             {getInitialReviewResult() ? getInitialReviewResult() : 'N/A'}
           </div>
         </div>
-        <div styleName="col-7 col">
-          <div styleName="mobile-header">SUBMISSION DATE</div>
+        <div styleName={`col-7 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
+          <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>SUBMISSION DATE</div>
           <div styleName="time">
             {moment(submissionTime).format('DD MMM YYYY')} {moment(submissionTime).format('HH:mm:ss')}
           </div>
         </div>
-        <div styleName="col-8 col">
-          <div styleName="mobile-header">ACTIONS</div>
+        <div styleName={`col-8 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
+          <div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>ACTIONS</div>
           <a
             onClick={toggleHistory}
             onKeyPress={toggleHistory}
@@ -240,4 +240,5 @@ SubmissionRow.propTypes = {
   finalRank: PT.number,
   provisionalRank: PT.number,
   onShowPopup: PT.func.isRequired,
+  viewAsTable: PT.bool.isRequired,
 };
diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss
index ccd936c617..5c0046d2dd 100644
--- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss
+++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss
@@ -63,6 +63,24 @@
   }
 }
 
+.wrapper-as-table {
+  @include xs-to-sm {
+    min-width: 1920px !important;
+  }
+
+  .row {
+    @include xs-to-sm {
+      flex-direction: row !important;
+      border-top: 1px solid $tc-gray-10 !important;
+      margin-left: 0 !important;
+      margin-top: 0 !important;
+      margin-right: 0 !important;
+      padding-top: 16px !important;
+      padding-bottom: 16px !important;
+    }
+  }
+}
+
 .wrapper {
   a { cursor: pointer; }
 
@@ -125,6 +143,66 @@
     }
   }
 
+  .col-view-as-table {
+    @include xs-to-sm {
+      @include roboto-medium;
+
+      color: #2a2a2a;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
+      text-align: left;
+    }
+
+    &.col-1 {
+      @include xs-to-sm {
+        flex: 39 !important;
+      }
+    }
+
+    &.col-2 {
+      @include xs-to-sm {
+        flex: 37 !important;
+      }
+    }
+
+    &.col-3 {
+      @include xs-to-sm {
+        flex: 74 !important;
+      }
+    }
+
+    &.col-4 {
+      @include xs-to-sm {
+        flex: 15 !important;
+      }
+    }
+
+    &.col-5 {
+      @include xs-to-sm {
+        flex: 22 !important;
+      }
+    }
+
+    &.col-6 {
+      @include xs-to-sm {
+        flex: 38 !important;
+      }
+    }
+
+    &.col-7 {
+      @include xs-to-sm {
+        flex: 35 !important;
+      }
+    }
+
+    &.col-8 {
+      @include xs-to-sm {
+        flex: 25 !important;
+      }
+    }
+  }
+
   .col {
     @include roboto-medium;
 
@@ -273,21 +351,6 @@ hr {
   }
 }
 
-.container {
-  width: 750px !important;
-  border-radius: 8px;
-
-  @include xs-to-sm {
-    width: 100%;
-    margin: 0;
-    max-width: 100vw;
-    height: 100%;
-    max-height: 100vh;
-    padding: 24px 16px;
-    z-index: 999999;
-  }
-}
-
 .close-btn {
   cursor: pointer;
   display: flex;
@@ -315,6 +378,14 @@ hr {
   }
 }
 
+.view-as-table-header {
+  display: none !important;
+
+  @include xs-to-sm {
+    display: none !important;
+  }
+}
+
 .mobile-header {
   display: none;
 
diff --git a/src/shared/components/challenge-detail/Submissions/index.jsx b/src/shared/components/challenge-detail/Submissions/index.jsx
index fa884e88d6..d0dfe0fcb1 100644
--- a/src/shared/components/challenge-detail/Submissions/index.jsx
+++ b/src/shared/components/challenge-detail/Submissions/index.jsx
@@ -22,6 +22,10 @@ import challengeDetailsActions from 'actions/page/challenge-details';
 import LoadingIndicator from 'components/LoadingIndicator';
 import { goToLogin, getRatingLevel } from 'utils/tc';
 import Lock from '../icons/lock.svg';
+import ViewAsListActive from '../icons/view-as-list-active.svg';
+import ViewAsListInactive from '../icons/view-as-list-inactive.svg';
+import ViewAsTableActive from '../icons/view-as-table-active.svg';
+import ViewAsTableInactive from '../icons/view-as-table-inactive.svg';
 import SubmissionRow from './SubmissionRow';
 import SubmissionInformationModal from './SubmissionInformationModal';
 import style from './style.scss';
@@ -284,6 +288,8 @@ class SubmissionsComponent extends React.Component {
       unregistering,
       isLegacyMM,
       challengesUrl,
+      viewAsTable,
+      setViewAsTable,
     } = this.props;
     const {
       checkpoints,
@@ -439,7 +445,24 @@ class SubmissionsComponent extends React.Component {
 
     return (
       <div styleName={`container dev ${isMM ? 'mm' : 'non-mm'}`}>
-        {
+        <div styleName="view-as">
+          <span styleName="title">View as</span>
+          {
+            viewAsTable ? (
+              <React.Fragment>
+                <ViewAsTableActive styleName="table-icon" onClick={() => setViewAsTable(true)} />
+                <ViewAsListInactive styleName="list-icon" onClick={() => setViewAsTable(false)} />
+              </React.Fragment>
+            ) : (
+              <React.Fragment>
+                <ViewAsTableInactive styleName="table-icon" onClick={() => setViewAsTable(true)} />
+                <ViewAsListActive styleName="list-icon" onClick={() => setViewAsTable(false)} />
+              </React.Fragment>
+            )
+          }
+        </div>
+        <div styleName={`${viewAsTable ? 'view-as-table' : ''}`}>
+          {
             !isMM && (
               <div styleName="head">
                 {
@@ -564,9 +587,9 @@ class SubmissionsComponent extends React.Component {
               </div>
             )
           }
-        {
+          {
             isMM && (
-              <div styleName="sub-head">
+              <div styleName={`sub-head ${viewAsTable ? 'sub-head-table' : ''}`}>
                 <div styleName="col-1 col">
                   <button
                     type="button"
@@ -748,7 +771,7 @@ class SubmissionsComponent extends React.Component {
               </div>
             )
           }
-        {
+          {
             isMM && (
               sortedSubmissions.map((submission, index) => (
                 <SubmissionRow
@@ -765,11 +788,12 @@ class SubmissionsComponent extends React.Component {
                   getFlagFirstTry={this.getFlagFirstTry}
                   onGetFlagImageFail={onGetFlagImageFail}
                   submissionDetail={submission}
+                  viewAsTable={viewAsTable}
                 />
               ))
             )
           }
-        {
+          {
             !isMM && (
               sortedSubmissions.map(s => (
                 <div key={_.get(s.registrant, 'memberHandle', '') + s.created} styleName="row">
@@ -824,9 +848,10 @@ class SubmissionsComponent extends React.Component {
               ))
             )
           }
-        {
+          {
           isMM && <div styleName="bottom-line" />
         }
+        </div>
         {isMM && (
           <div styleName="btn-add-submission">
             <Button
@@ -903,6 +928,8 @@ SubmissionsComponent.propTypes = {
   submissionEnded: PT.bool.isRequired,
   isLegacyMM: PT.bool.isRequired,
   challengesUrl: PT.string.isRequired,
+  viewAsTable: PT.bool.isRequired,
+  setViewAsTable: PT.func.isRequired,
 };
 
 function mapDispatchToProps(dispatch) {
diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss
index 7b0f694d61..c928b6a333 100644
--- a/src/shared/components/challenge-detail/Submissions/style.scss
+++ b/src/shared/components/challenge-detail/Submissions/style.scss
@@ -153,6 +153,20 @@
     }
   }
 
+  .sub-head-table {
+    @include xs-to-sm {
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 15px;
+      padding-bottom: 17px;
+      padding-top: 14px;
+      color: $tc-gray-50;
+      display: flex !important;
+      margin-top: 20px;
+      min-width: 1920px !important;
+    }
+  }
+
   .sub-head {
     font-weight: 500;
     font-size: 13px;
@@ -287,6 +301,14 @@
     @include xs-to-sm {
       margin: 0 16px;
     }
+
+    .row {
+      @include xs-to-sm {
+        &:last-child {
+          border-bottom: 0 !important;
+        }
+      }
+    }
   }
 
   &.non-mm {
@@ -554,3 +576,39 @@
     margin: 16px 16px 0 16px;
   }
 }
+
+.view-as {
+  display: none;
+
+  @include xs-to-sm {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 30px;
+    margin-bottom: -15px;
+  }
+
+  span.title {
+    @include roboto-bold;
+
+    font-weight: 500;
+    font-size: 11px;
+    line-height: 10px;
+    color: $listing-placeholder-gray;
+    display: flex;
+    margin-right: 8px;
+    margin-top: 10px;
+  }
+
+  .table-icon {
+    margin-right: 10px;
+  }
+
+  .list-icon {
+    margin-right: 15px;
+  }
+}
+
+.view-as-table {
+  overflow-y: scroll;
+  margin-top: 20px;
+}
diff --git a/src/shared/components/challenge-detail/icons/view-as-list-active.svg b/src/shared/components/challenge-detail/icons/view-as-list-active.svg
new file mode 100644
index 0000000000..7fbf0138cc
--- /dev/null
+++ b/src/shared/components/challenge-detail/icons/view-as-list-active.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="4" fill="#137D60"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 8C5 7.44772 5.44772 7 6 7H22C22.5523 7 23 7.44772 23 8C23 8.55228 22.5523 9 22 9H6C5.44772 9 5 8.55228 5 8ZM5 12C5 11.4477 5.44772 11 6 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H6C5.44772 13 5 12.5523 5 12ZM5 16C5 15.4477 5.44772 15 6 15H22C22.5523 15 23 15.4477 23 16C23 16.5523 22.5523 17 22 17H6C5.44772 17 5 16.5523 5 16ZM5 20C5 19.4477 5.44772 19 6 19H22C22.5523 19 23 19.4477 23 20C23 20.5523 22.5523 21 22 21H6C5.44772 21 5 20.5523 5 20Z" fill="white"/>
+</svg>
diff --git a/src/shared/components/challenge-detail/icons/view-as-list-inactive.svg b/src/shared/components/challenge-detail/icons/view-as-list-inactive.svg
new file mode 100644
index 0000000000..fca187ceee
--- /dev/null
+++ b/src/shared/components/challenge-detail/icons/view-as-list-inactive.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 8C5 7.44772 5.44772 7 6 7H22C22.5523 7 23 7.44772 23 8C23 8.55228 22.5523 9 22 9H6C5.44772 9 5 8.55228 5 8ZM5 12C5 11.4477 5.44772 11 6 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H6C5.44772 13 5 12.5523 5 12ZM5 16C5 15.4477 5.44772 15 6 15H22C22.5523 15 23 15.4477 23 16C23 16.5523 22.5523 17 22 17H6C5.44772 17 5 16.5523 5 16ZM5 20C5 19.4477 5.44772 19 6 19H22C22.5523 19 23 19.4477 23 20C23 20.5523 22.5523 21 22 21H6C5.44772 21 5 20.5523 5 20Z" fill="#AAAAAA"/>
+<rect x="1" y="1" width="26" height="26" rx="3" stroke="#AAAAAA" stroke-width="2"/>
+</svg>
diff --git a/src/shared/components/challenge-detail/icons/view-as-table-active.svg b/src/shared/components/challenge-detail/icons/view-as-table-active.svg
new file mode 100644
index 0000000000..b7b99a138a
--- /dev/null
+++ b/src/shared/components/challenge-detail/icons/view-as-table-active.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="4" fill="#137D60"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 10C4 8.34315 5.34315 7 7 7H21C22.6569 7 24 8.34315 24 10V18C24 19.6569 22.6569 21 21 21H7C5.34315 21 4 19.6569 4 18V10ZM7 9C6.44772 9 6 9.44772 6 10V11H22V10C22 9.44772 21.5523 9 21 9H7ZM22 13H15V15H22V13ZM22 17H15V19H21C21.5523 19 22 18.5523 22 18V17ZM13 19V17H6V18C6 18.5523 6.44772 19 7 19H13ZM6 15H13V13H6V15Z" fill="white"/>
+</svg>
diff --git a/src/shared/components/challenge-detail/icons/view-as-table-inactive.svg b/src/shared/components/challenge-detail/icons/view-as-table-inactive.svg
new file mode 100644
index 0000000000..3df91db6ca
--- /dev/null
+++ b/src/shared/components/challenge-detail/icons/view-as-table-inactive.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 10C4 8.34315 5.34315 7 7 7H21C22.6569 7 24 8.34315 24 10V18C24 19.6569 22.6569 21 21 21H7C5.34315 21 4 19.6569 4 18V10ZM7 9C6.44772 9 6 9.44772 6 10V11H22V10C22 9.44772 21.5523 9 21 9H7ZM22 13H15V15H22V13ZM22 17H15V19H21C21.5523 19 22 18.5523 22 18V17ZM13 19V17H6V18C6 18.5523 6.44772 19 7 19H13ZM6 15H13V13H6V15Z" fill="#AAAAAA"/>
+<rect x="1" y="1" width="26" height="26" rx="3" stroke="#AAAAAA" stroke-width="2"/>
+</svg>
diff --git a/src/shared/containers/challenge-detail/index.jsx b/src/shared/containers/challenge-detail/index.jsx
index 2099b921bf..7a30fb13c7 100644
--- a/src/shared/containers/challenge-detail/index.jsx
+++ b/src/shared/containers/challenge-detail/index.jsx
@@ -139,6 +139,7 @@ class ChallengeDetailPageContainer extends React.Component {
         sort: '',
       },
       notFoundCountryFlagUrl: {},
+      viewAsTable: false,
     };
 
     this.instanceId = shortId();
@@ -365,6 +366,7 @@ class ChallengeDetailPageContainer extends React.Component {
       submissionsSort,
       notFoundCountryFlagUrl,
       mySubmissionsSort,
+      viewAsTable,
     } = this.state;
 
     const {
@@ -481,6 +483,7 @@ class ChallengeDetailPageContainer extends React.Component {
               submissionEnded={submissionEnded}
               mySubmissions={challenge.isRegistered ? mySubmissions : []}
               openForRegistrationChallenges={openForRegistrationChallenges}
+              viewAsTable={viewAsTable}
               onSort={(currenctSelected, sort) => {
                 if (currenctSelected === 'submissions') {
                   this.setState({ submissionsSort: sort });
@@ -568,6 +571,8 @@ class ChallengeDetailPageContainer extends React.Component {
                 isLegacyMM={isLegacyMM}
                 submissionEnded={submissionEnded}
                 challengesUrl={challengesUrl}
+                viewAsTable={viewAsTable}
+                setViewAsTable={value => this.setState({ viewAsTable: value })}
               />
             )
           }

From a6c2138a70a041a3aea13969bcbc8c3d6173e642 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 13 Jul 2022 09:28:58 +0700
Subject: [PATCH 05/37] improvement(reskin): mm swap toggle view

---
 .../Submissions/SubmissionRow/style.scss      |  4 +--
 .../challenge-detail/Submissions/index.jsx    | 36 ++++++++++---------
 .../challenge-detail/Submissions/style.scss   |  7 ++--
 .../containers/challenge-detail/index.jsx     |  4 +--
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss
index 5c0046d2dd..67703ed926 100644
--- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss
+++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss
@@ -94,9 +94,9 @@
       flex-direction: column;
       border-top: 1px solid #e9e9e9;
       border-bottom: 0;
-      margin-left: 16px;
+      margin-left: 0;
       margin-top: 25px;
-      margin-right: 34px;
+      margin-right: 15px;
     }
 
     &.no-border {
diff --git a/src/shared/components/challenge-detail/Submissions/index.jsx b/src/shared/components/challenge-detail/Submissions/index.jsx
index d0dfe0fcb1..5716943d12 100644
--- a/src/shared/components/challenge-detail/Submissions/index.jsx
+++ b/src/shared/components/challenge-detail/Submissions/index.jsx
@@ -445,22 +445,26 @@ class SubmissionsComponent extends React.Component {
 
     return (
       <div styleName={`container dev ${isMM ? 'mm' : 'non-mm'}`}>
-        <div styleName="view-as">
-          <span styleName="title">View as</span>
-          {
-            viewAsTable ? (
-              <React.Fragment>
-                <ViewAsTableActive styleName="table-icon" onClick={() => setViewAsTable(true)} />
-                <ViewAsListInactive styleName="list-icon" onClick={() => setViewAsTable(false)} />
-              </React.Fragment>
-            ) : (
-              <React.Fragment>
-                <ViewAsTableInactive styleName="table-icon" onClick={() => setViewAsTable(true)} />
-                <ViewAsListActive styleName="list-icon" onClick={() => setViewAsTable(false)} />
-              </React.Fragment>
-            )
-          }
-        </div>
+        {
+          isMM ? (
+            <div styleName="view-as">
+              <span styleName="title">View as</span>
+              {
+                viewAsTable ? (
+                  <React.Fragment>
+                    <ViewAsListInactive styleName="list-icon" onClick={() => setViewAsTable(false)} />
+                    <ViewAsTableActive styleName="table-icon" onClick={() => setViewAsTable(true)} />
+                  </React.Fragment>
+                ) : (
+                  <React.Fragment>
+                    <ViewAsListActive styleName="list-icon" onClick={() => setViewAsTable(false)} />
+                    <ViewAsTableInactive styleName="table-icon" onClick={() => setViewAsTable(true)} />
+                  </React.Fragment>
+                )
+              }
+            </div>
+          ) : null
+        }
         <div styleName={`${viewAsTable ? 'view-as-table' : ''}`}>
           {
             !isMM && (
diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss
index c928b6a333..76185c7ff6 100644
--- a/src/shared/components/challenge-detail/Submissions/style.scss
+++ b/src/shared/components/challenge-detail/Submissions/style.scss
@@ -348,7 +348,7 @@
 
       @include xs-to-sm {
         flex-direction: column;
-        margin: 0 16px;
+        margin: 0 16px 0 0;
         border-top: 1px solid #e9e9e9;
       }
     }
@@ -600,15 +600,16 @@
   }
 
   .table-icon {
-    margin-right: 10px;
+    margin-right: 15px;
   }
 
   .list-icon {
-    margin-right: 15px;
+    margin-right: 10px;
   }
 }
 
 .view-as-table {
   overflow-y: scroll;
   margin-top: 20px;
+  margin-right: 15px;
 }
diff --git a/src/shared/containers/challenge-detail/index.jsx b/src/shared/containers/challenge-detail/index.jsx
index 7a30fb13c7..79630fe3f2 100644
--- a/src/shared/containers/challenge-detail/index.jsx
+++ b/src/shared/containers/challenge-detail/index.jsx
@@ -483,7 +483,7 @@ class ChallengeDetailPageContainer extends React.Component {
               submissionEnded={submissionEnded}
               mySubmissions={challenge.isRegistered ? mySubmissions : []}
               openForRegistrationChallenges={openForRegistrationChallenges}
-              viewAsTable={viewAsTable}
+              viewAsTable={viewAsTable && isMM}
               onSort={(currenctSelected, sort) => {
                 if (currenctSelected === 'submissions') {
                   this.setState({ submissionsSort: sort });
@@ -571,7 +571,7 @@ class ChallengeDetailPageContainer extends React.Component {
                 isLegacyMM={isLegacyMM}
                 submissionEnded={submissionEnded}
                 challengesUrl={challengesUrl}
-                viewAsTable={viewAsTable}
+                viewAsTable={viewAsTable && isMM}
                 setViewAsTable={value => this.setState({ viewAsTable: value })}
               />
             )

From a79577863e43a38e5bc0861cdfcd2d9d2dc46423 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 15 Jul 2022 10:51:02 +0700
Subject: [PATCH 06/37] improvement(reskin): sort by mm submission

---
 .../components/challenge-detail/Header/TabSelector/index.jsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
index c3d3fada3e..b01cb53702 100644
--- a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
+++ b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx
@@ -86,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 = [

From 70f6cc3a25754eaa121e3b7f8dc828e562095024 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 15 Jun 2022 12:53:09 +0700
Subject: [PATCH 07/37] improvement(reskin-profile): change modal bg

---
 src/shared/components/Contentful/Modal/modal-styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/Contentful/Modal/modal-styles.scss b/src/shared/components/Contentful/Modal/modal-styles.scss
index 8e3bf60873..079fb0f815 100644
--- a/src/shared/components/Contentful/Modal/modal-styles.scss
+++ b/src/shared/components/Contentful/Modal/modal-styles.scss
@@ -37,7 +37,7 @@ $light-gray: #d4d4d4;
 }
 
 .overlay {
-  background-color: #2a2a2a;
+  background-color: #000000;
   opacity: 0.95;
   border: none;
   height: 100%;

From 0fa8dd90d525fcfb1200742569ab1134ee967774 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 15 Jun 2022 13:29:14 +0700
Subject: [PATCH 08/37] improvement(reskin-profile): change to #000

---
 src/shared/components/Contentful/Modal/modal-styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/Contentful/Modal/modal-styles.scss b/src/shared/components/Contentful/Modal/modal-styles.scss
index 079fb0f815..7b997d5921 100644
--- a/src/shared/components/Contentful/Modal/modal-styles.scss
+++ b/src/shared/components/Contentful/Modal/modal-styles.scss
@@ -37,7 +37,7 @@ $light-gray: #d4d4d4;
 }
 
 .overlay {
-  background-color: #000000;
+  background-color: #000;
   opacity: 0.95;
   border: none;
   height: 100%;

From b64338c392458952deff5a74861ce33721dccfbb Mon Sep 17 00:00:00 2001
From: Rakib Ansary Saikot <rakibansary@gmail.com>
Date: Wed, 15 Jun 2022 14:37:24 +0600
Subject: [PATCH 09/37] ci: deploy to QA

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 42ec7a0c28..61ab6608c4 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -364,7 +364,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - reskin-profile
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

From 72262e960dd6501873dfdd1c1f1a5eca9dafc7eb Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 17 Jun 2022 15:54:59 +0700
Subject: [PATCH 10/37] improvement(reskin-profile): edit page title

---
 .../ProfilePage/Activity/ActivityCard/index.jsx        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
index 6bc5058817..ab014ee265 100644
--- a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
+++ b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
@@ -83,7 +83,15 @@ const ActivityCard = ({
           subTracks.map((subtrack, index) => (
             <div styleName="sub-track-item" key={index}>
               <span styleName="title">
-                {_.upperFirst(subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ').toLowerCase())}
+                {(_.upperFirst(subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ').toLowerCase()))
+                  .replace('First2finish', 'First2Finish')
+                  .replace('Design first2finish', 'Design First2Finish')
+                  .replace('Srm', 'SRM')
+                  .replace('Ria build competition', 'RIA Build Competition')
+                  .replace('Ria component competition', 'RIA Component Competition')
+                  .replace('Design first2finish', 'Design First2Finish')
+                  .replace('Ui prototype competition', 'UI Prototype Competition')
+                }
               </span>
 
               <div styleName="right">

From ddabfe85c7e6da6d82fd8741d03b6db12dcccc11 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 17 Jun 2022 15:59:23 +0700
Subject: [PATCH 11/37] ci: reskin-profile to qa & beta

---
 .circleci/config.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 61ab6608c4..8f79e6d2b3 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -350,7 +350,6 @@ workflows:
             branches:
               only:
                 - develop
-                - reskin-profile
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global

From abbb0d49000609ce1755d09a084167c0b49fec52 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 17 Jun 2022 16:00:43 +0700
Subject: [PATCH 12/37] Merge branch 'develop' into reskin-profile


From ff10285dbdd0ca71fbbf2871e28ebf1c6f6fc178 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 20 Jun 2022 09:29:27 +0700
Subject: [PATCH 13/37] improvement(reskin-profile): verified badge


From 78d808f35ea00523407ebbafc4579bd794aeaf1b Mon Sep 17 00:00:00 2001
From: Luiz Ricardo Rodrigues <contato@luizrrodrigues.com.br>
Date: Wed, 20 Jul 2022 03:39:40 -0300
Subject: [PATCH 14/37] ci: deploy develop to Stag env

---
 .circleci/config.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8f79e6d2b3..25b60d99a8 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -349,7 +349,7 @@ workflows:
           filters:
             branches:
               only:
-                - develop
+                - free
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global
@@ -377,8 +377,7 @@ workflows:
           filters: &filters-staging
             branches:
               only:
-                - fix-security-headers
-                - tco23-BS-comps
+                - develop
       # Production builds are exectuted
       # when PR is merged to the master
       # Don't change anything in this configuration

From d084aa7b63d006db37a3a14e21253372210ef15f Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 20 Jun 2022 18:43:43 +0700
Subject: [PATCH 15/37] fix(reskin-profile): test update


From d952374c317c3fb03449ef9ffe4c282cc4086950 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 22 Jun 2022 11:25:59 +0700
Subject: [PATCH 16/37] improvement(reskin-profile): all modal activities

---
 .../ProfilePage/__snapshots__/index.jsx.snap  |  12 +-
 src/assets/images/profile/not-win-icon.svg    |   3 +
 src/assets/images/profile/win-icon.svg        |   3 +
 .../Activity/ActivityCard/index.jsx           |  79 +-
 .../Activity/ActivityCard/styles.scss         | 176 +----
 .../components/ProfilePage/Activity/index.jsx |  12 +-
 .../ProfilePage/Activity/styles.scss          |   9 +-
 .../ProfilePage/MemberTracks/index.jsx        |   4 +-
 .../Stats/DistributionGraph/index.jsx         |  48 +-
 .../ProfilePage/Stats/HistoryGraph/index.jsx  |  45 +-
 .../ProfilePage/Stats/SRMStats/index.jsx      | 335 +++++----
 .../ProfilePage/Stats/SRMStats/styles.scss    | 306 +++-----
 .../ProfilePage/Stats/StatsModal/index.jsx    |  51 --
 .../ProfilePage/Stats/StatsModal/styles.scss  |  87 ---
 .../ChallengeTable/index.jsx                  | 146 ++++
 .../ChallengeTable/styles.scss                | 137 ++++
 .../Stats/SubTrackChallengeView/index.jsx     | 314 ++------
 .../components/ProfilePage/Stats/index.jsx    | 357 ++++-----
 .../components/ProfilePage/Stats/styles.scss  | 697 ++++--------------
 src/shared/components/ProfilePage/index.jsx   |  68 +-
 src/shared/components/ProfilePage/styles.scss |  65 +-
 src/shared/containers/Profile.jsx             |   2 +-
 src/shared/containers/ProfileStats.jsx        |  56 +-
 src/shared/containers/Settings.jsx            |   1 -
 src/shared/routes/Topcoder/Routes.jsx         |   6 -
 src/shared/utils/memberStats.js               |  20 +-
 26 files changed, 1168 insertions(+), 1871 deletions(-)
 create mode 100644 src/assets/images/profile/not-win-icon.svg
 create mode 100644 src/assets/images/profile/win-icon.svg
 delete mode 100644 src/shared/components/ProfilePage/Stats/StatsModal/index.jsx
 delete mode 100644 src/shared/components/ProfilePage/Stats/StatsModal/styles.scss
 create mode 100644 src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
 create mode 100644 src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss

diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
index 6070927991..43cf907758 100644
--- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
@@ -41,7 +41,7 @@ exports[`renders a full Profile correctly 1`] = `
       >
         <MemberTracks
           copilot={true}
-          hasMM={null}
+          hasMM={false}
           info={
             Object {
               "competitionCountryCode": "USA",
@@ -344,8 +344,7 @@ exports[`renders a full Profile correctly 1`] = `
     </div>
   </div>
   <Activity
-    handle="testHandle"
-    hasMM={null}
+    hasMM={false}
     memberStats={
       Object {
         "COPILOT": Object {
@@ -708,6 +707,7 @@ exports[`renders a full Profile correctly 1`] = `
         "wins": 3,
       }
     }
+    onClick={[Function]}
   />
 </div>
 `;
@@ -749,7 +749,7 @@ exports[`renders an empty Profile correctly 1`] = `
       >
         <MemberTracks
           copilot={false}
-          hasMM={null}
+          hasMM={false}
           info={
             Object {
               "competitionCountryCode": "USA",
@@ -812,8 +812,7 @@ exports[`renders an empty Profile correctly 1`] = `
     </div>
   </div>
   <Activity
-    handle="testHandle"
-    hasMM={null}
+    hasMM={false}
     memberStats={
       Object {
         "COPILOT": null,
@@ -891,6 +890,7 @@ exports[`renders an empty Profile correctly 1`] = `
         "wins": 0,
       }
     }
+    onClick={[Function]}
   />
 </div>
 `;
diff --git a/src/assets/images/profile/not-win-icon.svg b/src/assets/images/profile/not-win-icon.svg
new file mode 100644
index 0000000000..def0b587c3
--- /dev/null
+++ b/src/assets/images/profile/not-win-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66656 2.56506C6.24222 2.56506 5.89823 2.90905 5.89823 3.33339V10.0001C5.89823 10.4244 6.24222 10.7684 6.66656 10.7684H11.9999C12.4242 10.7684 12.7682 10.4244 12.7682 10.0001V5.60953C12.7682 5.58257 12.7575 5.55671 12.7385 5.53765L9.79564 2.59484C9.77658 2.57577 9.75072 2.56506 9.72375 2.56506H6.66656ZM4.76823 3.33339C4.76823 2.28497 5.61814 1.43506 6.66656 1.43506H9.72375C10.0504 1.43506 10.3637 1.56482 10.5947 1.79581L13.5375 4.73861C13.7685 4.9696 13.8982 5.28288 13.8982 5.60953V10.0001C13.8982 11.0485 13.0483 11.8984 11.9999 11.8984H11.2316V12.0001C11.2316 13.4167 10.0832 14.5651 8.66656 14.5651H3.9999C2.95148 14.5651 2.10156 13.7151 2.10156 12.6667V6.66673C2.10156 5.25012 3.24995 4.10173 4.66656 4.10173H4.76823V3.33339ZM4.76823 5.23173H4.66656C3.87403 5.23173 3.23156 5.8742 3.23156 6.66673V12.6667C3.23156 13.0911 3.57556 13.4351 3.9999 13.4351H8.66656C9.45909 13.4351 10.1016 12.7926 10.1016 12.0001V11.8984H6.66656C5.61814 11.8984 4.76823 11.0485 4.76823 10.0001V5.23173Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/profile/win-icon.svg b/src/assets/images/profile/win-icon.svg
new file mode 100644
index 0000000000..0769d4e7e8
--- /dev/null
+++ b/src/assets/images/profile/win-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.01371 2.76406C5.52816 2.72301 6.01655 2.52071 6.40936 2.18597C7.326 1.40481 8.67419 1.40481 9.59084 2.18597C9.98364 2.52071 10.472 2.72301 10.9865 2.76406C12.187 2.85987 13.1403 3.81318 13.2361 5.01371C13.2772 5.52816 13.4795 6.01655 13.8142 6.40936C14.5954 7.326 14.5954 8.67419 13.8142 9.59084C13.4795 9.98364 13.2772 10.472 13.2361 10.9865C13.1403 12.187 12.187 13.1403 10.9865 13.2361C10.472 13.2772 9.98364 13.4795 9.59084 13.8142C8.67419 14.5954 7.326 14.5954 6.40936 13.8142C6.01655 13.4795 5.52816 13.2772 5.01371 13.2361C3.81318 13.1403 2.85987 12.187 2.76406 10.9865C2.72301 10.472 2.52071 9.98364 2.18597 9.59084C1.40481 8.67419 1.40481 7.326 2.18597 6.40936C2.52071 6.01655 2.72301 5.52816 2.76406 5.01371C2.85987 3.81318 3.81318 2.85987 5.01371 2.76406ZM10.9658 6.96578C11.2782 6.65336 11.2782 6.14683 10.9658 5.83441C10.6534 5.52199 10.1468 5.52199 9.83441 5.83441L7.2001 8.46873L6.16578 7.43441C5.85336 7.12199 5.34683 7.12199 5.03441 7.43441C4.72199 7.74683 4.72199 8.25336 5.03441 8.56578L6.63441 10.1658C6.94683 10.4782 7.45336 10.4782 7.76578 10.1658L10.9658 6.96578Z" fill="white"/>
+</svg>
diff --git a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
index ab014ee265..6dd0d6dc7d 100644
--- a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
+++ b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx
@@ -1,21 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 import React, { useState } from 'react';
 import PT from 'prop-types';
-import { Modal } from 'topcoder-react-ui-kit';
-import {
-  getSummary,
-} from 'utils/memberStats';
 
-import IconClose from 'assets/images/icon-close-green.svg';
 import ChevronDown from 'assets/images/chevron-down-green.svg';
 import LinkButton from 'assets/images/profile/link-button.svg';
 import { getRatingColor } from 'utils/tc';
 
-import { Link } from 'react-router-dom';
+import './styles.scss';
 import _ from 'lodash';
 
-import style from './styles.scss';
-
 const trackNameMap = {
   DESIGN: 'UX / UI Design',
   COPILOT: 'SPECIALIZED ROLES',
@@ -25,18 +18,10 @@ const trackNameMap = {
 };
 
 const ActivityCard = ({
-  trackName, subTracks, handle, hasMM, stats,
+  trackName, subTracks, hasMM, onClick,
 }) => {
   const [collapsed, setCollapsed] = useState(false);
-  const [showModal, toggleModal] = useState(false);
-  const [curSubtrack, setCurSubtrack] = useState('');
-
-  const onShowModal = (substrack) => {
-    setCurSubtrack(substrack);
-    toggleModal(true);
-  };
 
-  const subTrackSummary = getSummary(stats && stats[0], trackName, curSubtrack) || [];
   return (
     <div styleName={`activity-card ${collapsed ? 'hidden' : ''}`}>
       <div role="presentation" styleName="track-name" onClick={() => setCollapsed(!collapsed)}>
@@ -51,34 +36,6 @@ const ActivityCard = ({
         !collapsed
       && (
       <div styleName={`sub-track-wrapper ${trackName === 'COPILOT' ? 'full-width' : ''}`}>
-        {showModal && curSubtrack === 'COPILOT' && (
-        <Modal onCancel={() => toggleModal(false)} theme={style}>
-          <div styleName="stats">
-            <div styleName="header">
-              <h2 styleName="title">[COPILOT CATEGORY]</h2>
-              <div styleName="icon" role="presentation" onClick={() => toggleModal(false)}>
-                <IconClose />
-              </div>
-            </div>
-            <div styleName="stat-body">
-              {
-                subTrackSummary.map(({ label, value }) => (
-                  <div key={label} styleName="stat-item">
-                    <div
-                      styleName="value"
-                    >
-                      {value || '-'}
-                    </div>
-                    <p styleName="label">
-                      {label}
-                    </p>
-                  </div>
-                ))
-              }
-            </div>
-          </div>
-        </Modal>
-        )}
         {
           subTracks.map((subtrack, index) => (
             <div styleName="sub-track-item" key={index}>
@@ -143,24 +100,16 @@ const ActivityCard = ({
                       </div>
                       )
                     }
-                {subtrack.name.replace(' ', '_')
-                    !== 'COPILOT'
-                  ? (
-                    <Link
-                      styleName="link-button"
-                      to={`/members/${handle}/details/?track=${trackName === 'QA' ? 'DEVELOP' : trackName}&subTrack=${subtrack.name.replace(' ', '_')}`}
-                    >
-                      <LinkButton />
-                    </Link>
-                  ) : (
-                    <div
-                      styleName="link-button"
-                      role="presentation"
-                      onClick={() => onShowModal(subtrack.name.replace(' ', '_'))}
-                    >
-                      <LinkButton />
-                    </div>
-                  )}
+                <a
+                  styleName="link-button"
+                  href="javascript:void(0)" /* eslint-disable-line no-script-url */
+                  onClick={() => onClick({
+                    track: trackName === 'QA' ? 'DEVELOP' : trackName,
+                    subTrack: subtrack.name.replaceAll(' ', '_'),
+                  })}
+                >
+                  <LinkButton />
+                </a>
               </div>
 
             </div>
@@ -175,15 +124,13 @@ const ActivityCard = ({
 
 ActivityCard.defaultProps = {
   subTracks: [],
-  stats: [],
 };
 
 ActivityCard.propTypes = {
-  stats: PT.arrayOf(PT.shape()),
   trackName: PT.string.isRequired,
   subTracks: PT.arrayOf(PT.shape()),
-  handle: PT.string.isRequired,
   hasMM: PT.bool.isRequired,
+  onClick: PT.func.isRequired,
 };
 
 export default ActivityCard;
diff --git a/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss b/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss
index 8627eb9a38..e4cecf0d4f 100644
--- a/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss
+++ b/src/shared/components/ProfilePage/Activity/ActivityCard/styles.scss
@@ -1,15 +1,5 @@
 @import "~styles/mixins";
 
-:global {
-  @include xs-to-sm {
-    body.scrolling-disabled-by-modal {
-      > div {
-        overflow: hidden;
-      }
-    }
-  }
-}
-
 .activity-card {
   padding: 32px;
   background-color: $tc-white;
@@ -95,6 +85,10 @@
   justify-content: center;
   margin-top: -2px;
 
+  &a.selected:hover {
+    cursor: default;
+  }
+
   svg {
     margin-top: 8px;
   }
@@ -129,165 +123,3 @@
     margin-left: 5px;
   }
 }
-
-.stats {
-  padding-bottom: 10px;
-  border-radius: 8px;
-  margin: 25px 32px 32px;
-
-  .stat-body {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 24px;
-    background: #f4f4f4;
-    border-radius: 4px;
-
-    @include xs-to-sm {
-      flex-direction: column;
-      border-radius: 8px;
-    }
-
-    .stat-item {
-      display: flex;
-      align-items: flex-end;
-
-      @include xs-to-sm {
-        margin-bottom: 18px;
-      }
-
-      .value {
-        @include barlow-condensed;
-
-        font-style: normal;
-        font-weight: 500;
-        font-size: 44px;
-        line-height: 44px;
-        color: #1e94a3;
-      }
-
-      .label {
-        @include roboto-regular;
-
-        margin-left: 4px;
-        color: #2a2a2a;
-        font-weight: 400;
-        font-size: 15px;
-        line-height: 24px;
-        text-transform: capitalize;
-      }
-    }
-  }
-
-  .table-body {
-    max-height: 49vh;
-    overflow-y: auto;
-
-    @media screen and (max-width: $screen-sm) {
-      max-height: 65vh;
-    }
-  }
-
-  @include xs-to-sm {
-    margin: 0 0;
-  }
-}
-
-.stats-head {
-  display: flex;
-  margin-top: 24px;
-  width: 100%;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #e9e9e9;
-
-  @include xs-to-sm {
-    display: none;
-  }
-}
-
-.tooltip {
-  font-size: 14px;
-  margin: 10px 10px 0 10px;
-  padding-top: 5px;
-}
-
-.level-1 {
-  color: $member-gray !important;
-}
-
-.level-2 {
-  color: $member-green !important;
-}
-
-.level-3 {
-  color: $member-blue !important;
-}
-
-.level-4 {
-  color: $member-yellow !important;
-}
-
-.level-5 {
-  color: $member-red !important;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 25px;
-
-  .title {
-    @include barlow-medium;
-
-    font-weight: 600;
-    color: #2a2a2a;
-    font-size: 18px;
-    line-height: 22px;
-    text-transform: uppercase;
-  }
-
-  .icon {
-    cursor: pointer;
-    margin-top: 5px;
-  }
-}
-
-hr {
-  opacity: 0.5;
-}
-
-.container {
-  width: 90vw !important;
-  border-radius: 8px;
-
-  @include xs-to-sm {
-    width: 100vw !important;
-    height: 100vh !important;
-    margin: 0;
-    max-width: 100vw;
-    max-height: 100vh;
-    padding: 24px 16px;
-    z-index: 999999;
-    transform: initial;
-    left: 0;
-    top: 0;
-  }
-}
-
-.mobile-header {
-  display: none;
-
-  @include xs-to-sm {
-    display: block;
-    margin-top: 16px;
-    font-size: 11px;
-    line-height: 14px;
-
-    @include barlow-bold;
-
-    font-weight: 600;
-    color: #767676;
-    text-align: left;
-  }
-}
diff --git a/src/shared/components/ProfilePage/Activity/index.jsx b/src/shared/components/ProfilePage/Activity/index.jsx
index 31e250390e..4b9605ac08 100644
--- a/src/shared/components/ProfilePage/Activity/index.jsx
+++ b/src/shared/components/ProfilePage/Activity/index.jsx
@@ -20,7 +20,7 @@ const isHidden = (subtrack) => {
   return false;
 };
 
-const Activity = ({ memberStats, hasMM, handle }) => {
+const Activity = ({ memberStats, hasMM, onClick }) => {
   /**
    * Inspects a subtrack and determines if the member is active
    * based on submissions and/or ranks.
@@ -113,16 +113,16 @@ const Activity = ({ memberStats, hasMM, handle }) => {
   return (
     <div styleName="activity">
       <div styleName="header">
-        <span>TOPCODER ACTIVITY</span>
+        <span>TC ACTIVITY</span>
       </div>
 
-      {activeTracks.map(activeTrack => (
+      {activeTracks.map((activeTrack, index) => (
         <ActivityCard
-          stats={memberStats}
+          key={`${activeTrack.name}-${index}`} /* eslint-disable-line react/no-array-index-key */
           trackName={activeTrack.name}
           subTracks={activeTrack.subTracks}
           hasMM={hasMM}
-          handle={handle}
+          onClick={onClick}
         />
       ))}
     </div>
@@ -136,7 +136,7 @@ Activity.defaultProps = {
 Activity.propTypes = {
   memberStats: PT.arrayOf(PT.shape()),
   hasMM: PT.bool.isRequired,
-  handle: PT.string.isRequired,
+  onClick: PT.func.isRequired,
 };
 
 export default Activity;
diff --git a/src/shared/components/ProfilePage/Activity/styles.scss b/src/shared/components/ProfilePage/Activity/styles.scss
index b1e6c9e9ec..f33acfb092 100644
--- a/src/shared/components/ProfilePage/Activity/styles.scss
+++ b/src/shared/components/ProfilePage/Activity/styles.scss
@@ -6,11 +6,18 @@
   margin: 68px 0 16px 0;
   padding-bottom: 32px;
 
+  @include xs-to-sm {
+    border-radius: 0;
+    margin-top: 24px;
+    margin-bottom: 0;
+    padding-bottom: 16px;
+  }
+
   .header {
     padding: 32px 0 40px 32px;
 
     @include xs-to-sm {
-      padding: 16px 0 16px 16px;
+      padding: 32px 0 16px 16px;
     }
 
     span {
diff --git a/src/shared/components/ProfilePage/MemberTracks/index.jsx b/src/shared/components/ProfilePage/MemberTracks/index.jsx
index 9b9d6436f1..d9202fb388 100644
--- a/src/shared/components/ProfilePage/MemberTracks/index.jsx
+++ b/src/shared/components/ProfilePage/MemberTracks/index.jsx
@@ -25,8 +25,8 @@ const MemberTracks = ({
           && (
           <div styleName="member-tracks">
               {
-                [...info.tracks, ...(indexOf(info.tracks, 'DATA_SCIENCE') === -1 && hasMM ? ['DATA_SCIENCE'] : []), ...(copilot ? ['COPILOT'] : [])].map(track => (
-                  <TrackItem trackName={trackMap[track] || ''} />
+                [...info.tracks, ...(indexOf(info.tracks, 'DATA_SCIENCE') === -1 && hasMM ? ['DATA_SCIENCE'] : []), ...(copilot ? ['COPILOT'] : [])].map((track, index) => (
+                  <TrackItem key={index} trackName={trackMap[track] || ''} /> /* eslint-disable-line react/no-array-index-key */
                 ))
               }
           </div>
diff --git a/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx b/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
index 2ed4752257..704d77eb98 100644
--- a/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
@@ -5,7 +5,8 @@ import { toPairs } from 'lodash';
 import PT from 'prop-types';
 import { getRatingColor } from 'utils/tc';
 import ChartTooltip from '../ChartTooltip';
-import styles from './index.scss';
+// import styles from './index.scss';
+import './index.scss';
 
 const getRanges = distribution => (
   toPairs(distribution)
@@ -71,47 +72,45 @@ export default class DistributionGraph extends React.Component {
   }
 
   static getMobileWidthGrapthMeasurements() {
-    if (window.innerWidth < 400) {
-      return 250;
-    }
-    return 320;
+    return window.innerWidth - 32;
   }
 
   draw() {
     const $scope = this;
-    const { distribution: wrapper, rating } = this.props;
+    const { distribution: wrapper, rating, subTrack } = this.props;
     if (!wrapper) {
       return;
     }
     const { distribution } = wrapper;
 
     const desktopMeasurements = {
-      w: 855,
-      h: 400,
+      w: subTrack === 'SRM' ? 534 : 390,
+      h: 344,
       padding: {
-        top: 20,
-        right: 5,
-        bottom: 100,
-        left: 40,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
       },
     };
 
     const mobileMeasurements = {
       w: 0,
-      h: 200,
+      h: 240,
       padding: {
-        top: 50,
-        left: 40,
-        bottom: 80,
-        right: 50,
+        top: 0,
+        left: 0,
+        bottom: 24,
+        right: 0,
       },
     };
 
     d3.select($scope.graphRef.current).select('svg').remove();
-    let { w } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
-    const { h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    let { w, h } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    const { padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
     if (!$scope.desktop) {
       w = DistributionGraph.getMobileWidthGrapthMeasurements();
+      h = w * 240 / 288.0;
       this.mobileWidth = w;
     }
     const totalW = w + padding.left + padding.right;
@@ -129,6 +128,7 @@ export default class DistributionGraph extends React.Component {
       .domain([ranges[0].start,
         d3.max(ranges, range => range.end)])
       .range([padding.left, totalW - padding.right]);
+    /*
     const xAxis = d3.svg.axis()
       .scale(xScale)
       .orient('bottom')
@@ -137,6 +137,7 @@ export default class DistributionGraph extends React.Component {
       .scale(yScale)
       .orient('left')
       .ticks(ticks);
+    */
     const svg = d3.select($scope.graphRef.current)
       .append('svg')
       .attr('width', totalW)
@@ -147,17 +148,21 @@ export default class DistributionGraph extends React.Component {
       .attr('y', padding.top)
       .attr('width', w)
       .attr('height', h)
-      .attr('fill', '#f6f6f6');
+      .attr('fill', '#ffffff');
 
+    /*
     svg.append('g')
       .attr('class', styles.grid)
       .attr('transform', `translate(${padding.left},0)`)
       .call(yAxis(5).tickSize(-totalW, 0, 0).tickFormat(''));
+      */
 
+    /*
     svg.append('g')
       .attr('class', styles.axis)
       .attr('transform', `translate(${padding.left},0)`)
       .call(yAxis(5));
+      */
 
     svg.append('line')
       .attr('x1', xScale2(rating))
@@ -231,6 +236,7 @@ export default class DistributionGraph extends React.Component {
       .attr('y2', h + padding.top + 0.5)
       .attr('stroke', d => getRatingColor(d.start));
 
+    /*
     svg.append('g')
       .attr('class', styles.axis)
       .attr('transform', `translate(0,${(h + padding.top)})`)
@@ -242,6 +248,7 @@ export default class DistributionGraph extends React.Component {
       .attr('transform', 'rotate(90)')
       .style('text-anchor', 'start')
       .text((d, i) => `${ranges[i].start} - ${ranges[i].end}`);
+      */
   }
 
   render() {
@@ -260,4 +267,5 @@ DistributionGraph.defaultProps = {
 DistributionGraph.propTypes = {
   distribution: PT.shape(),
   rating: PT.number.isRequired,
+  subTrack: PT.string.isRequired,
 };
diff --git a/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx b/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx
index aa274eb69f..9094e27bf2 100644
--- a/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx
@@ -5,7 +5,8 @@ import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { config } from 'topcoder-react-utils';
-import { getRatingColor, RATING_COLORS } from 'utils/tc';
+import { getRatingColor } from 'utils/tc';
+// import { RATING_COLORS } from 'utils/tc';
 import ChartTooltip from '../ChartTooltip';
 import styles from './index.scss';
 
@@ -52,10 +53,7 @@ export default class HistoryGraph extends React.Component {
   }
 
   static getMobileWidthGrapthMeasurements() {
-    if (window.innerWidth < 400) {
-      return 200;
-    }
-    return 300;
+    return window.innerWidth - 32;
   }
 
   draw() {
@@ -83,35 +81,36 @@ export default class HistoryGraph extends React.Component {
     const parseDate = d3.time.format.utc('%Y-%m-%dT%H:%M:%S.%LZ').parse;
 
     const desktopMeasurements = {
-      w: 835,
-      h: 400,
+      w: subTrack === 'SRM' ? 534 : 390,
+      h: 344,
       padding: {
-        top: 20,
-        right: 5,
-        bottom: 100,
-        left: 60,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
       },
     };
 
     const mobileMeasurements = {
       w: 0,
-      h: 200,
+      h: 240,
       padding: {
-        top: 10,
-        right: 30,
-        bottom: 50,
-        left: 60,
+        top: 0,
+        right: 0,
+        bottom: 24,
+        left: 0,
       },
     };
 
     d3.select($scope.graphRef.current).select('svg').remove();
-    let { w } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
-    const { h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    let { w, h } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    const { padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
     if (!$scope.desktop) {
       w = HistoryGraph.getMobileWidthGrapthMeasurements();
+      h = w * 240 / 288.0;
       this.mobileWidth = w;
     }
-    const totalH = h + padding.top + padding.bottom;
+    // const totalH = h + padding.top + padding.bottom;
 
     const x = d3.time.scale()
       .range([padding.left + 5, (w + padding.left) - 5])
@@ -160,6 +159,7 @@ export default class HistoryGraph extends React.Component {
       .attr('height', h);
 
 
+    /*
     svg.append('g')
       .attr('class', `${styles.x} ${styles.axis}`)
       .attr('transform', `translate(0,${h + padding.top})`)
@@ -169,6 +169,7 @@ export default class HistoryGraph extends React.Component {
           ? m.format('YYYY')
           : m.format('MMM').toUpperCase();
       }));
+      */
 
     svg.selectAll(`g.${styles.x}.${styles.axis} .tick text`)
       .attr('font-weight', d => (moment(d).format('MM') === '01' ? 'bold' : 'normal'))
@@ -176,10 +177,12 @@ export default class HistoryGraph extends React.Component {
       .attr('font-size', () => 11);
 
 
+    /*
     svg.append('g')
       .attr('class', `${styles.y} ${styles.axis}`)
       .attr('transform', `translate(${padding.left - 25})`)
       .call(yAxis().tickFormat(d => `${parseInt(d, 10)}`));
+      */
 
     svg.append('g')
       .attr('class', `${styles.x} ${styles.grid}`)
@@ -197,6 +200,7 @@ export default class HistoryGraph extends React.Component {
       .attr('class', styles.line)
       .attr('d', line);
 
+    /*
     function processRatingStripePoint(_y) {
       if (_y < padding.top || Number.isNaN(_y)) {
         return padding.top;
@@ -205,6 +209,7 @@ export default class HistoryGraph extends React.Component {
       }
       return _y;
     }
+    */
 
     function getChallengeLink(challengeId) {
       if (track === 'DEVELOP') {
@@ -221,6 +226,7 @@ export default class HistoryGraph extends React.Component {
       return null;
     }
 
+    /*
     svg.append('g')
       .selectAll('line')
       .data(RATING_COLORS)
@@ -232,6 +238,7 @@ export default class HistoryGraph extends React.Component {
       .attr('y2', d => processRatingStripePoint(y(d.limit - 1)))
       .attr('stroke', d => d.color)
       .attr('stroke-width', 3);
+      */
 
     svg.selectAll('circle')
       .data(history)
diff --git a/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx b/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx
index 69026008bf..9d7fece086 100644
--- a/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SRMStats/index.jsx
@@ -1,197 +1,192 @@
 /* eslint-env browser */
 import React from 'react';
 import PT from 'prop-types';
-import styles from './styles.scss';
+import './styles.scss';
 
 const percentageFunc = n => `${(n * 100).toFixed(0)}%`;
 
 const SRMStats = ({ subTrackDetails }) => {
   const { challenges } = subTrackDetails;
   return (
-    <ul styleName="divisions">
+    <div styleName="divisions-container">
       {
         [subTrackDetails.division1, subTrackDetails.division2]
           .map((division, i) => ({ division, i }))
           .filter(({ division: { levels } }) => levels && levels.length)
           .map(({ division, i }) => (
-            <li key={`division${i + 1}`} styleName="division">
-              <ul>
-                <li styleName="totals">
-                  <ul styleName="row">
-                    <li styleName="left">
-                      <h3>
-                        {`division ${i + 1}`}
-                      </h3>
-                      <span>
+            <React.Fragment>
+              <table key={`division${i + 1}`} styleName="division">
+                <thead>
+                  <tr>
+                    <th>
+                      <h5>
+                        {`Division ${i + 1}`}
+                      </h5>
+                    </th>
+                    <th>
+                      <h5>
+                        SUCCESS
+                      </h5>
+                    </th>
+                    <th>
+                      <h5>
+                        CREATED
+                      </h5>
+                    </th>
+                    <th>
+                      <h5>
+                        FAILED CHALLENGES
+                      </h5>
+                    </th>
+                    <th>
+                      <h5>
+                        FAILED SYS TEST
+                      </h5>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <h5>
                         TOTAL
-                      </span>
-                    </li>
-                    <li>
-                      <h3>
+                      </h5>
+                    </td>
+                    <td>
+                      <h5>
                         {percentageFunc(division.total.percentSuccessful)}
-                      </h3>
-                      <span>
-                        SUCCESS
-                      </span>
-                    </li>
-                    <li>
-                      <h3>
+                      </h5>
+                    </td>
+                    <td>
+                      <h5>
                         {division.total.problemsSubmitted}
-                      </h3>
-                      <span>
-                        SUBMITTED
-                      </span>
-                    </li>
-                    <li>
-                      <h3>
+                      </h5>
+                    </td>
+                    <td>
+                      <h5>
                         {division.total.problemsFailed}
-                      </h3>
-                      <span>
-                        FAILED CHALLENGES
-                      </span>
-                    </li>
-                    <li>
-                      <h3>
+                      </h5>
+                    </td>
+                    <td>
+                      <h5>
                         {division.total.problemsSysByTest}
-                      </h3>
-                      <span>
-                        FAILED SYS. TEST
-                      </span>
-                    </li>
-                  </ul>
-                </li>
-                {
-                  division.levels.map(level => (
-                    <li styleName="level" key={level.levelName}>
-                      <ul styleName="row">
-                        <li styleName="left" className={styles.level}>
-                          <h3 styleName="level">
-                            {level.levelName}
-                          </h3>
-                        </li>
-                        <li>
-                          <h3>
-                            {percentageFunc(level.percentSuccessful)}
-                          </h3>
-                          <span>
-                            SUCCESS
-                          </span>
-                        </li>
-                        <li>
-                          <h3>
-                            {level.problemsSubmitted}
-                          </h3>
-                          <span>
-                            SUBMITTED
-                          </span>
-                        </li>
-                        <li>
-                          <h3>
-                            {level.problemsFailed}
-                          </h3>
-                          <span>
-                            FAILED CHALLENGES
-                          </span>
-                        </li>
-                        <li>
-                          <h3>
-                            {level.problemsSysByTest}
-                          </h3>
-                          <span>
-                            FAILED SYS. TEST
-                          </span>
-                        </li>
-                      </ul>
-                    </li>
-                  ))
-                }
-              </ul>
-            </li>
+                      </h5>
+                    </td>
+                  </tr>
+                  { division.levels.map(level => (
+                    <tr key={level.levelName}>
+                      <td>
+                        <h5>
+                          {level.levelName}
+                        </h5>
+                      </td>
+                      <td>
+                        <h5>
+                          {percentageFunc(level.percentSuccessful)}
+                        </h5>
+                      </td>
+                      <td>
+                        <h5>
+                          {level.problemsSubmitted}
+                        </h5>
+                      </td>
+                      <td>
+                        <h5>
+                          {level.problemsFailed}
+                        </h5>
+                      </td>
+                      <td>
+                        <h5>
+                          {level.problemsSysByTest}
+                        </h5>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              <hr />
+            </React.Fragment>
           ))
       }
       {
         challenges.levels && challenges.levels.length
         && (
-        <li styleName="division">
-          <ul>
-            <li styleName="totals">
-              <ul styleName="row">
-                <li styleName="left" className={styles.wide}>
-                  <h3>
-                    CHALLENGES
-                  </h3>
-                  <span>
-                    TOTAL
-                  </span>
-                </li>
-                <li>
-                  <h3>
-                    {percentageFunc(challenges.total.percentSuccessful)}
-                  </h3>
-                  <span>
-                    SUCCESS
-                  </span>
-                </li>
-                <li>
-                  <h3>
-                    {challenges.total.problemsSubmitted}
-                  </h3>
-                  <span>
-                    CREATED
-                  </span>
-                </li>
-                <li>
-                  <h3>
-                    {challenges.total.problemsFailed}
-                  </h3>
-                  <span>
-                    FAILED
-                  </span>
-                </li>
-              </ul>
-            </li>
-            {
-              challenges.levels.map(level => (
-                <li styleName="level" key={level.levelName}>
-                  <ul styleName="row">
-                    <li styleName="left" className={`${styles.level}  ${styles.wide}`}>
-                      <h3 styleName="level">
-                        {level.levelName}
-                      </h3>
-                    </li>
-                    <li>
-                      <h3>
-                        {percentageFunc(level.percentSuccessful)}
-                      </h3>
-                      <span>
-                        SUCCESS
-                      </span>
-                    </li>
-                    <li>
-                      <h3>
-                        {level.problemsSubmitted}
-                      </h3>
-                      <span>
-                        CREATED
-                      </span>
-                    </li>
-                    <li>
-                      <h3>
-                        {level.problemsFailed}
-                      </h3>
-                      <span>
-                        FAILED
-                      </span>
-                    </li>
-                  </ul>
-                </li>
-              ))
-            }
-          </ul>
-        </li>
-        )
-      }
-    </ul>
+        <table styleName="division">
+          <thead styleName="wide">
+            <tr>
+              <th>
+                <h5>
+                  Challenges
+                </h5>
+              </th>
+              <th>
+                <h5>
+                  SUCCESS
+                </h5>
+              </th>
+              <th>
+                <h5>
+                  CREATED
+                </h5>
+              </th>
+              <th>
+                <h5>
+                  FAILED
+                </h5>
+              </th>
+            </tr>
+          </thead>
+          <tbody styleName="wide">
+            <tr>
+              <td>
+                <h5>
+                  TOTAL
+                </h5>
+              </td>
+              <td>
+                <h5>
+                  {percentageFunc(challenges.total.percentSuccessful)}
+                </h5>
+              </td>
+              <td>
+                <h5>
+                  {challenges.total.problemsSubmitted}
+                </h5>
+              </td>
+              <td>
+                <h5>
+                  {challenges.total.problemsFailed}
+                </h5>
+              </td>
+            </tr>
+            { challenges.levels.map(level => (
+              <tr key={level.levelName}>
+                <td>
+                  <h5>
+                    {level.levelName}
+                  </h5>
+                </td>
+                <td>
+                  <h5>
+                    {percentageFunc(level.percentSuccessful)}
+                  </h5>
+                </td>
+                <td>
+                  <h5>
+                    {level.problemsSubmitted}
+                  </h5>
+                </td>
+                <td>
+                  <h5>
+                    {level.problemsFailed}
+                  </h5>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        )}
+    </div>
   );
 };
 
diff --git a/src/shared/components/ProfilePage/Stats/SRMStats/styles.scss b/src/shared/components/ProfilePage/Stats/SRMStats/styles.scss
index 42256ef7a4..c6d9c309ff 100644
--- a/src/shared/components/ProfilePage/Stats/SRMStats/styles.scss
+++ b/src/shared/components/ProfilePage/Stats/SRMStats/styles.scss
@@ -1,203 +1,135 @@
+/* stylelint-disable no-descending-specificity */
 @import "~styles/mixins";
 
-.divisions {
-  @include roboto-regular;
-
-  .division {
-    border-bottom: 1px solid #f0f0f0;
-    padding-top: 30px;
-    padding-bottom: 30px;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
-
-    ul {
-      .totals {
-        .row {
-          li {
-            background-color: white;
-            border: solid 1px #d1d3d4;
-
-            h2 {
-              font-weight: bold;
-            }
-
-            h3 {
-              color: black;
-            }
-
-            &.left {
-              border: none;
-            }
-          }
+.divisions-container {
+  width: 100%;
+  height: 385px;
+  display: block;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  hr {
+    width: 100%;
+    height: 2px;
+    border: none;
+    border-radius: 2px;
+    background: #f4f4f4;
+    margin-top: 32px;
+    margin-bottom: 32px;
+  }
+}
+
+table.division {
+  width: 1152px;
+  height: 314px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  .wide {
+    tr th,
+    tr td {
+      width: 274px;
+    }
+  }
+
+  thead {
+    width: 1152px;
+    height: 42px;
+
+    tr {
+      width: 1152px;
+      height: 42px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      // padding-bottom: 16px;
+      th {
+        width: 214.4px;
+        height: 26px;
+
+        @include barlow;
+
+        h5 {
+          width: 100%;
+          height: 26px;
+          text-align: left;
+          position: relative;
+          left: 0 !important;
         }
       }
 
-      .totals,
-      .level {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .row {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          width: 250px;
-
-          li {
-            height: 100px;
-            width: 100px;
-            display: flex;
-            margin-left: 10px;
-            margin-bottom: 10px;
-            background-color: #f6f6f6;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-
-            h3 {
-              font-size: 22px;
-              font-weight: bold;
-              color: $tc-gray-40;
-            }
-
-            span {
-              margin-top: 4px;
-              font-size: 11px;
-              color: $tc-gray-40;
-              text-align: center;
-              width: 85px;
-            }
-
-            &.left {
-              background-color: white;
-              height: 60px;
-              width: 210px;
-
-              h2 {
-                font-size: 22px;
-                font-weight: bold;
-              }
-
-              h3 {
-                font-size: 20px;
-                font-weight: 200;
-                text-transform: uppercase;
-              }
-
-              span {
-                font-size: 11px;
-                color: $tc-gray-40;
-                margin-top: 7px;
-                font-weight: bold;
-              }
-            }
-          }
-        }
+      th:not(:first-child) h5 {
+        text-transform: uppercase;
+        color: #767676;
+        font-weight: 600;
+        font-size: 11px;
+        line-height: 14px;
+        position: relative;
+        height: 14px;
+        left: 0 !important;
+        top: 12px;
+      }
+
+      th:first-child h5 {
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 26px;
+        position: relative;
+        left: 0 !important;
       }
     }
   }
-}
 
-@include md-to-xl {
-  .divisions {
-    .division {
-      ul {
-        .totals {
-          .row {
-            li {
-              background-color: white;
-              border: none;
-
-              &.left {
-                background-color: transparent;
-              }
-
-              h3 {
-                color: #097dce !important;
-              }
-            }
-          }
+  tbody {
+    width: 1152px;
+    height: 272px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    tr {
+      width: 1152px;
+      height: 56px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      td {
+        width: 214.4px;
+        height: 56px;
+        background: #f4f4f4;
+        border-radius: 8px;
+
+        h5 {
+          width: 100%;
+          height: 24px;
+          text-align: left;
+          position: relative;
+          left: 16px;
+          top: 16px;
+
+          @include roboto-regular;
+
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
         }
+      }
 
-        .totals,
-        .level {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          .row {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            width: 600px;
-
-            li {
-              height: 80px;
-              width: 100px;
-              display: flex;
-              margin-left: 10px;
-              margin-bottom: 10px;
-              background-color: #fcfcfc;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-
-              h3 {
-                font-size: 18px;
-                font-weight: 600;
-                color: #3d3d3d;
-              }
-
-              span {
-                margin-top: 4px;
-                font-size: 12px;
-                color: $tc-gray-40;
-                text-align: center;
-                width: 85px;
-              }
-
-              &.left {
-                background-color: white;
-                height: 80px;
-                width: 140px;
-
-                &.wide {
-                  width: 245px;
-                  display: flex;
-                  flex-direction: column;
-                  align-items: flex-start;
-                  padding-left: 20px;
-                }
-
-                &.level {
-                  background-color: #f2faff;
-                }
-
-                h3 {
-                  font-size: 18px;
-                  font-weight: 600;
-                  text-transform: uppercase;
-                  text-align: left;
-
-                  &.level {
-                    color: #3d3d3d;
-                  }
-                }
-
-                span {
-                  font-size: 11px;
-                  color: $tc-gray-40;
-                  text-align: left;
-                  margin-top: 7px;
-                  font-weight: 600;
-                }
-              }
-            }
-          }
+      td:first-child {
+        background: #eaf6fd; // $listing-light-blue;
+        h5 {
+          font-weight: 700;
         }
       }
     }
+
+    tr:first-child h5 {
+      font-weight: 700;
+      color: #0d61bf;
+    }
   }
 }
diff --git a/src/shared/components/ProfilePage/Stats/StatsModal/index.jsx b/src/shared/components/ProfilePage/Stats/StatsModal/index.jsx
deleted file mode 100644
index ff6651c8aa..0000000000
--- a/src/shared/components/ProfilePage/Stats/StatsModal/index.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import PT from 'prop-types';
-import X from 'assets/images/profile/x-mark-gray.svg';
-import { getRatingColor } from 'utils/tc';
-import StatsCategory from '../../StatsCategory';
-import './styles.scss';
-
-
-class StatsModal extends React.Component {
-  componentDidMount() {
-    document.body.classList.add('scrolling-disabled-by-modal');
-  }
-
-  componentWillUnmount() {
-    document.body.classList.remove('scrolling-disabled-by-modal');
-  }
-
-  render() {
-    const { info, stats, onClose } = this.props;
-    return (
-      <div styleName="stats-modal">
-        <div styleName="nav-top">
-          <div styleName="user">
-            <div styleName="avatar">
-              <img src={info.photoURL} alt="user img" />
-            </div>
-            <div styleName="handle" style={{ color: getRatingColor(info.maxRating.rating || 0) }}>
-              {info.handle}
-            </div>
-          </div>
-          <a styleName="exit" onClick={onClose} onKeyPress={onClose} role="button" tabIndex={0}>
-            <X />
-          </a>
-        </div>
-        <hr />
-        <StatsCategory handle={info.handle} stats={stats} styleName="category" inModal />
-      </div>
-    );
-  }
-}
-
-StatsModal.defaultProps = {};
-
-StatsModal.propTypes = {
-  stats: PT.shape().isRequired,
-  info: PT.shape().isRequired,
-  onClose: PT.func.isRequired,
-};
-
-export default StatsModal;
diff --git a/src/shared/components/ProfilePage/Stats/StatsModal/styles.scss b/src/shared/components/ProfilePage/Stats/StatsModal/styles.scss
deleted file mode 100644
index 9c44e37c32..0000000000
--- a/src/shared/components/ProfilePage/Stats/StatsModal/styles.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@import "~styles/mixins";
-
-.stats-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: $tc-white;
-  color: $tc-black;
-  font-family: Helvetica, sans-serif;
-  padding: 1em 8%;
-  z-index: 1;
-  overflow: auto;
-  animation: fadeInDown 300ms;
-
-  .nav-top {
-    margin-top: 60px;
-    font-family: 'Roboto', sans-serif;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .user {
-      display: flex;
-      font-weight: 700;
-    }
-
-    .avatar img {
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-    }
-
-    .handle {
-      margin-left: 15px;
-      font-size: 28px;
-    }
-
-    .exit svg {
-      height: 20px;
-      width: 20px;
-      cursor: pointer;
-    }
-  }
-
-  hr {
-    margin-top: 30px;
-    border: 0;
-    border-top: 1px solid #f0f0f0;
-  }
-}
-
-.category {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  & > div {
-    width: 305px !important;
-  }
-
-  a {
-    width: 100% !important;
-  }
-}
-
-@include md-to-xl {
-  .category {
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-}
-
-@keyframes fadeInDown {
-  0% {
-    transform: translateY(-50px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
new file mode 100644
index 0000000000..d5f30c77cb
--- /dev/null
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
@@ -0,0 +1,146 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PT from 'prop-types';
+import _ from 'lodash';
+
+import { formatDate } from 'utils/tc';
+import WinIcon from 'assets/images/profile/win-icon.svg';
+import NotWinIcon from 'assets/images/profile/not-win-icon.svg';
+
+import './styles.scss';
+
+const ChallengeTable = ({ challenges, handle, hideChallengeResult }) => {
+  const percentage = x => `${Math.round(x * 100)}%`;
+
+  const getPlacementPostfix = (x) => {
+    switch (x) {
+      case 1:
+        return 'st';
+      case 2:
+        return 'nd';
+      case 3:
+        return 'rd';
+      default:
+        return 'th';
+    }
+  };
+
+  const isDataScience = track => track === 'Data Science' || track === 'DATA_SCIENCE';
+
+  const Participant = ({ track }) => {
+    const text = isDataScience(track) ? 'Participant' : 'Submitter';
+    return (
+      <div styleName="bar participant">
+        <span>{'   '}</span>
+        <NotWinIcon />
+        <span styleName="text">{ text }</span>
+        <span>{'   '}</span>
+      </div>
+    );
+  };
+
+  const Placement = ({ track, placement, pointTotal }) => {
+    const text = isDataScience(track) ? 'Placement' : 'Winner';
+    const place = isDataScience(track) ? `${pointTotal || 0} Point`
+      : `${placement}${getPlacementPostfix(placement)} Place`;
+    return (
+      <div styleName="bar placement">
+        <span>{'   '}</span>
+        <WinIcon />
+        <span styleName="text">{ text }</span>
+        <span styleName="place">{ place }</span>
+        <span>{'   '}</span>
+      </div>
+    );
+  };
+
+  const getSafeName = (name) => {
+    if (window.innerWidth < 900) return name;
+    return name.length < 70 ? name : _.concat(name.substring(0, 67), '...');
+  };
+
+  const getSubmissionEndDate = phases => phases.find(phase => phase.name === 'Submission')
+    .actualEndDate;
+
+  const getSafeEndDate = endDate => endDate || '2000-01-01T00:00:00.000Z';
+
+  const formatDateSafe = endDate => formatDate(getSafeEndDate(endDate));
+
+  return (
+    <table styleName="challenges">
+      <tbody>
+        { challenges.map((challenge, index) => {
+          const {
+            isPrivate,
+            id,
+            name,
+            submissionEndDate,
+            userDetails,
+            track,
+            winners,
+            rounds,
+            phases,
+            pointTotal,
+          } = challenge;
+
+          // NOTE: cannot fetch winners of SRM challenge
+          const winner = winners && winners.find(winer => winer.handle === handle);
+
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <tr key={index} styleName={`${index % 2 === 1 ? 'odd' : 'even'}`}>
+              <td styleName="challenge-info">
+                { !isPrivate
+                  ? (
+                    <Link to={`/challenges/${id}`} styleName="challenge-name">
+                      <span>
+                        { getSafeName(name) }
+                      </span>
+                    </Link>
+                  )
+                  : (
+                    <span styleName="challenge-name">
+                      { getSafeName(name) }
+                    </span>
+                  )}
+                <span styleName="challenge-date">
+                  { submissionEndDate && formatDate(submissionEndDate) }
+                  { !submissionEndDate && rounds && formatDateSafe(rounds[0].codingEndAt) }
+                  { !submissionEndDate && !rounds && phases
+                    && formatDateSafe(getSubmissionEndDate(phases)) }
+                </span>
+              </td>
+              <td styleName={`challenge-result ${hideChallengeResult ? 'hidden' : ''}`}>
+                { track !== 'DESIGN' && userDetails
+                  && (userDetails.submissionReviewScore || userDetails.submissionReviewScore === 0)
+                  && (
+                    <span styleName="score">
+                      { 'Review Score: ' }
+                      <bold>
+                        { percentage(userDetails.submissionReviewScore / 100) }
+                      </bold>
+                    </span>
+                  )}
+                {!winner && <Participant track={track} />}
+                {!!winner && (
+                  <Placement track={track} placement={winner.placement} pointTotal={pointTotal} />
+                )}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+ChallengeTable.defaultProps = {
+  challenges: [],
+};
+
+ChallengeTable.propTypes = {
+  challenges: PT.arrayOf(PT.shape()),
+};
+
+export default ChallengeTable;
diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss
new file mode 100644
index 0000000000..7c600f7048
--- /dev/null
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss
@@ -0,0 +1,137 @@
+@import '~styles/mixins';
+
+table.challenges {
+  width: 100%;
+  padding: 32px, 0;
+
+  tbody {
+    width: 100%;
+    display: block;
+    height: 385px;
+    overflow-y: auto;
+
+    @include roboto-regular;
+
+    font-size: 16px;
+    line-height: 24px;
+
+    tr {
+      display: flex;
+      justify-content: space-between;
+      border-radius: 8px;
+      width: 100%;
+      padding: 24px;
+
+      &.even {
+        background: #f4f4f4;
+      }
+
+      &.odd {
+        background: #fff;
+      }
+
+      td {
+        display: flex;
+
+        &.challenge-info {
+          justify-content: flex-start;
+          align-items: baseline;
+          gap: 16px;
+
+          .challenge-name {
+            font-weight: 500;
+            font-size: 20px;
+            line-height: 26px;
+          }
+        }
+
+        &.challenge-result {
+          justify-content: flex-end;
+          align-items: center;
+          gap: 16px;
+
+          /*
+          .score {
+            .bold {
+              font-weight: 500;
+            }
+          }
+          */
+        }
+
+        &.hidden {
+          visibility: hidden;
+        }
+      }
+    }
+
+    @include xs-to-sm {
+      height: 360px;
+
+      tr {
+        flex-direction: column;
+        padding: 16px;
+        gap: 8px;
+
+        td {
+          &.challenge-info {
+            flex-direction: column;
+            gap: 0;
+
+            .challenge-name,
+            .challenge-date {
+              font-size: 14px;
+              line-height: 20px;
+            }
+          }
+
+          &.challenge-result {
+            justify-content: flex-start;
+
+            .score {
+              display: none;
+            }
+          }
+
+          &.hidden {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 4px;
+  color: #fff;
+
+  @include roboto-bold;
+
+  font-size: 14px;
+  line-height: 30px;
+
+  .text {
+    color: #fff;
+  }
+
+  @include xs-to-sm {
+    font-size: 12px;
+    line-height: 26px;
+  }
+}
+
+.participant {
+  background: #767676;
+}
+
+.placement {
+  background: #227681;
+
+  .place {
+    font-weight: 400;
+  }
+}
diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
index 6bd154dc37..f2ec692299 100644
--- a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
@@ -7,128 +7,15 @@ import _ from 'lodash';
 import React from 'react';
 import { connect } from 'react-redux';
 import PT from 'prop-types';
-import InfiniteScroll from 'react-infinite-scroller';
 import shortId from 'shortid';
 
-import ChallengeTile from 'components/ChallengeTile';
-import SRMTile from 'components/SRMTile';
 import { actions } from 'topcoder-react-lib';
-import { OLD_COMPETITION_TRACKS, COMPETITION_TRACKS } from 'utils/tc';
 import LoadingIndicator from 'components/LoadingIndicator';
-import GalleryModal from './GalleryModal';
+import ChallengeTable from './ChallengeTable';
 import './style.scss';
 
 // how many challenges to query per batch
-const CHALLENGE_PER_PAGE = 36;
-
-/**
- * @static
- * @desc pre-process subtrach challenge array to prepare for rendering
- * @param {String} one raw challenge just retrieved from API
- */
-const processPastChallenge = (challenge) => {
-  const cloned = _.cloneDeep(challenge);
-  if (cloned.userDetails) {
-    // process placement for challenges having winningPlacements array in response
-    if (Array.isArray(cloned.userDetails.winningPlacements)) {
-      cloned.highestPlacement = _.min(cloned.userDetails.winningPlacements, 'placed').placed;
-    }
-    // process placement for design challenges
-    if (cloned.track === 'DESIGN'
-        && cloned.userDetails.submissions
-        && cloned.userDetails.submissions.length > 0) {
-      cloned.thumbnailId = cloned.userDetails.submissions[0].id;
-    }
-    // determines the user status for passing the review for one of the submissions
-    if (cloned.userDetails.submissions && cloned.userDetails.submissions.length > 0) {
-      cloned.passedReview = cloned.userDetails.submissions.filter(submission => submission.type === 'Contest Submission'
-        && (submission.status === 'Active'
-          || submission.status === 'Completed Without Win')).length > 0;
-    }
-    if (cloned.highestPlacement === 0) {
-      cloned.highestPlacement = null;
-    }
-    cloned.wonFirst = cloned.highestPlacement === 1;
-
-    cloned.userHasSubmitterRole = false;
-
-    // determines if user has submitter role or not
-    const { roles } = cloned.userDetails;
-    if (roles.length > 0) {
-      const submitterRole = _.findIndex(roles, (role) => {
-        const lRole = role.toLowerCase();
-        return lRole === 'submitter';
-      });
-      if (submitterRole >= 0) {
-        cloned.userHasSubmitterRole = true;
-      }
-    }
-
-    if (!cloned.userStatus) {
-      if (cloned.userDetails.hasUserSubmittedForReview) {
-        if (!cloned.passedReview) {
-          cloned.userStatus = 'PASSED_SCREENING';
-        } else {
-          cloned.userStatus = 'PASSED_REVIEW';
-        }
-      } else {
-        cloned.userStatus = 'NOT_FINISHED';
-      }
-
-      // if user does not has submitter role, just show Completed
-      if (!cloned.userHasSubmitterRole) {
-        cloned.userStatus = 'COMPLETED';
-      }
-    }
-
-    // adjust submissions
-    if (cloned.userDetails
-        && cloned.userDetails.submissions
-        && cloned.userDetails.submissions.length > 0) {
-      cloned.userDetails.submissions = cloned.userDetails.submissions
-        .filter(submission => submission && submission.submissionImage);
-      cloned.userDetails.submissions = _.sortBy(
-        cloned.userDetails.submissions,
-        submission => submission.placement,
-      );
-    }
-
-    if (!cloned.isPrivate
-        && cloned.userDetails
-        && cloned.userDetails.submissions
-        && cloned.userDetails.submissions.length > 0) {
-      // add attr imageURL
-      cloned.imageURL = cloned.userDetails.submissions[0].submissionImage
-                        && cloned.userDetails.submissions[0].submissionImage.full;
-      // add numImages
-      cloned.numImages = cloned.userDetails.submissions.length;
-    } else {
-      cloned.numImages = 0;
-    }
-
-    if (!cloned.type) {
-      cloned.type = cloned.subTrack;
-    }
-
-    switch (cloned.track) {
-      case OLD_COMPETITION_TRACKS.DATA_SCIENCE:
-        cloned.track = COMPETITION_TRACKS.DS;
-        break;
-      case OLD_COMPETITION_TRACKS.DESIGN:
-        cloned.track = COMPETITION_TRACKS.DES;
-        break;
-      case OLD_COMPETITION_TRACKS.DEVELOP:
-        cloned.track = COMPETITION_TRACKS.DEV;
-        break;
-      case OLD_COMPETITION_TRACKS.QA:
-        cloned.track = COMPETITION_TRACKS.QA;
-        break;
-      default:
-        break;
-    }
-  }
-  return cloned;
-};
+const CHALLENGE_PER_PAGE = 10;
 
 class SubTrackChallengeView extends React.Component {
   constructor(props, context) {
@@ -137,12 +24,7 @@ class SubTrackChallengeView extends React.Component {
       // this is current page number. starts with 1.
       // everytime we scroll at the bottom, we query from offset = pageNum * CHALLENGE_PER_PAGE
       pageNum: 1,
-      // which challenge's modal should be poped. null means no modal
-      challengeIndexToPopModal: null,
     };
-    this.onPageChange = this.onPageChange.bind(this);
-    this.onPopModal = this.onPopModal.bind(this);
-    this.onCloseModal = this.onCloseModal.bind(this);
   }
 
   componentDidMount() {
@@ -190,69 +72,86 @@ class SubTrackChallengeView extends React.Component {
     }
   }
 
-  onPageChange() {
+  componentDidUpdate(prevProps) {
+    const {
+      pageNum,
+    } = this.state;
+
     const {
       handle,
       auth,
+      loadSubtrackChallenges,
+      loadSRM,
+      loadMarathon,
+      userId,
+
       track,
       subTrack,
       loadingSubTrackChallengesUUID,
-      loadSubtrackChallenges,
+      challenges,
+      challengesHasMore,
       loadingSRMUUID,
-      loadSRM,
+      userSrms,
+      userSrmHasMore,
       loadingMarathonUUID,
-      loadMarathon,
-      userId,
+      userMarathons,
+      userMarathonHasMore,
     } = this.props;
 
-    const {
-      pageNum,
-    } = this.state;
+    const isEqLen = (prevArr, arr) => (prevArr && prevArr.length) === (arr && arr.length);
 
-    if ((track === 'DEVELOP' || track === 'DESIGN')) {
+    if (track === 'DEVELOP' || track === 'DESIGN') {
       if (!loadingSubTrackChallengesUUID) {
-        loadSubtrackChallenges(
-          handle,
-          auth.tokenV3,
-          track,
-          subTrack,
-          pageNum + 1,
-          CHALLENGE_PER_PAGE,
-          false,
-          userId,
-        );
-        this.setState({ pageNum: pageNum + 1 });
-      }
-      // if loadingSubTrackChallengesUUID is set in redux-store,
-      // it means there is already an ongoing query
-      // same to SRM and Marathon
-    } else if (track === 'DATA_SCIENCE') {
-      if (subTrack === 'SRM') {
-        if (!loadingSRMUUID) {
-          loadSRM(handle, auth.tokenV3, pageNum, CHALLENGE_PER_PAGE, false);
-          this.setState({ pageNum: pageNum + 1 });
-        }
-      } else if (subTrack === 'MARATHON_MATCH') {
-        if (!loadingMarathonUUID) {
-          loadMarathon(handle, userId, auth.tokenV3, pageNum + 1, CHALLENGE_PER_PAGE, false);
-          this.setState({ pageNum: pageNum + 1 });
+        if (!isEqLen(prevProps.challenges, challenges)) {
+          // NOTE: Loaded successful, nothing todo
+          if (challengesHasMore) {
+            loadSubtrackChallenges(
+              handle,
+              auth.tokenV3,
+              track,
+              subTrack,
+              pageNum + 1,
+              CHALLENGE_PER_PAGE,
+              false,
+              userId,
+            );
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({ pageNum: pageNum + 1 });
+          }
         }
       }
     }
-  }
 
-  onPopModal(index) {
-    this.setState({ challengeIndexToPopModal: index });
-  }
+    if (track === 'DATA_SCIENCE' && subTrack === 'SRM') {
+      if (!loadingSRMUUID) {
+        if (!isEqLen(prevProps.userSrms, userSrms)) {
+          // NOTE: Loaded successful, nothing todo
+          if (userSrmHasMore) {
+            loadSRM(handle, auth.tokenV3, pageNum, CHALLENGE_PER_PAGE, false);
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({ pageNum: pageNum + 1 });
+          }
+        }
+      }
+    }
 
-  onCloseModal() {
-    this.setState({ challengeIndexToPopModal: null });
+    if (track === 'DATA_SCIENCE' && subTrack === 'MARATHON_MATCH') {
+      if (!loadingMarathonUUID) {
+        if (!isEqLen(prevProps.userMarathons, userMarathons)) {
+          // NOTE: Loaded successful, nothing todo
+          if (userMarathonHasMore) {
+            loadMarathon(handle, userId, auth.tokenV3, pageNum + 1, CHALLENGE_PER_PAGE, false);
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({ pageNum: pageNum + 1 });
+          }
+        }
+      }
+    }
   }
 
   render() {
     const {
       pageNum,
-      challengeIndexToPopModal,
     } = this.state;
 
     const {
@@ -262,12 +161,9 @@ class SubTrackChallengeView extends React.Component {
       loadingSRMUUID,
       loadingMarathonUUID,
       challenges,
-      challengesHasMore,
       userSrms,
-      userSrmHasMore,
       userMarathons,
-      userMarathonHasMore,
-      userId,
+      handle,
     } = this.props;
 
     if (pageNum === 1
@@ -295,44 +191,13 @@ class SubTrackChallengeView extends React.Component {
     }
 
     if (track === 'DEVELOP' || track === 'DESIGN') {
-      const challengeToRender = _.map(challenges, processPastChallenge);
+      //  const challengeToRender = _.map(challenges, processPastChallenge);
 
       return (
-        <div>
-          {challengeIndexToPopModal != null
-          && (
-          <div>
-            <GalleryModal
-              onCancel={this.onCloseModal}
-              challenge={challengeToRender[challengeIndexToPopModal]}
-            />
-          </div>
-          )
-            }
-          <InfiniteScroll
-            initialLoad={false}
-            loadMore={this.onPageChange}
-            hasMore={!loadingSubTrackChallengesUUID && challengesHasMore}
-            loader={<LoadingIndicator key="challenge-loader" />}
-            threshold={500}
-          >
-            <div styleName={track}>
-              <section>
-                <div styleName="challenges">
-                  {challengeToRender.map((item, index) => (
-                    <ChallengeTile
-                      challenge={item}
-                      onPopModal={this.onPopModal}
-                      index={index}
-                      key={`scroll-subtrack-challenge-${item.name}`}
-                    />
-                  ))}
-                </div>
-              </section>
-            </div>
-          </InfiniteScroll>
-          {loadingSubTrackChallengesUUID && <LoadingIndicator />}
-        </div>
+        <React.Fragment>
+          <ChallengeTable challenges={challenges} handle={handle} />
+          { loadingSubTrackChallengesUUID && <LoadingIndicator /> }
+        </React.Fragment>
       );
     } if (track === 'DATA_SCIENCE' && subTrack === 'SRM') {
       userSrms.sort((a, b) => {
@@ -347,25 +212,10 @@ class SubTrackChallengeView extends React.Component {
       });
 
       return (
-        <div>
-          <InfiniteScroll
-            initialLoad={false}
-            loadMore={this.onPageChange}
-            hasMore={!loadingSRMUUID && userSrmHasMore}
-            loader={<LoadingIndicator key="srm-loader" />}
-            threshold={500}
-          >
-            <div styleName={track}>
-              <section>
-                <div styleName="challenges">
-                  {userSrms && userSrms.map(item => <SRMTile key={`srm-${item.name}`} challenge={item} userId={userId} />)
-                  }
-                </div>
-              </section>
-            </div>
-          </InfiniteScroll>
-          {loadingSRMUUID && <LoadingIndicator />}
-        </div>
+        <React.Fragment>
+          <ChallengeTable challenges={userSrms} handle={handle} hideChallengeResult />
+          { loadingSRMUUID && <LoadingIndicator /> }
+        </React.Fragment>
       );
     } if (track === 'DATA_SCIENCE' && subTrack === 'MARATHON_MATCH') {
       const marathonToRender = _.map(
@@ -375,26 +225,12 @@ class SubTrackChallengeView extends React.Component {
           pointTotal: _.get(item, 'rounds.0.userMMDetails.pointTotal'),
         }),
       );
+
       return (
-        <div>
-          <InfiniteScroll
-            initialLoad={false}
-            loadMore={this.onPageChange}
-            hasMore={!loadingMarathonUUID && userMarathonHasMore}
-            loader={<LoadingIndicator key="marathon-loader" />}
-            threshold={500}
-          >
-            <div styleName={track}>
-              <section>
-                <div styleName="challenges">
-                  {marathonToRender.map(item => <ChallengeTile key={`marathon-${item.name}`} challenge={item} />)
-                  }
-                </div>
-              </section>
-            </div>
-          </InfiniteScroll>
-          {loadingMarathonUUID && <LoadingIndicator />}
-        </div>
+        <React.Fragment>
+          <ChallengeTable challenges={marathonToRender} handle={handle} hideChallengeResult />
+          { loadingMarathonUUID && <LoadingIndicator /> }
+        </React.Fragment>
       );
     }
 
diff --git a/src/shared/components/ProfilePage/Stats/index.jsx b/src/shared/components/ProfilePage/Stats/index.jsx
index b8403f9d70..8e7a064d45 100644
--- a/src/shared/components/ProfilePage/Stats/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/index.jsx
@@ -2,60 +2,33 @@
  * Stats Page.  Displays the stats of a TopCoder member.
  */
 /* eslint-env browser */
+/* eslint-disable no-shadow */
+/* eslint-disable space-infix-ops */
 import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
-import ReactSVG from 'react-svg';
-import { Link, isomorphy } from 'topcoder-react-utils';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
 import { getRatingColor } from 'utils/tc';
-import Th from 'assets/images/th.svg';
-import LeftArrow from 'assets/images/arrow-prev.svg';
 import {
   shouldShowGraph, getHistory, getSubTrackStats, getSummary, getDetails,
 } from 'utils/memberStats';
 import DistributionGraph from './DistributionGraph';
 import HistoryGraph from './HistoryGraph';
 import styles from './styles.scss';
-import StatsModal from './StatsModal';
 import SRMStats from './SRMStats';
 import SubTrackChallengeView from './SubTrackChallengeView';
 
-let assets;
-if (isomorphy.isClientSide()) {
-  assets = require.context('assets/images', false, /svg/);
-}
-
+// eslint-disable-next-line react/prefer-stateless-function
 class ProfileStats extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeGraph: 'history',
-      showModal: false,
-    };
-
-    this.toggleModal = this.toggleModal.bind(this);
-    this.checkSRMHonor = this.checkSRMHonor.bind(this);
-  }
-
-  toggleModal() {
-    const { showModal } = this.state;
-    this.setState({ showModal: !showModal });
-  }
-
-  checkSRMHonor() {
-    const { achievements } = this.props;
-    return achievements && achievements.filter(achievement => achievement.description === 'SRM Engagement Honor').length > 0;
-  }
-
   render() {
     const {
       statsDistribution,
       track,
       subTrack,
-      tab: activeTab,
+      setTab,
       info,
       handleParam,
-      activeChallengesCount,
+      tab,
     } = this.props;
     let { stats, statsHistory } = this.props;
     if (_.isArray(stats)) {
@@ -67,13 +40,23 @@ class ProfileStats extends React.Component {
       statsHistory = statsHistory[0];
     }
 
-    const { activeGraph, showModal } = this.state;
-
-    const tabs = ['statistics'];
+    const tabs = [];
+    if (shouldShowGraph({ track, subTrack })) {
+      tabs.push('statistics');
+    }
     if (track !== 'COPILOT') {
-      tabs.push(subTrack === 'SRM' ? 'Past srm' : 'challenges');
+      if (subTrack === 'SRM') {
+        tabs.push('SRM Details');
+        tabs.push('Past SRM');
+      } else if (subTrack === 'MARATHON_MATCH') {
+        tabs.push('Match Details');
+      } else {
+        tabs.push('Challenges Details');
+      }
     }
 
+    const activeTab = tab || (tabs.length > 0 ? tabs[0] : null);
+
     const subTrackStats = getSubTrackStats(stats, track, subTrack);
     const subTrackSummary = getSummary(stats, track, subTrack) || [];
     const subTrackDetails = getDetails(stats, track, subTrack) || [];
@@ -86,7 +69,7 @@ class ProfileStats extends React.Component {
     if (track === 'DEVELOP') {
       const reliability = subTrackSummary.find(stat => stat.label === 'reliability');
       if (reliability) {
-        reliability.link = 'https://help.topcoder.com/hc/en-us/articles/219240797-Development-Reliability-Ratings- and-Bonuses';
+        reliability.link = 'https://help.topcoder.com/hc/en-us/articles/219240797-Development-Reliability-Ratings-and-Bonuses';
       }
       const mustHaveMetrics = ['rank', 'rating', 'reliability'];
       // check if rating, rank & reliability are all set
@@ -100,209 +83,128 @@ class ProfileStats extends React.Component {
     return (
       <div styleName="profile-subtrack-container" role="main">
         <div styleName="content">
-          <div styleName="page-state-header">
-            <header>
-              <div styleName="page-info">
-                <Link to={`/members/${handleParam}`}>
-                  <LeftArrow styleName="left-arrow" />
-                </Link>
-                &nbsp;
-                <h1>
-                  {subTrack.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')}
-                </h1>
-                <a styleName="nav-right" onClick={this.toggleModal} onKeyPress={this.toggleModal} role="button" tabIndex={0}>
-                  <Th height={16} width={16} />
-                </a>
-              </div>
-              <div styleName="info">
-                <div styleName="item">
-                  <div styleName="value">
-                    {activeChallengesCount}
+          <ul styleName="subtrack-stats">
+            { subTrackSummary.map(({ label, value, link }) => (
+              <li key={label}>
+                { link ? (
+                  <a styleName="value" href={link}>
+                    {value || '-'}
+                  </a>
+                ) : (
+                  <div
+                    styleName="value"
+                    className={label === 'rating' ? styles.rating : ''}
+                    style={{ color: label === 'rating' ? getRatingColor(parseInt(value.replace(/\D/g, ''), 10)) : undefined }}
+                  >
+                    {value || '-'}
                   </div>
-                  <div styleName="title">
-                    Active Challenges
-                  </div>
-                </div>
-                {
-                  this.checkSRMHonor()
-                  && (
-                  <div styleName="badgeItem">
-                    <div styleName="dashboardBadge" />
-                  </div>
-                  )
-                }
-              </div>
-            </header>
-          </div>
-          <div>
-            <ul styleName="tab-set">
-              {
-                tabs.map(tab => (
-                  <li key={tab}>
-                    <Link
-                      className={activeTab === tab ? styles.selected : ''}
-                      to={`/members/${handleParam}/details/?track=${track}&subTrack=${subTrack}&tab=${tab}`}
-                    >
-                      {tab}
-                    </Link>
-                  </li>
-                ))
-              }
-            </ul>
-            <ul styleName="subtrack-stats">
-              {
-                subTrackSummary
-                && (
-                  <li key={info.handle}>
-                    <div>
-                      { info.photoURL ? <img src={info.photoURL} onError={this.loadImageError} styleName="profile-circle" alt="Member Portait" /> : <ReactSVG path={assets('./ico-user-default.svg')} /> }
-                    </div>
-                    <div
-                      styleName="valueHandle"
-                      className={subTrackRating ? styles.rating : ''}
-                      style={{ color: subTrackRating ? getRatingColor(parseInt(subTrackRating.toString().replace(/\D/g, ''), 10)) : undefined }}
+                )}
+                <p styleName="label">
+                  {label}
+                </p>
+              </li>
+            ))}
+          </ul>
+
+          { !!activeTab && (
+            <div styleName="tab-container">
+              <span styleName={`title ${tabs.filter(tab => tab !== activeTab).length > 0 ? 'has-tab': ''}`}>
+                { activeTab }
+              </span>
+              <div styleName="tab-set">
+                { /* eslint-disable-next-line no-confusing-arrow */
+                  tabs.map(tab => tab === activeTab ? null : (
+                    <PrimaryButton
+                      key={tab}
+                      theme={{ button: styles.btn }}
+                      href="javascript:void(0)" /* eslint-disable-line no-script-url */
+                      onClick={() => setTab(tab)}
                     >
-                      <a href={`${window.origin}/members/${info.handle}`} target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`} rel="noopener noreferrer">
-                        {info.handle || '-'}
-                      </a>
-                    </div>
-                  </li>
-                )
-              }
-              {
-                subTrackSummary.map(({ label, value, link }) => (
-                  <li key={label}>
-                    {
-                      link
-                        ? (
-                          <a styleName="value" href={link}>
-                            {value || '-'}
-                          </a>
-                        )
-                        : (
-                          <div
-                            styleName="value"
-                            className={label === 'rating' ? styles.rating : ''}
-                            style={{ color: label === 'rating' ? getRatingColor(parseInt(value.replace(/\D/g, ''), 10)) : undefined }}
-                          >
+                      { _.upperCase(`See ${tab}`) }
+                    </PrimaryButton>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          { !!activeTab && <hr /> }
+
+          { activeTab === 'statistics' && (
+            <div styleName="statistics-graph-container">
+              <div styleName="statistics-graph">
+                <div styleName={`history ${subTrack === 'SRM' ? 'wide' : ''}`}>
+                  <h2>
+                    Rating History
+                  </h2>
+                  <HistoryGraph
+                    history={getHistory(statsHistory, track, subTrack)}
+                    track={track}
+                    subTrack={subTrack}
+                  />
+                </div>
+
+                <hr styleName="vertical" />
+
+                <div styleName={`distribution ${subTrack === 'SRM' ? 'wide' : ''}`}>
+                  <h2>
+                    Rating Distribution
+                  </h2>
+                  <DistributionGraph
+                    distribution={statsDistribution}
+                    rating={_.get(subTrackStats, 'rank.rating')}
+                    subTrack={subTrack}
+                  />
+                </div>
+
+                { subTrack !== 'SRM' && <hr styleName="vertical" /> }
+
+                { subTrack !== 'SRM' && (
+                  <div styleName="details">
+                    <h2>
+                      Details
+                    </h2>
+                    <ul styleName="vertical-stats">
+                      {
+                      subTrackDetails.map(({ label, value }) => (
+                        <li key={label}>
+                          <div>
+                            {label}
+                          </div>
+                          <div styleName="right">
                             {value || '-'}
-                            {label === 'rating' && <span styleName="square" style={{ backgroundColor: getRatingColor((parseInt(value.replace(/\D/g, ''), 10))) }} />}
                           </div>
-                        )
-                    }
-                    <p styleName="label">
-                      {label}
-                    </p>
-                  </li>
-                ))
-              }
-            </ul>
-            {
-              activeTab === 'statistics'
-              && (
-              <div className="tab-view">
-                {
-                  shouldShowGraph({ track, subTrack })
-                  && (
-                  <div styleName="statistics-graph">
-                    <div styleName="graph-title">
-                      <div styleName="text">
-                        {activeGraph === 'history' ? 'Rating History Graph' : 'Rating Distribution Graph'}
-                      </div>
-                      <div className="button-group">
-                        <button
-                          className={`tc-btn tc-btn-s ${activeGraph === 'history' ? 'active' : ''}`}
-                          onClick={() => this.setState({ activeGraph: 'history' })}
-                          type="button"
-                        >
-                          View Rating History
-                        </button>
-                        <button
-                          className={`tc-btn tc-btn-s ${activeGraph === 'distribution' ? 'active' : ''}`}
-                          onClick={() => this.setState({ activeGraph: 'distribution' })}
-                          type="button"
-                        >
-                          View Rating Distribution
-                        </button>
-                      </div>
-                    </div>
-                    {
-                      activeGraph === 'history'
-                        ? (
-                          <HistoryGraph
-                            history={getHistory(statsHistory, track, subTrack)}
-                            track={track}
-                            subTrack={subTrack}
-                          />
-                        )
-                        : (
-                          <DistributionGraph
-                            distribution={statsDistribution}
-                            rating={_.get(subTrackStats, 'rank.rating')}
-                          />
-                        )
+                        </li>
+                      ))
                     }
+                    </ul>
                   </div>
-                  )
-                }
-                {
-                  track !== 'COPILOT'
-                    && (
-                    <div styleName="details">
-                      <h2>
-                        Details
-                      </h2>
-                      {
-                        subTrack !== 'SRM'
-                          ? (
-                            <ul styleName="vertical-stats">
-                              {
-                              subTrackDetails.map(({ label, value }) => (
-                                <li key={label}>
-                                  <div>
-                                    {label}
-                                  </div>
-                                  <div styleName="right">
-                                    {value || '-'}
-                                  </div>
-                                </li>
-                              ))
-                            }
-                            </ul>
-                          )
-                          : <SRMStats subTrackDetails={subTrackDetails} />
-                      }
-                    </div>
-                    )
-                }
+                )}
               </div>
-              )
-            }
-            {
-              (activeTab === 'challenges' || activeTab === 'Past srm')
-                && (
-                <SubTrackChallengeView
-                  handle={handleParam}
-                  track={track}
-                  subTrack={subTrack}
-                  userId={info.userId}
-                />
-                )
-            }
-          </div>
+            </div>
+          )}
+
+          { (activeTab === 'Challenges Details' || activeTab === 'Match Details'
+            || activeTab === 'Past SRM') && (
+            <SubTrackChallengeView
+              handle={handleParam}
+              track={track}
+              subTrack={subTrack}
+              userId={info.userId}
+            />
+          )}
+
+          { activeTab === 'SRM Details' && (
+            <SRMStats subTrackDetails={subTrackDetails} />
+          )}
         </div>
-        {showModal && <StatsModal stats={stats} info={info} onClose={this.toggleModal} />}
       </div>
     );
   }
 }
 
 ProfileStats.defaultProps = {
-  tab: 'statistics',
   statsDistribution: null,
   statsHistory: null,
-  activeChallengesCount: null,
-  achievements: null,
 };
 
 ProfileStats.propTypes = {
@@ -310,12 +212,11 @@ ProfileStats.propTypes = {
   handleParam: PT.string.isRequired,
   track: PT.string.isRequired,
   subTrack: PT.string.isRequired,
-  tab: PT.string,
+  tab: PT.string.isRequired,
+  setTab: PT.func.isRequired,
   info: PT.shape().isRequired,
   statsDistribution: PT.shape(),
   statsHistory: PT.arrayOf(PT.shape()),
-  activeChallengesCount: PT.number,
-  achievements: PT.arrayOf(PT.shape()),
 };
 
 export default ProfileStats;
diff --git a/src/shared/components/ProfilePage/Stats/styles.scss b/src/shared/components/ProfilePage/Stats/styles.scss
index 76f431f838..9b204bbbf7 100644
--- a/src/shared/components/ProfilePage/Stats/styles.scss
+++ b/src/shared/components/ProfilePage/Stats/styles.scss
@@ -1,131 +1,51 @@
 @import "~styles/mixins";
 
-.page-state-header {
-  background-color: #fcfcfc;
-  padding: 15px;
-  border-bottom: 1px solid #d1d3d4;
-  border-top: 1px solid #d1d3d4;
-
-  header {
-    display: flex;
-    flex-direction: column;
-
-    h1 {
-      @include roboto-medium;
-
-      font-size: 24px;
-      line-height: 31px;
-      color: $tc-gray-90;
-      text-transform: uppercase;
-      text-align: center;
-      margin-bottom: 15px;
-    }
-
-    .info {
-      display: flex;
-      flex-direction: row;
-
-      @include xs-to-sm {
-        justify-content: center;
-
-        .item {
-          align-items: center !important;
-        }
-      }
-
-      .item {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: flex-end;
-        height: 39px;
-        position: relative;
-        margin-left: 40px;
-        margin-right: 20px;
-
-        @include roboto-regular;
-
-        &:not(:first-child)::before {
-          content: '';
-          display: block;
-          position: absolute;
-          top: -5px;
-          left: -30px;
-          width: 1px;
-          height: 60px;
-          transform: translateX(0) translateY(2px) rotate(30deg);
-          background-color: #d1d3d4;
-        }
-
-        .value {
-          font-size: 24px;
-          margin-bottom: 15px;
-        }
+.tab-container {
+  padding-top: 16px;
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
-        .title {
-          color: $tc-gray-40;
-          font-size: 12px;
-          text-transform: uppercase;
-        }
-      }
+  .title {
+    @include barlow-semi-bold;
 
-      .badgeItem {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: flex-end;
-        position: relative;
-        margin-left: 40px;
-        margin-right: 20px;
+    font-size: 18px;
+    line-height: 22px;
+    text-transform: uppercase;
+  }
 
-        @include roboto-regular;
+  .tab-set {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
 
-        .value {
-          font-size: 24px;
-          margin-bottom: 15px;
-        }
+  @include xs-to-sm {
+    .title {
+      font-size: 16px;
+      line-height: 18px;
+    }
 
-        .dashboardBadge {
-          background: url(assets/images/profile/badges/badge.png) no-repeat;
-          background-size: 70px 70px;
-          width: 70px;
-          height: 70px;
-        }
-      }
+    .has-tab {
+      max-width: 50%;
     }
   }
 }
 
-.tab-set {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  height: 60px;
-  padding-top: 20px;
-  padding-bottom: 16px;
-  border-top: 1px solid #f0f0f0;
-  border-bottom: 1px solid #f0f0f0;
-  background-color: #fcfcfc;
-
-  li {
-    height: 30px;
-
-    a {
-      display: block;
-      text-align: center;
-      color: $tc-gray-40;
-      font-size: 18px;
-      line-height: 24px;
-      font-weight: 500;
-      text-transform: uppercase;
-      margin: auto 45px;
-
-      &.selected {
-        color: #3d3d3d;
-        padding-bottom: 12px;
-        border-bottom: 2px solid $tc-dark-blue-100;
-      }
-    }
+hr {
+  width: 100%;
+  height: 2px;
+  margin-bottom: 32px;
+  border: none;
+  border-radius: 2px;
+  background: #f4f4f4;
+
+  &.vertical {
+    height: 354px;
+    width: 2px;
+    margin-bottom: 0;
+    margin-top: 30px;
   }
 }
 
@@ -133,508 +53,169 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: #f6f6f6;
+  background: white;
 
   @include roboto-regular;
 
   .content {
-    a.selected:hover {
-      cursor: default;
-    }
-
     width: 100%;
-    max-width: 1242px;
     background: white;
-    margin: 60px auto 40px;
-
-    .nav-right {
-      padding-top: 10px;
-      padding-left: 15px;
-      outline: none;
-
-      svg:hover {
-        cursor: pointer;
-      }
-    }
-
-    .label {
-      font-size: 12px;
-      color: $tc-gray-40;
-      text-transform: uppercase;
-      font-weight: 400;
-    }
-
-    .tc-carousel .carousel-elem:hover {
-      background-color: $tc-white;
-      cursor: default;
-
-      .label {
-        color: $tc-gray-40;
-      }
-    }
-
-    .page-state-header {
-      .page-info {
-        display: flex;
-        justify-content: center;
-
-        .left-arrow {
-          margin: 15px;
-        }
-      }
-    }
 
     .subtrack-stats {
       display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 10px auto;
-      background-color: #fff;
-
-      @include xs-to-sm {
-        flex-direction: column;
-        justify-content: stretch;
-
-        li {
-          width: 130px;
-        }
-      }
-
-      img.profile-circle {
-        border-radius: 50%;
-        display: inline;
-        width: 140px;
-        height: 140px;
-      }
-
-      & + .develop {
-        // move the cards up to compensate for size. Refactor of the component will make this obsolete!
-        margin-top: -40px;
-      }
-
-      li {
-        flex: 1;
-        flex-basis: 130px;
-        position: relative;
-        padding: 30px 0;
-        margin: 0 20px;
-        text-align: center;
-        max-width: 130px;
-
-        .value {
-          position: relative;
-          margin-bottom: 7px;
-          font-size: 32px;
-          color: #3d3d3d;
-
-          &.rating {
-            span.square {
-              position: absolute;
-              display: block;
-              top: -2px;
-              right: 15px;
-              margin-left: 4px;
-              margin-top: 5px;
-              width: 6px;
-              height: 6px;
-            }
-          }
-        }
-
-        .valueHandle {
-          position: relative;
-          margin-bottom: 7px;
-          font-size: 18px;
-          color: #3d3d3d;
-        }
-
-        &:not(:first-child)::before {
-          content: "";
-          top: 32px;
-          left: -18px;
-          width: 1px;
-          height: 60px;
-          transform: translateX(0) translateY(2px) rotate(30deg);
-          display: block;
-          position: absolute;
-          background-color: #f0f0f0;
-
-          @include xs-to-sm {
-            top: -30px;
-            left: 65px;
-            right: 30px;
-            width: 1px;
-            height: 70px;
-            -webkit-transform: translateX(0) translateY(2px) rotate(90deg);
-            transform: translateX(0) translateY(2px) rotate(90deg);
-          }
-        }
-      }
-    }
-
-    .horizontal-stats {
-      display: flex;
-      justify-content: center;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 24px;
+      gap: 16px;
       flex-wrap: wrap;
-
-      .stat {
-        margin: 5px 7px;
-        background: #f6f6f6;
-        height: 85px;
-        width: 85px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        @include roboto-regular;
-
-        .value {
-          font-weight: 700;
-          text-align: center;
-          font-size: 20px;
-
-          &.rating {
-            span.square {
-              position: absolute;
-              display: block;
-              top: 5px;
-              right: 15px;
-              margin-left: 4px;
-              margin-top: 5px;
-              width: 6px;
-              height: 6px;
-            }
-          }
-        }
-
-        .name {
-          font-weight: 500;
-          text-align: center;
-          text-transform: uppercase;
-          font-size: 9px;
-          color: $tc-gray-40;
-        }
-      }
-    }
-
-    ul.vertical-stats {
-      display: flex;
-      flex-direction: column;
+      background: #f4f4f4;
+      border-radius: 4px;
 
       li {
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-      }
-    }
-
-    .details {
-      padding-bottom: 40px;
-
-      @include roboto-regular;
-
-      .graphs {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      h2 {
-        margin: 30px auto 0;
-        text-align: center;
-        font-size: 24px;
-        line-height: 30px;
-        text-transform: uppercase;
-      }
-
-      ul.vertical-stats {
-        width: 90%;
-        margin: 30px auto 0;
-
-        li {
-          font-size: 15px;
-          line-height: 18px;
-          padding: 14px;
-          border-bottom: 1px solid #f6f6f6;
-
-          .right {
-            color: $tc-dark-blue-100;
-          }
-
-          &.first {
-            border-top: 1px solid #f6f6f6;
-          }
-        }
-      }
-
-      hr {
-        margin: -3px auto 15px;
-        width: 90%;
-        border: 0;
-        border-top: 1px solid $tc-gray-20;
-      }
-
-      //tc-section,
-      .tc-section {
-        padding: 30px;
-      }
-
-      .challenges {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
+        align-items: flex-end;
+        gap: 4px;
 
-        .challenge.tile {
-          width: 285px;
-          padding: 15px;
-          margin: 10px 5px;
+        a.selected:hover {
+          cursor: default;
         }
 
-        .no-challenges {
-          margin: 30px;
-
+        .label {
           @include roboto-regular;
 
           font-size: 16px;
-          color: $tc-gray-40;
+          line-height: 24px;
+          text-transform: capitalize;
         }
-      }
-    }
-  }
-}
-
-@include md-to-xl {
-  .profile-subtrack-container {
-    .content {
-      .page-info {
-        display: flex;
-        justify-content: center;
-      }
 
-      .nav-right {
-        padding-top: 15px;
-      }
-
-      .nav {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        margin-bottom: 8px;
-        height: 120px;
-
-        .right {
-          width: 15px;
-
-          .subtrack {
-            display: inline;
-          }
-        }
-
-        .handle {
-          display: inline;
+        .value {
+          @include barlow-condensed-medium;
 
-          img.profile-circle {
-            border-radius: 50%;
-            height: 60px;
-            margin-top: 30px;
-            margin-left: 60px;
-          }
+          font-size: 44px;
+          line-height: 44px;
+          color: #1e94a3;
         }
       }
 
-      .horizontal-stats {
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
+      @include xs-to-sm {
+        justify-content: flex-start;
+        padding: 16px;
 
-        .stat {
-          margin: 50px 12px;
-          height: 140px;
-          width: 140px;
+        li {
+          align-items: baseline;
 
-          .value {
-            font-size: 32px;
-            line-height: 50px;
+          .label {
+            font-size: 14px;
+            line-height: 20px;
           }
 
-          .name {
-            font-size: 15px;
-            line-height: 18px;
+          .value {
+            font-size: 27px;
+            line-height: 28px;
           }
         }
       }
+    }
 
-      ul.vertical-stats {
+    .statistics-graph-container {
+      .statistics-graph {
         display: flex;
-        flex-direction: column;
+        justify-content: space-between;
         align-items: center;
 
-        li {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-        }
-      }
-
-      .details {
-        .graphs {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-
-        h2.detailed {
-          margin: 30px auto 0;
-
-          @include roboto-regular;
-
-          font-size: 24px;
-          line-height: 30px;
-        }
-
-        ul.vertical-stats {
-          margin-top: 30px;
-          height: 300px;
-          display: flex;
+        .details,
+        .history,
+        .distribution {
+          width: 390px;
+          height: 384px;
           flex-direction: column;
           justify-content: flex-start;
-          align-content: center;
-          flex-wrap: wrap;
-
-          li {
-            width: 28%;
-            margin: 0 15px;
-
-            @include roboto-regular;
-
-            font-size: 15px;
-            line-height: 18px;
-            padding: 14px;
-            border-bottom: 1px solid $tc-gray-10;
+          align-items: flex-start;
 
-            .right {
-              color: $tc-dark-blue-100;
-            }
-
-            &:first-child {
-              border-top: 1px solid $tc-gray-10;
-            }
+          &.wide {
+            width: 534px;
           }
-        }
 
-        .tabs {
-          margin: 0 auto;
+          @include roboto-regular;
 
-          a {
-            font-size: 24px;
-            height: 40px;
-            width: 170px;
+          h2 {
+            margin-bottom: 24px;
+            text-align: left;
+            font-weight: 700;
+            font-size: 12px;
+            line-height: 16px;
+            text-transform: uppercase;
           }
-        }
 
-        .challenges {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-      }
-
-      .design {
-        // override height of the statistics section for design track as we don't have limited stats for design
-        ul.vertical-stats {
-          height: 200px;
+          &.details {
+            width: 256px;
+            height: 384px;
+
+            ul.vertical-stats {
+              width: 100%;
+              font-size: 14px;
+              line-height: 30px;
+
+              li {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+
+                .right {
+                  font-weight: 700;
+                }
+              }
+            }
+          }
         }
       }
     }
-  }
-}
 
-@include xs-to-sm {
-  .profile-subtrack-container {
-    .content {
-      .tc-carousel ul {
+    @include xs-to-sm {
+      .statistics-graph-container {
         display: block;
-        height: auto;
-        padding-bottom: 40px;
+        width: 100%;
+        height: 360px;
+        overflow-x: hidden;
+        overflow-y: auto;
 
-        > li {
-          position: relative;
-          text-align: center;
-
-          .slide {
-            text-align: center;
-          }
+        .vertical {
+          display: none;
         }
-      }
-    }
-  }
-}
-
-@include md-to-xl {
-  .page-state-header {
-    padding: 30px 30px;
 
-    header {
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      max-width: 1300px;
-      margin: auto;
-
-      .page-info {
-        order: 1;
-        display: flex;
-        flex-direction: row;
-        margin-left: 20px;
+        .statistics-graph {
+          width: 100%;
+          flex-direction: column;
 
-        h1 {
-          font-size: 36px;
-          line-height: 43px;
+          .history,
+          .distribution,
+          .details {
+            width: 100% !important;
+            height: auto !important;
+            padding-bottom: 16px;
+          }
         }
       }
-
-      .info {
-        order: 1;
-      }
     }
   }
 }
 
-.statistics-graph {
-  .graph-title {
-    display: flex;
-    align-items: center;
-    max-width: 960px;
-    padding: 0 30px 20px 40px;
-    margin: auto;
-    color: #47474f;
-
-    .text {
-      flex: 1;
-      text-align: left;
-      font-size: 28px;
-      line-height: 35px;
-      margin-bottom: 20px;
-    }
-  }
-
-  :global {
-    .tc-btn {
-      text-transform: uppercase;
-      outline: none;
-
-      &.active {
-        background: $tc-gray-20;
-        box-shadow: inset 0 1px 3px 0 $tc-black;
-        border: none;
-      }
-    }
-  }
+.btn {
+  // margin: $base-unit 0;
+  min-width: 0;
+  // width: 100%;
+  width: fit-content;
+  border-radius: 24px !important;
+  height: 24px;
+  padding: 0 16px !important;
+  background: #137d60 !important;
+  color: #fff !important;
+  font-size: 12px;
+  line-height: 24px;
 
   @include xs-to-sm {
-    .graph-title {
-      flex-direction: column;
-    }
+    width: fit-content;
   }
 }
diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx
index 6ec47bde38..c2767ccb73 100644
--- a/src/shared/components/ProfilePage/index.jsx
+++ b/src/shared/components/ProfilePage/index.jsx
@@ -3,16 +3,20 @@
  * of a TopCoder member.
  */
 /* eslint-env browser */
+/* eslint-disable no-shadow */
 import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { isomorphy } from 'topcoder-react-utils';
+import { Modal } from 'topcoder-react-ui-kit';
+import IconClose from 'assets/images/icon-close-green.svg';
 
+import ProfileStats from 'containers/ProfileStats';
 import { dataMap } from './ExternalLink';
 import Header from './Header';
 import MemberTracks from './MemberTracks';
 
-import './styles.scss';
+import styles from './styles.scss';
 import Skills from './Skills';
 import MemberInfo from './MemberInfo';
 import Activity from './Activity';
@@ -41,10 +45,16 @@ class ProfilePage extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      // NOTE: When showDetails is true, track and subTrack must have been setted.
+      track: '',
+      subTrack: '',
+      tab: '',
       isMobile: false,
+      showDetails: false,
     };
 
     this.handleResize = this.handleResize.bind(this);
+    this.closeDetails = this.closeDetails.bind(this);
   }
 
   componentDidMount() {
@@ -117,6 +127,10 @@ class ProfilePage extends React.Component {
     this.setState({ isMobile: window.innerWidth < 768 });
   }
 
+  closeDetails() {
+    this.setState({ showDetails: false });
+  }
+
   render() {
     const {
       copilot,
@@ -126,9 +140,17 @@ class ProfilePage extends React.Component {
       skills: propSkills,
       stats,
       lookupData,
+      handleParam,
+      meta,
     } = this.props;
 
-    const { isMobile } = this.state;
+    const {
+      track,
+      subTrack,
+      tab,
+      isMobile,
+      showDetails,
+    } = this.state;
 
     let { info } = this.props;
 
@@ -168,7 +190,7 @@ class ProfilePage extends React.Component {
     }
 
     // no rating MM
-    const hasMM = challenges && challenges.length;
+    const hasMM = !!(challenges && challenges.length);
 
     return (
       <div styleName="outer-container">
@@ -199,8 +221,44 @@ class ProfilePage extends React.Component {
         <Activity
           memberStats={stats}
           hasMM={hasMM}
-          handle={info.handle}
+          onClick={({ track, subTrack }) => this.setState({
+            track, subTrack, showDetails: true, tab: '',
+          })}
         />
+        { showDetails && (
+          <Modal
+            theme={{
+              container: track === 'COPILOT' ? styles['modal-container-copilot']
+                : styles['modal-container'],
+              overlay: styles['modal-overlay'],
+            }}
+            onCancel={this.closeDetails}
+          >
+            <React.Fragment>
+              <div styleName="header">
+                <h2 styleName="title">
+                  {
+                    subTrack === 'SRM' ? 'Single round match'
+                      : subTrack.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')
+                  }
+                </h2>
+                <div styleName="icon" role="presentation" onClick={this.closeDetails}>
+                  <IconClose />
+                </div>
+              </div>
+              <ProfileStats
+                handleParam={handleParam}
+                meta={meta}
+                track={track}
+                subTrack={subTrack}
+                tab={tab}
+                setTab={(tab) => {
+                  this.setState({ tab });
+                }}
+              />
+            </React.Fragment>
+          </Modal>
+        )}
       </div>
     );
   }
@@ -223,6 +281,8 @@ ProfilePage.propTypes = {
   skills: PT.shape(),
   stats: PT.arrayOf(PT.shape()),
   lookupData: PT.shape().isRequired,
+  handleParam: PT.string.isRequired,
+  meta: PT.shape().isRequired,
 };
 
 export default ProfilePage;
diff --git a/src/shared/components/ProfilePage/styles.scss b/src/shared/components/ProfilePage/styles.scss
index 869f3efe00..a1373d9f56 100644
--- a/src/shared/components/ProfilePage/styles.scss
+++ b/src/shared/components/ProfilePage/styles.scss
@@ -7,13 +7,13 @@
 }
 
 .content {
-  margin: 0 32px 32px 32px;
+  padding: 0 32px 32px 32px;
   display: flex;
   width: 100%;
 
   @include xs-to-md {
     flex-direction: column;
-    margin: 180px 16px 16px 16px;
+    padding: 180px 16px 16px 16px;
   }
 }
 
@@ -29,15 +29,16 @@
     line-height: 24px;
     color: $tco-black;
     margin-top: 24px;
+  }
 
-    @include xs-to-sm {
-      padding-bottom: 32px;
-      border-bottom: 2px solid $listing-gray;
-    }
+  @include xs-to-sm {
+    padding-bottom: 32px;
+    border-bottom: 2px solid $listing-gray;
   }
 
   @include xs-to-md {
-    padding-right: 16px;
+    padding-left: 10px;
+    padding-right: 10px;
     width: 100%;
   }
 }
@@ -50,7 +51,55 @@
   @include xs-to-sm {
     border-left: 0;
     margin-top: 0;
-    padding-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
     padding-top: 32px;
   }
 }
+
+.modal-overlay {
+  background: #000;
+}
+
+.modal-container-copilot,
+.modal-container {
+  width: 1232px;
+  height: 700px;
+  max-height: 700px;
+  max-width: 1232px;
+  border-radius: 8px;
+  padding: 32px 32px 48px 32px;
+  gap: 24px;
+
+  &.modal-container-copilot {
+    height: auto;
+  }
+
+  @include xs-to-sm {
+    width: 100%;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100% !important;
+    padding: 24px 16px 48px 16px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 24px;
+
+    .title {
+      @include barlow-medium;
+
+      font-weight: 600;
+      font-size: 22px;
+      line-height: 26px;
+      text-transform: uppercase;
+    }
+
+    .icon {
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/shared/containers/Profile.jsx b/src/shared/containers/Profile.jsx
index 329d4c161b..ebd0f92f76 100644
--- a/src/shared/containers/Profile.jsx
+++ b/src/shared/containers/Profile.jsx
@@ -171,7 +171,7 @@ ProfileContainer.propTypes = {
   handleParam: PT.string.isRequired,
   info: PT.shape(),
   loadingError: PT.bool.isRequired,
-  loadMarathon: PT.bool.isRequired,
+  loadMarathon: PT.func.isRequired,
   loadProfile: PT.func.isRequired,
   loadMemberGroups: PT.func.isRequired,
   profileForHandle: PT.string,
diff --git a/src/shared/containers/ProfileStats.jsx b/src/shared/containers/ProfileStats.jsx
index 34be6bc35b..e4af46e3f3 100644
--- a/src/shared/containers/ProfileStats.jsx
+++ b/src/shared/containers/ProfileStats.jsx
@@ -11,31 +11,27 @@ import ProfileStatsPage from 'components/ProfilePage/Stats';
 import { shouldShowGraph, isValidTrack, loadPublicStatsOnly } from 'utils/memberStats';
 import MetaTags from 'components/MetaTags';
 import _ from 'lodash';
-import qs from 'qs';
 import shortId from 'shortid';
 
-const getQueryParamsQuery = location => (
-  location.search ? qs.parse(location.search.slice(1)) : {}
-);
 class ProfileStatsContainer extends React.Component {
   componentDidMount() {
     const {
       handleParam,
-      location,
+      track,
+      subTrack,
       loadStats,
       loadStatsHistoryAndDistribution,
       meta,
       auth,
     } = this.props;
 
-    const trackAndSubTrack = getQueryParamsQuery(location);
     loadStats(handleParam, _.join(loadPublicStatsOnly(meta) ? undefined : _.get(meta, 'groupIds', [])), auth.tokenV3);
-    if (shouldShowGraph(trackAndSubTrack)) {
+    if (shouldShowGraph({ track, subTrack })) {
       loadStatsHistoryAndDistribution(
         handleParam,
         _.join(loadPublicStatsOnly(meta) ? undefined : _.get(meta, 'groupIds', [])),
-        trackAndSubTrack.track,
-        trackAndSubTrack.subTrack,
+        track,
+        subTrack,
         auth.tokenV3,
       );
     }
@@ -44,7 +40,9 @@ class ProfileStatsContainer extends React.Component {
   componentWillReceiveProps(nextProps) {
     const {
       handleParam: nextHandleParam,
-      location: nextLocation,
+      track: nextTrack,
+      subTrack: nextSubTrack,
+      tab: nextTab,
       loadStats,
       loadStatsHistoryAndDistribution,
       meta,
@@ -52,25 +50,23 @@ class ProfileStatsContainer extends React.Component {
     } = nextProps;
     const {
       handleParam,
-      location,
+      track,
+      subTrack,
     } = this.props;
 
-    const nextQueryParams = getQueryParamsQuery(nextLocation);
-    const trackAndSubTrack = getQueryParamsQuery(location);
-
     if (nextHandleParam !== handleParam) {
       loadStats(nextHandleParam, _.join(loadPublicStatsOnly(meta) ? undefined : _.get(meta, 'groupIds', [])), auth.tokenV3);
       if (
-        nextQueryParams.track !== trackAndSubTrack.track
-        || nextQueryParams.subTrack !== trackAndSubTrack.subTrack
+        nextTrack !== track
+        || nextSubTrack !== subTrack
       ) {
-        if (shouldShowGraph(nextQueryParams)
-          && !nextQueryParams.tab) {
+        if (shouldShowGraph({ track: nextTrack, subTrack: nextSubTrack })
+          && !nextTab) {
           loadStatsHistoryAndDistribution(
             nextHandleParam,
             _.join(loadPublicStatsOnly(meta) ? undefined : _.get(meta, 'groupIds', [])),
-            nextQueryParams.track,
-            nextQueryParams.subTrack,
+            nextTrack,
+            nextSubTrack,
             auth.tokenV3,
           );
         }
@@ -81,12 +77,12 @@ class ProfileStatsContainer extends React.Component {
   render() {
     const {
       loadingError,
-      location,
       isLoading,
       handleParam,
+      track,
+      subTrack,
     } = this.props;
 
-    const { track, subTrack, tab } = getQueryParamsQuery(location);
     if (loadingError || !isValidTrack(track, subTrack)) {
       return <Error404 />;
     }
@@ -104,9 +100,6 @@ class ProfileStatsContainer extends React.Component {
             : (
               <ProfileStatsPage
                 {...this.props}
-                track={track}
-                subTrack={subTrack}
-                tab={tab}
               />
             )
         }
@@ -121,13 +114,15 @@ ProfileStatsContainer.defaultProps = {
   statsDistribution: null,
   stats: null,
   info: null,
-  achievements: null,
   meta: null,
   auth: {},
 };
 
 ProfileStatsContainer.propTypes = {
-  location: PT.shape().isRequired,
+  track: PT.string.isRequired,
+  subTrack: PT.string.isRequired,
+  tab: PT.string.isRequired,
+  setTab: PT.func.isRequired,
   loadingError: PT.bool,
   loadStats: PT.func.isRequired,
   loadStatsHistoryAndDistribution: PT.func.isRequired,
@@ -136,17 +131,15 @@ ProfileStatsContainer.propTypes = {
   statsDistribution: PT.shape(),
   stats: PT.arrayOf(PT.shape()),
   info: PT.shape(),
-  achievements: PT.arrayOf(PT.shape()),
   isLoading: PT.bool.isRequired,
   meta: PT.shape(),
   auth: PT.shape(),
 };
 
 const mapStateToProps = (state, ownProps) => {
-  const handleParam = ownProps.match.params.handle;
+  const { handleParam } = ownProps;
   const obj = _.get(state.members, handleParam, {});
   return ({
-    handleParam,
     loadingError: state.members.loadingError,
     isLoading: !state.profile.info
       || !_.get(obj, 'stats.data')
@@ -155,10 +148,7 @@ const mapStateToProps = (state, ownProps) => {
     stats: _.get(obj, 'stats.data'),
     statsHistory: _.get(obj, 'statsHistory.data'),
     statsDistribution: _.get(obj, 'statsDistribution.data'),
-    activeChallengesCount: _.get(obj, 'activeChallengesCount'),
     info: state.profile.info,
-    meta: ownProps.meta,
-    achievements: state.profile.achievements,
     auth: {
       ...state.auth,
     },
diff --git a/src/shared/containers/Settings.jsx b/src/shared/containers/Settings.jsx
index 440838a216..6ec82dcd78 100644
--- a/src/shared/containers/Settings.jsx
+++ b/src/shared/containers/Settings.jsx
@@ -127,7 +127,6 @@ function mapStateToProps(state) {
     profile: state.auth.profile,
     lookupData: state.lookup,
     profileState: state.profile,
-    activeChallengesCount: _.get(state.challenge, 'activeChallengesCount'),
     loadingError: state.profile.loadingError,
     settingsUI: state.page.ui.settings,
     settings: state.settings,
diff --git a/src/shared/routes/Topcoder/Routes.jsx b/src/shared/routes/Topcoder/Routes.jsx
index 87b988cf1e..c45868ad5c 100644
--- a/src/shared/routes/Topcoder/Routes.jsx
+++ b/src/shared/routes/Topcoder/Routes.jsx
@@ -32,7 +32,6 @@ import Settings from '../Settings';
 import HallOfFame from '../HallOfFame';
 import Profile from '../Profile';
 import Scoreboard from '../tco/scoreboard';
-import ProfileStats from '../ProfileStats';
 import MemberSearch from '../../containers/MemberSearch';
 
 import './styles.scss';
@@ -94,11 +93,6 @@ export default function Topcoder() {
                 component={() => <Settings base="/settings" />}
                 path="/settings"
               />
-              <Route
-                component={ProfileStats}
-                exact
-                path="/members/:handle([\w\-\[\].{} ]{2,15})/details"
-              />
               {/* EDU Portal */}
               <Route
                 component={EDUHome}
diff --git a/src/shared/utils/memberStats.js b/src/shared/utils/memberStats.js
index 9dc27f14f7..dbfeea8aea 100644
--- a/src/shared/utils/memberStats.js
+++ b/src/shared/utils/memberStats.js
@@ -97,31 +97,39 @@ export function getHistory(stats, track, subTrack) {
 }
 
 
+// NOTE: perserve the legacy format func for future reference
 const percentageFunc = n => `${(n * 100).toFixed(2)}%`;
-const formatWithDecimalFunc = n => `${n.toFixed(2)}%`; // fixed issue #1011
-const percentileFunc = n => (n === 0 ? '0' : `${n.toFixed(0)}%`);
-const ratingFunc = n => n.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+// const percentageFunc = n => `${(n * 100).toFixed(0)}%`;
+// const formatWithDecimalFunc = n => `${n.toFixed(2)}%`; // fixed issue #1011
+const formatWithDecimalFunc = n => `${n.toFixed(1).replace(/\.0$/, '')}%`;
+const percentileFunc = n => `${n.toFixed(1).replace(/\.0$/, '')}%`;
+// const ratingFunc = n => n.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+const ratingFunc = n => n.toFixed(0);
 const defaultRenderFunc = n => n.toFixed(0);
+const formatPlacement = n => n.toFixed(2).replace(/0+$/, '').replace(/\.$/, '');
 
 
 const interestingData = {
   DESIGN: [
     { key: 'wins', label: 'wins', postFunc: null },
     { key: 'challenges', label: 'challenges', postFunc: null },
+    { key: 'winPercent', label: 'percentile', postFunc: percentileFunc },
+    { key: 'screeningSuccessRate', label: 'Screening Success Rate', postFunc: percentileFunc },
+    { key: 'avgPlacement', label: 'Average Placement', postFunc: formatPlacement },
   ],
   DEVELOP: [
     { key: 'rank.rating', label: 'rating', postFunc: ratingFunc },
     { key: 'rank.overallRank', label: 'rank', postFunc: null },
     { key: 'rank.overallPercentile', label: 'percentile', postFunc: percentileFunc },
-    { key: 'submissions.submissions', label: 'challenges', postFunc: null },
     { key: 'wins', label: 'wins', postFunc: null },
-    { key: 'rank.reliability', label: 'reliability', postFunc: percentageFunc },
+    { key: 'submissions.submissions', label: 'challenges', postFunc: null },
+    // { key: 'rank.reliability', label: 'reliability', postFunc: percentageFunc },
   ],
   'DATA_SCIENCE.SRM': [
     { key: 'rank.rating', label: 'rating', postFunc: ratingFunc },
     { key: 'rank.rank', label: 'rank', postFunc: null },
     { key: 'rank.percentile', label: 'percentile', postFunc: percentileFunc },
-    { key: 'challenges', label: 'competitions', postFunc: null },
+    { key: 'challenges', label: 'competition', postFunc: null },
     { key: 'rank.volatility', label: 'volatility', postFunc: null },
   ],
   'DATA_SCIENCE.MARATHON_MATCH': [

From 873a8d6686d94c5b1021b7423042984ac31085f9 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 24 Jun 2022 12:22:39 +0700
Subject: [PATCH 17/37] improvement(reskin-profile): change SRM stat to
 competitions

---
 src/shared/utils/memberStats.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/utils/memberStats.js b/src/shared/utils/memberStats.js
index dbfeea8aea..7f78eabcd9 100644
--- a/src/shared/utils/memberStats.js
+++ b/src/shared/utils/memberStats.js
@@ -129,7 +129,7 @@ const interestingData = {
     { key: 'rank.rating', label: 'rating', postFunc: ratingFunc },
     { key: 'rank.rank', label: 'rank', postFunc: null },
     { key: 'rank.percentile', label: 'percentile', postFunc: percentileFunc },
-    { key: 'challenges', label: 'competition', postFunc: null },
+    { key: 'challenges', label: 'competitions', postFunc: null },
     { key: 'rank.volatility', label: 'volatility', postFunc: null },
   ],
   'DATA_SCIENCE.MARATHON_MATCH': [

From fcaa93614738d6c12feb606dde900d9f6a149a60 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 20 Jun 2022 09:29:27 +0700
Subject: [PATCH 18/37] improvement(reskin-profile): verified badge


From b28e9ac7092709674e2c2df761240eda809241bf Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sun, 26 Jun 2022 11:57:41 +0700
Subject: [PATCH 19/37] improvement(reskin-profile): bottom preloader

---
 .../Stats/SubTrackChallengeView/ChallengeTable/styles.scss   | 4 ++--
 src/shared/components/ProfilePage/styles.scss                | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss
index 7c600f7048..f08d79d273 100644
--- a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/styles.scss
@@ -7,7 +7,7 @@ table.challenges {
   tbody {
     width: 100%;
     display: block;
-    height: 385px;
+    max-height: 365px;
     overflow-y: auto;
 
     @include roboto-regular;
@@ -66,7 +66,7 @@ table.challenges {
     }
 
     @include xs-to-sm {
-      height: 360px;
+      max-height: 360px;
 
       tr {
         flex-direction: column;
diff --git a/src/shared/components/ProfilePage/styles.scss b/src/shared/components/ProfilePage/styles.scss
index a1373d9f56..27226ce130 100644
--- a/src/shared/components/ProfilePage/styles.scss
+++ b/src/shared/components/ProfilePage/styles.scss
@@ -64,11 +64,10 @@
 .modal-container-copilot,
 .modal-container {
   width: 1232px;
-  height: 700px;
-  max-height: 700px;
+  min-height: 700px;
   max-width: 1232px;
   border-radius: 8px;
-  padding: 32px 32px 48px 32px;
+  padding: 32px 32px 0 32px;
   gap: 24px;
 
   &.modal-container-copilot {

From 3c6ee018b1b4b3af7504710d5d5355f0ef79045c Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 28 Jun 2022 12:00:21 +0700
Subject: [PATCH 20/37] improvement(reskin-profile): challenge list in modal
 dup

---
 src/shared/containers/ProfileStats.jsx | 28 +++++++++++++-------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/shared/containers/ProfileStats.jsx b/src/shared/containers/ProfileStats.jsx
index e4af46e3f3..f89814fab5 100644
--- a/src/shared/containers/ProfileStats.jsx
+++ b/src/shared/containers/ProfileStats.jsx
@@ -56,20 +56,20 @@ class ProfileStatsContainer extends React.Component {
 
     if (nextHandleParam !== handleParam) {
       loadStats(nextHandleParam, _.join(loadPublicStatsOnly(meta) ? undefined : _.get(meta, 'groupIds', [])), auth.tokenV3);
-      if (
-        nextTrack !== track
-        || nextSubTrack !== subTrack
-      ) {
-        if (shouldShowGraph({ track: nextTrack, subTrack: nextSubTrack })
-          && !nextTab) {
-          loadStatsHistoryAndDistribution(
-            nextHandleParam,
-            _.join(loadPublicStatsOnly(meta) ? undefined : _.get(meta, 'groupIds', [])),
-            nextTrack,
-            nextSubTrack,
-            auth.tokenV3,
-          );
-        }
+    }
+    if (
+      nextTrack !== track
+      || nextSubTrack !== subTrack
+    ) {
+      if (shouldShowGraph({ track: nextTrack, subTrack: nextSubTrack })
+        && !nextTab) {
+        loadStatsHistoryAndDistribution(
+          nextHandleParam,
+          _.join(loadPublicStatsOnly(meta) ? undefined : _.get(meta, 'groupIds', [])),
+          nextTrack,
+          nextSubTrack,
+          auth.tokenV3,
+        );
       }
     }
   }

From ad56d0300a51310dd26dcda174e457a39b67fa07 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 28 Jun 2022 18:45:09 +0700
Subject: [PATCH 21/37] improvement(reskin-profile): challenge icons colors

---
 src/shared/components/TrackIcon/index.jsx     |  4 +-
 src/shared/components/TrackIcon/style.scss    | 50 +++-------
 .../challenge-detail/Header/ChallengeTags.jsx | 80 +++++++---------
 .../challenge-detail/Header/style.scss        | 93 +++++++++++++++++++
 src/styles/_mixins/_variables.scss            |  8 ++
 5 files changed, 150 insertions(+), 85 deletions(-)

diff --git a/src/shared/components/TrackIcon/index.jsx b/src/shared/components/TrackIcon/index.jsx
index 411c71bf60..0aea6fbda6 100644
--- a/src/shared/components/TrackIcon/index.jsx
+++ b/src/shared/components/TrackIcon/index.jsx
@@ -26,13 +26,13 @@ export default function TrackIcon({
         </a>
       ) : (
         <div
-          styleName={`${trackStyle} main-icon`}
+          styleName={`${type.abbreviation} main-icon`}
         >
           {type.abbreviation}
         </div>
       )}
       <a href={`${TCO_URL}`}>
-        <div styleName={tcoEligible ? `${trackStyle} tco-icon` : 'hidden'}>
+        <div styleName={`${type.abbreviation} tco-icon ${tcoEligible ? '' : 'hidden'}`}>
           TCO
         </div>
       </a>
diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss
index 62ef3d0b69..e8eb09ffab 100644
--- a/src/shared/components/TrackIcon/style.scss
+++ b/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;
     }
   }
 
diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
index e9150ce43f..4c211c9c8e 100644
--- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
+++ b/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 && (
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 341a5372e7..16115573b9 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 @import '~styles/mixins';
 
 .challengeAction {
@@ -159,6 +160,98 @@
 
 .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 {
diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss
index 1d0be4396c..0acd0a36f6 100644
--- a/src/styles/_mixins/_variables.scss
+++ b/src/styles/_mixins/_variables.scss
@@ -45,3 +45,11 @@ $listing-avatar-white: #f0f0f0;
 $profile-skill-badge: #227681;
 $profile-member-wins: #1e94a3;
 $profile-border-gray: #e9e9e9;
+
+/* track color */
+$track-code-green: #35ac35;
+$track-code-green-light: #d8fdd8;
+$track-code-blue: #2984bd;
+$track-code-blue-light: #bae1f9;
+$track-code-turquose: #0ab88a;
+$track-code-turquose-light: #c1f5e7;

From 04b1d309ff26c671a95fde2fe7436545c5170ac4 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 28 Jun 2022 21:21:36 +0700
Subject: [PATCH 22/37] Merge pull request #6568 from
 topcoder-platform/f2f-30277179-4

Topcoder Reskin - Challenge Icons Colors
---
 .../TrackIcon/__snapshots__/index.jsx.snap           | 12 ++++++------
 src/shared/components/TrackIcon/index.jsx            |  8 ++++++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
index ffff9deca3..e7b8818dcb 100644
--- a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
@@ -5,7 +5,7 @@ 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>
@@ -13,7 +13,7 @@ exports[`Matches shallow shapshot 1`] = `
     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,7 +26,7 @@ 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>
@@ -34,7 +34,7 @@ exports[`Matches shallow shapshot 2`] = `
     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,7 +47,7 @@ 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>
@@ -55,7 +55,7 @@ exports[`Matches shallow shapshot 3`] = `
     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>
diff --git a/src/shared/components/TrackIcon/index.jsx b/src/shared/components/TrackIcon/index.jsx
index 0aea6fbda6..3553d8cf55 100644
--- a/src/shared/components/TrackIcon/index.jsx
+++ b/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>

From e9c57dbc742bfb41036add31f6b68771ed66fc43 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 29 Jun 2022 11:29:11 +0700
Subject: [PATCH 23/37] improvement(reskin-profile): challenge list in modal
 dup2

---
 .../Stats/SubTrackChallengeView/index.jsx     | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
index f2ec692299..1bdf36653e 100644
--- a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
@@ -87,7 +87,6 @@ class SubTrackChallengeView extends React.Component {
 
       track,
       subTrack,
-      loadingSubTrackChallengesUUID,
       challenges,
       challengesHasMore,
       loadingSRMUUID,
@@ -101,23 +100,21 @@ class SubTrackChallengeView extends React.Component {
     const isEqLen = (prevArr, arr) => (prevArr && prevArr.length) === (arr && arr.length);
 
     if (track === 'DEVELOP' || track === 'DESIGN') {
-      if (!loadingSubTrackChallengesUUID) {
-        if (!isEqLen(prevProps.challenges, challenges)) {
-          // NOTE: Loaded successful, nothing todo
-          if (challengesHasMore) {
-            loadSubtrackChallenges(
-              handle,
-              auth.tokenV3,
-              track,
-              subTrack,
-              pageNum + 1,
-              CHALLENGE_PER_PAGE,
-              false,
-              userId,
-            );
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({ pageNum: pageNum + 1 });
-          }
+      if (!isEqLen(prevProps.challenges, challenges)) {
+        // NOTE: Loaded successful, nothing todo
+        if (challengesHasMore) {
+          loadSubtrackChallenges(
+            handle,
+            auth.tokenV3,
+            track,
+            subTrack,
+            pageNum + 1,
+            CHALLENGE_PER_PAGE,
+            false,
+            userId,
+          );
+          // eslint-disable-next-line react/no-did-update-set-state
+          this.setState({ pageNum: pageNum + 1 });
         }
       }
     }

From f8393cfcde3d4670a1300ff6914e8f176480eab9 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Thu, 30 Jun 2022 22:25:44 +0700
Subject: [PATCH 24/37] fix(reskin-profile): verified badge tooltip


From d57c2fae5930d7717181a57aeb01ea641c9f0ea4 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 1 Jul 2022 09:21:45 +0700
Subject: [PATCH 25/37] Merge branch 'develop' into reskin-profile

---
 .circleci/config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8f79e6d2b3..d9f3507885 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -357,6 +357,7 @@ workflows:
             branches:
               only:
                 - free
+                - tco23
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global

From a06e284d69f5f32eae0b5f613c586aaa1649e60f Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Thu, 30 Jun 2022 22:25:44 +0700
Subject: [PATCH 26/37] fix(reskin-profile): verified badge tooltip


From e276044b783b11bbafb46bbad8aedde925ad233b Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 2 Jul 2022 11:19:20 +0700
Subject: [PATCH 27/37] improvement(reskin-profile): modal dup data

---
 .../__snapshots__/index.jsx.snap              |    5 +
 .../ProfilePage/__snapshots__/index.jsx.snap  | 1662 ++++++++---------
 .../shared/components/ProfilePage/index.jsx   |   32 +-
 .../Stats/SubTrackChallengeView/index.jsx     |   38 +-
 .../components/ProfilePage/Stats/index.jsx    |    8 +
 src/shared/components/ProfilePage/index.jsx   |   39 +-
 src/shared/containers/ProfileStats.jsx        |    6 +
 7 files changed, 923 insertions(+), 867 deletions(-)

diff --git a/__tests__/shared/components/ProfilePage/Stats/SubTrackChallengeView/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/Stats/SubTrackChallengeView/__snapshots__/index.jsx.snap
index a753995d16..272205bb7c 100644
--- a/__tests__/shared/components/ProfilePage/Stats/SubTrackChallengeView/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/ProfilePage/Stats/SubTrackChallengeView/__snapshots__/index.jsx.snap
@@ -963,6 +963,11 @@ exports[`SubtrackChallengeView matches shallow snapshot 1`] = `
   }
   challengesHasMore={null}
   handle="thomaskranitsas"
+  isAlreadyLoadChallenge={
+    Object {
+      "current": false,
+    }
+  }
   loadMarathon={[Function]}
   loadSRM={[Function]}
   loadSubtrackChallenges={[Function]}
diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
index 43cf907758..5578d3dab4 100644
--- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
@@ -1,896 +1,868 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a full Profile correctly 1`] = `
-<div
-  className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
->
-  <div>
-    <Connect(ProfileHeader)
-      info={
-        Object {
-          "competitionCountryCode": "USA",
-          "createdAt": "2004-03-21T21:05Z",
-          "createdBy": "200000",
-          "description": "Test Description",
-          "handle": "testHandle",
-          "handleLower": "testhandle",
-          "homeCountryCode": "USA",
-          "maxRating": Object {
-            "rating": 0,
-            "subTrack": null,
-            "track": null,
-          },
-          "photoURL": null,
-          "status": "ACTIVE",
-          "tracks": Array [
-            "DATA_SCIENCE",
-            "DESIGN",
-            "DEVELOP",
-          ],
-          "updatedAt": "2017-10-17T17:13Z",
-          "updatedBy": "200000",
-          "userId": 200000,
-        }
-      }
-    />
-    <div
-      className="src-shared-components-ProfilePage-___styles__content___2JKnD"
-    >
-      <div
-        className="src-shared-components-ProfilePage-___styles__left-content___1QEHu"
-      >
-        <MemberTracks
-          copilot={true}
-          hasMM={false}
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [
-                "DATA_SCIENCE",
-                "DESIGN",
-                "DEVELOP",
-              ],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-        />
-        <Skills
-          isMobile={false}
-          skills={
-            Array [
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "117",
-                "tagName": "API",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "125",
-                "tagName": "Bash",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "132",
-                "tagName": "C#",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "153",
-                "tagName": "CSS",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "159",
-                "tagName": "Database",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "168",
-                "tagName": "EC2",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "170",
-                "tagName": "EJB",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "176",
-                "tagName": "Excel",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "212",
-                "tagName": "HTML",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "247",
-                "tagName": "Java",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "248",
-                "tagName": "JavaScript",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "259",
-                "tagName": "JSON",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "260",
-                "tagName": "JSP",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "284",
-                "tagName": "MySql",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "286",
-                "tagName": "Node.js",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "294",
-                "tagName": "Oracle",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "295",
-                "tagName": "Oracle Database",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "306",
-                "tagName": "PostgreSQL",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "317",
-                "tagName": "Redis",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "323",
-                "tagName": "REST",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "CHALLENGE",
-                ],
-                "tagId": "328",
-                "tagName": "Salesforce",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "355",
-                "tagName": "SQL",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "356",
-                "tagName": "SQL Server",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "387",
-                "tagName": "Web Services",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "401",
-                "tagName": "XML",
-              },
-            ]
-          }
-        />
-        <p
-          className="src-shared-components-ProfilePage-___styles__description___3m4a3"
-        >
-          Test Description
-        </p>
-      </div>
-      <div
-        className="src-shared-components-ProfilePage-___styles__right-content___1PO0x"
-      >
-        <MemberInfo
-          country=""
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [
-                "DATA_SCIENCE",
-                "DESIGN",
-                "DEVELOP",
-              ],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-          wins={0}
-        />
-      </div>
-    </div>
-  </div>
-  <Activity
-    hasMM={false}
-    memberStats={
+<ProfilePage
+  achievements={
+    Array [
+      Object {
+        "date": "2017-09-18T00:00:00.000-04:00",
+        "description": "SRM Engagement Honor",
+      },
+      Object {
+        "date": "2015-07-23T00:00:00.000-04:00",
+        "description": "Studio First Passing Submission",
+      },
+      Object {
+        "date": "2015-06-02T00:00:00.000-04:00",
+        "description": "Participant Badge",
+      },
+      Object {
+        "date": "2015-04-29T00:00:00.000-04:00",
+        "description": "Show Your Skills iOS Badge",
+      },
+      Object {
+        "date": "2015-04-23T00:00:00.000-04:00",
+        "description": "iOS Participant Badge",
+      },
+      Object {
+        "date": "2013-03-21T00:00:00.000-04:00",
+        "description": "First Forum Post",
+      },
+      Object {
+        "date": "2013-02-20T00:00:00.000-05:00",
+        "description": "One Hundred Forum Posts",
+      },
       Object {
-        "COPILOT": Object {
-          "fulfillment": "98",
+        "date": "2012-11-28T00:00:00.000-05:00",
+        "description": "Five Hundred Forum Posts",
+      },
+      Object {
+        "date": "2012-09-29T00:00:00.000-04:00",
+        "description": "First Passing Submission",
+      },
+      Object {
+        "date": "2012-04-30T00:00:00.000-04:00",
+        "description": "One Thousand Forum Posts",
+      },
+      Object {
+        "date": "2012-02-17T00:00:00.000-05:00",
+        "description": "Studio First Forum Post",
+      },
+      Object {
+        "date": "2009-06-23T00:00:00.000-04:00",
+        "description": "Studio One Hundred Forum Posts",
+      },
+      Object {
+        "date": "2005-01-29T00:00:00.000-05:00",
+        "description": "Five Thousand Forum Posts",
+      },
+    ]
+  }
+  challenges={null}
+  clearSubtrackChallenges={[Function]}
+  copilot={true}
+  country="United States"
+  externalAccounts={
+    Object {
+      "behance": null,
+      "bitbucket": Object {
+        "followers": 0,
+        "handle": "testHandle",
+        "languages": null,
+        "profileURL": "https://bitbucket.org/testHandle/",
+        "repos": 0,
+      },
+      "dribbble": null,
+      "github": null,
+      "handle": "testHandle",
+      "linkedin": null,
+      "stackoverflow": Object {
+        "answers": 42,
+        "name": "testHandle",
+        "reputation": 1000,
+      },
+      "twitter": null,
+      "userId": 200000,
+    }
+  }
+  externalLinks={
+    Array [
+      Object {
+        "URL": "www.topcoder.com",
+        "description": "Topcoder!",
+        "handle": "testHandle",
+        "title": "topcoder",
+        "userId": 200000,
+      },
+    ]
+  }
+  handleParam="testHandle"
+  info={
+    Object {
+      "competitionCountryCode": "USA",
+      "createdAt": "2004-03-21T21:05Z",
+      "createdBy": "200000",
+      "description": "Test Description",
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "homeCountryCode": "USA",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "photoURL": null,
+      "status": "ACTIVE",
+      "tracks": Array [
+        "DATA_SCIENCE",
+        "DESIGN",
+        "DEVELOP",
+      ],
+      "updatedAt": "2017-10-17T17:13Z",
+      "updatedBy": "200000",
+      "userId": 200000,
+    }
+  }
+  loadingError={false}
+  profileForHandle="testHandle"
+  rewards={Array []}
+  skills={
+    Object {
+      "117": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "API",
+      },
+      "125": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Bash",
+      },
+      "132": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "C#",
+      },
+      "153": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "CSS",
+      },
+      "159": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Database",
+      },
+      "168": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "EC2",
+      },
+      "170": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "EJB",
+      },
+      "176": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Excel",
+      },
+      "212": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "HTML",
+      },
+      "247": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Java",
+      },
+      "248": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "JavaScript",
+      },
+      "259": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "JSON",
+      },
+      "260": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "JSP",
+      },
+      "284": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "MySql",
+      },
+      "286": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Node.js",
+      },
+      "294": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Oracle",
+      },
+      "295": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Oracle Database",
+      },
+      "306": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "PostgreSQL",
+      },
+      "317": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Redis",
+      },
+      "323": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "REST",
+      },
+      "328": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "CHALLENGE",
+        ],
+        "tagName": "Salesforce",
+      },
+      "355": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "SQL",
+      },
+      "356": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "SQL Server",
+      },
+      "387": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Web Services",
+      },
+      "401": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "XML",
+      },
+    }
+  }
+  stats={
+    Object {
+      "COPILOT": Object {
+        "fulfillment": "98",
+      },
+      "DATA_SCIENCE": Object {
+        "MARATHON_MATCH": Object {
+          "challenges": 2,
+          "rank": Object {
+            "avgNumSubmissions": 0,
+            "avgRank": 0,
+            "bestRank": 0,
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
+            "rating": 1800,
+            "schoolRank": 0,
+            "topFiveFinishes": 0,
+            "topTenFinishes": 0,
+            "volatility": 0,
+          },
+          "wins": 1,
         },
-        "DATA_SCIENCE": Object {
-          "MARATHON_MATCH": Object {
-            "challenges": 2,
-            "rank": Object {
-              "avgNumSubmissions": 0,
-              "avgRank": 0,
-              "bestRank": 0,
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 1800,
-              "schoolRank": 0,
-              "topFiveFinishes": 0,
-              "topTenFinishes": 0,
-              "volatility": 0,
-            },
-            "wins": 1,
+        "SRM": Object {
+          "challengeDetails": null,
+          "challenges": 0,
+          "division1": null,
+          "division2": null,
+          "rank": Object {
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
+            "rating": 1650,
+            "schoolRank": 0,
+            "volatility": 0,
           },
-          "SRM": Object {
-            "challengeDetails": null,
-            "challenges": 0,
-            "division1": null,
-            "division2": null,
-            "rank": Object {
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 1650,
-              "schoolRank": 0,
-              "volatility": 0,
-            },
+          "wins": 0,
+        },
+        "challenges": 5,
+        "wins": 4,
+      },
+      "DESIGN": Object {
+        "challenges": 49,
+        "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+        "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+        "subTracks": Array [
+          Object {
+            "avgPlacement": 0,
+            "challenges": 3,
+            "id": 20,
+            "mostRecentEventDate": "2010-06-30T07:00:00.000Z",
+            "mostRecentSubmission": "2009-04-16T22:17:00.000Z",
+            "name": "LOGO_DESIGN",
+            "numInquiries": 3,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0.3333333333333333,
+            "submissions": 1,
+            "winPercent": 0,
             "wins": 0,
           },
-          "challenges": 5,
-          "wins": 4,
-        },
-        "DESIGN": Object {
-          "challenges": 49,
-          "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-          "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-          "subTracks": Array [
-            Object {
-              "avgPlacement": 0,
-              "challenges": 3,
-              "id": 20,
-              "mostRecentEventDate": "2010-06-30T07:00:00.000Z",
-              "mostRecentSubmission": "2009-04-16T22:17:00.000Z",
-              "name": "LOGO_DESIGN",
-              "numInquiries": 3,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0.3333333333333333,
-              "submissions": 1,
-              "winPercent": 0,
-              "wins": 0,
-            },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 21,
-              "id": 17,
-              "mostRecentEventDate": "2014-12-16T09:01:12.000Z",
-              "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-              "name": "WEB_DESIGNS",
-              "numInquiries": 21,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0.04761904761904762,
-              "submissions": 1,
-              "winPercent": 0,
-              "wins": 0,
-            },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 3,
-              "id": 34,
-              "mostRecentEventDate": "2009-09-08T12:00:00.000Z",
-              "name": "STUDIO_OTHER",
-              "numInquiries": 3,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
+          Object {
+            "avgPlacement": 0,
+            "challenges": 21,
+            "id": 17,
+            "mostRecentEventDate": "2014-12-16T09:01:12.000Z",
+            "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+            "name": "WEB_DESIGNS",
+            "numInquiries": 21,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0.04761904761904762,
+            "submissions": 1,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 3,
+            "id": 34,
+            "mostRecentEventDate": "2009-09-08T12:00:00.000Z",
+            "name": "STUDIO_OTHER",
+            "numInquiries": 3,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 6,
+            "id": 16,
+            "mostRecentEventDate": "2014-05-22T01:00:10.000Z",
+            "name": "BANNERS_OR_ICONS",
+            "numInquiries": 6,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 5,
+            "id": 18,
+            "mostRecentEventDate": "2014-06-06T03:53:03.000Z",
+            "name": "WIREFRAMES",
+            "numInquiries": 5,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 5,
+            "id": 40,
+            "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+            "name": "DESIGN_FIRST_2_FINISH",
+            "numInquiries": 5,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 1,
+            "id": 32,
+            "mostRecentEventDate": "2010-02-05T23:00:00.000Z",
+            "name": "APPLICATION_FRONT_END_DESIGN",
+            "numInquiries": 1,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 3,
+            "id": 21,
+            "mostRecentEventDate": "2014-07-08T10:00:16.000Z",
+            "name": "PRINT_OR_PRESENTATION",
+            "numInquiries": 3,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 2,
+            "id": 30,
+            "mostRecentEventDate": "2014-04-11T09:00:08.000Z",
+            "name": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+            "numInquiries": 2,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+        ],
+        "wins": 0,
+      },
+      "DEVELOP": Object {
+        "challenges": 29,
+        "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+        "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+        "subTracks": Array [
+          Object {
+            "challenges": 6,
+            "id": 125,
+            "mostRecentEventDate": "2014-10-06T11:30:02.000Z",
+            "name": "ASSEMBLY_COMPETITION",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
             },
-            Object {
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
               "avgPlacement": 0,
-              "challenges": 6,
-              "id": 16,
-              "mostRecentEventDate": "2014-05-22T01:00:10.000Z",
-              "name": "BANNERS_OR_ICONS",
+              "avgScore": 0,
+              "maxScore": 0,
+              "minScore": 0,
               "numInquiries": 6,
+              "passedReview": 0,
               "passedScreening": 0,
+              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
-              "wins": 0,
             },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 5,
-              "id": 18,
-              "mostRecentEventDate": "2014-06-06T03:53:03.000Z",
-              "name": "WIREFRAMES",
-              "numInquiries": 5,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
-            },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 5,
-              "id": 40,
-              "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-              "name": "DESIGN_FIRST_2_FINISH",
-              "numInquiries": 5,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
+            "wins": 0,
+          },
+          Object {
+            "challenges": 1,
+            "id": 134,
+            "mostRecentEventDate": "2014-03-22T22:00:03.000Z",
+            "name": "CONCEPTUALIZATION",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
             },
-            Object {
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
               "avgPlacement": 0,
-              "challenges": 1,
-              "id": 32,
-              "mostRecentEventDate": "2010-02-05T23:00:00.000Z",
-              "name": "APPLICATION_FRONT_END_DESIGN",
+              "avgScore": 0,
+              "maxScore": 0,
+              "minScore": 0,
               "numInquiries": 1,
+              "passedReview": 0,
               "passedScreening": 0,
+              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
-              "wins": 0,
             },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 3,
-              "id": 21,
-              "mostRecentEventDate": "2014-07-08T10:00:16.000Z",
-              "name": "PRINT_OR_PRESENTATION",
-              "numInquiries": 3,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
+            "wins": 0,
+          },
+          Object {
+            "challenges": 20,
+            "id": 149,
+            "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+            "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+            "name": "FIRST_2_FINISH",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
             },
-            Object {
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
+              "avgPlacement": 1,
+              "avgScore": 100,
+              "maxScore": 100,
+              "minScore": 100,
+              "numInquiries": 20,
+              "passedReview": 3,
+              "passedScreening": 3,
+              "reviewSuccessRate": 0.6,
+              "screeningSuccessRate": 0.6,
+              "submissionRate": 0.25,
+              "submissions": 5,
+              "winPercent": 0.6,
+            },
+            "wins": 3,
+          },
+          Object {
+            "challenges": 2,
+            "id": 150,
+            "mostRecentEventDate": "2014-10-31T08:37:11.000Z",
+            "name": "CODE",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
+            },
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
               "avgPlacement": 0,
-              "challenges": 2,
-              "id": 30,
-              "mostRecentEventDate": "2014-04-11T09:00:08.000Z",
-              "name": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+              "avgScore": 0,
+              "maxScore": 0,
+              "minScore": 0,
               "numInquiries": 2,
+              "passedReview": 0,
               "passedScreening": 0,
+              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
-              "wins": 0,
-            },
-          ],
-          "wins": 0,
-        },
-        "DEVELOP": Object {
-          "challenges": 29,
-          "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-          "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-          "subTracks": Array [
-            Object {
-              "challenges": 6,
-              "id": 125,
-              "mostRecentEventDate": "2014-10-06T11:30:02.000Z",
-              "name": "ASSEMBLY_COMPETITION",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 0,
-                "avgScore": 0,
-                "maxScore": 0,
-                "minScore": 0,
-                "numInquiries": 6,
-                "passedReview": 0,
-                "passedScreening": 0,
-                "reviewSuccessRate": 0,
-                "screeningSuccessRate": 0,
-                "submissionRate": 0,
-                "submissions": 0,
-                "winPercent": 0,
-              },
-              "wins": 0,
             },
-            Object {
-              "challenges": 1,
-              "id": 134,
-              "mostRecentEventDate": "2014-03-22T22:00:03.000Z",
-              "name": "CONCEPTUALIZATION",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 0,
-                "avgScore": 0,
-                "maxScore": 0,
-                "minScore": 0,
-                "numInquiries": 1,
-                "passedReview": 0,
-                "passedScreening": 0,
-                "reviewSuccessRate": 0,
-                "screeningSuccessRate": 0,
-                "submissionRate": 0,
-                "submissions": 0,
-                "winPercent": 0,
-              },
-              "wins": 0,
-            },
-            Object {
-              "challenges": 20,
-              "id": 149,
-              "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-              "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-              "name": "FIRST_2_FINISH",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 1,
-                "avgScore": 100,
-                "maxScore": 100,
-                "minScore": 100,
-                "numInquiries": 20,
-                "passedReview": 3,
-                "passedScreening": 3,
-                "reviewSuccessRate": 0.6,
-                "screeningSuccessRate": 0.6,
-                "submissionRate": 0.25,
-                "submissions": 5,
-                "winPercent": 0.6,
-              },
-              "wins": 3,
-            },
-            Object {
-              "challenges": 2,
-              "id": 150,
-              "mostRecentEventDate": "2014-10-31T08:37:11.000Z",
-              "name": "CODE",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 0,
-                "avgScore": 0,
-                "maxScore": 0,
-                "minScore": 0,
-                "numInquiries": 2,
-                "passedReview": 0,
-                "passedScreening": 0,
-                "reviewSuccessRate": 0,
-                "screeningSuccessRate": 0,
-                "submissionRate": 0,
-                "submissions": 0,
-                "winPercent": 0,
-              },
-              "wins": 0,
-            },
-          ],
-          "wins": 3,
-        },
-        "challenges": 78,
-        "createdAt": null,
-        "createdBy": null,
-        "handle": "testHandle",
-        "handleLower": "testhandle",
-        "maxRating": Object {
-          "rating": 0,
-          "subTrack": null,
-          "track": null,
-        },
-        "updatedAt": null,
-        "updatedBy": null,
-        "userId": 200000,
+            "wins": 0,
+          },
+        ],
         "wins": 3,
-      }
+      },
+      "challenges": 78,
+      "createdAt": null,
+      "createdBy": null,
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "updatedAt": null,
+      "updatedBy": null,
+      "userId": 200000,
+      "wins": 3,
     }
-    onClick={[Function]}
-  />
-</div>
+  }
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "subscribe": [Function],
+    }
+  }
+  storeSubscription={
+    Subscription {
+      "listeners": Object {
+        "notify": [Function],
+      },
+      "onStateChange": [Function],
+      "parentSub": undefined,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "subscribe": [Function],
+      },
+      "unsubscribe": null,
+    }
+  }
+/>
 `;
 
 exports[`renders an empty Profile correctly 1`] = `
-<div
-  className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
->
-  <div>
-    <Connect(ProfileHeader)
-      info={
-        Object {
-          "competitionCountryCode": "USA",
-          "createdAt": "2004-03-21T21:05Z",
-          "createdBy": "200000",
-          "description": "Test Description",
-          "handle": "testHandle",
-          "handleLower": "testhandle",
-          "homeCountryCode": "USA",
-          "maxRating": Object {
+<ProfilePage
+  achievements={Array []}
+  challenges={null}
+  clearSubtrackChallenges={[Function]}
+  copilot={false}
+  country="United States"
+  externalAccounts={
+    Object {
+      "behance": null,
+      "bitbucket": null,
+      "dribbble": null,
+      "github": null,
+      "handle": "testHandle",
+      "linkedin": null,
+      "stackoverflow": null,
+      "twitter": null,
+      "userId": 200000,
+    }
+  }
+  externalLinks={Array []}
+  handleParam="testHandle"
+  info={
+    Object {
+      "competitionCountryCode": "USA",
+      "createdAt": "2004-03-21T21:05Z",
+      "createdBy": "200000",
+      "description": "Test Description",
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "homeCountryCode": "USA",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "photoURL": null,
+      "status": "ACTIVE",
+      "tracks": Array [],
+      "updatedAt": "2017-10-17T17:13Z",
+      "updatedBy": "200000",
+      "userId": 200000,
+    }
+  }
+  loadingError={false}
+  profileForHandle="testHandle"
+  rewards={Array []}
+  skills={Object {}}
+  stats={
+    Object {
+      "COPILOT": null,
+      "DATA_SCIENCE": Object {
+        "MARATHON_MATCH": Object {
+          "challenges": 0,
+          "rank": Object {
+            "avgNumSubmissions": 0,
+            "avgRank": 0,
+            "bestRank": 0,
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
             "rating": 0,
-            "subTrack": null,
-            "track": null,
-          },
-          "photoURL": null,
-          "status": "ACTIVE",
-          "tracks": Array [],
-          "updatedAt": "2017-10-17T17:13Z",
-          "updatedBy": "200000",
-          "userId": 200000,
-        }
-      }
-    />
-    <div
-      className="src-shared-components-ProfilePage-___styles__content___2JKnD"
-    >
-      <div
-        className="src-shared-components-ProfilePage-___styles__left-content___1QEHu"
-      >
-        <MemberTracks
-          copilot={false}
-          hasMM={false}
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-        />
-        <p
-          className="src-shared-components-ProfilePage-___styles__description___3m4a3"
-        >
-          Test Description
-        </p>
-      </div>
-      <div
-        className="src-shared-components-ProfilePage-___styles__right-content___1PO0x"
-      >
-        <MemberInfo
-          country=""
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-          wins={0}
-        />
-      </div>
-    </div>
-  </div>
-  <Activity
-    hasMM={false}
-    memberStats={
-      Object {
-        "COPILOT": null,
-        "DATA_SCIENCE": Object {
-          "MARATHON_MATCH": Object {
-            "challenges": 0,
-            "rank": Object {
-              "avgNumSubmissions": 0,
-              "avgRank": 0,
-              "bestRank": 0,
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 0,
-              "schoolRank": 0,
-              "topFiveFinishes": 0,
-              "topTenFinishes": 0,
-              "volatility": 0,
-            },
-            "wins": 0,
-          },
-          "SRM": Object {
-            "challengeDetails": null,
-            "challenges": 0,
-            "division1": null,
-            "division2": null,
-            "rank": Object {
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 0,
-              "schoolRank": 0,
-              "volatility": 0,
-            },
-            "wins": 0,
+            "schoolRank": 0,
+            "topFiveFinishes": 0,
+            "topTenFinishes": 0,
+            "volatility": 0,
           },
-          "challenges": 0,
           "wins": 0,
         },
-        "DESIGN": Object {
+        "SRM": Object {
+          "challengeDetails": null,
           "challenges": 0,
-          "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-          "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-          "subTracks": Array [],
-          "wins": 0,
-        },
-        "DEVELOP": Object {
-          "challenges": 0,
-          "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-          "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-          "subTracks": Array [],
+          "division1": null,
+          "division2": null,
+          "rank": Object {
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
+            "rating": 0,
+            "schoolRank": 0,
+            "volatility": 0,
+          },
           "wins": 0,
         },
         "challenges": 0,
-        "createdAt": null,
-        "createdBy": null,
-        "handle": "testHandle",
-        "handleLower": "testhandle",
-        "maxRating": Object {
-          "rating": 0,
-          "subTrack": null,
-          "track": null,
-        },
-        "updatedAt": null,
-        "updatedBy": null,
-        "userId": 200000,
         "wins": 0,
-      }
+      },
+      "DESIGN": Object {
+        "challenges": 0,
+        "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+        "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+        "subTracks": Array [],
+        "wins": 0,
+      },
+      "DEVELOP": Object {
+        "challenges": 0,
+        "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+        "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+        "subTracks": Array [],
+        "wins": 0,
+      },
+      "challenges": 0,
+      "createdAt": null,
+      "createdBy": null,
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "updatedAt": null,
+      "updatedBy": null,
+      "userId": 200000,
+      "wins": 0,
+    }
+  }
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "subscribe": [Function],
+    }
+  }
+  storeSubscription={
+    Subscription {
+      "listeners": Object {
+        "notify": [Function],
+      },
+      "onStateChange": [Function],
+      "parentSub": undefined,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "subscribe": [Function],
+      },
+      "unsubscribe": null,
     }
-    onClick={[Function]}
-  />
-</div>
+  }
+/>
 `;
diff --git a/__tests__/shared/components/ProfilePage/index.jsx b/__tests__/shared/components/ProfilePage/index.jsx
index 48729e29f0..fa4a6c189e 100644
--- a/__tests__/shared/components/ProfilePage/index.jsx
+++ b/__tests__/shared/components/ProfilePage/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 import Renderer from 'react-test-renderer/shallow';
 import ProfilePage from 'components/ProfilePage';
 
@@ -7,12 +8,39 @@ import fullProfile from './__mocks__/full-profile.json';
 
 const rnd = new Renderer();
 
+const mockState = {
+  auth: {
+    profile: {},
+  },
+  members: {
+    testHandle: {
+      subtrackChallenges: [],
+      challengesHasMore: false,
+      loadingSubTrackChallengesUUID: '',
+    },
+  },
+};
+
 it('renders an empty Profile correctly', () => {
-  rnd.render((<ProfilePage {...emptyProfile} />));
+  rnd.render((<ProfilePage
+    {...emptyProfile}
+    store={{
+      dispatch: () => _.noop,
+      getState: () => mockState,
+      subscribe: _.noop,
+    }}
+  />));
   expect(rnd.getRenderOutput()).toMatchSnapshot();
 });
 
 it('renders a full Profile correctly', () => {
-  rnd.render((<ProfilePage {...fullProfile} />));
+  rnd.render((<ProfilePage
+    {...fullProfile}
+    store={{
+      dispatch: () => _.noop,
+      getState: () => mockState,
+      subscribe: _.noop,
+    }}
+  />));
   expect(rnd.getRenderOutput()).toMatchSnapshot();
 });
diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
index 1bdf36653e..aa7b038322 100644
--- a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/index.jsx
@@ -33,40 +33,41 @@ class SubTrackChallengeView extends React.Component {
       auth,
       track,
       subTrack,
-      loadingSubTrackChallengesUUID,
       loadSubtrackChallenges,
       loadingSRMUUID,
       loadSRM,
       loadingMarathonUUID,
       loadMarathon,
       userId,
+      isAlreadyLoadChallenge,
     } = this.props;
 
     const {
       pageNum,
     } = this.state;
 
-    if (track === 'DEVELOP' || track === 'DESIGN') {
-      if (!loadingSubTrackChallengesUUID) {
-        loadSubtrackChallenges(
-          handle,
-          auth.tokenV3,
-          track, subTrack,
-          pageNum,
-          CHALLENGE_PER_PAGE,
-          true,
-          userId,
-        );
-      }
-    } else if (track === 'DATA_SCIENCE') {
+    if (!isAlreadyLoadChallenge.current && (track === 'DEVELOP' || track === 'DESIGN')) {
+      loadSubtrackChallenges(
+        handle,
+        auth.tokenV3,
+        track, subTrack,
+        pageNum,
+        CHALLENGE_PER_PAGE,
+        true,
+        userId,
+      );
+      isAlreadyLoadChallenge.current = true;
+    } else if (!isAlreadyLoadChallenge.current && track === 'DATA_SCIENCE') {
       if (subTrack === 'SRM') {
         if (!loadingSRMUUID) {
           // pageNum - 1 to match with v4 offset
           loadSRM(handle, auth.tokenV3, pageNum - 1, CHALLENGE_PER_PAGE, true);
+          isAlreadyLoadChallenge.current = true;
         }
       } else if (subTrack === 'MARATHON_MATCH') {
         if (!loadingMarathonUUID) {
           loadMarathon(handle, userId, auth.tokenV3, pageNum, CHALLENGE_PER_PAGE, true);
+          isAlreadyLoadChallenge.current = true;
         }
       }
     }
@@ -278,7 +279,7 @@ function mapDispatchToProps(dispatch) {
       refresh,
     ) => {
       const uuid = shortId();
-      dispatch(action.getSubtrackChallengesInit(handle, uuid));
+      dispatch(action.getSubtrackChallengesInit(handle, uuid, pageNum));
       dispatch(action.getSubtrackChallengesDone(
         uuid,
         handle,
@@ -323,6 +324,10 @@ SubTrackChallengeView.defaultProps = {
   loadingMarathonUUID: null,
   userMarathons: null,
   userMarathonHasMore: null,
+
+  isAlreadyLoadChallenge: {
+    current: false,
+  },
 };
 
 SubTrackChallengeView.propTypes = {
@@ -347,6 +352,9 @@ SubTrackChallengeView.propTypes = {
   loadSubtrackChallenges: PT.func.isRequired,
   loadSRM: PT.func.isRequired,
   loadMarathon: PT.func.isRequired,
+  isAlreadyLoadChallenge: PT.shape({
+    current: PT.bool,
+  }),
 };
 
 const Container = connect(
diff --git a/src/shared/components/ProfilePage/Stats/index.jsx b/src/shared/components/ProfilePage/Stats/index.jsx
index 8e7a064d45..06403d3f88 100644
--- a/src/shared/components/ProfilePage/Stats/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/index.jsx
@@ -29,6 +29,7 @@ class ProfileStats extends React.Component {
       info,
       handleParam,
       tab,
+      isAlreadyLoadChallenge,
     } = this.props;
     let { stats, statsHistory } = this.props;
     if (_.isArray(stats)) {
@@ -190,6 +191,7 @@ class ProfileStats extends React.Component {
               track={track}
               subTrack={subTrack}
               userId={info.userId}
+              isAlreadyLoadChallenge={isAlreadyLoadChallenge}
             />
           )}
 
@@ -205,6 +207,9 @@ class ProfileStats extends React.Component {
 ProfileStats.defaultProps = {
   statsDistribution: null,
   statsHistory: null,
+  isAlreadyLoadChallenge: {
+    current: false,
+  },
 };
 
 ProfileStats.propTypes = {
@@ -217,6 +222,9 @@ ProfileStats.propTypes = {
   info: PT.shape().isRequired,
   statsDistribution: PT.shape(),
   statsHistory: PT.arrayOf(PT.shape()),
+  isAlreadyLoadChallenge: PT.shape({
+    current: PT.bool,
+  }),
 };
 
 export default ProfileStats;
diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx
index c2767ccb73..1f75ea6a0b 100644
--- a/src/shared/components/ProfilePage/index.jsx
+++ b/src/shared/components/ProfilePage/index.jsx
@@ -10,6 +10,9 @@ import PT from 'prop-types';
 import { isomorphy } from 'topcoder-react-utils';
 import { Modal } from 'topcoder-react-ui-kit';
 import IconClose from 'assets/images/icon-close-green.svg';
+import shortId from 'shortid';
+import { actions } from 'topcoder-react-lib';
+import { connect } from 'react-redux';
 
 import ProfileStats from 'containers/ProfileStats';
 import { dataMap } from './ExternalLink';
@@ -55,6 +58,7 @@ class ProfilePage extends React.Component {
 
     this.handleResize = this.handleResize.bind(this);
     this.closeDetails = this.closeDetails.bind(this);
+    this.isAlreadyLoadChallenge = React.createRef();
   }
 
   componentDidMount() {
@@ -128,7 +132,9 @@ class ProfilePage extends React.Component {
   }
 
   closeDetails() {
-    this.setState({ showDetails: false });
+    const { clearSubtrackChallenges, handleParam } = this.props;
+    clearSubtrackChallenges(handleParam);
+    this.setState({ showDetails: false, track: '', subTrack: '' });
   }
 
   render() {
@@ -221,9 +227,12 @@ class ProfilePage extends React.Component {
         <Activity
           memberStats={stats}
           hasMM={hasMM}
-          onClick={({ track, subTrack }) => this.setState({
-            track, subTrack, showDetails: true, tab: '',
-          })}
+          onClick={({ track, subTrack }) => {
+            this.isAlreadyLoadChallenge.current = false;
+            this.setState({
+              track, subTrack, showDetails: true, tab: '',
+            });
+          }}
         />
         { showDetails && (
           <Modal
@@ -255,6 +264,7 @@ class ProfilePage extends React.Component {
                 setTab={(tab) => {
                   this.setState({ tab });
                 }}
+                isAlreadyLoadChallenge={this.isAlreadyLoadChallenge}
               />
             </React.Fragment>
           </Modal>
@@ -283,6 +293,25 @@ ProfilePage.propTypes = {
   lookupData: PT.shape().isRequired,
   handleParam: PT.string.isRequired,
   meta: PT.shape().isRequired,
+  clearSubtrackChallenges: PT.func.isRequired,
 };
 
-export default ProfilePage;
+function mapDispatchToProps(dispatch) {
+  const action = actions.members;
+
+  return {
+    clearSubtrackChallenges: (
+      handle,
+    ) => {
+      const uuid = shortId();
+      dispatch(action.getSubtrackChallengesInit(handle, uuid, 1));
+    },
+  };
+}
+
+const Container = connect(
+  () => ({}),
+  mapDispatchToProps,
+)(ProfilePage);
+
+export default Container;
diff --git a/src/shared/containers/ProfileStats.jsx b/src/shared/containers/ProfileStats.jsx
index f89814fab5..56ae4ce25e 100644
--- a/src/shared/containers/ProfileStats.jsx
+++ b/src/shared/containers/ProfileStats.jsx
@@ -116,6 +116,9 @@ ProfileStatsContainer.defaultProps = {
   info: null,
   meta: null,
   auth: {},
+  isAlreadyLoadChallenge: {
+    current: false,
+  },
 };
 
 ProfileStatsContainer.propTypes = {
@@ -134,6 +137,9 @@ ProfileStatsContainer.propTypes = {
   isLoading: PT.bool.isRequired,
   meta: PT.shape(),
   auth: PT.shape(),
+  isAlreadyLoadChallenge: PT.shape({
+    current: PT.bool,
+  }),
 };
 
 const mapStateToProps = (state, ownProps) => {

From 95e47dbcc5b96e66e2b63cebb624b380fca567d6 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 2 Jul 2022 12:01:48 +0700
Subject: [PATCH 28/37] fix: update to 1000.29.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c5cfd86bd9..7f9f78dd2e 100644
--- a/package.json
+++ b/package.json
@@ -153,7 +153,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.2.6",
+    "topcoder-react-lib": "1000.29.3",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

From b1a51f0612337e6827368f60e5de8dcb46898f56 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 8 Jul 2022 15:52:09 +0700
Subject: [PATCH 29/37] improvement(reskin-profile): mm challenge details

---
 .../ChallengeTable/index.jsx                    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
index d5f30c77cb..a5552aafb4 100644
--- a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { config } from 'topcoder-react-utils';
 import PT from 'prop-types';
 import _ from 'lodash';
 
@@ -78,6 +79,7 @@ const ChallengeTable = ({ challenges, handle, hideChallengeResult }) => {
             submissionEndDate,
             userDetails,
             track,
+            subTrack,
             winners,
             rounds,
             phases,
@@ -91,13 +93,22 @@ const ChallengeTable = ({ challenges, handle, hideChallengeResult }) => {
             // eslint-disable-next-line react/no-array-index-key
             <tr key={index} styleName={`${index % 2 === 1 ? 'odd' : 'even'}`}>
               <td styleName="challenge-info">
+                {/* eslint-disable-next-line no-nested-ternary */}
                 { !isPrivate
-                  ? (
-                    <Link to={`/challenges/${id}`} styleName="challenge-name">
+                  ? (subTrack === 'SRM' ? (
+                    <a href={`${config.URL.COMMUNITY}/stat?c=round_overview&rd=${id}`} styleName="challenge-name">
                       <span>
                         { getSafeName(name) }
                       </span>
-                    </Link>
+                    </a>
+                  )
+                    : (
+                      <Link to={`/challenges/${id}`} styleName="challenge-name">
+                        <span>
+                          { getSafeName(name) }
+                        </span>
+                      </Link>
+                    )
                   )
                   : (
                     <span styleName="challenge-name">

From d7251aa85b768236323832b697ebeff290b79f2d Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 15 Jul 2022 12:03:55 +0700
Subject: [PATCH 30/37] improvement(reskin-profile): code activity wrong
 challenge

---
 .../Stats/SubTrackChallengeView/ChallengeTable/index.jsx     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
index a5552aafb4..b57789ab78 100644
--- a/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/SubTrackChallengeView/ChallengeTable/index.jsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { config } from 'topcoder-react-utils';
 import PT from 'prop-types';
 import _ from 'lodash';
@@ -103,11 +102,11 @@ const ChallengeTable = ({ challenges, handle, hideChallengeResult }) => {
                     </a>
                   )
                     : (
-                      <Link to={`/challenges/${id}`} styleName="challenge-name">
+                      <a href={`/challenges/${id}`} styleName="challenge-name">
                         <span>
                           { getSafeName(name) }
                         </span>
-                      </Link>
+                      </a>
                     )
                   )
                   : (

From d7535892977584b2a1e872e6348197183ba79558 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 18 Jul 2022 22:55:59 +0700
Subject: [PATCH 31/37] Merge branch 'develop' into reskin-profile

---
 .circleci/config.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d9f3507885..4c263a2a2a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -356,7 +356,6 @@ workflows:
           filters:
             branches:
               only:
-                - free
                 - tco23
       # This is alternate dev env for parallel testing
       - "build-qa":

From 3e91b38022b5f1e52e993750cb0b8064b173d8a8 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 20 Jun 2022 18:43:43 +0700
Subject: [PATCH 32/37] fix(reskin-profile): test update

---
 .../ProfilePage/__snapshots__/index.jsx.snap  | 1643 +++++++++--------
 1 file changed, 843 insertions(+), 800 deletions(-)

diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
index 5578d3dab4..c8e2220ceb 100644
--- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
@@ -1,852 +1,895 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a full Profile correctly 1`] = `
-<ProfilePage
-  achievements={
-    Array [
-      Object {
-        "date": "2017-09-18T00:00:00.000-04:00",
-        "description": "SRM Engagement Honor",
-      },
-      Object {
-        "date": "2015-07-23T00:00:00.000-04:00",
-        "description": "Studio First Passing Submission",
-      },
-      Object {
-        "date": "2015-06-02T00:00:00.000-04:00",
-        "description": "Participant Badge",
-      },
-      Object {
-        "date": "2015-04-29T00:00:00.000-04:00",
-        "description": "Show Your Skills iOS Badge",
-      },
-      Object {
-        "date": "2015-04-23T00:00:00.000-04:00",
-        "description": "iOS Participant Badge",
-      },
-      Object {
-        "date": "2013-03-21T00:00:00.000-04:00",
-        "description": "First Forum Post",
-      },
-      Object {
-        "date": "2013-02-20T00:00:00.000-05:00",
-        "description": "One Hundred Forum Posts",
-      },
-      Object {
-        "date": "2012-11-28T00:00:00.000-05:00",
-        "description": "Five Hundred Forum Posts",
-      },
-      Object {
-        "date": "2012-09-29T00:00:00.000-04:00",
-        "description": "First Passing Submission",
-      },
-      Object {
-        "date": "2012-04-30T00:00:00.000-04:00",
-        "description": "One Thousand Forum Posts",
-      },
-      Object {
-        "date": "2012-02-17T00:00:00.000-05:00",
-        "description": "Studio First Forum Post",
-      },
-      Object {
-        "date": "2009-06-23T00:00:00.000-04:00",
-        "description": "Studio One Hundred Forum Posts",
-      },
-      Object {
-        "date": "2005-01-29T00:00:00.000-05:00",
-        "description": "Five Thousand Forum Posts",
-      },
-    ]
-  }
-  challenges={null}
-  clearSubtrackChallenges={[Function]}
-  copilot={true}
-  country="United States"
-  externalAccounts={
-    Object {
-      "behance": null,
-      "bitbucket": Object {
-        "followers": 0,
-        "handle": "testHandle",
-        "languages": null,
-        "profileURL": "https://bitbucket.org/testHandle/",
-        "repos": 0,
-      },
-      "dribbble": null,
-      "github": null,
-      "handle": "testHandle",
-      "linkedin": null,
-      "stackoverflow": Object {
-        "answers": 42,
-        "name": "testHandle",
-        "reputation": 1000,
-      },
-      "twitter": null,
-      "userId": 200000,
-    }
-  }
-  externalLinks={
-    Array [
-      Object {
-        "URL": "www.topcoder.com",
-        "description": "Topcoder!",
-        "handle": "testHandle",
-        "title": "topcoder",
-        "userId": 200000,
-      },
-    ]
-  }
-  handleParam="testHandle"
-  info={
-    Object {
-      "competitionCountryCode": "USA",
-      "createdAt": "2004-03-21T21:05Z",
-      "createdBy": "200000",
-      "description": "Test Description",
-      "handle": "testHandle",
-      "handleLower": "testhandle",
-      "homeCountryCode": "USA",
-      "maxRating": Object {
-        "rating": 0,
-        "subTrack": null,
-        "track": null,
-      },
-      "photoURL": null,
-      "status": "ACTIVE",
-      "tracks": Array [
-        "DATA_SCIENCE",
-        "DESIGN",
-        "DEVELOP",
-      ],
-      "updatedAt": "2017-10-17T17:13Z",
-      "updatedBy": "200000",
-      "userId": 200000,
-    }
-  }
-  loadingError={false}
-  profileForHandle="testHandle"
-  rewards={Array []}
-  skills={
-    Object {
-      "117": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "API",
-      },
-      "125": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Bash",
-      },
-      "132": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "C#",
-      },
-      "153": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "CSS",
-      },
-      "159": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Database",
-      },
-      "168": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "EC2",
-      },
-      "170": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "EJB",
-      },
-      "176": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Excel",
-      },
-      "212": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "HTML",
-      },
-      "247": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Java",
-      },
-      "248": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "JavaScript",
-      },
-      "259": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "JSON",
-      },
-      "260": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "JSP",
-      },
-      "284": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "MySql",
-      },
-      "286": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Node.js",
-      },
-      "294": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Oracle",
-      },
-      "295": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Oracle Database",
-      },
-      "306": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "PostgreSQL",
-      },
-      "317": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Redis",
-      },
-      "323": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "REST",
-      },
-      "328": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "CHALLENGE",
-        ],
-        "tagName": "Salesforce",
-      },
-      "355": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "SQL",
-      },
-      "356": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "SQL Server",
-      },
-      "387": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "Web Services",
-      },
-      "401": Object {
-        "hidden": false,
-        "score": 1,
-        "sources": Array [
-          "USER_ENTERED",
-        ],
-        "tagName": "XML",
-      },
-    }
-  }
-  stats={
-    Object {
-      "COPILOT": Object {
-        "fulfillment": "98",
-      },
-      "DATA_SCIENCE": Object {
-        "MARATHON_MATCH": Object {
-          "challenges": 2,
-          "rank": Object {
-            "avgNumSubmissions": 0,
-            "avgRank": 0,
-            "bestRank": 0,
-            "competitions": 0,
-            "countryRank": 0,
-            "defaultLanguage": "Java",
-            "maximumRating": 0,
-            "minimumRating": 0,
-            "percentile": 0,
-            "rank": 0,
-            "rating": 1800,
-            "schoolRank": 0,
-            "topFiveFinishes": 0,
-            "topTenFinishes": 0,
-            "volatility": 0,
-          },
-          "wins": 1,
-        },
-        "SRM": Object {
-          "challengeDetails": null,
-          "challenges": 0,
-          "division1": null,
-          "division2": null,
-          "rank": Object {
-            "competitions": 0,
-            "countryRank": 0,
-            "defaultLanguage": "Java",
-            "maximumRating": 0,
-            "minimumRating": 0,
-            "percentile": 0,
-            "rank": 0,
-            "rating": 1650,
-            "schoolRank": 0,
-            "volatility": 0,
+<div
+  className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
+>
+  <div>
+    <ProfileHeader
+      info={
+        Object {
+          "competitionCountryCode": "USA",
+          "createdAt": "2004-03-21T21:05Z",
+          "createdBy": "200000",
+          "description": "Test Description",
+          "handle": "testHandle",
+          "handleLower": "testhandle",
+          "homeCountryCode": "USA",
+          "maxRating": Object {
+            "rating": 0,
+            "subTrack": null,
+            "track": null,
           },
-          "wins": 0,
+          "photoURL": null,
+          "status": "ACTIVE",
+          "tracks": Array [
+            "DATA_SCIENCE",
+            "DESIGN",
+            "DEVELOP",
+          ],
+          "updatedAt": "2017-10-17T17:13Z",
+          "updatedBy": "200000",
+          "userId": 200000,
+        }
+      }
+    />
+    <div
+      className="src-shared-components-ProfilePage-___styles__content___2JKnD"
+    >
+      <div
+        className="src-shared-components-ProfilePage-___styles__left-content___1QEHu"
+      >
+        <MemberTracks
+          copilot={true}
+          hasMM={null}
+          info={
+            Object {
+              "competitionCountryCode": "USA",
+              "createdAt": "2004-03-21T21:05Z",
+              "createdBy": "200000",
+              "description": "Test Description",
+              "handle": "testHandle",
+              "handleLower": "testhandle",
+              "homeCountryCode": "USA",
+              "maxRating": Object {
+                "rating": 0,
+                "subTrack": null,
+                "track": null,
+              },
+              "photoURL": null,
+              "status": "ACTIVE",
+              "tracks": Array [
+                "DATA_SCIENCE",
+                "DESIGN",
+                "DEVELOP",
+              ],
+              "updatedAt": "2017-10-17T17:13Z",
+              "updatedBy": "200000",
+              "userId": 200000,
+            }
+          }
+        />
+        <Skills
+          isMobile={false}
+          skills={
+            Array [
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "117",
+                "tagName": "API",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "125",
+                "tagName": "Bash",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "132",
+                "tagName": "C#",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "153",
+                "tagName": "CSS",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "159",
+                "tagName": "Database",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "168",
+                "tagName": "EC2",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "170",
+                "tagName": "EJB",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "176",
+                "tagName": "Excel",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "212",
+                "tagName": "HTML",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "247",
+                "tagName": "Java",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "248",
+                "tagName": "JavaScript",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "259",
+                "tagName": "JSON",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "260",
+                "tagName": "JSP",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "284",
+                "tagName": "MySql",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "286",
+                "tagName": "Node.js",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "294",
+                "tagName": "Oracle",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "295",
+                "tagName": "Oracle Database",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "306",
+                "tagName": "PostgreSQL",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "317",
+                "tagName": "Redis",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "323",
+                "tagName": "REST",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "CHALLENGE",
+                ],
+                "tagId": "328",
+                "tagName": "Salesforce",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "355",
+                "tagName": "SQL",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "356",
+                "tagName": "SQL Server",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "387",
+                "tagName": "Web Services",
+              },
+              Object {
+                "hidden": false,
+                "score": 1,
+                "sources": Array [
+                  "USER_ENTERED",
+                ],
+                "tagId": "401",
+                "tagName": "XML",
+              },
+            ]
+          }
+        />
+        <p
+          className="src-shared-components-ProfilePage-___styles__description___3m4a3"
+        >
+          Test Description
+        </p>
+      </div>
+      <div
+        className="src-shared-components-ProfilePage-___styles__right-content___1PO0x"
+      >
+        <MemberInfo
+          country=""
+          info={
+            Object {
+              "competitionCountryCode": "USA",
+              "createdAt": "2004-03-21T21:05Z",
+              "createdBy": "200000",
+              "description": "Test Description",
+              "handle": "testHandle",
+              "handleLower": "testhandle",
+              "homeCountryCode": "USA",
+              "maxRating": Object {
+                "rating": 0,
+                "subTrack": null,
+                "track": null,
+              },
+              "photoURL": null,
+              "status": "ACTIVE",
+              "tracks": Array [
+                "DATA_SCIENCE",
+                "DESIGN",
+                "DEVELOP",
+              ],
+              "updatedAt": "2017-10-17T17:13Z",
+              "updatedBy": "200000",
+              "userId": 200000,
+            }
+          }
+          wins={0}
+        />
+      </div>
+    </div>
+  </div>
+  <Activity
+    handle="testHandle"
+    hasMM={null}
+    memberStats={
+      Object {
+        "COPILOT": Object {
+          "fulfillment": "98",
         },
-        "challenges": 5,
-        "wins": 4,
-      },
-      "DESIGN": Object {
-        "challenges": 49,
-        "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-        "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-        "subTracks": Array [
-          Object {
-            "avgPlacement": 0,
-            "challenges": 3,
-            "id": 20,
-            "mostRecentEventDate": "2010-06-30T07:00:00.000Z",
-            "mostRecentSubmission": "2009-04-16T22:17:00.000Z",
-            "name": "LOGO_DESIGN",
-            "numInquiries": 3,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0.3333333333333333,
-            "submissions": 1,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
-            "challenges": 21,
-            "id": 17,
-            "mostRecentEventDate": "2014-12-16T09:01:12.000Z",
-            "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-            "name": "WEB_DESIGNS",
-            "numInquiries": 21,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0.04761904761904762,
-            "submissions": 1,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
-            "challenges": 3,
-            "id": 34,
-            "mostRecentEventDate": "2009-09-08T12:00:00.000Z",
-            "name": "STUDIO_OTHER",
-            "numInquiries": 3,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0,
-            "submissions": 0,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
-            "challenges": 6,
-            "id": 16,
-            "mostRecentEventDate": "2014-05-22T01:00:10.000Z",
-            "name": "BANNERS_OR_ICONS",
-            "numInquiries": 6,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0,
-            "submissions": 0,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
-            "challenges": 5,
-            "id": 18,
-            "mostRecentEventDate": "2014-06-06T03:53:03.000Z",
-            "name": "WIREFRAMES",
-            "numInquiries": 5,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0,
-            "submissions": 0,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
-            "challenges": 5,
-            "id": 40,
-            "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-            "name": "DESIGN_FIRST_2_FINISH",
-            "numInquiries": 5,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0,
-            "submissions": 0,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
-            "challenges": 1,
-            "id": 32,
-            "mostRecentEventDate": "2010-02-05T23:00:00.000Z",
-            "name": "APPLICATION_FRONT_END_DESIGN",
-            "numInquiries": 1,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0,
-            "submissions": 0,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
-            "challenges": 3,
-            "id": 21,
-            "mostRecentEventDate": "2014-07-08T10:00:16.000Z",
-            "name": "PRINT_OR_PRESENTATION",
-            "numInquiries": 3,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0,
-            "submissions": 0,
-            "winPercent": 0,
-            "wins": 0,
-          },
-          Object {
-            "avgPlacement": 0,
+        "DATA_SCIENCE": Object {
+          "MARATHON_MATCH": Object {
             "challenges": 2,
-            "id": 30,
-            "mostRecentEventDate": "2014-04-11T09:00:08.000Z",
-            "name": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
-            "numInquiries": 2,
-            "passedScreening": 0,
-            "screeningSuccessRate": 0,
-            "submissionRate": 0,
-            "submissions": 0,
-            "winPercent": 0,
-            "wins": 0,
+            "rank": Object {
+              "avgNumSubmissions": 0,
+              "avgRank": 0,
+              "bestRank": 0,
+              "competitions": 0,
+              "countryRank": 0,
+              "defaultLanguage": "Java",
+              "maximumRating": 0,
+              "minimumRating": 0,
+              "percentile": 0,
+              "rank": 0,
+              "rating": 1800,
+              "schoolRank": 0,
+              "topFiveFinishes": 0,
+              "topTenFinishes": 0,
+              "volatility": 0,
+            },
+            "wins": 1,
           },
-        ],
-        "wins": 0,
-      },
-      "DEVELOP": Object {
-        "challenges": 29,
-        "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-        "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-        "subTracks": Array [
-          Object {
-            "challenges": 6,
-            "id": 125,
-            "mostRecentEventDate": "2014-10-06T11:30:02.000Z",
-            "name": "ASSEMBLY_COMPETITION",
+          "SRM": Object {
+            "challengeDetails": null,
+            "challenges": 0,
+            "division1": null,
+            "division2": null,
             "rank": Object {
-              "activeCountryRank": null,
-              "activePercentile": null,
-              "activeRank": null,
-              "activeSchoolRank": null,
-              "maxRating": null,
-              "minRating": null,
-              "overallCountryRank": null,
-              "overallPercentile": null,
-              "overallRank": null,
-              "overallSchoolRank": null,
-              "rating": null,
-              "reliability": null,
-              "volatility": null,
+              "competitions": 0,
+              "countryRank": 0,
+              "defaultLanguage": "Java",
+              "maximumRating": 0,
+              "minimumRating": 0,
+              "percentile": 0,
+              "rank": 0,
+              "rating": 1650,
+              "schoolRank": 0,
+              "volatility": 0,
             },
-            "submissions": Object {
-              "appealSuccessRate": 0,
-              "appeals": 0,
+            "wins": 0,
+          },
+          "challenges": 5,
+          "wins": 4,
+        },
+        "DESIGN": Object {
+          "challenges": 49,
+          "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+          "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+          "subTracks": Array [
+            Object {
               "avgPlacement": 0,
-              "avgScore": 0,
-              "maxScore": 0,
-              "minScore": 0,
-              "numInquiries": 6,
-              "passedReview": 0,
+              "challenges": 3,
+              "id": 20,
+              "mostRecentEventDate": "2010-06-30T07:00:00.000Z",
+              "mostRecentSubmission": "2009-04-16T22:17:00.000Z",
+              "name": "LOGO_DESIGN",
+              "numInquiries": 3,
+              "passedScreening": 0,
+              "screeningSuccessRate": 0,
+              "submissionRate": 0.3333333333333333,
+              "submissions": 1,
+              "winPercent": 0,
+              "wins": 0,
+            },
+            Object {
+              "avgPlacement": 0,
+              "challenges": 21,
+              "id": 17,
+              "mostRecentEventDate": "2014-12-16T09:01:12.000Z",
+              "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+              "name": "WEB_DESIGNS",
+              "numInquiries": 21,
+              "passedScreening": 0,
+              "screeningSuccessRate": 0,
+              "submissionRate": 0.04761904761904762,
+              "submissions": 1,
+              "winPercent": 0,
+              "wins": 0,
+            },
+            Object {
+              "avgPlacement": 0,
+              "challenges": 3,
+              "id": 34,
+              "mostRecentEventDate": "2009-09-08T12:00:00.000Z",
+              "name": "STUDIO_OTHER",
+              "numInquiries": 3,
               "passedScreening": 0,
-              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
+              "wins": 0,
             },
-            "wins": 0,
-          },
-          Object {
-            "challenges": 1,
-            "id": 134,
-            "mostRecentEventDate": "2014-03-22T22:00:03.000Z",
-            "name": "CONCEPTUALIZATION",
-            "rank": Object {
-              "activeCountryRank": null,
-              "activePercentile": null,
-              "activeRank": null,
-              "activeSchoolRank": null,
-              "maxRating": null,
-              "minRating": null,
-              "overallCountryRank": null,
-              "overallPercentile": null,
-              "overallRank": null,
-              "overallSchoolRank": null,
-              "rating": null,
-              "reliability": null,
-              "volatility": null,
+            Object {
+              "avgPlacement": 0,
+              "challenges": 6,
+              "id": 16,
+              "mostRecentEventDate": "2014-05-22T01:00:10.000Z",
+              "name": "BANNERS_OR_ICONS",
+              "numInquiries": 6,
+              "passedScreening": 0,
+              "screeningSuccessRate": 0,
+              "submissionRate": 0,
+              "submissions": 0,
+              "winPercent": 0,
+              "wins": 0,
             },
-            "submissions": Object {
-              "appealSuccessRate": 0,
-              "appeals": 0,
+            Object {
               "avgPlacement": 0,
-              "avgScore": 0,
-              "maxScore": 0,
-              "minScore": 0,
-              "numInquiries": 1,
-              "passedReview": 0,
+              "challenges": 5,
+              "id": 18,
+              "mostRecentEventDate": "2014-06-06T03:53:03.000Z",
+              "name": "WIREFRAMES",
+              "numInquiries": 5,
               "passedScreening": 0,
-              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
+              "wins": 0,
             },
-            "wins": 0,
-          },
-          Object {
-            "challenges": 20,
-            "id": 149,
-            "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-            "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-            "name": "FIRST_2_FINISH",
-            "rank": Object {
-              "activeCountryRank": null,
-              "activePercentile": null,
-              "activeRank": null,
-              "activeSchoolRank": null,
-              "maxRating": null,
-              "minRating": null,
-              "overallCountryRank": null,
-              "overallPercentile": null,
-              "overallRank": null,
-              "overallSchoolRank": null,
-              "rating": null,
-              "reliability": null,
-              "volatility": null,
+            Object {
+              "avgPlacement": 0,
+              "challenges": 5,
+              "id": 40,
+              "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+              "name": "DESIGN_FIRST_2_FINISH",
+              "numInquiries": 5,
+              "passedScreening": 0,
+              "screeningSuccessRate": 0,
+              "submissionRate": 0,
+              "submissions": 0,
+              "winPercent": 0,
+              "wins": 0,
             },
-            "submissions": Object {
-              "appealSuccessRate": 0,
-              "appeals": 0,
-              "avgPlacement": 1,
-              "avgScore": 100,
-              "maxScore": 100,
-              "minScore": 100,
-              "numInquiries": 20,
-              "passedReview": 3,
-              "passedScreening": 3,
-              "reviewSuccessRate": 0.6,
-              "screeningSuccessRate": 0.6,
-              "submissionRate": 0.25,
-              "submissions": 5,
-              "winPercent": 0.6,
+            Object {
+              "avgPlacement": 0,
+              "challenges": 1,
+              "id": 32,
+              "mostRecentEventDate": "2010-02-05T23:00:00.000Z",
+              "name": "APPLICATION_FRONT_END_DESIGN",
+              "numInquiries": 1,
+              "passedScreening": 0,
+              "screeningSuccessRate": 0,
+              "submissionRate": 0,
+              "submissions": 0,
+              "winPercent": 0,
+              "wins": 0,
             },
-            "wins": 3,
-          },
-          Object {
-            "challenges": 2,
-            "id": 150,
-            "mostRecentEventDate": "2014-10-31T08:37:11.000Z",
-            "name": "CODE",
-            "rank": Object {
-              "activeCountryRank": null,
-              "activePercentile": null,
-              "activeRank": null,
-              "activeSchoolRank": null,
-              "maxRating": null,
-              "minRating": null,
-              "overallCountryRank": null,
-              "overallPercentile": null,
-              "overallRank": null,
-              "overallSchoolRank": null,
-              "rating": null,
-              "reliability": null,
-              "volatility": null,
+            Object {
+              "avgPlacement": 0,
+              "challenges": 3,
+              "id": 21,
+              "mostRecentEventDate": "2014-07-08T10:00:16.000Z",
+              "name": "PRINT_OR_PRESENTATION",
+              "numInquiries": 3,
+              "passedScreening": 0,
+              "screeningSuccessRate": 0,
+              "submissionRate": 0,
+              "submissions": 0,
+              "winPercent": 0,
+              "wins": 0,
             },
-            "submissions": Object {
-              "appealSuccessRate": 0,
-              "appeals": 0,
+            Object {
               "avgPlacement": 0,
-              "avgScore": 0,
-              "maxScore": 0,
-              "minScore": 0,
+              "challenges": 2,
+              "id": 30,
+              "mostRecentEventDate": "2014-04-11T09:00:08.000Z",
+              "name": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
               "numInquiries": 2,
-              "passedReview": 0,
               "passedScreening": 0,
-              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
+              "wins": 0,
             },
-            "wins": 0,
-          },
-        ],
+          ],
+          "wins": 0,
+        },
+        "DEVELOP": Object {
+          "challenges": 29,
+          "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+          "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+          "subTracks": Array [
+            Object {
+              "challenges": 6,
+              "id": 125,
+              "mostRecentEventDate": "2014-10-06T11:30:02.000Z",
+              "name": "ASSEMBLY_COMPETITION",
+              "rank": Object {
+                "activeCountryRank": null,
+                "activePercentile": null,
+                "activeRank": null,
+                "activeSchoolRank": null,
+                "maxRating": null,
+                "minRating": null,
+                "overallCountryRank": null,
+                "overallPercentile": null,
+                "overallRank": null,
+                "overallSchoolRank": null,
+                "rating": null,
+                "reliability": null,
+                "volatility": null,
+              },
+              "submissions": Object {
+                "appealSuccessRate": 0,
+                "appeals": 0,
+                "avgPlacement": 0,
+                "avgScore": 0,
+                "maxScore": 0,
+                "minScore": 0,
+                "numInquiries": 6,
+                "passedReview": 0,
+                "passedScreening": 0,
+                "reviewSuccessRate": 0,
+                "screeningSuccessRate": 0,
+                "submissionRate": 0,
+                "submissions": 0,
+                "winPercent": 0,
+              },
+              "wins": 0,
+            },
+            Object {
+              "challenges": 1,
+              "id": 134,
+              "mostRecentEventDate": "2014-03-22T22:00:03.000Z",
+              "name": "CONCEPTUALIZATION",
+              "rank": Object {
+                "activeCountryRank": null,
+                "activePercentile": null,
+                "activeRank": null,
+                "activeSchoolRank": null,
+                "maxRating": null,
+                "minRating": null,
+                "overallCountryRank": null,
+                "overallPercentile": null,
+                "overallRank": null,
+                "overallSchoolRank": null,
+                "rating": null,
+                "reliability": null,
+                "volatility": null,
+              },
+              "submissions": Object {
+                "appealSuccessRate": 0,
+                "appeals": 0,
+                "avgPlacement": 0,
+                "avgScore": 0,
+                "maxScore": 0,
+                "minScore": 0,
+                "numInquiries": 1,
+                "passedReview": 0,
+                "passedScreening": 0,
+                "reviewSuccessRate": 0,
+                "screeningSuccessRate": 0,
+                "submissionRate": 0,
+                "submissions": 0,
+                "winPercent": 0,
+              },
+              "wins": 0,
+            },
+            Object {
+              "challenges": 20,
+              "id": 149,
+              "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+              "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+              "name": "FIRST_2_FINISH",
+              "rank": Object {
+                "activeCountryRank": null,
+                "activePercentile": null,
+                "activeRank": null,
+                "activeSchoolRank": null,
+                "maxRating": null,
+                "minRating": null,
+                "overallCountryRank": null,
+                "overallPercentile": null,
+                "overallRank": null,
+                "overallSchoolRank": null,
+                "rating": null,
+                "reliability": null,
+                "volatility": null,
+              },
+              "submissions": Object {
+                "appealSuccessRate": 0,
+                "appeals": 0,
+                "avgPlacement": 1,
+                "avgScore": 100,
+                "maxScore": 100,
+                "minScore": 100,
+                "numInquiries": 20,
+                "passedReview": 3,
+                "passedScreening": 3,
+                "reviewSuccessRate": 0.6,
+                "screeningSuccessRate": 0.6,
+                "submissionRate": 0.25,
+                "submissions": 5,
+                "winPercent": 0.6,
+              },
+              "wins": 3,
+            },
+            Object {
+              "challenges": 2,
+              "id": 150,
+              "mostRecentEventDate": "2014-10-31T08:37:11.000Z",
+              "name": "CODE",
+              "rank": Object {
+                "activeCountryRank": null,
+                "activePercentile": null,
+                "activeRank": null,
+                "activeSchoolRank": null,
+                "maxRating": null,
+                "minRating": null,
+                "overallCountryRank": null,
+                "overallPercentile": null,
+                "overallRank": null,
+                "overallSchoolRank": null,
+                "rating": null,
+                "reliability": null,
+                "volatility": null,
+              },
+              "submissions": Object {
+                "appealSuccessRate": 0,
+                "appeals": 0,
+                "avgPlacement": 0,
+                "avgScore": 0,
+                "maxScore": 0,
+                "minScore": 0,
+                "numInquiries": 2,
+                "passedReview": 0,
+                "passedScreening": 0,
+                "reviewSuccessRate": 0,
+                "screeningSuccessRate": 0,
+                "submissionRate": 0,
+                "submissions": 0,
+                "winPercent": 0,
+              },
+              "wins": 0,
+            },
+          ],
+          "wins": 3,
+        },
+        "challenges": 78,
+        "createdAt": null,
+        "createdBy": null,
+        "handle": "testHandle",
+        "handleLower": "testhandle",
+        "maxRating": Object {
+          "rating": 0,
+          "subTrack": null,
+          "track": null,
+        },
+        "updatedAt": null,
+        "updatedBy": null,
+        "userId": 200000,
         "wins": 3,
-      },
-      "challenges": 78,
-      "createdAt": null,
-      "createdBy": null,
-      "handle": "testHandle",
-      "handleLower": "testhandle",
-      "maxRating": Object {
-        "rating": 0,
-        "subTrack": null,
-        "track": null,
-      },
-      "updatedAt": null,
-      "updatedBy": null,
-      "userId": 200000,
-      "wins": 3,
+      }
     }
-  }
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "subscribe": [Function],
-    }
-  }
-  storeSubscription={
-    Subscription {
-      "listeners": Object {
-        "notify": [Function],
-      },
-      "onStateChange": [Function],
-      "parentSub": undefined,
-      "store": Object {
-        "dispatch": [Function],
-        "getState": [Function],
-        "subscribe": [Function],
-      },
-      "unsubscribe": null,
-    }
-  }
-/>
+  />
+</div>
 `;
 
 exports[`renders an empty Profile correctly 1`] = `
-<ProfilePage
-  achievements={Array []}
-  challenges={null}
-  clearSubtrackChallenges={[Function]}
-  copilot={false}
-  country="United States"
-  externalAccounts={
-    Object {
-      "behance": null,
-      "bitbucket": null,
-      "dribbble": null,
-      "github": null,
-      "handle": "testHandle",
-      "linkedin": null,
-      "stackoverflow": null,
-      "twitter": null,
-      "userId": 200000,
-    }
-  }
-  externalLinks={Array []}
-  handleParam="testHandle"
-  info={
-    Object {
-      "competitionCountryCode": "USA",
-      "createdAt": "2004-03-21T21:05Z",
-      "createdBy": "200000",
-      "description": "Test Description",
-      "handle": "testHandle",
-      "handleLower": "testhandle",
-      "homeCountryCode": "USA",
-      "maxRating": Object {
-        "rating": 0,
-        "subTrack": null,
-        "track": null,
-      },
-      "photoURL": null,
-      "status": "ACTIVE",
-      "tracks": Array [],
-      "updatedAt": "2017-10-17T17:13Z",
-      "updatedBy": "200000",
-      "userId": 200000,
-    }
-  }
-  loadingError={false}
-  profileForHandle="testHandle"
-  rewards={Array []}
-  skills={Object {}}
-  stats={
-    Object {
-      "COPILOT": null,
-      "DATA_SCIENCE": Object {
-        "MARATHON_MATCH": Object {
-          "challenges": 0,
-          "rank": Object {
-            "avgNumSubmissions": 0,
-            "avgRank": 0,
-            "bestRank": 0,
-            "competitions": 0,
-            "countryRank": 0,
-            "defaultLanguage": "Java",
-            "maximumRating": 0,
-            "minimumRating": 0,
-            "percentile": 0,
-            "rank": 0,
+<div
+  className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
+>
+  <div>
+    <ProfileHeader
+      info={
+        Object {
+          "competitionCountryCode": "USA",
+          "createdAt": "2004-03-21T21:05Z",
+          "createdBy": "200000",
+          "description": "Test Description",
+          "handle": "testHandle",
+          "handleLower": "testhandle",
+          "homeCountryCode": "USA",
+          "maxRating": Object {
             "rating": 0,
-            "schoolRank": 0,
-            "topFiveFinishes": 0,
-            "topTenFinishes": 0,
-            "volatility": 0,
+            "subTrack": null,
+            "track": null,
           },
+          "photoURL": null,
+          "status": "ACTIVE",
+          "tracks": Array [],
+          "updatedAt": "2017-10-17T17:13Z",
+          "updatedBy": "200000",
+          "userId": 200000,
+        }
+      }
+    />
+    <div
+      className="src-shared-components-ProfilePage-___styles__content___2JKnD"
+    >
+      <div
+        className="src-shared-components-ProfilePage-___styles__left-content___1QEHu"
+      >
+        <MemberTracks
+          copilot={false}
+          hasMM={null}
+          info={
+            Object {
+              "competitionCountryCode": "USA",
+              "createdAt": "2004-03-21T21:05Z",
+              "createdBy": "200000",
+              "description": "Test Description",
+              "handle": "testHandle",
+              "handleLower": "testhandle",
+              "homeCountryCode": "USA",
+              "maxRating": Object {
+                "rating": 0,
+                "subTrack": null,
+                "track": null,
+              },
+              "photoURL": null,
+              "status": "ACTIVE",
+              "tracks": Array [],
+              "updatedAt": "2017-10-17T17:13Z",
+              "updatedBy": "200000",
+              "userId": 200000,
+            }
+          }
+        />
+        <p
+          className="src-shared-components-ProfilePage-___styles__description___3m4a3"
+        >
+          Test Description
+        </p>
+      </div>
+      <div
+        className="src-shared-components-ProfilePage-___styles__right-content___1PO0x"
+      >
+        <MemberInfo
+          country=""
+          info={
+            Object {
+              "competitionCountryCode": "USA",
+              "createdAt": "2004-03-21T21:05Z",
+              "createdBy": "200000",
+              "description": "Test Description",
+              "handle": "testHandle",
+              "handleLower": "testhandle",
+              "homeCountryCode": "USA",
+              "maxRating": Object {
+                "rating": 0,
+                "subTrack": null,
+                "track": null,
+              },
+              "photoURL": null,
+              "status": "ACTIVE",
+              "tracks": Array [],
+              "updatedAt": "2017-10-17T17:13Z",
+              "updatedBy": "200000",
+              "userId": 200000,
+            }
+          }
+          wins={0}
+        />
+      </div>
+    </div>
+  </div>
+  <Activity
+    handle="testHandle"
+    hasMM={null}
+    memberStats={
+      Object {
+        "COPILOT": null,
+        "DATA_SCIENCE": Object {
+          "MARATHON_MATCH": Object {
+            "challenges": 0,
+            "rank": Object {
+              "avgNumSubmissions": 0,
+              "avgRank": 0,
+              "bestRank": 0,
+              "competitions": 0,
+              "countryRank": 0,
+              "defaultLanguage": "Java",
+              "maximumRating": 0,
+              "minimumRating": 0,
+              "percentile": 0,
+              "rank": 0,
+              "rating": 0,
+              "schoolRank": 0,
+              "topFiveFinishes": 0,
+              "topTenFinishes": 0,
+              "volatility": 0,
+            },
+            "wins": 0,
+          },
+          "SRM": Object {
+            "challengeDetails": null,
+            "challenges": 0,
+            "division1": null,
+            "division2": null,
+            "rank": Object {
+              "competitions": 0,
+              "countryRank": 0,
+              "defaultLanguage": "Java",
+              "maximumRating": 0,
+              "minimumRating": 0,
+              "percentile": 0,
+              "rank": 0,
+              "rating": 0,
+              "schoolRank": 0,
+              "volatility": 0,
+            },
+            "wins": 0,
+          },
+          "challenges": 0,
           "wins": 0,
         },
-        "SRM": Object {
-          "challengeDetails": null,
+        "DESIGN": Object {
           "challenges": 0,
-          "division1": null,
-          "division2": null,
-          "rank": Object {
-            "competitions": 0,
-            "countryRank": 0,
-            "defaultLanguage": "Java",
-            "maximumRating": 0,
-            "minimumRating": 0,
-            "percentile": 0,
-            "rank": 0,
-            "rating": 0,
-            "schoolRank": 0,
-            "volatility": 0,
-          },
+          "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+          "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+          "subTracks": Array [],
+          "wins": 0,
+        },
+        "DEVELOP": Object {
+          "challenges": 0,
+          "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+          "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+          "subTracks": Array [],
           "wins": 0,
         },
         "challenges": 0,
+        "createdAt": null,
+        "createdBy": null,
+        "handle": "testHandle",
+        "handleLower": "testhandle",
+        "maxRating": Object {
+          "rating": 0,
+          "subTrack": null,
+          "track": null,
+        },
+        "updatedAt": null,
+        "updatedBy": null,
+        "userId": 200000,
         "wins": 0,
-      },
-      "DESIGN": Object {
-        "challenges": 0,
-        "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-        "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-        "subTracks": Array [],
-        "wins": 0,
-      },
-      "DEVELOP": Object {
-        "challenges": 0,
-        "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-        "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-        "subTracks": Array [],
-        "wins": 0,
-      },
-      "challenges": 0,
-      "createdAt": null,
-      "createdBy": null,
-      "handle": "testHandle",
-      "handleLower": "testhandle",
-      "maxRating": Object {
-        "rating": 0,
-        "subTrack": null,
-        "track": null,
-      },
-      "updatedAt": null,
-      "updatedBy": null,
-      "userId": 200000,
-      "wins": 0,
-    }
-  }
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "subscribe": [Function],
+      }
     }
   }
   storeSubscription={

From 63dfcbd449dcced1268be777d8b266d22c4289ff Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 24 Jun 2022 20:03:03 +0700
Subject: [PATCH 33/37] fix: modal activity previous data


From efc5274e00e070274b737bbc41be770c52011a5a Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 20 Jul 2022 17:11:49 +0700
Subject: [PATCH 34/37] fix(reskin-profile): update test

---
 .../ProfilePage/__snapshots__/index.jsx.snap  | 1641 ++++++++---------
 1 file changed, 798 insertions(+), 843 deletions(-)

diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
index c8e2220ceb..bcc4226d58 100644
--- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
@@ -1,895 +1,850 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a full Profile correctly 1`] = `
-<div
-  className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
->
-  <div>
-    <ProfileHeader
-      info={
-        Object {
-          "competitionCountryCode": "USA",
-          "createdAt": "2004-03-21T21:05Z",
-          "createdBy": "200000",
-          "description": "Test Description",
-          "handle": "testHandle",
-          "handleLower": "testhandle",
-          "homeCountryCode": "USA",
-          "maxRating": Object {
-            "rating": 0,
-            "subTrack": null,
-            "track": null,
-          },
-          "photoURL": null,
-          "status": "ACTIVE",
-          "tracks": Array [
-            "DATA_SCIENCE",
-            "DESIGN",
-            "DEVELOP",
-          ],
-          "updatedAt": "2017-10-17T17:13Z",
-          "updatedBy": "200000",
-          "userId": 200000,
-        }
-      }
-    />
-    <div
-      className="src-shared-components-ProfilePage-___styles__content___2JKnD"
-    >
-      <div
-        className="src-shared-components-ProfilePage-___styles__left-content___1QEHu"
-      >
-        <MemberTracks
-          copilot={true}
-          hasMM={null}
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [
-                "DATA_SCIENCE",
-                "DESIGN",
-                "DEVELOP",
-              ],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-        />
-        <Skills
-          isMobile={false}
-          skills={
-            Array [
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "117",
-                "tagName": "API",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "125",
-                "tagName": "Bash",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "132",
-                "tagName": "C#",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "153",
-                "tagName": "CSS",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "159",
-                "tagName": "Database",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "168",
-                "tagName": "EC2",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "170",
-                "tagName": "EJB",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "176",
-                "tagName": "Excel",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "212",
-                "tagName": "HTML",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "247",
-                "tagName": "Java",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "248",
-                "tagName": "JavaScript",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "259",
-                "tagName": "JSON",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "260",
-                "tagName": "JSP",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "284",
-                "tagName": "MySql",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "286",
-                "tagName": "Node.js",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "294",
-                "tagName": "Oracle",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "295",
-                "tagName": "Oracle Database",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "306",
-                "tagName": "PostgreSQL",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "317",
-                "tagName": "Redis",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "323",
-                "tagName": "REST",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "CHALLENGE",
-                ],
-                "tagId": "328",
-                "tagName": "Salesforce",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "355",
-                "tagName": "SQL",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "356",
-                "tagName": "SQL Server",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "387",
-                "tagName": "Web Services",
-              },
-              Object {
-                "hidden": false,
-                "score": 1,
-                "sources": Array [
-                  "USER_ENTERED",
-                ],
-                "tagId": "401",
-                "tagName": "XML",
-              },
-            ]
-          }
-        />
-        <p
-          className="src-shared-components-ProfilePage-___styles__description___3m4a3"
-        >
-          Test Description
-        </p>
-      </div>
-      <div
-        className="src-shared-components-ProfilePage-___styles__right-content___1PO0x"
-      >
-        <MemberInfo
-          country=""
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [
-                "DATA_SCIENCE",
-                "DESIGN",
-                "DEVELOP",
-              ],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-          wins={0}
-        />
-      </div>
-    </div>
-  </div>
-  <Activity
-    handle="testHandle"
-    hasMM={null}
-    memberStats={
+<ProfilePage
+  achievements={
+    Array [
+      Object {
+        "date": "2017-09-18T00:00:00.000-04:00",
+        "description": "SRM Engagement Honor",
+      },
+      Object {
+        "date": "2015-07-23T00:00:00.000-04:00",
+        "description": "Studio First Passing Submission",
+      },
+      Object {
+        "date": "2015-06-02T00:00:00.000-04:00",
+        "description": "Participant Badge",
+      },
+      Object {
+        "date": "2015-04-29T00:00:00.000-04:00",
+        "description": "Show Your Skills iOS Badge",
+      },
+      Object {
+        "date": "2015-04-23T00:00:00.000-04:00",
+        "description": "iOS Participant Badge",
+      },
+      Object {
+        "date": "2013-03-21T00:00:00.000-04:00",
+        "description": "First Forum Post",
+      },
+      Object {
+        "date": "2013-02-20T00:00:00.000-05:00",
+        "description": "One Hundred Forum Posts",
+      },
+      Object {
+        "date": "2012-11-28T00:00:00.000-05:00",
+        "description": "Five Hundred Forum Posts",
+      },
+      Object {
+        "date": "2012-09-29T00:00:00.000-04:00",
+        "description": "First Passing Submission",
+      },
+      Object {
+        "date": "2012-04-30T00:00:00.000-04:00",
+        "description": "One Thousand Forum Posts",
+      },
+      Object {
+        "date": "2012-02-17T00:00:00.000-05:00",
+        "description": "Studio First Forum Post",
+      },
+      Object {
+        "date": "2009-06-23T00:00:00.000-04:00",
+        "description": "Studio One Hundred Forum Posts",
+      },
+      Object {
+        "date": "2005-01-29T00:00:00.000-05:00",
+        "description": "Five Thousand Forum Posts",
+      },
+    ]
+  }
+  challenges={null}
+  clearSubtrackChallenges={[Function]}
+  copilot={true}
+  country="United States"
+  externalAccounts={
+    Object {
+      "behance": null,
+      "bitbucket": Object {
+        "followers": 0,
+        "handle": "testHandle",
+        "languages": null,
+        "profileURL": "https://bitbucket.org/testHandle/",
+        "repos": 0,
+      },
+      "dribbble": null,
+      "github": null,
+      "handle": "testHandle",
+      "linkedin": null,
+      "stackoverflow": Object {
+        "answers": 42,
+        "name": "testHandle",
+        "reputation": 1000,
+      },
+      "twitter": null,
+      "userId": 200000,
+    }
+  }
+  externalLinks={
+    Array [
       Object {
-        "COPILOT": Object {
-          "fulfillment": "98",
+        "URL": "www.topcoder.com",
+        "description": "Topcoder!",
+        "handle": "testHandle",
+        "title": "topcoder",
+        "userId": 200000,
+      },
+    ]
+  }
+  handleParam="testHandle"
+  info={
+    Object {
+      "competitionCountryCode": "USA",
+      "createdAt": "2004-03-21T21:05Z",
+      "createdBy": "200000",
+      "description": "Test Description",
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "homeCountryCode": "USA",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "photoURL": null,
+      "status": "ACTIVE",
+      "tracks": Array [
+        "DATA_SCIENCE",
+        "DESIGN",
+        "DEVELOP",
+      ],
+      "updatedAt": "2017-10-17T17:13Z",
+      "updatedBy": "200000",
+      "userId": 200000,
+    }
+  }
+  loadingError={false}
+  profileForHandle="testHandle"
+  skills={
+    Object {
+      "117": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "API",
+      },
+      "125": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Bash",
+      },
+      "132": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "C#",
+      },
+      "153": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "CSS",
+      },
+      "159": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Database",
+      },
+      "168": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "EC2",
+      },
+      "170": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "EJB",
+      },
+      "176": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Excel",
+      },
+      "212": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "HTML",
+      },
+      "247": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Java",
+      },
+      "248": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "JavaScript",
+      },
+      "259": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "JSON",
+      },
+      "260": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "JSP",
+      },
+      "284": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "MySql",
+      },
+      "286": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Node.js",
+      },
+      "294": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Oracle",
+      },
+      "295": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Oracle Database",
+      },
+      "306": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "PostgreSQL",
+      },
+      "317": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Redis",
+      },
+      "323": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "REST",
+      },
+      "328": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "CHALLENGE",
+        ],
+        "tagName": "Salesforce",
+      },
+      "355": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "SQL",
+      },
+      "356": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "SQL Server",
+      },
+      "387": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "Web Services",
+      },
+      "401": Object {
+        "hidden": false,
+        "score": 1,
+        "sources": Array [
+          "USER_ENTERED",
+        ],
+        "tagName": "XML",
+      },
+    }
+  }
+  stats={
+    Object {
+      "COPILOT": Object {
+        "fulfillment": "98",
+      },
+      "DATA_SCIENCE": Object {
+        "MARATHON_MATCH": Object {
+          "challenges": 2,
+          "rank": Object {
+            "avgNumSubmissions": 0,
+            "avgRank": 0,
+            "bestRank": 0,
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
+            "rating": 1800,
+            "schoolRank": 0,
+            "topFiveFinishes": 0,
+            "topTenFinishes": 0,
+            "volatility": 0,
+          },
+          "wins": 1,
         },
-        "DATA_SCIENCE": Object {
-          "MARATHON_MATCH": Object {
-            "challenges": 2,
-            "rank": Object {
-              "avgNumSubmissions": 0,
-              "avgRank": 0,
-              "bestRank": 0,
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 1800,
-              "schoolRank": 0,
-              "topFiveFinishes": 0,
-              "topTenFinishes": 0,
-              "volatility": 0,
-            },
-            "wins": 1,
+        "SRM": Object {
+          "challengeDetails": null,
+          "challenges": 0,
+          "division1": null,
+          "division2": null,
+          "rank": Object {
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
+            "rating": 1650,
+            "schoolRank": 0,
+            "volatility": 0,
           },
-          "SRM": Object {
-            "challengeDetails": null,
-            "challenges": 0,
-            "division1": null,
-            "division2": null,
-            "rank": Object {
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 1650,
-              "schoolRank": 0,
-              "volatility": 0,
-            },
+          "wins": 0,
+        },
+        "challenges": 5,
+        "wins": 4,
+      },
+      "DESIGN": Object {
+        "challenges": 49,
+        "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+        "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+        "subTracks": Array [
+          Object {
+            "avgPlacement": 0,
+            "challenges": 3,
+            "id": 20,
+            "mostRecentEventDate": "2010-06-30T07:00:00.000Z",
+            "mostRecentSubmission": "2009-04-16T22:17:00.000Z",
+            "name": "LOGO_DESIGN",
+            "numInquiries": 3,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0.3333333333333333,
+            "submissions": 1,
+            "winPercent": 0,
             "wins": 0,
           },
-          "challenges": 5,
-          "wins": 4,
-        },
-        "DESIGN": Object {
-          "challenges": 49,
-          "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-          "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-          "subTracks": Array [
-            Object {
-              "avgPlacement": 0,
-              "challenges": 3,
-              "id": 20,
-              "mostRecentEventDate": "2010-06-30T07:00:00.000Z",
-              "mostRecentSubmission": "2009-04-16T22:17:00.000Z",
-              "name": "LOGO_DESIGN",
-              "numInquiries": 3,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0.3333333333333333,
-              "submissions": 1,
-              "winPercent": 0,
-              "wins": 0,
-            },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 21,
-              "id": 17,
-              "mostRecentEventDate": "2014-12-16T09:01:12.000Z",
-              "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-              "name": "WEB_DESIGNS",
-              "numInquiries": 21,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0.04761904761904762,
-              "submissions": 1,
-              "winPercent": 0,
-              "wins": 0,
-            },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 3,
-              "id": 34,
-              "mostRecentEventDate": "2009-09-08T12:00:00.000Z",
-              "name": "STUDIO_OTHER",
-              "numInquiries": 3,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
+          Object {
+            "avgPlacement": 0,
+            "challenges": 21,
+            "id": 17,
+            "mostRecentEventDate": "2014-12-16T09:01:12.000Z",
+            "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+            "name": "WEB_DESIGNS",
+            "numInquiries": 21,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0.04761904761904762,
+            "submissions": 1,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 3,
+            "id": 34,
+            "mostRecentEventDate": "2009-09-08T12:00:00.000Z",
+            "name": "STUDIO_OTHER",
+            "numInquiries": 3,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 6,
+            "id": 16,
+            "mostRecentEventDate": "2014-05-22T01:00:10.000Z",
+            "name": "BANNERS_OR_ICONS",
+            "numInquiries": 6,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 5,
+            "id": 18,
+            "mostRecentEventDate": "2014-06-06T03:53:03.000Z",
+            "name": "WIREFRAMES",
+            "numInquiries": 5,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 5,
+            "id": 40,
+            "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+            "name": "DESIGN_FIRST_2_FINISH",
+            "numInquiries": 5,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 1,
+            "id": 32,
+            "mostRecentEventDate": "2010-02-05T23:00:00.000Z",
+            "name": "APPLICATION_FRONT_END_DESIGN",
+            "numInquiries": 1,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 3,
+            "id": 21,
+            "mostRecentEventDate": "2014-07-08T10:00:16.000Z",
+            "name": "PRINT_OR_PRESENTATION",
+            "numInquiries": 3,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+          Object {
+            "avgPlacement": 0,
+            "challenges": 2,
+            "id": 30,
+            "mostRecentEventDate": "2014-04-11T09:00:08.000Z",
+            "name": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+            "numInquiries": 2,
+            "passedScreening": 0,
+            "screeningSuccessRate": 0,
+            "submissionRate": 0,
+            "submissions": 0,
+            "winPercent": 0,
+            "wins": 0,
+          },
+        ],
+        "wins": 0,
+      },
+      "DEVELOP": Object {
+        "challenges": 29,
+        "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+        "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+        "subTracks": Array [
+          Object {
+            "challenges": 6,
+            "id": 125,
+            "mostRecentEventDate": "2014-10-06T11:30:02.000Z",
+            "name": "ASSEMBLY_COMPETITION",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
             },
-            Object {
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
               "avgPlacement": 0,
-              "challenges": 6,
-              "id": 16,
-              "mostRecentEventDate": "2014-05-22T01:00:10.000Z",
-              "name": "BANNERS_OR_ICONS",
+              "avgScore": 0,
+              "maxScore": 0,
+              "minScore": 0,
               "numInquiries": 6,
+              "passedReview": 0,
               "passedScreening": 0,
+              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
-              "wins": 0,
             },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 5,
-              "id": 18,
-              "mostRecentEventDate": "2014-06-06T03:53:03.000Z",
-              "name": "WIREFRAMES",
-              "numInquiries": 5,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
-            },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 5,
-              "id": 40,
-              "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-              "name": "DESIGN_FIRST_2_FINISH",
-              "numInquiries": 5,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
+            "wins": 0,
+          },
+          Object {
+            "challenges": 1,
+            "id": 134,
+            "mostRecentEventDate": "2014-03-22T22:00:03.000Z",
+            "name": "CONCEPTUALIZATION",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
             },
-            Object {
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
               "avgPlacement": 0,
-              "challenges": 1,
-              "id": 32,
-              "mostRecentEventDate": "2010-02-05T23:00:00.000Z",
-              "name": "APPLICATION_FRONT_END_DESIGN",
+              "avgScore": 0,
+              "maxScore": 0,
+              "minScore": 0,
               "numInquiries": 1,
+              "passedReview": 0,
               "passedScreening": 0,
+              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
-              "wins": 0,
             },
-            Object {
-              "avgPlacement": 0,
-              "challenges": 3,
-              "id": 21,
-              "mostRecentEventDate": "2014-07-08T10:00:16.000Z",
-              "name": "PRINT_OR_PRESENTATION",
-              "numInquiries": 3,
-              "passedScreening": 0,
-              "screeningSuccessRate": 0,
-              "submissionRate": 0,
-              "submissions": 0,
-              "winPercent": 0,
-              "wins": 0,
+            "wins": 0,
+          },
+          Object {
+            "challenges": 20,
+            "id": 149,
+            "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+            "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+            "name": "FIRST_2_FINISH",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
             },
-            Object {
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
+              "avgPlacement": 1,
+              "avgScore": 100,
+              "maxScore": 100,
+              "minScore": 100,
+              "numInquiries": 20,
+              "passedReview": 3,
+              "passedScreening": 3,
+              "reviewSuccessRate": 0.6,
+              "screeningSuccessRate": 0.6,
+              "submissionRate": 0.25,
+              "submissions": 5,
+              "winPercent": 0.6,
+            },
+            "wins": 3,
+          },
+          Object {
+            "challenges": 2,
+            "id": 150,
+            "mostRecentEventDate": "2014-10-31T08:37:11.000Z",
+            "name": "CODE",
+            "rank": Object {
+              "activeCountryRank": null,
+              "activePercentile": null,
+              "activeRank": null,
+              "activeSchoolRank": null,
+              "maxRating": null,
+              "minRating": null,
+              "overallCountryRank": null,
+              "overallPercentile": null,
+              "overallRank": null,
+              "overallSchoolRank": null,
+              "rating": null,
+              "reliability": null,
+              "volatility": null,
+            },
+            "submissions": Object {
+              "appealSuccessRate": 0,
+              "appeals": 0,
               "avgPlacement": 0,
-              "challenges": 2,
-              "id": 30,
-              "mostRecentEventDate": "2014-04-11T09:00:08.000Z",
-              "name": "WIDGET_OR_MOBILE_SCREEN_DESIGN",
+              "avgScore": 0,
+              "maxScore": 0,
+              "minScore": 0,
               "numInquiries": 2,
+              "passedReview": 0,
               "passedScreening": 0,
+              "reviewSuccessRate": 0,
               "screeningSuccessRate": 0,
               "submissionRate": 0,
               "submissions": 0,
               "winPercent": 0,
-              "wins": 0,
-            },
-          ],
-          "wins": 0,
-        },
-        "DEVELOP": Object {
-          "challenges": 29,
-          "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-          "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-          "subTracks": Array [
-            Object {
-              "challenges": 6,
-              "id": 125,
-              "mostRecentEventDate": "2014-10-06T11:30:02.000Z",
-              "name": "ASSEMBLY_COMPETITION",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 0,
-                "avgScore": 0,
-                "maxScore": 0,
-                "minScore": 0,
-                "numInquiries": 6,
-                "passedReview": 0,
-                "passedScreening": 0,
-                "reviewSuccessRate": 0,
-                "screeningSuccessRate": 0,
-                "submissionRate": 0,
-                "submissions": 0,
-                "winPercent": 0,
-              },
-              "wins": 0,
-            },
-            Object {
-              "challenges": 1,
-              "id": 134,
-              "mostRecentEventDate": "2014-03-22T22:00:03.000Z",
-              "name": "CONCEPTUALIZATION",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 0,
-                "avgScore": 0,
-                "maxScore": 0,
-                "minScore": 0,
-                "numInquiries": 1,
-                "passedReview": 0,
-                "passedScreening": 0,
-                "reviewSuccessRate": 0,
-                "screeningSuccessRate": 0,
-                "submissionRate": 0,
-                "submissions": 0,
-                "winPercent": 0,
-              },
-              "wins": 0,
-            },
-            Object {
-              "challenges": 20,
-              "id": 149,
-              "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-              "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-              "name": "FIRST_2_FINISH",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 1,
-                "avgScore": 100,
-                "maxScore": 100,
-                "minScore": 100,
-                "numInquiries": 20,
-                "passedReview": 3,
-                "passedScreening": 3,
-                "reviewSuccessRate": 0.6,
-                "screeningSuccessRate": 0.6,
-                "submissionRate": 0.25,
-                "submissions": 5,
-                "winPercent": 0.6,
-              },
-              "wins": 3,
             },
-            Object {
-              "challenges": 2,
-              "id": 150,
-              "mostRecentEventDate": "2014-10-31T08:37:11.000Z",
-              "name": "CODE",
-              "rank": Object {
-                "activeCountryRank": null,
-                "activePercentile": null,
-                "activeRank": null,
-                "activeSchoolRank": null,
-                "maxRating": null,
-                "minRating": null,
-                "overallCountryRank": null,
-                "overallPercentile": null,
-                "overallRank": null,
-                "overallSchoolRank": null,
-                "rating": null,
-                "reliability": null,
-                "volatility": null,
-              },
-              "submissions": Object {
-                "appealSuccessRate": 0,
-                "appeals": 0,
-                "avgPlacement": 0,
-                "avgScore": 0,
-                "maxScore": 0,
-                "minScore": 0,
-                "numInquiries": 2,
-                "passedReview": 0,
-                "passedScreening": 0,
-                "reviewSuccessRate": 0,
-                "screeningSuccessRate": 0,
-                "submissionRate": 0,
-                "submissions": 0,
-                "winPercent": 0,
-              },
-              "wins": 0,
-            },
-          ],
-          "wins": 3,
-        },
-        "challenges": 78,
-        "createdAt": null,
-        "createdBy": null,
-        "handle": "testHandle",
-        "handleLower": "testhandle",
-        "maxRating": Object {
-          "rating": 0,
-          "subTrack": null,
-          "track": null,
-        },
-        "updatedAt": null,
-        "updatedBy": null,
-        "userId": 200000,
+            "wins": 0,
+          },
+        ],
         "wins": 3,
-      }
+      },
+      "challenges": 78,
+      "createdAt": null,
+      "createdBy": null,
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "updatedAt": null,
+      "updatedBy": null,
+      "userId": 200000,
+      "wins": 3,
     }
-  />
-</div>
+  }
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "subscribe": [Function],
+    }
+  }
+  storeSubscription={
+    Subscription {
+      "listeners": Object {
+        "notify": [Function],
+      },
+      "onStateChange": [Function],
+      "parentSub": undefined,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "subscribe": [Function],
+      },
+      "unsubscribe": null,
+    }
+  }
+/>
 `;
 
 exports[`renders an empty Profile correctly 1`] = `
-<div
-  className="src-shared-components-ProfilePage-___styles__outer-container___3in3p"
->
-  <div>
-    <ProfileHeader
-      info={
-        Object {
-          "competitionCountryCode": "USA",
-          "createdAt": "2004-03-21T21:05Z",
-          "createdBy": "200000",
-          "description": "Test Description",
-          "handle": "testHandle",
-          "handleLower": "testhandle",
-          "homeCountryCode": "USA",
-          "maxRating": Object {
+<ProfilePage
+  achievements={Array []}
+  challenges={null}
+  clearSubtrackChallenges={[Function]}
+  copilot={false}
+  country="United States"
+  externalAccounts={
+    Object {
+      "behance": null,
+      "bitbucket": null,
+      "dribbble": null,
+      "github": null,
+      "handle": "testHandle",
+      "linkedin": null,
+      "stackoverflow": null,
+      "twitter": null,
+      "userId": 200000,
+    }
+  }
+  externalLinks={Array []}
+  handleParam="testHandle"
+  info={
+    Object {
+      "competitionCountryCode": "USA",
+      "createdAt": "2004-03-21T21:05Z",
+      "createdBy": "200000",
+      "description": "Test Description",
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "homeCountryCode": "USA",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "photoURL": null,
+      "status": "ACTIVE",
+      "tracks": Array [],
+      "updatedAt": "2017-10-17T17:13Z",
+      "updatedBy": "200000",
+      "userId": 200000,
+    }
+  }
+  loadingError={false}
+  profileForHandle="testHandle"
+  skills={Object {}}
+  stats={
+    Object {
+      "COPILOT": null,
+      "DATA_SCIENCE": Object {
+        "MARATHON_MATCH": Object {
+          "challenges": 0,
+          "rank": Object {
+            "avgNumSubmissions": 0,
+            "avgRank": 0,
+            "bestRank": 0,
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
             "rating": 0,
-            "subTrack": null,
-            "track": null,
+            "schoolRank": 0,
+            "topFiveFinishes": 0,
+            "topTenFinishes": 0,
+            "volatility": 0,
           },
-          "photoURL": null,
-          "status": "ACTIVE",
-          "tracks": Array [],
-          "updatedAt": "2017-10-17T17:13Z",
-          "updatedBy": "200000",
-          "userId": 200000,
-        }
-      }
-    />
-    <div
-      className="src-shared-components-ProfilePage-___styles__content___2JKnD"
-    >
-      <div
-        className="src-shared-components-ProfilePage-___styles__left-content___1QEHu"
-      >
-        <MemberTracks
-          copilot={false}
-          hasMM={null}
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-        />
-        <p
-          className="src-shared-components-ProfilePage-___styles__description___3m4a3"
-        >
-          Test Description
-        </p>
-      </div>
-      <div
-        className="src-shared-components-ProfilePage-___styles__right-content___1PO0x"
-      >
-        <MemberInfo
-          country=""
-          info={
-            Object {
-              "competitionCountryCode": "USA",
-              "createdAt": "2004-03-21T21:05Z",
-              "createdBy": "200000",
-              "description": "Test Description",
-              "handle": "testHandle",
-              "handleLower": "testhandle",
-              "homeCountryCode": "USA",
-              "maxRating": Object {
-                "rating": 0,
-                "subTrack": null,
-                "track": null,
-              },
-              "photoURL": null,
-              "status": "ACTIVE",
-              "tracks": Array [],
-              "updatedAt": "2017-10-17T17:13Z",
-              "updatedBy": "200000",
-              "userId": 200000,
-            }
-          }
-          wins={0}
-        />
-      </div>
-    </div>
-  </div>
-  <Activity
-    handle="testHandle"
-    hasMM={null}
-    memberStats={
-      Object {
-        "COPILOT": null,
-        "DATA_SCIENCE": Object {
-          "MARATHON_MATCH": Object {
-            "challenges": 0,
-            "rank": Object {
-              "avgNumSubmissions": 0,
-              "avgRank": 0,
-              "bestRank": 0,
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 0,
-              "schoolRank": 0,
-              "topFiveFinishes": 0,
-              "topTenFinishes": 0,
-              "volatility": 0,
-            },
-            "wins": 0,
-          },
-          "SRM": Object {
-            "challengeDetails": null,
-            "challenges": 0,
-            "division1": null,
-            "division2": null,
-            "rank": Object {
-              "competitions": 0,
-              "countryRank": 0,
-              "defaultLanguage": "Java",
-              "maximumRating": 0,
-              "minimumRating": 0,
-              "percentile": 0,
-              "rank": 0,
-              "rating": 0,
-              "schoolRank": 0,
-              "volatility": 0,
-            },
-            "wins": 0,
-          },
-          "challenges": 0,
-          "wins": 0,
-        },
-        "DESIGN": Object {
-          "challenges": 0,
-          "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
-          "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
-          "subTracks": Array [],
           "wins": 0,
         },
-        "DEVELOP": Object {
+        "SRM": Object {
+          "challengeDetails": null,
           "challenges": 0,
-          "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
-          "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
-          "subTracks": Array [],
+          "division1": null,
+          "division2": null,
+          "rank": Object {
+            "competitions": 0,
+            "countryRank": 0,
+            "defaultLanguage": "Java",
+            "maximumRating": 0,
+            "minimumRating": 0,
+            "percentile": 0,
+            "rank": 0,
+            "rating": 0,
+            "schoolRank": 0,
+            "volatility": 0,
+          },
           "wins": 0,
         },
         "challenges": 0,
-        "createdAt": null,
-        "createdBy": null,
-        "handle": "testHandle",
-        "handleLower": "testhandle",
-        "maxRating": Object {
-          "rating": 0,
-          "subTrack": null,
-          "track": null,
-        },
-        "updatedAt": null,
-        "updatedBy": null,
-        "userId": 200000,
         "wins": 0,
-      }
+      },
+      "DESIGN": Object {
+        "challenges": 0,
+        "mostRecentEventDate": "2015-01-30T00:50:17.000Z",
+        "mostRecentSubmission": "2014-03-29T08:12:00.000Z",
+        "subTracks": Array [],
+        "wins": 0,
+      },
+      "DEVELOP": Object {
+        "challenges": 0,
+        "mostRecentEventDate": "2017-01-22T16:33:45.000Z",
+        "mostRecentSubmission": "2017-01-22T19:33:00.000Z",
+        "subTracks": Array [],
+        "wins": 0,
+      },
+      "challenges": 0,
+      "createdAt": null,
+      "createdBy": null,
+      "handle": "testHandle",
+      "handleLower": "testhandle",
+      "maxRating": Object {
+        "rating": 0,
+        "subTrack": null,
+        "track": null,
+      },
+      "updatedAt": null,
+      "updatedBy": null,
+      "userId": 200000,
+      "wins": 0,
+    }
+  }
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "subscribe": [Function],
     }
   }
   storeSubscription={

From 963eca874bc9978c312c2149fcf4a6982f77d5b8 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 20 Jul 2022 17:29:23 +0700
Subject: [PATCH 35/37] improvement(reskin-profile): hide the tco badge

---
 src/shared/components/ProfilePage/index.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx
index 1f75ea6a0b..04d648650c 100644
--- a/src/shared/components/ProfilePage/index.jsx
+++ b/src/shared/components/ProfilePage/index.jsx
@@ -23,6 +23,7 @@ import styles from './styles.scss';
 import Skills from './Skills';
 import MemberInfo from './MemberInfo';
 import Activity from './Activity';
+// import Awards from './Awards';
 
 /**
  * Inspects a subtrack and determines if the member is active
@@ -148,6 +149,7 @@ class ProfilePage extends React.Component {
       lookupData,
       handleParam,
       meta,
+      // rewards,
     } = this.props;
 
     const {
@@ -224,6 +226,11 @@ class ProfilePage extends React.Component {
             </div>
           </div>
         </div>
+        {/* { */}
+        {/*   (rewards || []).length ? ( */}
+        {/*     <Awards rewards={rewards} /> */}
+        {/*   ) : null */}
+        {/* } */}
         <Activity
           memberStats={stats}
           hasMM={hasMM}
@@ -280,6 +287,7 @@ ProfilePage.defaultProps = {
   challenges: null,
   skills: null,
   stats: null,
+  // rewards: [],
 };
 
 ProfilePage.propTypes = {
@@ -293,6 +301,7 @@ ProfilePage.propTypes = {
   lookupData: PT.shape().isRequired,
   handleParam: PT.string.isRequired,
   meta: PT.shape().isRequired,
+  // rewards: PT.arrayOf(PT.shape()),
   clearSubtrackChallenges: PT.func.isRequired,
 };
 

From 494af7cbdbe2f4e36544b34a22573fb5354a3177 Mon Sep 17 00:00:00 2001
From: Luiz Ricardo Rodrigues <contato@luizrrodrigues.com.br>
Date: Wed, 20 Jul 2022 10:22:04 -0300
Subject: [PATCH 36/37] topcoder-react-lib update

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7f9f78dd2e..0111697a67 100644
--- a/package.json
+++ b/package.json
@@ -153,7 +153,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1000.29.3",
+    "topcoder-react-lib": "1000.29.4",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

From 957ef152f13de4b325dc057d6baeb59eb52d53d3 Mon Sep 17 00:00:00 2001
From: Luiz Ricardo Rodrigues <contato@luizrrodrigues.com.br>
Date: Wed, 20 Jul 2022 11:46:37 -0300
Subject: [PATCH 37/37] fix; for issue
 https://topcoder.atlassian.net/browse/PROD-2278

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0111697a67..ac73c3642a 100644
--- a/package.json
+++ b/package.json
@@ -153,7 +153,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1000.29.4",
+    "topcoder-react-lib": "1.2.7",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",