added CancelSubmit common element

src/teams/TeamActions.tsx

@@ -24,7 +24,6 @@ import { blue } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { useGlobalState, useUserAPI } from "providers";
 import { Star, StarBorder } from "@mui/icons-material";
-import { cloneDeep } from "lodash";
 
 const useStyles = makeStyles(() => ({
   shareIcon: {
@@ -90,7 +89,6 @@ export default function TeamActions(props: Props) {
               setOpenState({ ...openState, share: true });
               setAnchorEl(null);
             }}
-            // button
             >
             <ListItemIcon>
               <ShareObjectIcon className={classes.shareIcon} />
@@ -105,7 +103,6 @@ export default function TeamActions(props: Props) {
               setOpenState({ ...openState, users: true });
               setAnchorEl(null);
             }}
-            // button
             >
             <ListItemIcon>
               <ObjectUsersIcon />
@@ -119,7 +116,6 @@ export default function TeamActions(props: Props) {
             setOpenState({ ...openState, removeSelf: true });
             setAnchorEl(null);
           }}
-          // button
           >
           <ListItemIcon>
             <RemoveSelfIcon className={classes.red} />
@@ -164,7 +160,6 @@ export default function TeamActions(props: Props) {
           label={label}
           isDialogOpen={openState.removeSelf}
           closeDialogCallback={(removeSelf: boolean) => {
-            // console.log(removeSelf)
             if (removeSelf) refreshCallback()
             setOpenState({ ...openState, removeSelf: false })
           }}

src/teams/TeamSettings.tsx

@@ -19,6 +19,7 @@ import React, { useEffect, useState } from "react";
 import DeleteButton from "common/DeleteButton";
 import { userRoleFromPermissions } from "pbHelpers/User";
 import { IconPicker } from "common/IconPicker";
+import CancelSubmit from "common/CancelSubmit";
 
 interface Props {
   teamDialogOpen: boolean;
@@ -57,20 +58,6 @@ export default function TeamSettings(props: Props) {
     }
   }, [team]);
 
-  // const ColorButton = withStyles((theme: Theme) => ({
-  //   root: {
-  //     color: theme.palette.getContrastText(theme.palette.primary.main),
-  //     backgroundColor: theme.palette.primary.main,
-  //     "&:hover": {
-  //       backgroundColor: theme.palette.primary.light
-  //     },
-  //     "&:disabled": {
-  //       backgroundColor: "rgba(0,0,0,0)",
-  //       color: theme.palette.getContrastText(theme.palette.primary.main)
-  //     }
-  //   }
-  // }))(Button);
-
   const removeTeam = () => {
     if (team?.key())
       teamAPI
@@ -246,19 +233,12 @@ export default function TeamSettings(props: Props) {
               Delete
             </DeleteButton>
           )}
-          <Button onClick={close} color="primary" aria-label="Cancel">
-            <Typography variant="subtitle2" color="textPrimary">
-              Cancel
-            </Typography>
-          </Button>
-          <Button
-            disabled={disable}
-            onClick={teamKey ? updateTeam : addTeam}
-            style={{ marginRight: theme.spacing(2) }}>
-            <Typography variant="subtitle2" color="primary">
-              {teamKey ? "Update" : "Submit"}
-            </Typography>
-          </Button>
+          <CancelSubmit 
+            onSubmit={teamKey ? updateTeam : addTeam}
+            onCancel={close}
+            submitDisabled={disable}
+            submitText={teamKey ? "Update" : "Submit"}
+          />
         </DialogActions>
       </ResponsiveDialog>
       {deleteConfirmation()}