Merge pull request #3579 from topcoder-platform/feature-contentful

Implements #3552

Author: sushilshinde

.circleci/config.yml

@@ -175,21 +175,22 @@ workflows:
             branches:
               only: 
                 - develop
-      # This is alternate dev env for parallel testing
+                - feature-contentful
+# This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
           filters:
             branches:
               only:
                 - develop
-                - feature-contentful
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
           filters:
             branches:
               only:
                 - develop
+                - feature-contentful
       # Production builds are exectuted only on tagged commits to the
       # master branch.
       - "build-prod":

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

@@ -42,7 +42,7 @@ export default function Podium(props) {
   } = props;
 
   const renderPodium = (comps) => {
-    let podiumSpots = comps.map(comp => (
+    const podiumSpots = comps.map(comp => (
       <div key={comp.rank} styleName="podium-column">
         <PodiumSpot
           competitor={comp}
@@ -55,16 +55,6 @@ export default function Podium(props) {
       </div>
     ));
 
-    if (comps.length === 3) {
-      podiumSpots = [
-        ...podiumSpots.slice(0, 0),
-        podiumSpots[1],
-        ...podiumSpots.slice(1, 1),
-        podiumSpots[0],
-        ...podiumSpots.slice(2),
-      ];
-    }
-
     return (
       <div styleName="PodiumWrap">
         {podiumSpots}

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

@@ -42,6 +42,7 @@ const PODIUM_ITEM_MODIFIER = {
   1: 'first',
   2: 'second',
   3: 'third',
+  4: 'fourth',
 };
 
 /**
@@ -53,11 +54,13 @@ const CUSTOM_STYLES = {
     1: avatarStyles.gold,
     2: avatarStyles.silver,
     3: avatarStyles.bronze,
+    4: avatarStyles.iron,
   },
   TCO20: {
     1: avatarStyles['tco20-1'],
     2: avatarStyles['tco20-2'],
     3: avatarStyles['tco20-3'],
+    4: avatarStyles['tco20-4'],
   },
 };
 
@@ -68,6 +71,7 @@ const DISPLAY_RANKING = {
   1: '1',
   2: '2',
   3: '3',
+  4: '4',
 };
 
 const THEME = {
@@ -158,7 +162,7 @@ export default function PodiumSpot(props) {
           isCopilot ? (
             <div styleName={`${stylesName}.stats`}>
               <span styleName={`${stylesName}.value`}>{competitor.fulfillment}</span>
-              <span>fulfillment</span>
+              <span styleName={`${stylesName}.value-title`}>fulfillment</span>
             </div>
           ) : null
         }

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

@@ -3,16 +3,16 @@ $podium-border-color: #ededf2;
 
 .PodiumSpot {
   border-radius: 6px;
-  padding: 25px;
+  padding: 23px 15px;
   display: flex;
-  width: 324px;
+  width: auto;
 
   .leaderboard-avatar {
     display: inline-block;
-    overflow: hidden;
     position: relative;
     margin-bottom: 12px;
     margin-right: 20px;
+    overflow: visible;
   }
 
   .ranking {
@@ -23,7 +23,7 @@ $podium-border-color: #ededf2;
     display: inline-block;
     position: absolute;
     right: 0;
-    bottom: 10px;
+    bottom: -10px;
     font-size: 15px;
   }
 
@@ -35,15 +35,16 @@ $podium-border-color: #ededf2;
     color: #56565d;
     font-size: 18px;
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     flex-direction: column;
 
     .stats {
       color: #747480;
-      font-size: 15px;
+      font-size: 16px;
       font-weight: 400;
       line-height: 25px;
       display: flex;
+      margin-bottom: 4px;
 
       .value-title {
         color: #2a2a2a;
@@ -91,12 +92,12 @@ $podium-border-color: #ededf2;
   a.profile-link {
     color: #0d61bf;
     font-family: Barlow, sans-serif;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 600;
-    line-height: 24px;
+    line-height: 19px;
     text-align: left;
     text-decoration: underline;
-    margin-bottom: 15px;
+    margin-bottom: 13px;
 
     &:hover {
       text-decoration: none;
@@ -135,31 +136,41 @@ $podium-border-color: #ededf2;
   }
 }
 
+.PodiumSpot--fourth {
+  background-color: #8dccd4;
+
+  .ranking {
+    background-color: #2a2a2a;
+    color: #fff;
+  }
+}
+
 .PodiumSpot--first,
 .PodiumSpot--second,
-.PodiumSpot--third {
+.PodiumSpot--third,
+.PodiumSpot--fourth {
   margin-top: 0;
 
   .leaderboard-avatar {
-    height: 64px;
-    width: 64px;
+    height: 79px;
+    width: 79px;
   }
 }
 
-@include md-to-lg {
-  .PodiumSpot--first .leaderboard-avatar,
-  .PodiumSpot--second .leaderboard-avatar,
-  .PodiumSpot--third .leaderboard-avatar {
-    height: 96px;
-    width: 96px;
-  }
-}
-
-@include xl {
-  .PodiumSpot--first .leaderboard-avatar,
-  .PodiumSpot--second .leaderboard-avatar,
-  .PodiumSpot--third .leaderboard-avatar {
-    height: 128px;
-    width: 128px;
-  }
-}
+// @include md-to-lg {
+//   .PodiumSpot--first .leaderboard-avatar,
+//   .PodiumSpot--second .leaderboard-avatar,
+//   .PodiumSpot--third .leaderboard-avatar {
+//     height: 96px;
+//     width: 96px;
+//   }
+// }
+
+// @include xl {
+//   .PodiumSpot--first .leaderboard-avatar,
+//   .PodiumSpot--second .leaderboard-avatar,
+//   .PodiumSpot--third .leaderboard-avatar {
+//     height: 128px;
+//     width: 128px;
+//   }
+// }

src/shared/components/Leaderboard/avatarStyles.scss

@@ -6,12 +6,6 @@
   width: 100%;
 }
 
-.bronze {
-  @include avatar;
-
-  border-color: #d98f64;
-}
-
 .default {
   @include avatar;
 
@@ -30,9 +24,22 @@
   border-color: #d1d0cf;
 }
 
+.bronze {
+  @include avatar;
+
+  border-color: #d98f64;
+}
+
+.iron {
+  @include avatar;
+
+  border-color: #d98f64;
+}
+
 .tco20-1,
 .tco20-2,
-.tco20-3 {
+.tco20-3,
+.tco20-4 {
   border-radius: 50%;
   height: 100%;
   width: 100%;

src/shared/containers/tco/Leaderboard/index.jsx

@@ -73,7 +73,7 @@ class LeaderboardPageContainer extends React.Component {
       ? (<LoadingIndicator />) : (
         <div>
           <div styleName="Leaderboard">
-            <h2 styleName="section-title">{title}</h2>
+            {title ? (<h2 styleName="section-title">{title}</h2>) : null}
             <Podium
               competitors={ld.slice(0, podiumSpots)}
               isCopilot={isCopilot}

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

@@ -2,7 +2,7 @@
 
 .Leaderboard {
   padding: 0 15px;
-  margin: 20px auto;
+  margin: 50px auto;
   max-width: $screen-md;
 }