improvement(reskin): element style fixes - part 2 f2f

Author: dedywahyudi

__tests__/shared/components/challenge-listing/__snapshots__/LeaderboardAvatar.jsx.snap

@@ -30,6 +30,7 @@ exports[`Matches shallow shapshot 1`] = `
       }
     }
     onClick={null}
+    plusOne={false}
     url="url"
   />
 </Router>

src/assets/images/tooltip-arrow.svg

@@ -17,6 +17,7 @@
   .rc-tooltip-placement-topLeft .rc-tooltip-arrow,
   .rc-tooltip-placement-topRight .rc-tooltip-arrow {
     border-top-color: $tc-gray-80;
+    background: url(assets/images/tooltip-arrow.svg);
   }
 
   .rc-tooltip-placement-right .rc-tooltip-arrow,

src/shared/components/Tooltip/style.scss

@@ -7,6 +7,8 @@ $prize-space-10: $base-unit * 2;
   max-width: 480px;
   padding: 10px 10px 0 10px;
   overflow: hidden;
+  background-color: #2a2a2a;
+  border-radius: 8px;
 
   .bonuses {
     border-top: 1px solid $tc-gray-70;

src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss

@@ -35,6 +35,11 @@ export default function Prize({
     </div>
   );
 
+  function placeArrow(TooltipNode) {
+    const arrow = TooltipNode.querySelector('.rc-tooltip-arrow');
+    arrow.style.left = '33%';
+  }
+
   const component = (
     <div
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -43,7 +48,7 @@ export default function Prize({
     >
       {((onlyShowTooltipForPrize && !withoutTooltip)
         ? (
-          <Tooltip content={tip}>
+          <Tooltip content={tip} placeArrow={placeArrow}>
             {prizeUI}
           </Tooltip>
         )

src/shared/components/challenge-listing/ChallengeCard/Prize/index.jsx

@@ -89,21 +89,24 @@ export default function ChallengeStatus(props) {
       winners = winners.slice(0, MAX_VISIBLE_WINNERS);
       winners.push(lastItem);
     }
+
     const leaderboard = winners && winners.map((winner) => {
       if (winner.isLastItem) {
         return (
           /* TODO: No, should not reuse avatar for displaying "+1" in
            * a circle. Should be a separate component for that. */
-          <LeaderboardAvatar
-            key={winner.handle}
-            member={winner}
-            onClick={() => (
-              setImmediate(() => selectChallengeDetailsTab(DETAIL_TABS.WINNERS))
-            )}
-            openNewTab={openChallengesInNewTabs}
-            url={detailLink}
-            plusOne
-          />
+          <div styleName="avatar-container" key={winner.handle}>
+            <LeaderboardAvatar
+              key={winner.handle}
+              member={winner}
+              onClick={() => (
+                setImmediate(() => selectChallengeDetailsTab(DETAIL_TABS.WINNERS))
+              )}
+              openNewTab={openChallengesInNewTabs}
+              url={`${detailLink}?tab=winners`}
+              plusOne
+            />
+          </div>
         );
       }
       const userProfile = getProfile(winner);

src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx

@@ -45,10 +45,12 @@ $status-radius-4: $corner-radius * 2;
   }
 
   .avatar-container {
-    margin-right: 30px;
+    margin-right: 0;
+    margin-left: 10px;
 
     @include xl {
-      margin-right: 30px;
+      margin-right: 0;
+      margin-left: 10px;
     }
 
     > span {

src/shared/components/challenge-listing/ChallengeCard/Status/style.scss

@@ -18,7 +18,7 @@ class LeaderboardAvatar extends Component {
 
   render() {
     const {
-      onClick, url,
+      onClick, plusOne, url,
     } = this.props;
     const { member } = this.state;
     const targetURL = url || `${window.origin}/members/${member.handle}`;
@@ -40,9 +40,19 @@ class LeaderboardAvatar extends Component {
         openNewTab={!_.includes(window.origin, 'www')}
         styleName={`leaderboard-avatar ${member.position || member.isSmr ? '' : 'light-gray'}`}
       >
-        <span styleName={member.position ? `placement placement-${member.position}` : 'hidden'}>
-          {formatOrdinals(member.position)}
-        </span>
+        { plusOne
+          ? (
+            <div>
+              <div>
+                <span styleName="plus">{member.handle}</span>
+              </div>
+            </div>
+          ) : (
+            <span styleName={member.position ? `placement placement-${member.position}` : 'hidden'}>
+              {formatOrdinals(member.position)}
+            </span>
+          )
+        }
       </Link>
     );
   }
@@ -51,14 +61,14 @@ class LeaderboardAvatar extends Component {
 LeaderboardAvatar.defaultProps = {
   member: {},
   onClick: null,
-  // plusOne: false,
+  plusOne: false,
   url: '',
 };
 
 LeaderboardAvatar.propTypes = {
   member: PT.shape({}),
   onClick: PT.func,
-  // plusOne: PT.bool,
+  plusOne: PT.bool,
   url: PT.string,
 };
 

src/shared/components/challenge-listing/LeaderboardAvatar/index.jsx

@@ -33,8 +33,25 @@ $leader-radius-4: $corner-radius * 2;
     }
   }
 
+  .plus {
+    @include roboto-medium;
+
+    width: 25px;
+    height: 25px;
+    background-color: #e0faf3;
+    font-size: 11px;
+    color: #2a2a2a;
+    font-weight: 500;
+    border-radius: $leader-radius-50;
+    display: flex;
+    align-self: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-left: 0;
+    padding: 4px;
+  }
+
   .placement {
-    position: absolute;
     display: flex;
     width: 24px;
     height: 24px;

src/shared/components/challenge-listing/LeaderboardAvatar/style.scss

@@ -192,8 +192,6 @@ function placeArrow(TooltipNode) {
   if (rootTopOffset < tooltipTopOffset) {
     toolTip.style.top = `${parseInt(toolTip.style.top, 10) - 20}px`;
     arrow.style.top = '-5px';
-  } else {
-    arrow.style.top = '100%';
   }
 }
 

src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/index.jsx

@@ -8,18 +8,27 @@ $tip-space-95: $base-unit * 19;
 $tip-radius-15: $corner-radius * 7 + 1;
 $tip-radius-4: $corner-radius * 2;
 
+:global {
+  .rc-tooltip-arrow {
+    background-color: url(assets/images/tooltip-arrow.svg);
+    width: 30px;
+    height: 9px;
+    position: absolute;
+    left: 41% !important;
+    z-index: 10000;
+    bottom: 0 !important;
+    border: 0;
+  }
+}
+
 div.progress-bar-tooltip {
   @include roboto-regular;
 
   color: $tc-white;
   max-width: none;
   padding: 0 $base-unit * 3;
-  background-color: #2a2a2a;
-
-  .rc-tooltip-inner {
-    padding: 0 $base-unit * 3;
-    border-radius: 8px;
-  }
+  background-color: #2a2a2a !important;
+  border-radius: 8px;
 
   .tip {
     word-wrap: none;

src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss

@@ -16,7 +16,8 @@ $avatar-radius-4: $corner-radius * 2;
   max-width: 640px;
   overflow: auto;
   padding: 10px;
-  background-color: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #2a2a2a;
+  background-color: #2a2a2a;
+  border-radius: 8px;
 
   .achievements {
     border-top: 1px solid $tc-gray-70;