Merge pull request #546 from topcoder-platform/issue_168

Issue 168 fix

Author: callmekatootie

client/src/pages/Search/Global.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PT from "prop-types";
 import axios from "axios";
+import clsx from 'clsx';
 import FiltersSideMenu from "../../components/FiltersSideMenu";
 import { ReactComponent as DownArrowIcon } from "../../assets/images/down-arrow.svg";
 import ProfileCard from "../../components/ProfileCard";
@@ -277,19 +278,19 @@ export default function SearchGlobal({ keyword }) {
               {sortByDropdownShown && (
                 <ul className={style.dropdown}>
                   <li
-                    className={style.dropdownItem}
+                    className={clsx(style.dropdownItem, orderBy === 'name' && style.selected)}
                     onClick={() => setOrderBy("name")}
                   >
                     Name
                   </li>
                   <li
-                    className={style.dropdownItem}
+                    className={clsx(style.dropdownItem, orderBy === 'location' && style.selected)}
                     onClick={() => setOrderBy("location")}
                   >
                     Location
                   </li>
                   <li
-                    className={style.dropdownItem}
+                    className={clsx(style.dropdownItem, orderBy === 'isAvailable' && style.selected)}
                     onClick={() => setOrderBy("isAvailable")}
                   >
                     Availability

client/src/pages/Search/style.module.scss

@@ -110,6 +110,11 @@
       background-color: $blue;
     }
   }
+
+  .selected {
+    background-color: $blue;
+    color: $white;
+  }
 }
 
 .sortMode {

package.json

@@ -22,6 +22,7 @@
     "@hapi/joi": "^16.1.8",
     "aws-sdk": "^2.627.0",
     "axios": "^0.19.2",
+    "clsx": "^1.1.1",
     "bluebird": "^3.5.1",
     "body-parser": "^1.19.0",
     "config": "^3.2.4",