Tasks: adds colored radio buttons

available as widget, they are being used for priority in Task Edit

src/components/Tasks/TaskEdit.tsx

@@ -17,7 +17,6 @@ import InputLabel from '@material-ui/core/InputLabel';
 import * as colors from '@material-ui/core/colors';
 import FormLabel from '@material-ui/core/FormLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
-import Radio from '@material-ui/core/Radio';
 
 import IconDelete from '@material-ui/icons/Delete';
 import IconCancel from '@material-ui/icons/Clear';
@@ -42,6 +41,8 @@ import { TaskType, TaskStatusType, timezoneLoadFromName, TaskPriorityType } from
 
 import { History } from 'history';
 
+import ColoredRadio from '../../widgets/ColoredRadio';
+
 interface PropsType {
   collections: EteSync.CollectionInfo[];
   initialCollection?: string;
@@ -310,10 +311,10 @@ class TaskEdit extends React.PureComponent<PropsType> {
               value={this.state.priority}
               onChange={(e) => this.handleChange('priority', Number(e.target.value))}
             >
-              <FormControlLabel value={TaskPriorityType.Undefined} control={<Radio />} label="None" />
+              <ColoredRadio value={TaskPriorityType.Undefined} label="None" color={colors.grey[600]} />
-              <FormControlLabel value={TaskPriorityType.Low} control={<Radio />} label="Low" />
+              <ColoredRadio value={TaskPriorityType.Low} label="Low" color={colors.blue[600]} />
-              <FormControlLabel value={TaskPriorityType.Medium} control={<Radio />} label="Medium" />
+              <ColoredRadio value={TaskPriorityType.Medium} label="Medium" color={colors.orange[600]} />
-              <FormControlLabel value={TaskPriorityType.High} control={<Radio />} label="High" />
+              <ColoredRadio value={TaskPriorityType.High} label="High" color={colors.red[600]} />
             </RadioGroup>
           </FormControl>
 

src/widgets/ColoredRadio.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import Radio from '@material-ui/core/Radio';
+import { Omit } from '@material-ui/types';
+import FormControlLabel, { FormControlLabelProps } from '@material-ui/core/FormControlLabel';
+
+interface Props {
+  color: string;
+  label: string;
+}
+
+const useStyles = makeStyles({
+  root: {
+    color: (props: Props) => props.color,
+  },
+});
+
+export default function ColoredRadio(props: Props & Omit<FormControlLabelProps, keyof Props | 'control'>) {
+  const { color, label, value, ...other } = props;
+  const { root } = useStyles(props);
+
+  return <FormControlLabel
+    className={root}
+    label={label}
+    control={<Radio color="default" className={root} value={value} />}
+    {...other}
+  />;
+}