Merge pull request #6332 from nursoltan-s/challenge-listing-feedback

fix feedback issues

Author: dedywahyudi

src/assets/images/icon-circle.png

@@ -246,11 +246,13 @@ function DateRangePicker(props) {
       setPreview({
         startDate: date,
         endDate: range.endDate || date,
+        color: '#137d60',
       });
     } else if (isEndDateFocused && date) {
       setPreview({
         startDate: range.startDate || date,
         endDate: date,
+        color: '#137d60',
       });
     }
 
@@ -368,21 +370,21 @@ function DateRangePicker(props) {
         {
           ...range,
           key: 'selection',
-          color: '#0B71E6',
+          color: '#137d60',
         },
         {
           startDate: activeDate,
           endDate: activeDate,
           key: 'active',
-          color: '#59A7FF',
+          color: '#137d60',
         },
       ];
     }
     return [
       {
         ...range,
         key: 'selection',
-        color: '#0A81FF',
+        color: '#137d60',
       },
     ];
   };
@@ -453,6 +455,8 @@ function DateRangePicker(props) {
                 shownDate={getShownDate()}
                 preview={preview}
                 onPreviewChange={onPreviewChange}
+                rangeColors={'#137d60'}
+                color='#137d60'
               />
               <button
                 type="button"

src/assets/images/icon-circle.svg

@@ -21,14 +21,20 @@
 
 .isRange {
   :global {
+    .rdrStartEdge, .rdrEndEdge {
+      color: $listing-checkbox-green !important;
+    }
+    .rdrDayHovered {
+      background: $listing-checkbox-green !important;
+    }
     .rdrDay {
-      .rdrStartEdge,
-      .rdrEndEdge {
-        background: $listing-checkbox-green !important;
+      .rdrInRange {
+        background: lighten($listing-checkbox-green, 30%) !important;
       }
 
-      .rdrInRange {
-        background: $listing-checkbox-green !important;
+      .rdrStartEdge,
+      .rdrEndEdge {
+        background: lighten($listing-checkbox-green, 30%) !important;
       }
     }
   }
@@ -114,10 +120,6 @@
       }
     }
 
-    .rdrMonthAndYearPickers select {
-      background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230B71E6' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat right 8px center;
-    }
-
     .rdrNextPrevButton {
       position: relative;
       width: 22px;
@@ -257,7 +259,7 @@
           width: 36px;
           height: 36px;
           left: 4px;
-          border: 1px solid $tc-dark-blue-70;
+          border: 1px solid lighten($listing-checkbox-green, 70%);
         }
 
         .rdrSelected,
@@ -272,7 +274,7 @@
         .rdrDayInPreview,
         .rdrDayStartPreview,
         .rdrDayEndPreview {
-          border-color: $tc-dark-blue-70;
+          border-color: lighten($listing-checkbox-green, 70%);
           top: 0;
           bottom: 0;
         }

src/shared/components/DateRangePicker/index.jsx

@@ -133,6 +133,10 @@ $down-arrow-size: $base-unit;
       overflow: visible;
     }
 
+    .Select.is-focused:not(.is-open) > .Select-control {
+      border-color: #137d60 !important;
+    }
+
     .Select-value-label {
       @include roboto-regular;
 

src/shared/components/DateRangePicker/style.scss

@@ -18,9 +18,12 @@
 }
 
 .tooltip {
-  font-weight: 500;
-  font-size: 13px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
   color: $tc-white;
   letter-spacing: 0;
-  padding: 15px;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #2a2a2a;
 }

src/shared/components/SortingSelectBar/style.scss

@@ -18,9 +18,12 @@
 }
 
 .tooltip {
-  font-weight: 500;
-  font-size: 13px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
   color: $tc-white;
   letter-spacing: 0;
-  padding: 15px;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #2a2a2a;
 }

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

@@ -5,7 +5,7 @@ $prize-space-10: $base-unit * 2;
   @include roboto-regular;
 
   max-width: 480px;
-  padding: 15px;
+  padding: 10px 10px 0 10px;
   overflow: hidden;
 
   .bonuses {
@@ -15,15 +15,16 @@ $prize-space-10: $base-unit * 2;
   }
 
   h1 {
+    @include roboto-regular;
     border: none;
     color: $tc-white;
-    font-size: 15px;
-    line-height: 15px;
+    font-size: 14px;
+    line-height: 16px;
     margin: 0 0 $prize-space-10;
     padding: 0;
     text-align: left;
     text-transform: none;
-    font-weight: 700;
+    font-weight: 500;
   }
 }
 

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

@@ -37,7 +37,7 @@ import ChallengeSearchBar from 'containers/challenge-listing/ChallengeSearchBar'
 import { challenge as challengeUtils } from 'topcoder-react-lib';
 import { createStaticRanges } from 'utils/challenge-listing/date-range';
 import ArrowIcon from 'assets/images/ico-arrow-down.svg';
-import CircleIcon from 'assets/images/icon-circle.png';
+import CircleIcon from 'assets/images/icon-circle.svg';
 import Button from '../Button';
 import UiSimpleRemove from '../../Icons/ui-simple-remove.svg';
 import BucketSelector from '../../Sidebar/BucketSelector';
@@ -646,7 +646,7 @@ export default function FiltersPanel({
                     className={style['tooltip-overlay']}
                     trigger={['hover', 'focus']}
                   >
-                    <img src={CircleIcon} alt="circle-icon" />
+                    <CircleIcon />
                   </Tooltip>
                 </div>
               </div>

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

@@ -332,7 +332,7 @@ hr.hr {
           display: inline-block;
           line-height: 30px;
           min-width: 96px;
-          width: 128px;
+          width: 50%;
           margin-bottom: 6px;
 
           @include xs-to-md {
@@ -467,8 +467,8 @@ hr.hr {
 
             &:checked + .checkbox-label {
               &::before {
-                background-color: #0681ff;
-                border-color: #0681ff;
+                background-color: $listing-checkbox-green;
+                border-color: $listing-checkbox-green;
               }
 
               &::after {
@@ -590,6 +590,7 @@ hr.hr {
 
         .Select-menu-outer {
           margin-top: 1px;
+          font-size: 14px;
         }
       }
     }
@@ -610,11 +611,15 @@ hr.hr {
 
     .recommended-challenge-tooltip {
       position: absolute;
-      right: 48px;
+      right: 54px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       height: 100%;
+
+      @include xs-to-md {
+        left: 210px;
+      }
     }
   }
 }

src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx

@@ -2,12 +2,12 @@
 
 .container {
   min-height: 178px;
-  background-color: #fff;
+  background-color: #f4f4f4;
   border-radius: 4px;
   display: flex;
   justify-content: center;
   flex-direction: column;
-  margin-top: 20px;
+  margin: 16px 24px 24px 24px;
 }
 
 .icon {
@@ -52,7 +52,6 @@
 
 .challenge-link {
   color: #2862b9;
-  text-decoration: underline;
 
   &:hover,
   &:active,

src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss

@@ -13,8 +13,8 @@ import './style.scss';
 const VISIBLE_TAGS = 3;
 
 /**
- * Implements <Tags> component
- */
+  * Implements <Tags> component
+  */
 export default function Tags({
   expand, isExpanded, tags, onTechTagClicked, challengesUrl, recommended, verifiedTags,
 }) {
@@ -38,33 +38,33 @@ export default function Tags({
   const additionalTags = (items, verifiedTagIndex) => (
     <div styleName="additionalTagWrapper">
       {
-        items.map((item, index) => {
-          if (index < verifiedTagIndex) {
-            return (
-              <VerifiedTag
-                challengesUrl={challengesUrl}
-                item={item}
-                onClick={onClick}
-                recommended={recommended}
-              />
-            );
-          }
-          return (
-            (
-              <div styleName="additionalTag">
-                <Tag
-                  onClick={() => onClick(item.trim())}
-                  key={item}
-                  role="button"
-                  to={tagRedirectLink(item)}
-                >
-                  <span>{item}</span>
-                </Tag>
-              </div>
-            )
-          );
-        })
-      }
+         items.map((item, index) => {
+           if (index < verifiedTagIndex) {
+             return (
+               <VerifiedTag
+                 challengesUrl={challengesUrl}
+                 item={item}
+                 onClick={onClick}
+                 recommended={recommended}
+               />
+             );
+           }
+           return (
+             (
+               <div styleName="additionalTag">
+                 <Tag
+                   onClick={() => onClick(item.trim())}
+                   key={item}
+                   role="button"
+                   to={tagRedirectLink(item)}
+                 >
+                   <span>{item}</span>
+                 </Tag>
+               </div>
+             )
+           );
+         })
+       }
     </div>
   );
 
@@ -94,7 +94,6 @@ export default function Tags({
                       allTags.slice(VISIBLE_TAGS), verifiedTags.length - VISIBLE_TAGS,
                     )}
                     trigger={['hover', 'focus']}
-                    className="overlayTagBg"
                   >
                     <Tag
                       onClick={() => onClick(item.trim())}

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

@@ -14,6 +14,7 @@ div.progress-bar-tooltip {
   color: $tc-white;
   max-width: none;
   padding: 0 $base-unit * 3;
+  background-color: #2a2a2a;
 
   .rc-tooltip-inner {
     padding: 0 $base-unit * 3;
@@ -28,7 +29,7 @@ div.progress-bar-tooltip {
       line-height: $tip-space-15;
       min-width: $tip-offset;
       padding: $tip-space-15 0;
-      background: $tc-gray-80;
+      background: #2a2a2a;
       width: $tip-space-95;
 
       &:last-child {

src/shared/components/challenge-listing/Tags.jsx

@@ -12,16 +12,16 @@ import Tooltip from 'components/Tooltip';
 import './style.scss';
 
 /**
- * Renders the tooltip's content.
- */
+  * Renders the tooltip's content.
+  */
 function Tip({
   track,
   type,
 }) {
   const trackStyle = track.replace(' ', '-').toLowerCase();
   return (
     <div styleName="track-abbreviation-tooltip">
-      <div styleName={`header ${trackStyle}`}>
+      <div styleName="header">
         {type.name}
       </div>
       <div styleName="body">
@@ -46,8 +46,8 @@ function placeArrow(TooltipNode) {
 }
 
 /**
- * Renders the tooltip.
- */
+  * Renders the tooltip.
+  */
 function TrackAbbreviationTooltip({
   children,
   track,