adding and removing teams works

src/pages/Teams.tsx

@@ -7,7 +7,7 @@ export default function Teams() {
   const isMobile = useMobile();
   return (
     <PageContainer>
-      <Box paddingY={isMobile ? 0.5 : 1} paddingX={isMobile ? 1 : 2}>
+      <Box paddingY={isMobile ? 1 : 1.5} paddingX={isMobile ? 1 : 2}>
         <TeamList />
       </Box>
     </PageContainer>

src/providers/http.tsx

@@ -6,6 +6,7 @@ import { createContext, PropsWithChildren, useContext } from "react";
 // import GitlabProvider from "./gitlab";
 import PondProvider from "./pond/pond";
 import { useAuth0 } from "@auth0/auth0-react";
+import SnackbarProvider from "./Snackbar";
 // import SecurityProvider from "./security";
 // import { useAuth0 } from "@auth0/auth0-react";
 
@@ -88,7 +89,9 @@ export default function HTTPProvider(props: Props) {
       }}>
       {/* <BillingProvider> */}
         <PondProvider>
+          <SnackbarProvider>
             {children}
+          </SnackbarProvider>
           {/* <SecurityProvider> */}
             {/* <GitlabProvider>{children}</GitlabProvider> */}
           {/* </SecurityProvider> */}

src/providers/pond/binAPI.tsx

@@ -124,7 +124,7 @@ export const BinAPIContext = createContext<IBinAPIContext>({} as IBinAPIContext)
 
 interface Props {}
 
-export default function DeviceProvider(props: PropsWithChildren<Props>) {
+export default function BinProvider(props: PropsWithChildren<Props>) {
   const { children } = props;
   const { get, post, put, del } = useHTTP();
   const permissionAPI = usePermissionAPI();

src/providers/pond/pond.tsx

@@ -2,10 +2,10 @@ import { PropsWithChildren } from "react";
 import UserProvider, { useUserAPI } from "./userAPI";
 import TeamProvider, { useTeamAPI } from "./teamAPI";
 import { useImagekitAPI } from "./imagekitAPI";
-import { usePermissionAPI } from "./permissionAPI";
+import PermissionProvider, { usePermissionAPI } from "./permissionAPI";
 import { Scope } from "models";
-import { useBinAPI } from "./binAPI";
+import BinProvider, { useBinAPI } from "./binAPI";
-import { useGateAPI } from "./gateAPI";
+import GateProvider, { useGateAPI } from "./gateAPI";
 
 export const pondURL = (partial: string, demo: boolean = false): string => {
   let url = import.meta.env.VITE_APP_API_URL + (demo ? "/demo" : "") + partial;
@@ -24,7 +24,13 @@ export default function PondProvider(props: PropsWithChildren<any>) {
   return (
     <UserProvider>
       <TeamProvider>
-        {children}
+        <PermissionProvider>
+          <BinProvider>
+            <GateProvider>
+              {children}
+            </GateProvider>
+          </BinProvider>
+        </PermissionProvider>
       </TeamProvider>                                
     </UserProvider>
   );

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}

src/user/RemoveSelfFromObject.tsx

@@ -45,17 +45,17 @@ export default function RemoveSelfFromObject(props: Props) {
           })
         )
       ])
-      .then((response: any) => {
+      .then(() => {
         success("Successfully left " + label);
         close(true);
         navigate("/" + (path !== undefined ? path : scope.kind) + "s");
       })
-      .catch((err: any) => {
+      // .catch((err: any) => {
-        err.response.data.error
+      //   err.response.data.error
-          ? warning(err.response.data.error)
+      //     ? warning(err.response.data.error)
-          : error("Error occured when trying to remove yourself from " + label);
+      //     : error("Error occured when trying to remove yourself from " + label);
-        close(false);
+      //   close(false);
-      });
+      // });
   };
 
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ UI BEGINS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -70,11 +70,15 @@ export default function RemoveSelfFromObject(props: Props) {
           </Typography>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => close(false)} color="primary">
+          <Button onClick={() => close(false)}>
-            Cancel
+            <Typography color="textPrimary" variant="body2">
+              Cancel
+            </Typography>
           </Button>
           <Button onClick={submit} color="primary" autoFocus>
-            Leave
+            <Typography color="warning" variant="body2">
+              Leave
+            </Typography>
           </Button>
         </DialogActions>
       </React.Fragment>