[ProjectSettings] Refactor with Accordian component (#3233)

src/components/ProjectSettings/BaseSettings.tsx

@@ -0,0 +1,47 @@
+import { ExpandMore } from "@mui/icons-material";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Grid,
+  Typography,
+} from "@mui/material";
+import { type ReactElement, type ReactNode } from "react";
+
+interface BaseSettingsProps {
+  /** Setting content (goes in `AccordionDetails`). */
+  body: ReactNode;
+  /** Representative icon (goes first in `AccordionSummary` before title). */
+  icon: ReactNode;
+  /** If maxWidth not specified, defaults to 700px. */
+  maxWidth?: string | number;
+  /** Setting title (goes second in `AccordionSummary` after icon). */
+  title: ReactNode;
+}
+
+/** An accordion that holds a single project setting. */
+export default function BaseSettings(props: BaseSettingsProps): ReactElement {
+  return (
+    <Accordion
+      defaultExpanded
+      disableGutters
+      sx={{
+        background: (theme) => theme.palette.background.default,
+        border: (theme) => `1px solid ${theme.palette.divider}`,
+        maxWidth: props.maxWidth || "700px",
+      }}
+    >
+      <AccordionSummary expandIcon={<ExpandMore />}>
+        <Grid container spacing={2} style={{ flexWrap: "nowrap" }}>
+          <Grid item style={{ marginTop: 4, color: "grey" }}>
+            {props.icon}
+          </Grid>
+          <Grid item>
+            <Typography variant="h5">{props.title}</Typography>
+          </Grid>
+        </Grid>
+      </AccordionSummary>
+      <AccordionDetails>{props.body}</AccordionDetails>
+    </Accordion>
+  );
+}

src/components/ProjectSettings/ProjectSchedule/index.tsx

@@ -69,7 +69,7 @@ export default function ProjectSchedule(
             item
             container
             direction="row"
-            justifyContent="space-between"
+            justifyContent="space-evenly"
             alignItems="center"
             xs={12}
           >

src/components/ProjectSettings/index.tsx

@@ -16,8 +16,8 @@ import {
 import {
   Box,
   Divider,
-  Grid,
   Hidden,
+  Stack,
   Tab,
   Tabs,
   Tooltip,
@@ -37,13 +37,13 @@ import { toast } from "react-toastify";
 
 import { Permission, type Project } from "api/models";
 import { canUploadLift, getCurrentPermissions } from "backend";
-import BaseSettings from "components/BaseSettings";
 import {
   asyncRefreshProjectUsers,
   asyncSetNewCurrentProject,
   asyncUpdateCurrentProject,
 } from "components/Project/ProjectActions";
 import ExportButton from "components/ProjectExport/ExportButton";
+import BaseSettings from "components/ProjectSettings/BaseSettings";
 import ProjectArchive from "components/ProjectSettings/ProjectArchive";
 import ProjectAutocomplete from "components/ProjectSettings/ProjectAutocomplete";
 import ProjectDomains from "components/ProjectSettings/ProjectDomains";
@@ -158,7 +158,7 @@ export default function ProjectSettingsComponent(): ReactElement {
       </Hidden>
 
       <TabPanel value={tab} index={ProjectSettingsTab.Basic}>
-        <Grid container spacing={6}>
+        <Stack>
           {/* Project name */}
           {permissions.includes(Permission.DeleteEditSettingsAndUsers) && (
             <BaseSettings
@@ -199,11 +199,11 @@ export default function ProjectSettingsComponent(): ReactElement {
               }
             />
           )}
-        </Grid>
+        </Stack>
       </TabPanel>
 
       <TabPanel value={tab} index={ProjectSettingsTab.Languages}>
-        <Grid container spacing={6}>
+        <Stack>
           {/*Project languages*/}
           <BaseSettings
             icon={<Language data-testid={Setting.Languages} />}
@@ -218,11 +218,11 @@ export default function ProjectSettingsComponent(): ReactElement {
               />
             }
           />
-        </Grid>
+        </Stack>
       </TabPanel>
 
       <TabPanel value={tab} index={ProjectSettingsTab.Users}>
-        <Grid container spacing={6}>
+        <Stack>
           {/* See current users in project */}
           {permissions.includes(Permission.DeleteEditSettingsAndUsers) && (
             <BaseSettings
@@ -249,11 +249,11 @@ export default function ProjectSettingsComponent(): ReactElement {
               body={<ProjectSpeakersList projectId={project.id} />}
             />
           )}
-        </Grid>
+        </Stack>
       </TabPanel>
 
       <TabPanel value={tab} index={ProjectSettingsTab.ImportExport}>
-        <Grid container spacing={6}>
+        <Stack>
           {/* Import Lift file */}
           {permissions.includes(Permission.Import) && (
             <BaseSettings
@@ -279,11 +279,11 @@ export default function ProjectSettingsComponent(): ReactElement {
               body={<ExportButton projectId={project.id} />}
             />
           )}
-        </Grid>
+        </Stack>
       </TabPanel>
 
       <TabPanel value={tab} index={ProjectSettingsTab.Schedule}>
-        <Grid container spacing={6}>
+        <Stack>
           {/* Workshop schedule */}
           <BaseSettings
             icon={<CalendarMonth data-testid={Setting.Schedule} />}
@@ -295,12 +295,13 @@ export default function ProjectSettingsComponent(): ReactElement {
                 setProject={updateProject}
               />
             }
+            maxWidth="1050px" // Comfortably fits three months
           />
-        </Grid>
+        </Stack>
       </TabPanel>
 
       <TabPanel value={tab} index={ProjectSettingsTab.Domains}>
-        <Grid container spacing={6}>
+        <Stack>
           {/* Semantic domains language */}
           <BaseSettings
             icon={<Language data-testid={Setting.DomainsLanguage} />}
@@ -321,7 +322,7 @@ export default function ProjectSettingsComponent(): ReactElement {
               <ProjectDomains project={project} setProject={updateProject} />
             }
           />
-        </Grid>
+        </Stack>
       </TabPanel>
     </>
   );
@@ -463,10 +464,10 @@ function TabLabel(props: TabLabelProps): ReactElement {
   return props.hideLabel ? (
     <Tooltip title={t(props.textId)}>{props.icon}</Tooltip>
   ) : (
-    <Grid container>
+    <Stack direction="row">
       {props.icon}
       <Typography>{t(props.textId)}</Typography>
-    </Grid>
+    </Stack>
   );
 }
 

src/components/ProjectUsers/ActiveProjectUsers.tsx

@@ -5,6 +5,7 @@ import {
   IconButton,
   List,
   ListItem,
+  ListItemAvatar,
   ListItemText,
   SelectChangeEvent,
 } from "@mui/material";
@@ -114,17 +115,18 @@ export default function ActiveProjectUsers(props: {
 
     return (
       <ListItem key={user.id}>
-        <Avatar
-          alt="User Avatar"
-          src={userAvatar[user.id]}
-          style={{ marginRight: theme.spacing(1) }}
-        />
+        <ListItemAvatar>
+          <Avatar
+            alt="User Avatar"
+            src={userAvatar[user.id]}
+            style={{ marginRight: theme.spacing(1) }}
+          />
+        </ListItemAvatar>
         <ListItemText primary={displayString} />
         <Chip
           label={t(`projectSettings.roles.${`${userRole}`.toLowerCase()}`)}
           size="small"
         />
-
         {manageUser}
       </ListItem>
     );