diff --git a/frontend/src/Projects/Project/Board/FilterStatus.tsx b/frontend/src/Projects/Project/Board/FilterStatus.tsx index 47bf0de..65fb673 100644 --- a/frontend/src/Projects/Project/Board/FilterStatus.tsx +++ b/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; diff --git a/frontend/src/Projects/Project/Board/SortPopup.tsx b/frontend/src/Projects/Project/Board/SortPopup.tsx index 8416106..eb587d7 100644 --- a/frontend/src/Projects/Project/Board/SortPopup.tsx +++ b/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 = ({ sorting, onChangeTaskSorting }) = return ( handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}> + {currentSorting.type === TaskSortingType.NONE && } None handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })} > + {currentSorting.type === TaskSortingType.DUE_DATE && } Due date handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })} > + {currentSorting.type === TaskSortingType.MEMBERS && } Members handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })} > + {currentSorting.type === TaskSortingType.LABELS && } Labels handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })} > + {currentSorting.type === TaskSortingType.TASK_TITLE && } Task title handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })} > + {currentSorting.type === TaskSortingType.COMPLETE && } Complete diff --git a/frontend/src/Projects/Project/Board/index.tsx b/frontend/src/Projects/Project/Board/index.tsx index ac2f585..ddfd8f0 100644 --- a/frontend/src/Projects/Project/Board/index.tsx +++ b/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) { - return 'Sort: Card title'; + switch (sorting.type) { + 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) => {