improvement(reskin): challenge listing part 5 f2f

Author: dedywahyudi

src/shared/components/challenge-detail/Header/style.scss

@@ -18,6 +18,10 @@
   padding: 0 25px !important;
   background: #137d60 !important;
   color: #fff !important;
+
+  @include xs-to-sm {
+    width: fit-content;
+  }
 }
 
 .submitButtonDisabled {
@@ -29,6 +33,10 @@
   padding: 0 25px !important;
   color: #767676 !important;
   background: #f4f4f4 !important;
+
+  @include xs-to-sm {
+    width: fit-content;
+  }
 }
 
 .unregisterButton {
@@ -41,6 +49,10 @@
   color: #137d60 !important;
   border-color: #137d60 !important;
   background: #fff !important;
+
+  @include xs-to-sm {
+    width: fit-content;
+  }
 }
 
 .registerBtn {
@@ -51,6 +63,10 @@
   height: 48px;
   padding: 0 25px !important;
   background-color: #137d60 !important;
+
+  @include xs-to-sm {
+    width: fit-content;
+  }
 }
 
 .challenge-ops-container {

src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx

@@ -83,6 +83,17 @@ export default function ReviewOpportunityBucket({
           ? filteredOpportunities.length > 0 && (
             <SortingSelectBar
               title="Open for review"
+              options={
+                BUCKET_DATA[bucket].sorts.map(item => ({
+                  label: Sort[item].name,
+                  value: item,
+                }))
+              }
+              value={{
+                label: Sort[activeSort].name,
+                value: activeSort,
+              }}
+              onSelect={setSort}
             />
           )
           : (
@@ -109,6 +120,17 @@ export default function ReviewOpportunityBucket({
             <div styleName="review-opportunity-bucket">
               <SortingSelectBar
                 title={BUCKET_DATA[bucket].name}
+                options={
+                  BUCKET_DATA[bucket].sorts.map(item => ({
+                    label: Sort[item].name,
+                    value: item,
+                  }))
+                }
+                value={{
+                  label: Sort[activeSort].name,
+                  value: activeSort,
+                }}
+                onSelect={setSort}
               />
               <h1 styleName="no-results">
                 {NO_RESULTS_MESSAGE}

src/shared/utils/challenge-listing/helper.js

@@ -48,7 +48,8 @@ export function calculateScore(score) {
  */
 export const formatOrdinals = (n) => {
   let ord = '';
-  switch (n) {
+  const place = String(n);
+  switch (place) {
     case '1': ord = '1st';
       break;
     case '2': ord = '2nd';