Merge branch 'develop' into issue128

Author: callmekatootie

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

@@ -83,13 +83,13 @@
 
 .sectionItem {
   cursor: pointer;
-  height: 24px;
   width: 322px;
   border-radius: 10px;
   border: 1px solid gray1_025;
 
   display: flex;
   flex-direction: row;
+  align-items: center;
   padding-left: 17px;
   padding-top: 13px;
   padding-bottom: 13px;
@@ -101,12 +101,13 @@
 }
 
 .sectionItemTitle {
-  align-self: flex-start;
   color: gray2;
+  word-break: break-word;
+  padding-right: 12px;
 }
 
 .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;
 }