UI Cleanup

app/src/components/attachments/list/AttachmentsList.test.tsx

@@ -118,15 +118,15 @@ describe('AttachmentsList', () => {
                 handleDelete={jest.fn()}
                 handleViewDetails={jest.fn()}
                 handleRemoveOrResubmit={jest.fn()}
-                emptyStateText="No Shared Files"
+                emptyStateText="No shared files found"
               />
             </SurveyContext.Provider>
           </ProjectContext.Provider>
         </Router>
       </AuthStateContext.Provider>
     );
 
-    expect(getByText('No Shared Files')).toBeInTheDocument();
+    expect(getByText('No shared files found')).toBeInTheDocument();
   });
 
   it('renders correctly with attachments (of various sizes)', async () => {

app/src/components/attachments/list/AttachmentsList.tsx

@@ -1,18 +1,14 @@
 import { mdiFileOutline, mdiLockOutline } from '@mdi/js';
 import Icon from '@mdi/react';
-import { Theme } from '@mui/material';
-import Box from '@mui/material/Box';
-import { grey } from '@mui/material/colors';
 import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import { makeStyles } from '@mui/styles';
-import { SubmitStatusChip } from 'components/chips/SubmitStatusChip';
-import { ProjectRoleGuard, SystemRoleGuard } from 'components/security/Guards';
+import { ProjectRoleGuard } from 'components/security/Guards';
 import { PublishStatus } from 'constants/attachments';
 import { PROJECT_PERMISSION, SYSTEM_ROLE } from 'constants/roles';
 import NoSurveySectionData from 'features/surveys/components/NoSurveySectionData';
@@ -23,30 +19,6 @@ import AttachmentsListItemMenuButton from './AttachmentsListItemMenuButton';
 
 //TODO: PRODUCTION_BANDAGE: Remove <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.DATA_ADMINISTRATOR, SYSTEM_ROLE.SYSTEM_ADMIN]}>
 
-const useStyles = makeStyles((theme: Theme) => ({
-  attachmentsTable: {
-    tableLayout: 'fixed'
-  },
-  attachmentsTableLockIcon: {
-    marginTop: '3px',
-    color: grey[600]
-  },
-  attachmentNameCol: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-  fileIcon: {
-    marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(3),
-    color: '#1a5a96'
-  },
-  noDocuments: {
-    height: '66px',
-    color: theme.palette.text.secondary,
-    fontWeight: 700
-  }
-}));
-
 export interface IAttachmentsListProps<T extends IGetProjectAttachment | IGetSurveyAttachment> {
   attachments: T[];
   handleDownload: (attachment: T) => void;
@@ -57,8 +29,6 @@ export interface IAttachmentsListProps<T extends IGetProjectAttachment | IGetSur
 }
 
 const AttachmentsList = <T extends IGetProjectAttachment | IGetSurveyAttachment>(props: IAttachmentsListProps<T>) => {
-  const classes = useStyles();
-
   const { attachments, handleDownload, handleDelete, handleViewDetails, handleRemoveOrResubmit } = props;
 
   const [rowsPerPage] = useState(10);
@@ -70,14 +40,15 @@ const AttachmentsList = <T extends IGetProjectAttachment | IGetSurveyAttachment>
 
   return (
     <TableContainer>
-      <Table className={classes.attachmentsTable} aria-label="attachments-list-table">
+      <Table
+        aria-label="attachments-list-table"
+        sx={{
+          tableLayout: 'fixed'
+        }}>
         <TableHead>
           <TableRow>
             <TableCell>Name</TableCell>
-            <TableCell width="130">Type</TableCell>
-            <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.DATA_ADMINISTRATOR, SYSTEM_ROLE.SYSTEM_ADMIN]}>
-              <TableCell width="150">Status</TableCell>
-            </SystemRoleGuard>
+            <TableCell>Type</TableCell>
             <TableCell width="75"></TableCell>
           </TableRow>
         </TableHead>
@@ -90,30 +61,32 @@ const AttachmentsList = <T extends IGetProjectAttachment | IGetSurveyAttachment>
             const icon: string = attachmentStatus === PublishStatus.SUBMITTED ? mdiLockOutline : mdiFileOutline;
 
             return (
-              <TableRow key={`${attachment.fileName}-${attachment.id}`}>
-                <TableCell scope="row" className={classes.attachmentNameCol}>
-                  <Box display="flex" alignItems="center">
-                    <Icon
-                      path={icon}
-                      size={1}
-                      className={classes.fileIcon}
-                      style={{ marginRight: '16px', marginLeft: '4px' }}
-                    />
-                    <Link
-                      style={{ fontWeight: 'bold' }}
-                      underline="always"
-                      onClick={() => handleDownload(attachment)}
-                      tabIndex={0}>
+              <TableRow hover={false} key={`${attachment.fileName}-${attachment.id}`}>
+                <TableCell
+                  scope="row"
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                  }}>
+                  <Stack
+                    flexDirection="row"
+                    alignItems="center"
+                    gap={2}
+                    sx={{
+                      '& svg': {
+                        color: '#1a5a96'
+                      },
+                      '& a': {
+                        fontWeight: 700
+                      }
+                    }}>
+                    <Icon path={icon} size={1} />
+                    <Link underline="always" onClick={() => handleDownload(attachment)} tabIndex={0}>
                       {attachment.fileName}
                     </Link>
-                  </Box>
+                  </Stack>
                 </TableCell>
                 <TableCell>{attachment.fileType}</TableCell>
-                <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.DATA_ADMINISTRATOR, SYSTEM_ROLE.SYSTEM_ADMIN]}>
-                  <TableCell>
-                    <SubmitStatusChip status={attachmentStatus} />
-                  </TableCell>
-                </SystemRoleGuard>
                 <ProjectRoleGuard
                   validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
                   validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>

app/src/components/data-grid/StyledDataGrid.tsx

@@ -11,7 +11,7 @@
   noRowsMessage?: string;
 };
 export const StyledDataGrid = (props: StyledDataGridProps) => {
   const noRowsOverlay = useCallback(() => <StyledDataGridOverlay message={props.noRowsMessage} />, []);
   return (
     <DataGrid
       {...props}
@@ -25,17 +25,26 @@
         '& *:focus-within': {
           outline: 'none !important'
         },
+        '& .MuiDataGrid-columnHeaders': {
+          background: grey[50]
+        },
         '& .MuiDataGrid-columnHeaderTitle': {
           textTransform: 'uppercase',
           fontWeight: 700
         },
-        '& .MuiDataGrid-row:nth-of-type(odd)': {
-          backgroundColor: grey[50]
-        },
         '& .MuiDataGrid-row:last-of-type': {
           '& .MuiDataGrid-cell': {
             borderBottom: 'none'
           }
+        },
+        '& .MuiDataGrid-row:hover': {
+          backgroundColor: 'transparent'
+        },
+        '& .MuiDataGrid-columnHeader:first-of-type, .MuiDataGrid-cell:first-of-type': {
+          pl: 2
+        },
+        '& .MuiDataGrid-columnHeader:last-of-type, .MuiDataGrid-cell:last-of-type': {
+          pr: 2
         }
       }}
     />

app/src/components/data-grid/StyledDataGridOverlay.tsx

@@ -2,7 +2,7 @@ import Typography from '@mui/material/Typography';
 import { GridOverlay } from '@mui/x-data-grid';
 
 const StyledDataGridOverlay = (props: { message?: string }) => (
-  <GridOverlay>
+  <GridOverlay sx={{ background: '#fff' }}>
     <Typography variant="body2" color="textSecondary" data-testid="data-grid-table-empty">
       {props.message ?? 'No records found'}
     </Typography>

app/src/components/publish/PublishSurveyDialog.tsx

@@ -146,11 +146,18 @@ const PublishSurveyDialog = (props: IPublishSurveyIdDialogProps) => {
                 <PublishSurveyIdContent />
               </DialogContent>
               <DialogActions>
-                <Typography component="span" variant="subtitle2" fontWeight="700" sx={{ mr: 2 }}>
+                <Typography component="span" variant="subtitle2" sx={{ mr: 2 }}>
                   <Typography component="span" color="textSecondary" variant="inherit">
-                    Last Published:
-                  </Typography>{' '}
-                  {publishDate}
+                    {publishDate ? (
+                      <span>
+                        Status:&nbsp;&nbsp;<b>Published ({publishDate})</b>
+                      </span>
+                    ) : (
+                      <span>
+                        Status:&nbsp;&nbsp;<b>Unpublished</b>
+                      </span>
+                    )}
+                  </Typography>
                 </Typography>
                 <LoadingButton
                   onClick={formikProps.submitForm}

app/src/features/admin/users/AccessRequestList.tsx

@@ -222,7 +222,7 @@ const AccessRequestList: React.FC<IAccessRequestListProps> = (props) => {
           </Typography>
         </Toolbar>
         <Divider></Divider>
-        <Box p={1}>
+        <Box p={2}>
           <TableContainer>
             <Table
               sx={{

app/src/features/admin/users/ActiveUsersList.tsx

@@ -272,7 +272,7 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
           </Button>
         </Toolbar>
         <Divider></Divider>
-        <Box p={1}>
+        <Box p={2}>
           <TableContainer>
             <Table
               sx={{
@@ -296,7 +296,12 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
                 {activeUsers.length > 0 &&
                   activeUsers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => (
                     <TableRow data-testid={`active-user-row-${index}`} key={row.system_user_id}>
-                      <TableCell>
+                      <TableCell
+                        sx={{
+                          '& a': {
+                            fontWeight: 700
+                          }
+                        }}>
                         <Link underline="always" to={`/admin/users/${row.system_user_id}`} component={RouterLink}>
                           {row.user_identifier || 'No identifier'}
                         </Link>

app/src/features/admin/users/UsersDetailProjects.tsx

@@ -187,7 +187,7 @@ const UsersDetailProjects: React.FC<IProjectDetailsProps> = (props) => {
         </Typography>
       </Toolbar>
       <Divider></Divider>
-      <Box p={1}>
+      <Box p={2}>
         <Table className={classes.projectMembersTable}>
           <TableHead>
             <TableRow>

app/src/features/funding-sources/list/FundingSourcesListPage.tsx

@@ -127,7 +127,7 @@ const FundingSourcesListPage: React.FC = () => {
               </Typography>
             </Toolbar>
             <Divider></Divider>
-            <Box pt={0} pb={1} px={3}>
+            <Box p={2}>
               <FundingSourcesTable
                 fundingSources={fundingSourceDataLoader.data ?? []}
                 onView={(fundingSourceId) => {

app/src/features/funding-sources/list/FundingSourcesTable.test.tsx

@@ -18,7 +18,7 @@ describe('FundingSourcesTable', () => {
     );
 
     await waitFor(() => {
-      expect(getByText('No Funding Sources available')).toBeVisible();
+      expect(getByText('No funding sources found')).toBeVisible();
     });
   });
 

app/src/features/funding-sources/list/FundingSourcesTable.tsx

@@ -63,7 +63,7 @@ const FundingSourcesTable = (props: IFundingSourcesTableTableProps) => {
 
   return (
     <StyledDataGrid
-      noRowsMessage={'No Funding Sources available'}
+      noRowsMessage={'No funding sources found'}
       autoHeight
       rows={props.fundingSources}
       getRowId={(row) => `funding-source-${row.funding_source_id}`}