Merge branch 'develop' into issues/timor/281

Author: callmekatootie

client/src/components/GroupsSideMenu/filters.module.css

@@ -1,10 +1,6 @@
 /* importing colors */
 @value colors: "../../styles/colors.module.css";
-@value gray1,
-gray2,
-gray1_025,
-white,
-blue from colors;
+@value gray1, gray2, gray1_025, white, blue from colors;
 
 /* Group Tab filters (lett col) styles */
 .groupTabFilters {
@@ -93,6 +89,7 @@ blue from colors;
 
   display: flex;
   flex-direction: row;
+  align-items: center;
   padding-left: 17px;
   padding-top: 13px;
   padding-bottom: 13px;
@@ -104,14 +101,13 @@ blue from colors;
 }
 
 .sectionItemTitle {
-  align-self: flex-start;
+  color: gray2;
   word-break: break-word;
   padding-right: 12px;
-  color: gray2;
 }
 
 .sectionItemBadge {
-  align-self: flex-start;
+  align-self: center;
   margin-left: auto;
   color: gray1;
 

client/src/components/Header/style.module.scss

@@ -76,6 +76,7 @@
 
 .downArrow {
   margin-left: 15px;
+  overflow: hidden;
 }
 
 .menu {

client/src/pages/Search/Global.jsx

@@ -58,15 +58,18 @@ export default function SearchGlobal({ keyword }) {
   const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
   const [orderBy, setOrderBy] = React.useState(config.DEFAULT_SORT_ORDER);
   const [totalPages, setTotalPages] = React.useState(0);
+  const dropdownRef = React.useRef(null);
 
   const prevOrderBy = usePrevious(orderBy);
 
   const usersPerPage = config.ITEMS_PER_PAGE;
 
   React.useEffect(() => {
     window.addEventListener("resize", updateWindowDimensions);
+    window.addEventListener("click", onWholeContentClick);
     return () => {
       window.removeEventListener("resize", updateWindowDimensions);
+      window.removeEventListener("click", onWholeContentClick);
     };
   });
 
@@ -237,6 +240,7 @@ export default function SearchGlobal({ keyword }) {
         });
 
         setUsers(data);
+        setSortByDropdownShown(false);
         setTotalResults(Number(headers["x-total"]));
         setTotalPages(Number(headers["x-total-pages"]));
       }
@@ -256,6 +260,12 @@ export default function SearchGlobal({ keyword }) {
     setWindowWidth(window.innerWidth);
   };
 
+  const onWholeContentClick = (evt) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(evt.target)) {
+      setSortByDropdownShown(false);
+    }
+  };
+
   return (
     <>
       <div className={style.sideMenu}>
@@ -273,6 +283,7 @@ export default function SearchGlobal({ keyword }) {
             </div>
             <div
               className={style.sort}
+              ref={dropdownRef}
               onClick={() => setSortByDropdownShown(!sortByDropdownShown)}
               style={{
                 marginRight:
@@ -289,7 +300,7 @@ export default function SearchGlobal({ keyword }) {
                   {getOrderByText(orderBy)}
                 </span>
               )}
-              <DownArrowIcon />
+              <DownArrowIcon className={style.downArrow} />
               {sortByDropdownShown && (
                 <ul className={style.dropdown}>
                   <li

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

@@ -56,6 +56,10 @@
   margin-bottom: 100px;
 }
 
+.downArrow {
+  overflow: hidden;
+}
+
 .pills {
   margin: 15px -5px 0;
 }