From 8705f2692fe09467ff70d11f583711a487323d7f Mon Sep 17 00:00:00 2001
From: Wille Marcel <wille.yyz@gmail.com>
Date: Fri, 4 Jun 2021 11:26:44 -0300
Subject: [PATCH] Fix responsivity and improve display logic for the buttons on
 My Tasks

---
 .../components/contributions/myTasksNav.js    | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/contributions/myTasksNav.js b/frontend/src/components/contributions/myTasksNav.js
index 5c45142ef0..cd60475f45 100644
--- a/frontend/src/components/contributions/myTasksNav.js
+++ b/frontend/src/components/contributions/myTasksNav.js
@@ -7,11 +7,21 @@ import { ProjectSearchBox } from '../projects/projectSearchBox';
 import { useTaskContributionQueryParams, stringify } from '../../hooks/UseTaskContributionAPI';
 
 const isActiveButton = (buttonName, contributionQuery) => {
-  const allBoolean = !contributionQuery.projectStatus && !contributionQuery.status;
-  if (
-    JSON.stringify(contributionQuery).indexOf(buttonName) !== -1 ||
-    (buttonName === 'All' && allBoolean)
-  ) {
+  let isActive = false;
+  try {
+    if (contributionQuery.status.includes(buttonName)) {
+      isActive = true;
+    }
+  } catch {
+    if (contributionQuery.projectStatus === buttonName) {
+      isActive = true;
+    }
+    if (buttonName === 'All' && !contributionQuery.projectStatus && !contributionQuery.status) {
+      isActive = true;
+    }
+  }
+
+  if (isActive) {
     return 'bg-blue-grey white fw5';
   } else {
     return 'bg-white blue-grey';
@@ -21,7 +31,7 @@ const isActiveButton = (buttonName, contributionQuery) => {
 export const MyTasksNav = (props) => {
   const [contributionsQuery, setContributionsQuery] = useTaskContributionQueryParams();
 
-  const linkCombo = 'link ph3 f6 pv2 ba b--grey-light';
+  const linkCombo = 'dib mh1 mb2 link ph3 f6 pv2 ba b--grey-light';
   const notAnyFilter = !stringify(contributionsQuery);
   return (
     /* mb1 mb2-ns (removed for map, but now small gap for more-filters) */
@@ -58,33 +68,30 @@ export const MyTasksNav = (props) => {
         </div>
       </div>
       <div className="mv2">
-        <Link to="" className={`di mh1 ${isActiveButton('All', contributionsQuery)} ${linkCombo}`}>
+        <Link to="" className={`${isActiveButton('All', contributionsQuery)} ${linkCombo}`}>
           <FormattedMessage {...messages.all} />
         </Link>
         <Link
           to="?status=MAPPED"
-          className={`di mh1 ${isActiveButton('MAPPED', contributionsQuery)}  ${linkCombo}`}
+          className={`${isActiveButton('MAPPED', contributionsQuery)}  ${linkCombo}`}
         >
           <FormattedMessage {...messages.mapped} />
         </Link>
         <Link
           to="?status=VALIDATED"
-          className={`di mh1 ${isActiveButton(
-            'status=VALIDATED',
-            contributionsQuery,
-          )}  ${linkCombo}`}
+          className={`${isActiveButton('VALIDATED', contributionsQuery)}  ${linkCombo}`}
         >
           <FormattedMessage {...messages.validated} />
         </Link>
         <Link
           to="?status=INVALIDATED"
-          className={`di mh1 ${isActiveButton('INVALIDATED', contributionsQuery)}  ${linkCombo}`}
+          className={`${isActiveButton('INVALIDATED', contributionsQuery)}  ${linkCombo}`}
         >
           <FormattedMessage {...messages.invalidated} />
         </Link>
         <Link
           to="?projectStatus=ARCHIVED"
-          className={`di mh1 ${isActiveButton('projectStatus', contributionsQuery)}  ${linkCombo}`}
+          className={`${isActiveButton('ARCHIVED', contributionsQuery)}  ${linkCombo}`}
         >
           <FormattedMessage {...messages.archived} />
         </Link>