Release v1.10.7

.circleci/config.yml

@@ -356,7 +356,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - new-leaderboards-theme
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

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

@@ -30,7 +30,7 @@ exports[`Matches shallow shapshot 1`] = `
     style={null}
   >
     <div
-      className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats___1iYej"
+      className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats-count___XuYEf"
     >
       <span
         className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value___2shA5"
@@ -89,7 +89,7 @@ exports[`Matches shallow shapshot 2`] = `
     style={null}
   >
     <div
-      className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats___1iYej"
+      className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats-count___XuYEf"
     >
       <span
         className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value___2shA5"

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

@@ -44,7 +44,7 @@ class ChallengeHistoryModal extends Component {
             competitor={competitor}
             isCopilot={isCopilot}
             isAlgo={isAlgo}
-            themeName="TCO20"
+            themeName="TCO22"
           />
         </div>
         <table styleName="history-table">
@@ -116,7 +116,7 @@ class ChallengeHistoryModal extends Component {
               challengesOrdered.map(challenge => (
                 <tr styleName="row" key={`${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}`}>
                   <td styleName="name">
-                    <a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}/`} styleName="link" target="_blank" rel="noopener noreferrer">
+                    <a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id || challenge['challenge.challenge_GUID']}/`} styleName="link" target="_blank" rel="noopener noreferrer">
                       {challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id}
                     </a>
                   </td>

src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss

@@ -15,7 +15,8 @@ $light-gray: #d4d4d4;
   padding: 80px 78px;
 
   @media (max-width: 768px) {
-    width: 80%;
+    width: 90%;
+    padding: 30px 15px;
   }
 
   h3 {
@@ -99,6 +100,10 @@ $light-gray: #d4d4d4;
         line-height: 51px;
         text-decoration: underline;
 
+        @media (max-width: 768px) {
+          line-height: 30px;
+        }
+
         &:hover {
           text-decoration: none;
         }

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

@@ -35,10 +35,12 @@ import { getRatingColor } from 'utils/tc';
 import avatarStyles from '../avatarStyles.scss';
 import defaultStyles from './themes/styles.scss'; // eslint-disable-line
 import tco20Styles from './themes/tco20.scss'; // eslint-disable-line
+import tco22Styles from './themes/tco22.scss'; // eslint-disable-line
 
 const THEME = {
   Default: 'defaultStyles',
   TCO20: 'tco20Styles',
+  TCO22: 'tco22Styles',
 };
 
 /**
@@ -79,7 +81,7 @@ export default function LeaderboardTable(props) {
                 photoUrl ? (
                   <Avatar
                     theme={{
-                      avatar: avatarStyles.default,
+                      avatar: themeName === 'TCO22' ? avatarStyles['default-tco22'] : avatarStyles.default,
                     }}
                     url={photoUrl}
                   />

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

@@ -0,0 +1,206 @@
+@import '~styles/mixins';
+$table-cell-padding: 2px;
+$table-border-color: #d4d4d4;
+$table-bg-hover: #f5f5f5;
+
+.LeaderboardTable {
+  /* Table basic styling (heavily 'inspired' by Bootstrap) */
+  @include roboto-regular;
+
+  background-color: transparent;
+  width: 100%;
+  margin: 30px auto 20px auto;
+
+  th {
+    @include roboto-bold;
+
+    text-align: left;
+  }
+  // Table cell sizing
+  td,
+  th {
+    &[class*="col-"] {
+      position: static;
+      float: none;
+      display: table-cell;
+    }
+  }
+  // Cells
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: $table-cell-padding;
+        line-height: 45px;
+        vertical-align: top;
+        border-top: 1px solid $table-border-color;
+        color: #47474f;
+        font-size: 20px;
+        font-weight: 400;
+
+        @include xs-to-sm {
+          line-height: 25px;
+        }
+      }
+    }
+  }
+  // Bottom align for column headings
+  > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 1px solid $table-border-color;
+    color: #888894;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
+    padding: 19px 8px;
+  }
+
+  // Hover effect
+  > tbody > tr:hover {
+    background-color: $table-bg-hover;
+  }
+  // hide the table head on extra-small devices
+  > thead {
+    @include sm {
+      display: none;
+    }
+  }
+
+  // cell alignment
+  > tbody tr td,
+  > thead tr th {
+    vertical-align: middle;
+    text-align: center;
+  }
+
+  // Remove top border from thead by default
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        border-top: 0;
+      }
+    }
+  }
+
+  /* Column specific styling */
+  .col-rank {
+    text-align: center;
+    width: 80px;
+    text-transform: uppercase;
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+
+    @include sm {
+      width: 40px;
+    }
+  }
+
+  .col-avatar {
+    text-align: center;
+    width: 80px;
+
+    @include md-to-xl {
+      line-height: 0;
+    }
+
+    @include sm {
+      width: 40px;
+    }
+  }
+
+  .col-avatar .leaderboard-avatar {
+    display: inline-block;
+    height: 34px;
+    width: 34px;
+    overflow: hidden;
+
+    svg {
+      border-radius: 50%;
+      max-width: 100%;
+    }
+  }
+
+  .col-handle {
+    text-align: left;
+
+    .handle-link,
+    a {
+      color: #0d61bf;
+      font-weight: 500;
+      font-size: 16px;
+      text-decoration: underline;
+
+      &:hover {
+        color: #0d61bf;
+        cursor: pointer;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .col-handleHeader {
+    text-align: left;
+  }
+
+  .col-handle .winnings-info {
+    @include roboto-light;
+
+    color: #999;
+    font-size: 13px;
+    // display only on small screens
+    display: none;
+
+    @include sm {
+      display: block;
+    }
+
+    span {
+      display: block;
+    }
+  }
+
+  .col-fulfillment {
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .col-points {
+    text-align: center;
+  }
+
+  /* Table responsiveness */
+  // Hide 'Fulfillment', 'Challenges' and 'Points' columns on small screens
+  .col-fulfillment,
+  .col-challenges,
+  .col-points {
+    width: 33%;
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+
+    @include sm {
+      display: none !important;
+    }
+  }
+}
+
+.table-header {
+  .col-handleHeader,
+  .col-rank,
+  .col-fulfillment,
+  .col-challenges,
+  .col-points {
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+}

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

@@ -35,6 +35,7 @@ import { getRatingColor } from 'utils/tc';
 import avatarStyles from '../avatarStyles.scss';
 import defaultStyles from './themes/styles.scss'; // eslint-disable-line
 import tco20Styles from './themes/tco20.scss'; // eslint-disable-line
+import tco22Styles from './themes/tco22.scss'; // eslint-disable-line
 
 /**
  * Object used to add a CSS modifier (PodiumSpot--first) that will
@@ -65,6 +66,12 @@ const CUSTOM_STYLES = {
     3: avatarStyles['tco20-3'],
     4: avatarStyles['tco20-4'],
   },
+  TCO22: {
+    1: avatarStyles['tco22-1'],
+    2: avatarStyles['tco22-2'],
+    3: avatarStyles['tco22-3'],
+    4: avatarStyles['tco22-4'],
+  },
 };
 
 /**
@@ -80,6 +87,7 @@ const DISPLAY_RANKING = {
 const THEME = {
   Default: 'defaultStyles',
   TCO20: 'tco20Styles',
+  TCO22: 'tco22Styles',
 };
 
 /**
@@ -180,13 +188,13 @@ export default function PodiumSpot(props) {
         }
         {
           isCopilot ? (
-            <div styleName={`${stylesName}.stats`}>
+            <div styleName={`${stylesName}.stats-count`}>
               <span styleName={`${stylesName}.value`}>{fulfillment}</span>
               <span styleName={`${stylesName}.value-title`}>fulfillment</span>
             </div>
           ) : null
         }
-        <div styleName={`${stylesName}.stats`}>
+        <div styleName={`${stylesName}.stats-count`}>
           <span styleName={`${stylesName}.value`}>{competitor['tco_leaderboard.challenge_count'] || competitor.challengecount}</span>
           {
             isAlgo ? (

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

@@ -64,6 +64,10 @@ $podium-border-color: #ededf2;
       }
     }
 
+    .stats-count {
+      color: #747480;
+    }
+
     @include xs-to-sm {
       font-size: 12px;
     }

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

@@ -77,6 +77,19 @@ $podium-border-color: #ededf2;
       }
     }
 
+    .stats-count {
+      color: #747480;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 25px;
+      display: flex;
+      margin-bottom: 4px;
+
+      .value {
+        margin-right: 5px;
+      }
+    }
+
     @include xs-to-sm {
       font-size: 12px;
     }