review fixes

Author: kkartunov

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

@@ -73,7 +73,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>
@@ -127,7 +127,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>
@@ -181,7 +181,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>
@@ -235,7 +235,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>

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

@@ -63,6 +63,9 @@ export default function LeaderboardTable(props) {
     themeName,
   } = props;
   const stylesName = THEME[themeName];
+  /* eslint-disable no-confusing-arrow */
+  /* eslint-disable no-nested-ternary */
+  const addSufix = val => isAlgo ? (val !== 1 ? `${val} matches` : `${val} match`) : (val !== 1 ? `${val} challenges` : `${val} challenge`);
   const renderTableRows = comps => (
     comps.map((competitor) => {
       let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar;
@@ -92,7 +95,7 @@ export default function LeaderboardTable(props) {
           </td>
           <td styleName={`${stylesName}.col-handle`}>
             {
-              onUsernameClick ? (
+              onUsernameClick && themeName !== 'TCO23' ? (
                 <div
                   styleName={`${stylesName}.handle-link`}
                   onClick={() => onUsernameClick(competitor)}
@@ -145,15 +148,32 @@ export default function LeaderboardTable(props) {
             <div styleName={`${stylesName}.winnings-info`}>
               {fulfillment && (<span>{fulfillment} fulfillment</span>)}
               <span>{competitor['tco_leaderboard.tco_points'] || competitor.points} points</span>
-              <span>{competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} challenges</span>
+              <span>{addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}</span>
             </div>
           </td>
           {
             isCopilot ? (
               <td styleName={`${stylesName}.col-fulfillment`}>{fulfillment}</td>
             ) : null
           }
-          <td styleName={`${stylesName}.col-challenges`}>{competitor['tco_leaderboard.challenge_count'] || competitor.challengecount}</td>
+          <td styleName={`${stylesName}.col-challenges`}>
+            {
+              themeName === 'TCO23' ? (
+                /* eslint-disable operator-linebreak */
+                onUsernameClick ?
+                  (
+                    <div
+                      style={{ cursor: 'pointer', display: 'inline-block', color: '#0d61bf' }}
+                      onClick={() => onUsernameClick(competitor)}
+                    >
+                      { `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}` }
+                    </div>
+                  ) : `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}`
+              ) : (
+                competitor['tco_leaderboard.challenge_count'] || competitor.challengecount
+              )
+            }
+          </td>
           <td styleName={`${stylesName}.col-points`}>{formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)}</td>
           {
             isTopGear ? (

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

@@ -158,6 +158,10 @@ $table-cell-padding: 2px;
       border-radius: 50%;
       max-width: 100%;
     }
+
+    img {
+      border: none;
+    }
   }
 
   .col-handle {
@@ -232,7 +236,6 @@ $table-cell-padding: 2px;
   }
 
   .col-challenges {
-    color: #0d61bf;
     font-weight: 500;
   }
 }

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

@@ -5,7 +5,7 @@
   @include roboto-regular;
 
   line-height: 1.42;
-  margin: 100px auto 40px auto;
+  margin: 88px auto 40px auto;
   text-align: center;
 
   @include sm {
@@ -34,7 +34,13 @@
 
   .podium-column:nth-child(2) {
     @include md-to-xl {
-      margin-top: -30px;
+      margin-top: -16px;
+    }
+  }
+
+  .podium-column:nth-child(3) {
+    @include md-to-xl {
+      margin-top: 16px;
     }
   }
 }

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

@@ -142,11 +142,19 @@ $podium-border-color: #ededf2;
       border-radius: 50%;
       height: 152px;
       width: 152px;
+      background-color: #fff;
 
       img {
         width: 100%;
         height: 100%;
         border-radius: 50%;
+        margin: 0;
+      }
+
+      svg {
+        margin: 0;
+        border-radius: 50%;
+        background-color: #fff;
       }
     }
 

src/shared/containers/tco/Leaderboard/themes/styles.scss

@@ -3,6 +3,10 @@
 .Leaderboard {
   padding: 0;
   margin: 40px auto;
+
+  @include sm {
+    padding: 0 16px;
+  }
 }
 
 .Leaderboard .section-title {