added CancelSubmit common element

src/chat/ChatInput.tsx

@@ -58,8 +58,6 @@ export default function ChatInput(props: Props) {
   const { openSnack } = useSnackbar();
   const [shift, setShift] = useState(false);
   const theme = useTheme();
-  //const [attachmentDialogOpen, setAttachmentDialogOpen] = useState(false);
-  //const [uploadingFile, setUploadingFile] = useState(false);
   const [uploadedFiles, setUploadedFiles] = useState<Map<string, string>>(new Map());
 
   const clearEntry = () => {
@@ -145,7 +143,7 @@ export default function ChatInput(props: Props) {
               <Box
                 style={{
                   position: "absolute",
-                  right: "10px",
+                  right: theme.spacing(1),
                   top: "50%",
                   transform: "translateY(-50%)",
                 }}

src/chat/ChatMessage.tsx

@@ -1,7 +1,6 @@
 import {
   Avatar,
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -22,6 +21,7 @@ import React, { useState } from "react";
 import { pond } from "protobuf-ts/pond";
 import { red } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
+import CancelSubmit from "common/CancelSubmit";
 
 interface Props {
   index: number;
@@ -134,12 +134,11 @@ export default function ChatMessage(props: Props) {
         <DialogContent>Are you sure you wish to delete this message</DialogContent>
 
         <DialogActions>
-          <Button onClick={closeDialog} color="primary">
+          <CancelSubmit 
-            Cancel
+            onCancel={closeDialog}
-          </Button>
+            onSubmit={deleteMessage}
-          <Button onClick={deleteMessage} color="primary">
+            submitText="Delete"
-            Delete
+          />
-          </Button>
         </DialogActions>
       </Dialog>
     );

src/common/CancelSubmit.tsx

@@ -0,0 +1,41 @@
+import { Button, Theme, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    submitButton: {
+      marginRight: theme.spacing(1)
+    }
+  })
+})
+
+interface Props {
+  submitDisabled?: boolean;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+  submitText?: string;
+}
+
+export default function CancelSubmit(props: Props) {
+  const { submitDisabled, onSubmit, onCancel, submitText } = props;
+  const classes = useStyles();
+
+  return (
+    <>
+    <Button onClick={onCancel} color="primary" aria-label="Cancel">
+      <Typography variant="subtitle2" color="textPrimary">
+        Cancel
+      </Typography>
+    </Button>
+    <Button
+      disabled={submitDisabled}
+      onClick={onSubmit}
+      className={classes.submitButton} 
+    >
+      <Typography variant="subtitle2" color={ submitDisabled ? "disabled" : "primary"}>
+        {submitText ? submitText : "Submit"}
+      </Typography>
+    </Button>
+    </>
+  )
+}

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">
+          <CancelSubmit 
-            <Typography variant="subtitle2" color="textPrimary">
+            onSubmit={teamKey ? updateTeam : addTeam}
-              Cancel
+            onCancel={close}
-            </Typography>
+            submitDisabled={disable}
-          </Button>
+            submitText={teamKey ? "Update" : "Submit"}
-          <Button
+          />
-            disabled={disable}
-            onClick={teamKey ? updateTeam : addTeam}
-            style={{ marginRight: theme.spacing(2) }}>
-            <Typography variant="subtitle2" color="primary">
-              {teamKey ? "Update" : "Submit"}
-            </Typography>
-          </Button>
         </DialogActions>
       </ResponsiveDialog>
       {deleteConfirmation()}