Merge pull request #6334 from nursoltan-s/additional-fixes

additional fixes from challenge listing reskin

Author: dedywahyudi

src/shared/components/DateRangePicker/DateInput/style.scss

@@ -9,7 +9,7 @@
 
   input {
     padding: 5px;
-    height: 30px !important;
+    height: 40px !important;
     font-size: 13px !important;
     line-height: 16px !important;
     margin-bottom: 0 !important;
@@ -43,5 +43,5 @@
   position: absolute;
   cursor: pointer;
   margin-left: -22px;
-  margin-top: 6px;
+  margin-top: 11px;
 }

src/shared/components/SortingSelectBar/style.scss

@@ -196,6 +196,9 @@ $down-arrow-size: $base-unit;
       display: block;
       padding: 8px 20px;
       z-index: 100000;
+      border-bottom: 1px solid #aaa;
+      border-left: 1px solid #aaa;
+      border-right: 1px solid #aaa;
     }
 
     .Select-option:last-child {

src/shared/components/SwitchWithLabel/index.jsx

@@ -35,7 +35,7 @@ function SwitchWithLabel({
           switch: theme.switch,
         }}
       />
-      {labelAfter}
+      <span>{labelAfter}</span>
     </div>
   );
 }

src/shared/components/Tooltip/style.scss

@@ -8,7 +8,7 @@
   }
 
   .rc-tooltip-inner {
-    border-radius: 3px;
+    border-radius: 8px;
     background: $tc-gray-80;
     padding: 0;
   }

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

@@ -6,7 +6,7 @@
 }
 
 .link:hover {
-  color: $tc-dark-blue-110;
+  color: $tc-black;
 }
 
 .number {

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

@@ -510,7 +510,7 @@ export default function FiltersPanel({
                             onSwitch={(e) => {
                               let { types } = filterState;
 
-                              if (e.target.checked) {
+                              if (e) {
                                 types = types.concat(option.value);
                               } else {
                                 types = types.filter(type => type !== option.value);

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

@@ -339,6 +339,10 @@ hr.hr {
             width: 130px;
           }
 
+          @include md-to-lg {
+            width: 26%;
+          }
+
           .radio-label {
             display: inline-block;
             padding-left: 24px;
@@ -362,6 +366,7 @@ hr.hr {
               border: 1px solid #aaa;
               border-radius: 50%;
               box-shadow: 0 1px 2px 0 rgba($tc-black, 0.29);
+              background: #fff;
             }
 
             &::after {
@@ -585,12 +590,17 @@ hr.hr {
         .Select.is-focused > .Select-control {
           outline: none;
           box-shadow: none;
-          border-color: #137d60 !important;
+          border-color: #151516 !important;
         }
 
         .Select-menu-outer {
           margin-top: 1px;
           font-size: 14px;
+
+          .Select-option.is-selected {
+            background-color: #137d60 !important;
+            color: $tc-white !important;
+          }
         }
       }
     }
@@ -611,7 +621,7 @@ hr.hr {
 
     .recommended-challenge-tooltip {
       position: absolute;
-      right: 54px;
+      left: 210px;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -625,9 +635,9 @@ hr.hr {
 }
 
 .tctooltiptext {
-  background: $tc-white;
-  color: $tc-gray-90;
-  border-radius: 3px;
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
   padding: 10px;
 }
 
@@ -642,6 +652,6 @@ hr.hr {
   margin-left: -5px;
   border-width: 5px 5px 0;
   left: 50%;
-  border-top-color: $tc-white;
+  border-top-color: $tc-black;
   z-index: 1000;
 }

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

@@ -18,6 +18,7 @@ div.progress-bar-tooltip {
 
   .rc-tooltip-inner {
     padding: 0 $base-unit * 3;
+    border-radius: 8px;
   }
 
   .tip {

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

@@ -131,12 +131,6 @@ $challenge-radius-4: $corner-radius * 2;
   }
 }
 
-.recommended-plus-tag {
-  margin-left: 3px;
-  display: inline-block;
-  background-color: $tc-white;
-}
-
 .tag {
   button {
     border-radius: 2px;
@@ -146,13 +140,23 @@ $challenge-radius-4: $corner-radius * 2;
     font-weight: 500;
 
     &:hover {
-      background-color: #d4d4d4;
+      background-color: #d4d4d4 !important;
     }
   }
 }
 
+.recommended-plus-tag {
+  margin-left: 3px;
+  display: inline-block;
+  background-color: $tc-white;
+
+  button:hover {
+    background-color: #d4d4d4 !important;
+  }
+}
+
 .additionalTagWrapper {
-  background: $tc-white;
+  background: $tc-black;
   display: inline-block;
   border-radius: 2px;
   padding: 3px 4px;
@@ -181,6 +185,10 @@ $challenge-radius-4: $corner-radius * 2;
   margin-top: 5px;
   margin-left: 3px;
   display: inline-block;
+
+  & > button:hover {
+    background-color: #d4d4d4 !important;
+  }
 }
 
 .tagContainer {