improvement(reskin): challenge listing part 4 f2f

Author: dedywahyudi

src/shared/components/SortingSelectBar/style.scss

@@ -46,54 +46,7 @@ $down-arrow-size: $base-unit;
     @include xs-to-md {
       margin-right: 16px;
     }
-  }
-
-  .view-options {
-    position: absolute;
-    right: $view-options-toggle-right-margin;
-    top: $base-unit * 10;
-    z-index: 1;
-    background: $tc-white;
-    border-radius: $base-unit;
-    padding: $base-unit;
-    box-shadow: 1px 5px 15px $tc-gray-20;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .view-option {
-    @extend %sorting-select-button;
-
-    font-weight: 300;
-    font-size: 12px;
-    padding: $base-unit * 2;
-    outline: none;
-    border: 0;
-    color: $tc-black;
-    text-align: left;
-  }
-
-  .view-options-toggle {
-    @extend %sorting-select-button;
-
-    display: flex;
-    align-items: center;
-    color: $tc-gray-90;
-    border: 1px solid $tc-gray-neutral-dark;
-    font-size: 12px;
-    outline: none;
-  }
-
-  .down-arrow {
-    width: 0;
-    height: 0;
-    border-left: $down-arrow-size solid transparent;
-    border-right: $down-arrow-size solid transparent;
-    border-top: $down-arrow-size solid $tc-gray-50;
-    margin-left: 3 * $base-unit;
-  }
-
-  :global {
+    :global {
     // 'Sort by' dropdown
     .Select {
       @include roboto-regular;
@@ -230,4 +183,50 @@ $down-arrow-size: $base-unit;
       padding: 8px 20px;
     }
   }
+  }
+
+  .view-options {
+    position: absolute;
+    right: $view-options-toggle-right-margin;
+    top: $base-unit * 10;
+    z-index: 1;
+    background: $tc-white;
+    border-radius: $base-unit;
+    padding: $base-unit;
+    box-shadow: 1px 5px 15px $tc-gray-20;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .view-option {
+    @extend %sorting-select-button;
+
+    font-weight: 300;
+    font-size: 12px;
+    padding: $base-unit * 2;
+    outline: none;
+    border: 0;
+    color: $tc-black;
+    text-align: left;
+  }
+
+  .view-options-toggle {
+    @extend %sorting-select-button;
+
+    display: flex;
+    align-items: center;
+    color: $tc-gray-90;
+    border: 1px solid $tc-gray-neutral-dark;
+    font-size: 12px;
+    outline: none;
+  }
+
+  .down-arrow {
+    width: 0;
+    height: 0;
+    border-left: $down-arrow-size solid transparent;
+    border-right: $down-arrow-size solid transparent;
+    border-top: $down-arrow-size solid $tc-gray-50;
+    margin-left: 3 * $base-unit;
+  }
 }

src/shared/components/Tooltip/style.scss

@@ -13,11 +13,28 @@
     padding: 0;
   }
 
+  .rc-tooltip-arrow {
+    background: url(assets/images/tooltip-arrow.svg);
+    width: 30px;
+    height: 9px;
+    z-index: 10000;
+  }
+
   .rc-tooltip-placement-top .rc-tooltip-arrow,
   .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);
+    padding: 0;
+    bottom: 1px;
+    border-width: 0;
+  }
+
+  .rc-tooltip-placement-top .rc-tooltip-arrow {
+    margin-left: -19px;
+  }
+
+  .rc-tooltip-placement-topLeft .rc-tooltip-arrow {
+    margin-left: -13px;
   }
 
   .rc-tooltip-placement-right .rc-tooltip-arrow,

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

@@ -8,19 +8,6 @@ $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;
 

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

@@ -41,6 +41,8 @@ Tip.propTypes = {
 };
 
 function placeArrow(TooltipNode) {
+  const rootLeftPos = parseInt(TooltipNode.style.left, 10);
+  TooltipNode.style.left = `${rootLeftPos - 5}px`; // eslint-disable-line no-param-reassign
   const arrow = TooltipNode.querySelector('.rc-tooltip-arrow');
   arrow.style.left = '15px';
 }