Merge branch 'develop' into issues/timor/281

Author: callmekatootie

client/src/assets/images/u-bahn-logo.svg

@@ -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/index.jsx

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

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

@@ -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,13 @@ 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 +143,9 @@ function GroupsSection({ title, items, onItemClicked, selectedItemId }) {
           );
         })}
       </div>
+      {items.length === 0 && !loadingGroups && (
+        <div className={styles.message}>No results found</div>
+      )}
     </>
   );
 }
@@ -144,6 +155,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.js

@@ -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, lightGray2, white, blue from colors;
 
 /* Group Tab filters (lett col) styles */
 .groupTabFilters {
@@ -144,3 +140,8 @@ blue from colors;
 .sectionItemChevron {
   margin-left: 13px;
 }
+
+.message {
+  color: lightGray2;
+  font: 400 12pt/1.25 Inter;
+}

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

@@ -3,6 +3,11 @@
 .logo {
   display: flex;
   align-items: center;
+
+  img {
+    width: 80px;
+    height: auto;
+  }
 }
 
 .accountMenu {

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

@@ -32,14 +32,15 @@ export default function Initial({ onError, onUpload, templateId }) {
       const { data } = await apiClient.get(url);
       window.location = data.url;
     } catch (error) {
-      if (onError) onError(error.toJSON());
+      if (onError) onError(error);
     }
   };
 
   const upload = (files) => {
     const allowedMineTypes = [
       "application/vnd.ms-excel",
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "text/csv",
     ];
     if (files && files[0] && allowedMineTypes.indexOf(files[0].type) !== -1)
       onUpload(files[0]);

client/src/components/Upload/Initial/index.jsx

@@ -21,6 +21,7 @@ export default function UserGroup({
           .map((group, index) => {
             return (
               <Pill
+                className={styles.pillContainer}
                 key={group.id}
                 name={group.name}
                 removable={true}

client/src/components/UserGroup/index.jsx

@@ -51,3 +51,11 @@ div.groupContent > button:first-child {
   align-items: center;
   height: 30px;
 }
+
+.pillContainer {
+  max-width: -webkit-fill-available;
+  /* Mozilla-based browsers will ignore this. */
+  max-width: stretch;
+  max-width: -moz-available;
+  /* WebKit-based browsers will ignore this. */
+}

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

@@ -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);

client/src/styles/colors.module.css

@@ -22,9 +22,9 @@
     "@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",
+    "clsx": "^1.1.1",
     "config": "^3.2.4",
     "cors": "^2.8.5",
     "dynamoose": "^1.8.0",