Merge branch 'issue_315' into develop

Author: callmekatootie

client/src/components/AddToGroupModal/index.jsx

@@ -190,6 +190,10 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
               />
             ))}
       </div>
+      {myGroups.filter((g) =>
+        g.name.toLowerCase().includes(filter.toLowerCase())
+      ).length === 0 &&
+        !loadingGroups && <div className={style.message}>No results found</div>}
       <h3 className={style.subTitle}>
         Other Groups{loadingGroups && " (Loading...)"}
       </h3>
@@ -206,6 +210,10 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
               />
             ))}
       </div>
+      {otherGroups.filter((g) =>
+        g.name.toLowerCase().includes(filter.toLowerCase())
+      ).length === 0 &&
+        !loadingGroups && <div className={style.message}>No results found</div>}
       <div className={style.buttons}>
         <Button onClick={onCancel} disabled={updatingGroups || creatingGroup}>
           Cancel

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

@@ -84,3 +84,8 @@
   left: 10px;
   top: 10px;
 }
+
+.message {
+  color: $textColor2;
+  font: 400 12pt/1.25 Inter;
+}

client/src/components/GroupsSideMenu/filters.js

@@ -90,6 +90,7 @@ export default function GroupTabFilters({
             )}
             onItemClicked={handleGroupItemClicked}
             selectedItemId={selectedGroup === "My Groups" ? selectedItemId : -1}
+            loadingGroups={loadingGroups}
           />
           <GroupsSection
             title={loadingGroups ? "Other Groups (Loading...)" : "Other Groups"}
@@ -100,6 +101,7 @@ export default function GroupTabFilters({
             selectedItemId={
               selectedGroup === "Other Groups" ? selectedItemId : -1
             }
+            loadingGroups={loadingGroups}
           />
         </div>
       </div>
@@ -116,7 +118,7 @@ GroupTabFilters.propTypes = {
   onCreateNewGroup: PT.func,
 };
 
-function GroupsSection({ title, items, onItemClicked, selectedItemId }) {
+function GroupsSection({ title, items, onItemClicked, selectedItemId, loadingGroups }) {
   return (
     <>
       <div className={styles.sectionTitle}>{title}</div>
@@ -135,6 +137,7 @@ function GroupsSection({ title, items, onItemClicked, selectedItemId }) {
           );
         })}
       </div>
+      {items.length === 0 && !loadingGroups && <div className={styles.message}>No results found</div>}
     </>
   );
 }
@@ -144,6 +147,7 @@ GroupsSection.propTypes = {
   items: PT.array.isRequired,
   onItemClicked: PT.func,
   selectedIndex: PT.number,
+  loadingGroups: PT.bool,
 };
 
 function SectionRow({ title, badge, selected = false, action }) {

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

@@ -1,6 +1,6 @@
 /* importing colors */
 @value colors: "../../styles/colors.module.css";
-@value gray1, gray2, gray1_025, white, blue from colors;
+@value gray1, gray2, gray1_025, lightGray2, white, blue from colors;
 
 /* Group Tab filters (lett col) styles */
 .groupTabFilters {
@@ -140,3 +140,8 @@
 .sectionItemChevron {
   margin-left: 13px;
 }
+
+.message {
+  color: lightGray2;
+  font: 400 12pt/1.25 Inter;
+}

client/src/styles/colors.module.css

@@ -11,6 +11,7 @@
 @value green2: #0FE030;
 @value lightGray: #EEEEEE;
 @value lightGray1: #f6f6f6;
+@value lightGray2: #a1a3ad;
 @value blue: #00A3FF;
 @value lightBlue: #8CD6FF;
 @value gray_overlay: rgba(37,37,38, 0.1);