refactor: clean task control components

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

@@ -108,7 +108,7 @@ const ActionItemLine = styled.div`
   margin: 0.25rem !important;
 `;
 
-type FilterMetaProps = {
+type ControlFilterProps = {
   filters: TaskMetaFilters;
   userID: string;
   projectID: string;
@@ -116,7 +116,13 @@ type FilterMetaProps = {
   onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
 };
 
-const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter, userID, projectID, members }) => {
+const ControlFilter: React.FC<ControlFilterProps> = ({
+  filters,
+  onChangeTaskMetaFilter,
+  userID,
+  projectID,
+  members,
+}) => {
   const [currentFilters, setFilters] = useState(filters);
   const [nameFilter, setNameFilter] = useState(filters.taskName ? filters.taskName.name : '');
   const [currentLabel, setCurrentLabel] = useState('');
@@ -323,4 +329,4 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
   );
 };
 
-export default FilterMeta;
+export default ControlFilter;

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

@@ -1,7 +1,6 @@
 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)`
@@ -34,21 +33,12 @@ export const ActionTitle = styled.span`
   margin-left: 20px;
 `;
 
-const ActionItemSeparator = styled.li`
+type ControlSortProps = {
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.75rem;
-  padding-bottom: 0.25rem;
-`;
-
-type SortPopupProps = {
   sorting: TaskSorting;
   onChangeTaskSorting: (taskSorting: TaskSorting) => void;
 };
 
-const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
+const ControlSort: React.FC<ControlSortProps> = ({ sorting, onChangeTaskSorting }) => {
   const [currentSorting, setSorting] = useState(sorting);
   const handleSetSorting = (s: TaskSorting) => {
     setSorting(s);
@@ -94,4 +84,4 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
   );
 };
 
-export default SortPopup;
+export default ControlSort;

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

@@ -85,12 +85,12 @@ const ActiveIcon = styled(Checkmark)`
   position: absolute;
 `;
 
-type FilterStatusProps = {
+type ControlStatusProps = {
   filter: TaskStatusFilter;
   onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
 };
 
-const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
+const ControlStatus: React.FC<ControlStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
   const [currentFilter, setFilter] = useState(filter);
   const handleFilterChange = (f: TaskStatusFilter) => {
     setFilter(f);
@@ -146,4 +146,4 @@ const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusF
   );
 };
 
-export default FilterStatus;
+export default ControlStatus;

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

@@ -49,9 +49,9 @@ import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
 import Chip from 'shared/components/Chip';
 import { toast } from 'react-toastify';
 import { useCurrentUser } from 'App/context';
-import FilterStatus from './FilterStatus';
+import ControlStatus from './ControlStatus';
-import FilterMeta from './FilterMeta';
+import ControlFilter from './ControlFilter';
-import SortPopup from './SortPopup';
+import ControlSort from './ControlSort';
 
 const FilterChip = styled(Chip)`
   margin-right: 4px;
@@ -507,7 +507,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 showPopup(
                   target,
                   <Popup tab={0} title={null}>
-                    <FilterStatus
+                    <ControlStatus
                       filter={taskStatusFilter}
                       onChangeTaskStatusFilter={(filter) => {
                         setTaskStatusFilter(filter);
@@ -527,7 +527,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 showPopup(
                   target,
                   <Popup tab={0} title={null}>
-                    <SortPopup
+                    <ControlSort
                       sorting={taskSorting}
                       onChangeTaskSorting={(sorting) => {
                         setTaskSorting(sorting);
@@ -545,7 +545,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               onClick={(target) => {
                 showPopup(
                   target,
-                  <FilterMeta
+                  <ControlFilter
                     filters={taskMetaFilters}
                     onChangeTaskMetaFilter={(filter) => {
                       setTaskMetaFilters(filter);