From 0c63f5378eb768cf13920c144c32e6901cab005e Mon Sep 17 00:00:00 2001
From: Timo Tuominen <tituomin@gmail.com>
Date: Thu, 14 Nov 2024 12:42:48 +0200
Subject: [PATCH] Revert "Highlight the late tasks in the Action Task List"

---
 components/actions/TaskList.js    | 53 +++----------------------------
 components/common/StatusBadge.tsx |  8 ++---
 locales/en/actions.json           |  3 +-
 3 files changed, 10 insertions(+), 54 deletions(-)

diff --git a/components/actions/TaskList.js b/components/actions/TaskList.js
index 649c077ae..039257518 100644
--- a/components/actions/TaskList.js
+++ b/components/actions/TaskList.js
@@ -14,13 +14,6 @@ import RichText from 'components/common/RichText';
 import { useLocale, useTranslations } from 'next-intl';
 import { usePlan } from 'context/plan';
 import { getDateFormat } from 'utils/dates.utils';
-import { setLightness } from 'polished';
-import {
-  StyledStatusBadge,
-  StyledStatusWrapper,
-  StyledStatusIndicator,
-  StyledStatusLabel,
-} from 'components/common/StatusBadge';
 
 const StyledDate = styled.span`
   font-size: ${(props) => props.theme.fontSizeSm};
@@ -107,14 +100,6 @@ const ListGroupTitle = styled.h3`
 
 const ListGroupItem = styled(BaseListGroupItem)`
   padding: ${(props) => props.theme.spaces.s050};
-  background: ${(props) =>
-    props.isLate
-      ? setLightness(0.95, props.theme.taskStatusColors.late)
-      : 'transparent'};
-  border: ${(props) =>
-    props.isLate ? `1px solid ${props.theme.taskStatusColors.late}` : 'none'};
-  border-radius: ${(props) => props.theme.cardBorderRadius};
-  margin-bottom: 8px;
 
   &:first-child {
     border-top-left-radius: ${(props) => props.theme.cardBorderRadius};
@@ -131,19 +116,11 @@ const ListGroupItem = styled(BaseListGroupItem)`
   }
 `;
 
-const StyledStatusBadgeNoBorder = styled(StyledStatusBadge)`
-  border: none;
-`;
-
 function parseTimestamp(timestamp) {
   const timeFormat = 'L';
   return dayjs(timestamp).format(timeFormat);
 }
 
-const isTaskLate = (task, completed) => {
-  return !completed && new Date(task.dueAt) < new Date();
-};
-
 const Task = (props) => {
   const t = useTranslations();
   const locale = useLocale();
@@ -158,8 +135,6 @@ const Task = (props) => {
     getDateFormat(dateFormat)
   );
 
-  const isLate = isTaskLate(task, completed);
-
   return (
     <TaskWrapper>
       {completed ? (
@@ -203,17 +178,6 @@ const Task = (props) => {
           </>
         )}
       </TaskContent>
-      {isLate && (
-        <StyledStatusBadgeNoBorder
-          style={{ marginLeft: 'auto' }}
-          $statusColor={theme.taskStatusColors.late}
-        >
-          <StyledStatusWrapper>
-            <StyledStatusIndicator $statusColor={theme.taskStatusColors.late} />
-            <StyledStatusLabel>{t('late')}</StyledStatusLabel>
-          </StyledStatusWrapper>
-        </StyledStatusBadgeNoBorder>
-      )}
     </TaskWrapper>
   );
 };
@@ -232,18 +196,11 @@ function TaskList(props) {
   function filterTasks(state, completed) {
     return sortedTasks
       .filter((item) => item.state === state)
-      .map((item) => {
-        const isLate = isTaskLate(item, completed);
-        return (
-          <ListGroupItem
-            key={item.id}
-            className={`state--${item.state}`}
-            isLate={isLate}
-          >
-            <Task task={item} theme={theme} completed={completed} />
-          </ListGroupItem>
-        );
-      });
+      .map((item) => (
+        <ListGroupItem key={item.id} className={`state--${item.state}`}>
+          <Task task={item} theme={theme} completed={completed} />
+        </ListGroupItem>
+      ));
   }
 
   const notStartedTasks = filterTasks('NOT_STARTED', false);
diff --git a/components/common/StatusBadge.tsx b/components/common/StatusBadge.tsx
index 0b1778d51..577be5135 100644
--- a/components/common/StatusBadge.tsx
+++ b/components/common/StatusBadge.tsx
@@ -14,7 +14,7 @@ type StatusProps = {
   $statusColor: string;
 };
 
-export const StyledStatusBadge = styled.div<StatusProps>`
+const StyledStatusBadge = styled.div<StatusProps>`
   display: inline-block;
   border: ${({ $subtle, $statusColor }) =>
     $subtle ? 'none' : `2px solid ${$statusColor}`};
@@ -28,7 +28,7 @@ const StyledStatusBadgeWithReason = styled(StyledStatusBadge)`
   display: block;
 `;
 
-export const StyledStatusIndicator = styled.div<StatusProps>`
+const StyledStatusIndicator = styled.div<StatusProps>`
   background: ${({ $statusColor }) => $statusColor};
   border-radius: 10px;
   width: 10px;
@@ -36,7 +36,7 @@ export const StyledStatusIndicator = styled.div<StatusProps>`
   flex-shrink: 0;
 `;
 
-export const StyledStatusLabel = styled.div<{ $subtle?: boolean }>`
+const StyledStatusLabel = styled.div<{ $subtle?: boolean }>`
   color: ${({ theme }) => theme.textColor.primary};
   font-size: ${({ theme }) => theme.fontSizeSm};
   line-height: ${({ theme }) => theme.lineHeightSm};
@@ -44,7 +44,7 @@ export const StyledStatusLabel = styled.div<{ $subtle?: boolean }>`
     $subtle ? theme.fontWeightNormal : theme.fontWeightBold};
 `;
 
-export const StyledStatusWrapper = styled.div`
+const StyledStatusWrapper = styled.div`
   display: flex;
   gap: ${({ theme }) => theme.spaces.s050};
   align-items: center;
diff --git a/locales/en/actions.json b/locales/en/actions.json
index ca2f443d1..b22085296 100644
--- a/locales/en/actions.json
+++ b/locales/en/actions.json
@@ -62,6 +62,5 @@
   "action-dependencies": "{context, select, CASE_STUDY {Case study dependencies} STRATEGY {Strategy dependencies} other {Action dependencies}}",
   "no-action-version-available": "No --{versionType}--- version available",
   "feedback-on-category": "Give feedback on this category",
-  "feedback-on-category-description": "You can leave a comment or feedback on this category",
-  "late": "Late"
+  "feedback-on-category-description": "You can leave a comment or feedback on this category"
 }