adding and removing teams works

src/teams/TeamActions.tsx

@@ -44,6 +44,7 @@ interface Props {
   refreshCallback: () => void;
   preferences: pond.TeamPreferences;
   toggleNotificationPreference: () => void;
+  removeSelfCallback?: () => void; 
 }
 
 interface OpenState {
@@ -157,7 +158,11 @@ export default function TeamActions(props: Props) {
           scope={teamScope(key)}
           label={label}
           isDialogOpen={openState.removeSelf}
-          closeDialogCallback={() => setOpenState({ ...openState, removeSelf: false })}
+          closeDialogCallback={(removeSelf: boolean) => {
+            console.log(removeSelf)
+            if (removeSelf) refreshCallback()
+            setOpenState({ ...openState, removeSelf: false })
+          }}
         />
       </React.Fragment>
     );

src/teams/TeamList.tsx

@@ -28,7 +28,7 @@ import PrevIcon from "@mui/icons-material/NavigateBefore";
 import LastIcon from "@mui/icons-material/SkipNext";
 import FirstIcon from "@mui/icons-material/SkipPrevious";
 import TeamSettings from "./TeamSettings";
-import { Add } from "@mui/icons-material";
+import { Add, AddBox, AddOutlined } from "@mui/icons-material";
 import { cloneDeep } from "lodash";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { makeStyles, styled } from "@mui/styles";
@@ -48,6 +48,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginLeft: "auto",
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(1)
+  },
+  button: {
+    width: theme.spacing(6),
+    height: theme.spacing(6),
+    marginTop: "auto",
+    marginBottom: "auto"
   }
 }))
 
@@ -207,6 +213,7 @@ export default function TeamList(props: Props) {
                     team={Team.create(team)}
                     permissions={permissions}
                     refreshCallback={loadTeams}
+                    removeSelfCallback={loadTeams}
                     preferences={preferences}
                     toggleNotificationPreference={() => {
                       if (preferences) {
@@ -333,7 +340,9 @@ export default function TeamList(props: Props) {
           }}>
           {isUser ? user.name() + "'s " : "Someone's "} Teams
         </Typography>
-        <Add onClick={() => setTeamDialogOpen(true)} />
+        <IconButton onClick={() => setTeamDialogOpen(true)} color="primary" className={classes.button}>
+          <AddBox/>
+        </IconButton>
         <TextField
           className={classes.input}
           value={search}