Merge pull request #6626 from topcoder-platform/tco23-leaderboards

Tco23 leaderboards

Author: luizrrodrigues

__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap

@@ -5,7 +5,7 @@ exports[`Matches shallow shapshot 1`] = `
   className="src-shared-components-Leaderboard-Podium-themes-___default__Podium___1qIZm"
 >
   <div
-    className="src-shared-components-Leaderboard-Podium-themes-___default__PodiumWrapCondense___3aV24"
+    className="src-shared-components-Leaderboard-Podium-themes-___default__PodiumWrap___2hDWP"
     style={
       Object {
         "justify-content": "space-between",
@@ -29,7 +29,6 @@ exports[`Matches shallow shapshot 1`] = `
         isCopilot={false}
         isTopGear={false}
         onUsernameClick={null}
-        podiumPlaces={4}
         themeName="Default"
       />
     </div>
@@ -50,7 +49,6 @@ exports[`Matches shallow shapshot 1`] = `
         isCopilot={false}
         isTopGear={false}
         onUsernameClick={null}
-        podiumPlaces={4}
         themeName="Default"
       />
     </div>
@@ -71,7 +69,6 @@ exports[`Matches shallow shapshot 1`] = `
         isCopilot={false}
         isTopGear={false}
         onUsernameClick={null}
-        podiumPlaces={4}
         themeName="Default"
       />
     </div>
@@ -92,7 +89,6 @@ exports[`Matches shallow shapshot 1`] = `
         isCopilot={false}
         isTopGear={false}
         onUsernameClick={null}
-        podiumPlaces={4}
         themeName="Default"
       />
     </div>

src/shared/components/Leaderboard/Podium/index.jsx

@@ -64,13 +64,12 @@ export default function Podium(props) {
           isTopGear={isTopGear}
           isAlgo={isAlgo}
           themeName={themeName}
-          podiumPlaces={comps.length}
         />
       </div>
     ));
 
     return (
-      <div styleName={`${stylesName}.${comps.length > 3 ? 'PodiumWrapCondense' : 'PodiumWrap'}`} style={comps.length === 4 ? { 'justify-content': 'space-between' } : {}}>
+      <div styleName={`${stylesName}.${themeName === 'TCO23' ? 'PodiumWrapCondense' : 'PodiumWrap'}`} style={comps.length === 4 ? { 'justify-content': 'space-between' } : {}}>
         {podiumSpots}
       </div>
     );

src/shared/components/Leaderboard/PodiumSpot/index.jsx

@@ -25,7 +25,7 @@
  */
 
 import React from 'react';
-import PT, { number } from 'prop-types';
+import PT from 'prop-types';
 import { Avatar } from 'topcoder-react-ui-kit';
 import { config } from 'topcoder-react-utils';
 import _ from 'lodash';
@@ -127,7 +127,6 @@ export default function PodiumSpot(props) {
     isTopGear,
     isAlgo,
     themeName,
-    podiumPlaces,
   } = props;
 
   const stylesName = THEME[themeName];
@@ -141,7 +140,7 @@ export default function PodiumSpot(props) {
   if (photoUrl) {
     photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=160`;
   }
-  let rootStyle = `${stylesName}.${podiumPlaces > 3 ? 'PodiumSpotCondense' : 'PodiumSpot'}`;
+  let rootStyle = `${stylesName}.${themeName === 'TCO23' ? 'PodiumSpotCondense' : 'PodiumSpot'}`;
   if (PODIUM_ITEM_MODIFIER[competitor.rank]) rootStyle += ` ${stylesName}.PodiumSpot--${PODIUM_ITEM_MODIFIER[competitor.rank]}`;
   const fulfillment = competitor['tco_leaderboard.fulfillment']
     ? (parseFloat(competitor['tco_leaderboard.fulfillment']) * 100).toFixed(2).replace(/[.,]00$/, '')
@@ -175,24 +174,15 @@ export default function PodiumSpot(props) {
       <div styleName={`${stylesName}.wave-wrap--${PODIUM_ITEM_MODIFIER[competitor.rank > 4 ? 4 : competitor.rank]}`}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width={podiumPlaces > 3 ? 200 : 392}
-          height={podiumPlaces > 3 ? 16 : 25}
+          width={200}
+          height={16}
           fill="none"
-          viewBox={`0 0 ${podiumPlaces > 3 ? 200 : 392} ${podiumPlaces > 3 ? 16 : 25}`}
+          viewBox="0 0 200 16"
         >
-          {
-            podiumPlaces > 3 ? (
-              <path
-                fill="#fff"
-                d="M149.572 0.823649C173.331 0.823652 191.313 6.86156 198 9.88051L198 0.0893164L7.94832e-07 0.0892861L3.05705e-07 9.88048C6.08897 12.3283 17.0268 16 38.0337 16C64.2924 16 122.203 0.823644 149.572 0.823649Z"
-              />
-            ) : (
-              <path
-                fill="#fff"
-                d="M296.123 1.385c47.038 0 82.638 9.395 95.877 14.093V.242H0v15.236C12.055 19.287 33.71 25 75.3 25c51.986 0 166.637-23.615 220.823-23.615z"
-              />
-            )
-          }
+          <path
+            fill="#fff"
+            d="M149.572 0.823649C173.331 0.823652 191.313 6.86156 198 9.88051L198 0.0893164L7.94832e-07 0.0892861L3.05705e-07 9.88048C6.08897 12.3283 17.0268 16 38.0337 16C64.2924 16 122.203 0.823644 149.572 0.823649Z"
+          />
         </svg>
         <span styleName={`${stylesName}.leaderboard-avatar`}>
           {
@@ -376,7 +366,6 @@ PodiumSpot.propTypes = {
   isTopGear: PT.bool,
   isAlgo: PT.bool,
   themeName: PT.string,
-  podiumPlaces: number,
 };
 
 PodiumSpot.defaultProps = {
@@ -385,5 +374,4 @@ PodiumSpot.defaultProps = {
   isTopGear: false,
   isAlgo: false,
   themeName: 'Default',
-  podiumPlaces: 1,
 };

src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss

@@ -217,6 +217,8 @@ $podium-border-color: #ededf2;
     text-transform: uppercase;
     margin-bottom: 8px;
     color: #000;
+    border: none;
+    padding: 0;
   }
 
   .handle-link {