fix: task sort popup active checkmarks not showing

frontend/src/Projects/Project/Board/FilterStatus.tsx

@@ -30,7 +30,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: ${(props) => props.theme.colors.primary};
   }
   &:hover ${ActionExtraMenuContainer} {
     visibility: visible;
@@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: ${(props) => props.theme.colors.primary};
   }
 `;
 const ActionExtraMenuSeparator = styled.li`
-  color: ${props => props.theme.colors.text.primary};
+  color: ${(props) => props.theme.colors.text.primary};
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;

frontend/src/Projects/Project/Board/SortPopup.tsx

@@ -2,6 +2,11 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
 import { mixin } from 'shared/utils/styles';
+import { Checkmark } from 'shared/icons';
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+`;
 
 export const ActionsList = styled.ul`
   margin: 0;
@@ -21,7 +26,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: ${(props) => props.theme.colors.primary};
   }
 `;
 
@@ -30,7 +35,7 @@ export const ActionTitle = styled.span`
 `;
 
 const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;
@@ -52,31 +57,37 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
   return (
     <ActionsList>
       <ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
+        {currentSorting.type === TaskSortingType.NONE && <ActiveIcon width={12} height={12} />}
         <ActionTitle>None</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.DUE_DATE && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Due date</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.MEMBERS && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Members</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.LABELS && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Labels</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.TASK_TITLE && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Task title</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.COMPLETE && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Complete</ActionTitle>
       </ActionItem>
     </ActionsList>

frontend/src/Projects/Project/Board/index.tsx

@@ -60,19 +60,20 @@ const FilterChip = styled(Chip)`
 type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
 
 const renderTaskSortingLabel = (sorting: TaskSorting) => {
-  if (sorting.type === TaskSortingType.TASK_TITLE) {
+  switch (sorting.type) {
-    return 'Sort: Card title';
+    case TaskSortingType.TASK_TITLE:
+      return 'Sort: Task Title';
+    case TaskSortingType.MEMBERS:
+      return 'Sort: Members';
+    case TaskSortingType.DUE_DATE:
+      return 'Sort: Due Date';
+    case TaskSortingType.LABELS:
+      return 'Sort: Labels';
+    case TaskSortingType.COMPLETE:
+      return 'Sort: Complete';
+    default:
+      return 'Sort';
   }
-  if (sorting.type === TaskSortingType.MEMBERS) {
-    return 'Sort: Members';
-  }
-  if (sorting.type === TaskSortingType.DUE_DATE) {
-    return 'Sort: Due Date';
-  }
-  if (sorting.type === TaskSortingType.LABELS) {
-    return 'Sort: Labels';
-  }
-  return 'Sort';
 };
 
 const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {