Merge pull request #2235 from Northeastern-Electric-Racing/#2140-rm-page-blocks-user-management

#2140 rm page blocks from user management

Author: RChandler234

src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx

@@ -16,7 +16,7 @@ import AdminToolsProjectsConfig from './AdminToolsProjectsConfig';
 import { useState } from 'react';
 import NERTabs from '../../components/Tabs';
 import { routes } from '../../utils/routes';
-import { Box } from '@mui/material';
+import { Box } from '@mui/system';
 
 const AdminToolsPage: React.FC = () => {
   const currentUser = useCurrentUser();
@@ -43,10 +43,12 @@ const AdminToolsPage: React.FC = () => {
 
   const UserManagementTab = () => {
     return isUserAdmin ? (
-      <>
-        <AdminToolsUserManagement />
+      <Box>
+        <Box mb={2}>
+          <AdminToolsUserManagement />
+        </Box>
         <TeamsTools />
-      </>
+      </Box>
     ) : (
       <AdminToolsUserManagement />
     );

src/frontend/src/pages/AdminToolsPage/AdminToolsUserManagement.tsx

@@ -4,8 +4,7 @@
  */
 
 import { NERButton } from '../../components/NERButton';
-import { Grid, Typography, useTheme } from '@mui/material';
-import PageBlock from '../../layouts/PageBlock';
+import { Box, Grid, Typography, useTheme } from '@mui/material';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import { useState } from 'react';
@@ -21,7 +20,6 @@ const AdminToolsUserManagement: React.FC = () => {
   const [role, setRole] = useState('');
   const [user, setUser] = useState<User | null>(null);
   const [isDisabled, setIsDisabled] = useState(true);
-  const [hideSuccessLabel, setHideSuccessLabel] = useState(true);
   const { isLoading, isError, error, data: users } = useAllUsers();
   const updateUserRole = useUpdateUserRole();
   const theme = useTheme();
@@ -52,7 +50,6 @@ const AdminToolsUserManagement: React.FC = () => {
       if (user) {
         setUser(user);
         setRole(user.role);
-        setHideSuccessLabel(true);
       }
     } else {
       setUser(null);
@@ -69,11 +66,10 @@ const AdminToolsUserManagement: React.FC = () => {
   };
 
   const handleClick = async () => {
-    setHideSuccessLabel(true);
     if (!user) return;
     try {
       await updateUserRole.mutateAsync({ userId: user.userId, role });
-      setHideSuccessLabel(false);
+      toast.success('Role updated successfully!');
       setUser(null);
     } catch (e) {
       if (e instanceof Error) {
@@ -87,9 +83,12 @@ const AdminToolsUserManagement: React.FC = () => {
   };
 
   return (
-    <PageBlock title={'Role Management'}>
+    <Box>
+      <Typography variant="h5" gutterBottom borderBottom={1} color="red" borderColor={'white'} marginBottom={'20px'}>
+        Role Management
+      </Typography>
       <Grid container spacing={2}>
-        <Grid item xs={12} md={8}>
+        <Grid item xs={12} md={7}>
           <NERAutocomplete
             id="users-autocomplete"
             onChange={usersSearchOnChange}
@@ -99,7 +98,7 @@ const AdminToolsUserManagement: React.FC = () => {
             value={user ? userToAutocompleteOptionWithRole(user) : null}
           />
         </Grid>
-        <Grid item xs={12} md={4}>
+        <Grid item xs={12} md={3} mt={1}>
           <Select
             displayEmpty={true}
             renderValue={(value) => (value ? value : user ? user.role : 'Current Role')}
@@ -126,19 +125,18 @@ const AdminToolsUserManagement: React.FC = () => {
                   ))}
           </Select>
         </Grid>
+        <Grid item xs={12} md={'auto'} mt={-1.5}>
+          <NERButton
+            sx={{ mt: '20px', float: 'right' }}
+            variant="contained"
+            disabled={isDisabled || !user}
+            onClick={handleClick}
+          >
+            Confirm
+          </NERButton>
+        </Grid>
       </Grid>
-      <NERButton
-        sx={{ mt: '20px', float: 'right' }}
-        variant="contained"
-        disabled={isDisabled || !user}
-        onClick={handleClick}
-      >
-        Confirm
-      </NERButton>
-      <Typography hidden={hideSuccessLabel} style={{ color: theme.palette.primary.main, marginTop: '20px' }}>
-        Successfully Updated User
-      </Typography>
-    </PageBlock>
+    </Box>
   );
 };
 

src/frontend/src/pages/AdminToolsPage/TeamsTools.tsx

@@ -1,7 +1,6 @@
-import { Box, FormControl, FormLabel, Grid, TableCell, TableRow } from '@mui/material';
+import { Box, FormControl, FormLabel, Grid, TableCell, TableRow, Typography } from '@mui/material';
 import { routes } from '../../utils/routes';
 import { Link as RouterLink } from 'react-router-dom';
-import PageBlock from '../../layouts/PageBlock';
 import { NERButton } from '../../components/NERButton';
 import { useAllTeams, useCreateTeam } from '../../hooks/teams.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
@@ -90,7 +89,10 @@ const TeamsTools = () => {
   ));
 
   return (
-    <PageBlock title="Team Management">
+    <Box>
+      <Typography variant="h5" gutterBottom borderBottom={1} color="red" borderColor={'white'}>
+        Team Management
+      </Typography>
       <Grid container columnSpacing={2}>
         <Grid item xs={12} md={6}>
           <form
@@ -154,7 +156,7 @@ const TeamsTools = () => {
           />
         </Grid>
       </Grid>
-    </PageBlock>
+    </Box>
   );
 };