From 77f734a227cb2b08c6b3c245753e73bd8b11c309 Mon Sep 17 00:00:00 2001
From: Andrew P Maney <amaney@usc.edu>
Date: Thu, 2 Apr 2020 17:03:30 -0700
Subject: [PATCH] Tasks: fix alignment in Toolbar menu

---
 src/components/Tasks/Toolbar.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/Tasks/Toolbar.tsx b/src/components/Tasks/Toolbar.tsx
index 59a1a42..c18dff1 100644
--- a/src/components/Tasks/Toolbar.tsx
+++ b/src/components/Tasks/Toolbar.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import * as EteSync from 'etesync';
 
 import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -23,6 +22,7 @@ import { setSettings } from '../../store/actions';
 import { StoreState } from '../../store';
 
 import Menu from '../../widgets/Menu';
+import { ListItemText, ListItemSecondaryAction } from '@material-ui/core';
 
 const transitionTimeout = 300;
 
@@ -160,18 +160,16 @@ export default function Toolbar(props: PropsType) {
           onClose={() => setOptionsAnchorEl(null)}
         >
           <MenuItem>
-            <FormControlLabel
-              label="Show completed"
-              labelPlacement="start"
-              control={<Switch checked={showCompleted} onChange={(_e, checked) => setShowCompleted(checked)} />}
-            />
+            <ListItemText style={{ marginRight: '1.5em' }}>Show completed</ListItemText>
+            <ListItemSecondaryAction>
+              <Switch checked={showCompleted} onChange={(_e, checked) => setShowCompleted(checked)} edge="end" />
+            </ListItemSecondaryAction>
           </MenuItem>
           <MenuItem>
-            <FormControlLabel
-              label="Show hidden"
-              labelPlacement="start"
-              control={<Switch checked={showHidden} onChange={(_e, checked) => setShowHidden(checked)} />}
-            />
+            <ListItemText style={{ marginRight: '1.5em' }}>Show hidden</ListItemText>
+            <ListItemSecondaryAction>
+              <Switch checked={showHidden} onChange={(_e, checked) => setShowHidden(checked)} edge="end" />
+            </ListItemSecondaryAction>
           </MenuItem>
         </Menu>