fix: dropdown consistency style

Author: dedywahyudi

src/shared/components/SortingSelectBar/style.scss

@@ -52,6 +52,8 @@ $down-arrow-size: $base-unit;
       // 'Sort by' dropdown
       .Select {
         @include roboto-regular;
+
+        border-color: #b3b3b3 !important;
       }
 
       .is-focused {
@@ -88,8 +90,9 @@ $down-arrow-size: $base-unit;
         overflow: visible;
       }
 
-      .Select.is-focused:not(.is-open) > .Select-control {
-        border-color: #137d60 !important;
+      .Select.is-focused > .Select-control {
+        outline: none;
+        box-shadow: none;
       }
 
       .Select-value-label {
@@ -120,51 +123,41 @@ $down-arrow-size: $base-unit;
       .Select-menu-outer {
         width: 100%;
         color: $tc-gray-90;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
         font-weight: 400;
         font-size: 12px;
         background-color: $tc-white;
         box-sizing: border-box;
-        margin-top: 2px;
-        padding: 4px 0;
+        border: 1px solid #ccc;
+        max-height: 200px;
         position: absolute;
+        left: 0;
+        height: fit-content;
         top: 100%;
-        right: 0;
-        z-index: 1000;
-        -webkit-overflow-scrolling: touch;
-        border: none !important;
       }
 
       .Select-menu {
-        max-height: none;
         overflow-y: visible;
-        height: 22px;
         font-size: 14px;
       }
 
       .Select-option {
         box-sizing: border-box;
-        color: rgba(51, 51, 51, 0.8);
+        color: #2a2a2b;
         cursor: pointer;
         display: block;
-        padding: 6px 16px;
-        border-left: 1px solid #aaa;
-        border-right: 1px solid #aaa;
-      }
-
-      .Select-option:last-child {
-        border-bottom-right-radius: 5px !important;
-        border-bottom-left-radius: 5px !important;
-        border-bottom: 1px solid #aaa;
+        padding: 8px 15px;
       }
 
-      .Select-option:first-child {
-        border-top: 1px solid #aaa;
-        border-top-left-radius: $base-unit;
-        border-top-right-radius: $base-unit;
+      .Select-option:hover {
+        color: #fff !important;
+        font-weight: 400 !important;
+        background-color: #229173 !important;
       }
 
-      .Select-option:hover {
-        color: $tc-black;
+      .Select.is-focused:not(.is-open) > .Select-control {
+        border-color: #b3b3b3 !important;
       }
 
       .Select-option.is-selected {

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

@@ -587,16 +587,25 @@ hr.hr {
         .Select.is-focused > .Select-control {
           outline: none;
           box-shadow: none;
-          border-color: #151516 !important;
         }
 
         .Select-menu-outer {
-          margin-top: 1px;
           font-size: 14px;
 
+          .Select-option {
+            color: #2a2a2b !important;
+            padding: 8px 15px;
+          }
+
           .Select-option.is-selected {
-            background-color: #137d60 !important;
-            color: $tc-white !important;
+            font-weight: 700;
+            color: #2a2a2b !important;
+            background-color: #fff !important;
+          }
+
+          .Select-option:hover {
+            background-color: #229173 !important;
+            color: #fff !important;
           }
         }
       }