finish AccountPage changes

Parkreiner · Parkreiner · commit acf25009db98 · 2023-11-02T19:03:04.000Z
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -1,15 +1,17 @@
 import { type FC } from "react";
-import { Section } from "components/SettingsLayout/Section";
-import { AccountForm } from "./AccountForm";
-import { useAuth } from "components/AuthProvider/AuthProvider";
 import { useMe } from "hooks/useMe";
 import { usePermissions } from "hooks/usePermissions";
-import { Stack } from "@mui/system";
 import { useQuery } from "react-query";
 import { groupsForUser } from "api/queries/groups";
 import { useOrganizationId } from "hooks";
 import { useTheme } from "@emotion/react";
 
+import { Stack } from "@mui/system";
+import Grid from "@mui/material/Grid";
+
+import { AccountForm } from "./AccountForm";
+import { useAuth } from "components/AuthProvider/AuthProvider";
+import { Section } from "components/SettingsLayout/Section";
 import { Loader } from "components/Loader/Loader";
 import { AvatarCard } from "components/AvatarCard/AvatarCard";
 
@@ -56,20 +58,27 @@ export const AccountPage: FC = () => {
         }
       >
         {groupsQuery.isSuccess ? (
-          <>
-            {groupsQuery.data.map((group) => {
-              const groupName = group.display_name || group.name;
-
-              return (
+          <Grid
+            container
+            columns={{ xs: 1, sm: 1, md: 2 }}
+            spacing={theme.spacing(3)}
+          >
+            {groupsQuery.data.map((group) => (
+              <Grid item key={group.id} xs={1}>
                 <AvatarCard
-                  key={group.id}
-                  header={groupName}
                   imgUrl={group.avatar_url}
-                  altText={groupName}
+                  altText={group.display_name || group.name}
+                  header={group.display_name || group.name}
+                  subtitle={
+                    <>
+                      {group.members.length} member
+                      {group.members.length !== 1 && "s"}
+                    </>
+                  }
                 />
-              );
-            })}
-          </>
+              </Grid>
+            ))}
+          </Grid>
         ) : (
           <Loader />
         )}
