replaced all instances of the styled toggle with the new buttongroup common component

src/tasks/TaskList.tsx

@@ -8,6 +8,7 @@ import { Task } from "models";
 //import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import TasksIcon from "products/Construction/TasksIcon";
 import moment from "moment";
+import ButtonGroup from "common/ButtonGroup";
 
 interface Props {
   tasks: Task[];
@@ -147,8 +148,21 @@ export default function TaskList(props: Props) {
   return (
     <Box padding="5px" textAlign="center">
       <Typography variant="h5">{label ? label : ""}</Typography>
-      <Box textAlign="center">
-        <ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
+      <Box textAlign="center" display="flex" justifyContent="center">
+        <ButtonGroup 
+          toggle
+          buttons={[
+            {
+              title: "Upcoming",
+              function: () => setViewing("upcoming")
+            },
+            {
+              title: "Complete",
+              function: () => setViewing("complete")
+            }
+          ]}
+        />
+        {/* <ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
           <ToggleButton
             value={"upcoming"}
             aria-label="upcoming"
@@ -161,7 +175,7 @@ export default function TaskList(props: Props) {
             aria-label="complete">
             Complete
           </ToggleButton>
-        </ToggleButtonGroup>
+        </ToggleButtonGroup> */}
         {location !== "/tasks" && (
           <IconButton id="tasks" component={Link} to="/tasks">
             <TasksIcon />