refactor: carson comments, remove makeStyles favoring MUI

src/components/EditableSection/EditableSection.tsx

@@ -1,44 +1,63 @@
 import { Edit } from '@mui/icons-material';
-import { Box, Skeleton, Tooltip, Typography } from '@mui/material';
+import {
+  Box,
+  Divider,
+  Skeleton,
+  Stack,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import { ReactNode } from 'react';
+import { StyleProps } from '~/common';
 import { IconButton } from '../IconButton';
 
-interface EditableSectionProps {
+interface EditableSectionProps extends StyleProps {
   children?: ReactNode;
   title?: string;
   tooltipTitle?: string;
-  partner?: boolean;
+  loading?: boolean;
   canEdit?: boolean;
   onEdit?: () => void;
 }
 
 export const EditableSection = ({
-  partner,
+  loading,
   canEdit,
   onEdit,
   title,
   tooltipTitle,
+  children,
+  ...rest
 }: EditableSectionProps) => {
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: '8px',
-        borderBottom: '1px solid #e0e0e0',
-      }}
-    >
-      <Typography variant="h3">
-        {partner ? title : <Skeleton width="120px" />}
-      </Typography>
-      {partner && (
+    <Box {...rest} component="section">
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          p: 1,
+        }}
+      >
+        <Typography variant="h3">
+          {!loading ? title : <Skeleton width="120px" />}
+        </Typography>
         <Tooltip title={tooltipTitle}>
-          <IconButton disabled={!canEdit} onClick={onEdit}>
-            <Edit />
-          </IconButton>
+          <span>
+            <IconButton disabled={!canEdit} onClick={onEdit} loading={loading}>
+              <Edit />
+            </IconButton>
+          </span>
         </Tooltip>
-      )}
+      </Box>
+      <Divider />
+      <Stack
+        sx={{
+          p: 2,
+        }}
+      >
+        {children}
+      </Stack>
     </Box>
   );
 };

src/scenes/Partners/Detail/PartnerDetail.tsx

@@ -3,7 +3,8 @@ import { Edit } from '@mui/icons-material';
 import { TabList as ActualTabList, TabContext, TabPanel } from '@mui/lab';
 import {
   type Tabs as __Tabs,
-  Grid,
+  Box,
+  Container,
   Paper,
   Tab,
   Tooltip,
@@ -12,7 +13,6 @@ import {
 import { Many } from '@seedcompany/common';
 import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 import { PartialDeep } from 'type-fest';
 import { DataButton } from '~/components/DataButton';
 import { useDialog } from '~/components/Dialog';
@@ -28,40 +28,7 @@ import { PartnerDetailPeople } from './Tabs/People/PartnerDetailPeople';
 import { PartnerDetailProfile } from './Tabs/Profile/PartnerDetailProfile';
 import { PartnerDetailProjects } from './Tabs/Projects/PartnerDetailProjects';
 
-const useStyles = makeStyles()(({ spacing }) => ({
-  root: {
-    flex: 1,
-    overflowY: 'auto',
-    padding: spacing(4),
-  },
-  main: {
-    '& > *': {
-      marginBottom: spacing(3),
-    },
-  },
-  header: {
-    flex: 1,
-    display: 'flex',
-    marginBottom: spacing(0),
-  },
-  name: {
-    marginRight: spacing(2), // a little extra between text and buttons
-    lineHeight: 'inherit', // centers text with buttons better
-  },
-  tabPanel: {
-    overflowY: 'auto',
-    padding: spacing(0, 0, 0, 2),
-  },
-  tabStyle: {
-    textTransform: 'uppercase',
-    '&.Mui-selected': {
-      transform: 'scale(1)', // Should this be done in overrides instead? That would affect all the tabs which seems more consistent
-    },
-  },
-}));
-
 export const PartnerDetail = () => {
-  const { classes } = useStyles();
   const { partnerId = '' } = useParams();
 
   const { data, error } = useQuery(PartnerDocument, {
@@ -84,8 +51,25 @@ export const PartnerDetail = () => {
       ? partnerName.substring(0, 2)
       : null;
 
+  const tabPanelStyle = {
+    overflowY: 'auto',
+    pl: 3,
+  };
+
+  const tabStyle = {
+    textTransform: 'uppercase',
+    '&.Mui-selected': {
+      transform: 'scale(1)', // Should this be done in overrides instead? That would affect all the tabs which seems more consistent
+    },
+  };
+
   return (
-    <main className={classes.root}>
+    <Container
+      maxWidth={false}
+      sx={{
+        p: 6,
+      }}
+    >
       <Helmet title={name ?? undefined} />
       <Error error={error}>
         {{
@@ -94,9 +78,19 @@ export const PartnerDetail = () => {
         }}
       </Error>
       {!error && (
-        <div className={classes.main}>
-          <header className={classes.header}>
-            <Typography variant="h2" className={classes.name}>
+        <main>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <Typography
+              variant="h2"
+              sx={{
+                lineHeight: 'inherit',
+                mr: 2,
+              }}
+            >
               {abrev || partnerName}
             </Typography>
             {partner && (
@@ -119,18 +113,24 @@ export const PartnerDetail = () => {
                 args.input?.filter?.pinned ?? false
               }
             />
-          </header>
-          <div>
+          </Box>
+          <Box>
             {abrev && <Typography variant="h4">{partnerName}</Typography>}
             {partner && (
               <Typography variant="body2" color="textSecondary" paragraph>
                 Created <FormattedDateTime date={partner.createdAt} />
               </Typography>
             )}
-            <Grid spacing={2}>
+            <Box
+              sx={{
+                display: 'flex',
+                mt: 3,
+                mb: 3,
+              }}
+            >
               <DataButton
                 onClick={() => editPartner('active')}
-                secured={partner?.active}
+                secured={partner?.active} /**/
                 redacted="You do not have permission to view Status"
                 children={partner?.active.value ? 'Active' : 'Inactive'}
                 loading={!partner}
@@ -149,8 +149,8 @@ export const PartnerDetail = () => {
                 loading={!partner}
                 variant="text"
               />
-            </Grid>
-          </div>
+            </Box>
+          </Box>
           <Paper
             sx={{
               boxShadow: 'none',
@@ -164,52 +164,38 @@ export const PartnerDetail = () => {
                 onChange={(_e, tab) => setFilters({ ...filters, tab })}
                 aria-label="partner navigation tabs"
               >
-                <Tab
-                  label="Partner Profile"
-                  value="profile"
-                  className={classes.tabStyle}
-                />
-                <Tab
-                  label="People"
-                  value="people"
-                  className={classes.tabStyle}
-                />
-                <Tab
-                  label="Projects"
-                  value="projects"
-                  className={classes.tabStyle}
-                />
+                <Tab label="Partner Profile" value="profile" sx={tabStyle} />
+                <Tab label="People" value="people" sx={tabStyle} />
+                <Tab label="Projects" value="projects" sx={tabStyle} />
               </TabList>
               <Paper
                 sx={{
                   boxShadow: 'none',
                   borderRadius: 0,
                   width: '100%',
-                  paddingBottom: 4,
-                  paddingTop: 4,
                 }}
               >
-                <TabPanel value="profile" className={classes.tabPanel}>
+                <TabPanel value="profile" sx={tabPanelStyle}>
                   <PartnerDetailProfile
                     partner={partner}
                     editPartner={editPartner}
                   />
                 </TabPanel>
-                <TabPanel value="people" className={classes.tabPanel}>
+                <TabPanel value="people" sx={tabPanelStyle}>
                   <PartnerDetailPeople
                     partner={partner}
                     editPartner={editPartner}
                   />
                 </TabPanel>
-                <TabPanel value="projects" className={classes.tabPanel}>
+                <TabPanel value="projects" sx={tabPanelStyle}>
                   <PartnerDetailProjects partner={partner} />
                 </TabPanel>
               </Paper>
             </TabContext>
           </Paper>
 
           {/*<Grid>{!!partner && <PartnerPostList partner={partner} />}</Grid>*/}
-        </div>
+        </main>
       )}
       {partner ? (
         <EditPartner
@@ -218,6 +204,6 @@ export const PartnerDetail = () => {
           editFields={editField}
         />
       ) : null}
-    </main>
+    </Container>
   );
 };

src/scenes/Partners/Detail/Tabs/Profile/PartnerContactSection.tsx

@@ -1,26 +1,8 @@
-import { Box, CardContent, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { Typography } from '@mui/material';
 import { canEditAny } from '~/common';
 import { EditableSection } from '~/components/EditableSection';
 import { PartnerDetailsFragment } from '../../PartnerDetail.graphql';
 
-const useStyles = makeStyles()(() => ({
-  cardContent: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    alignSelf: 'flex-start',
-    // Allow point events so tooltips can be viewed, but don't seem clickable
-    '&.Mui-disabled': {
-      pointerEvents: 'auto',
-      '& .MuiCardActionArea-focusHighlight': {
-        opacity: 0,
-      },
-    },
-    width: '100%',
-  },
-}));
-
 interface AddressCardProps {
   partner?: PartnerDetailsFragment;
   onEdit: () => void;
@@ -30,28 +12,21 @@ export const PartnerContactSection = ({
   partner,
   onEdit,
 }: AddressCardProps) => {
-  const { classes } = useStyles();
-
   // TODO: Implement full address saving and parsing (st, city, state, etc)
 
   const canEdit = canEditAny(partner, false, 'address');
 
   return (
-    <section>
-      <EditableSection
-        canEdit={canEdit}
-        title="Contact Information"
-        tooltipTitle="Edit Address"
-        onEdit={onEdit}
-        partner
-      />
-      <Box>
-        <CardContent className={classes.cardContent}>
-          <Typography variant="body2" color="textSecondary" gutterBottom>
-            Business Address
-          </Typography>
-        </CardContent>
-      </Box>
-    </section>
+    <EditableSection
+      canEdit={canEdit}
+      title="Contact Information"
+      tooltipTitle="Edit Address"
+      onEdit={onEdit}
+      loading={!partner}
+    >
+      <Typography variant="body2" color="textSecondary" gutterBottom>
+        Business Address
+      </Typography>
+    </EditableSection>
   );
 };