diff --git a/src/components/Contacts/ContactListTable.jsx b/src/components/Contacts/ContactListTable.jsx index 3d8a8d3cc..af636c5e9 100644 --- a/src/components/Contacts/ContactListTable.jsx +++ b/src/components/Contacts/ContactListTable.jsx @@ -3,13 +3,18 @@ import React from 'react'; // Material UI Imports 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 Paper from '@mui/material/Paper'; + +// MUI Theme +import { ThemeProvider } from '@mui/material/styles'; +import theme from '../../theme'; + // Component Imports import ContactListTableRow from './ContactListTableRow'; -import { StyledTableCell } from '../Table/TableStyles'; // ===== MAKE CHANGES HERE FOR TABLE HEADER / COLUMN TITLES ===== const columnTitlesArray = ['Contact', 'Pin', 'Delete']; @@ -43,32 +48,33 @@ const ContactListTable = ({ contacts, deleteContact }) => { return 0; }; const contactsCopy = [...contacts]; - const sortedContacts = contactsCopy.sort(comparePerson); return ( - - - - - {columnTitlesArray.map((columnTitle) => ( - - {columnTitle} - + + +
+ + + {columnTitlesArray.map((columnTitle) => ( + + {columnTitle} + + ))} + + + + {sortedContacts?.map((contact) => ( + ))} - - - - {sortedContacts?.map((contact) => ( - - ))} - -
- + + + + ); }; diff --git a/src/components/Contacts/ContactListTableRow.jsx b/src/components/Contacts/ContactListTableRow.jsx index fce5fff74..91d0eb708 100644 --- a/src/components/Contacts/ContactListTableRow.jsx +++ b/src/components/Contacts/ContactListTableRow.jsx @@ -4,18 +4,23 @@ import { Link, useNavigate } from 'react-router-dom'; // Inrupt Imports import { getWebIdDataset } from '@inrupt/solid-client'; // Material UI Imports -import { useTheme } from '@mui/material/styles'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; import PushPinIcon from '@mui/icons-material/PushPin'; import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; + // Context Imports import { DocumentListContext } from '@contexts'; + +// MUI Theme +import { ThemeProvider } from '@mui/material/styles'; +import theme from '../../theme'; + // Custom Hook Imports import useNotification from '../../hooks/useNotification'; -// Component Imports -import { StyledTableCell, StyledTableRow } from '../Table/TableStyles'; /** * contactListTableRowProps is an object that stores the props for the @@ -37,7 +42,6 @@ import { StyledTableCell, StyledTableRow } from '../Table/TableStyles'; * @returns {React.JSX.Element} The ContactListTableRow Component */ const ContactListTableRow = ({ contact, deleteContact }) => { - const theme = useTheme(); const [pinned, setPinned] = useState(false); const { setContact } = useContext(DocumentListContext); const navigate = useNavigate(); @@ -65,32 +69,37 @@ const ContactListTableRow = ({ contact, deleteContact }) => { }; return ( - - - + + + + + + + - - - - - - {pinnedIcon} - - - - deleteContact(contact)}> - - - - + + {pinnedIcon} + + + + deleteContact(contact)}> + + + + + ); }; diff --git a/src/components/Documents/DocumentTable.jsx b/src/components/Documents/DocumentTable.jsx index b8b6acbc9..b2831e772 100644 --- a/src/components/Documents/DocumentTable.jsx +++ b/src/components/Documents/DocumentTable.jsx @@ -5,13 +5,16 @@ import Container from '@mui/material/Container'; import Paper from '@mui/material/Paper'; 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'; // Context Imports import { DocumentListContext } from '@contexts'; + // Component Imports -import { StyledTableCell } from '../Table/TableStyles'; +import { ThemeProvider } from '@mui/material/styles'; +import theme from '../../theme'; import DocumentTableRow from './DocumentTableRow'; import { EmptyListNotification, LoadingAnimation } from '../Notification'; @@ -43,31 +46,33 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) => const determineDocumentsTable = documentListObject?.docList?.length ? ( // render if documents - - - - - - {columnTitlesArray.map((columnTitle) => ( - - {columnTitle} - + + + +
+ + + {columnTitlesArray.map((columnTitle) => ( + + {columnTitle} + + ))} + + + + {documentListObject?.docList.map((document) => ( + ))} - - - - {documentListObject?.docList.map((document) => ( - - ))} - -
- - + + + + + ) : ( // render if no documents diff --git a/src/components/Documents/DocumentTableRow.jsx b/src/components/Documents/DocumentTableRow.jsx index 4ab610a29..266c5ebdb 100644 --- a/src/components/Documents/DocumentTableRow.jsx +++ b/src/components/Documents/DocumentTableRow.jsx @@ -7,10 +7,16 @@ import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined import FileOpenIcon from '@mui/icons-material/FileOpen'; import IconButton from '@mui/material/IconButton'; import ShareIcon from '@mui/icons-material/Share'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; + // Utility Imports import { getBlobFromSolid } from '@utils'; -// Component Imports -import { StyledTableCell, StyledTableRow } from '../Table/TableStyles'; + +// MUI Theme +import { ThemeProvider } from '@mui/material/styles'; +import theme from '../../theme'; + // Constants Imports import DOC_TYPES from '../../constants/doc_types'; @@ -37,30 +43,33 @@ const DocumentTableRow = ({ document, handleAclPermissionsModal, handleSelectDel }; return ( - - {name} - {DOC_TYPES[type]} - {description} - - {uploadDate ? uploadDate.toDateString() : ''} - - {endDate ? endDate.toDateString() : 'N/A'} - - handleShowDocumentLocal(fileUrl)}> - - - - - handleAclPermissionsModal('document', name, type)}> - - - - - handleSelectDeleteDoc(document)}> - - - - + + + {name} + {DOC_TYPES[type]} + {description} + {uploadDate ? uploadDate.toDateString() : ''} + {endDate ? endDate.toDateString() : 'N/A'} + + handleShowDocumentLocal(fileUrl)}> + + + + + handleAclPermissionsModal('document', name, type)} + > + + + + + handleSelectDeleteDoc(document)}> + + + + + ); }; diff --git a/src/components/Table/TableStyles.js b/src/components/Table/TableStyles.js deleted file mode 100644 index 6e151485e..000000000 --- a/src/components/Table/TableStyles.js +++ /dev/null @@ -1,29 +0,0 @@ -import { styled, useTheme } from '@mui/material/styles'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; -import TableRow from '@mui/material/TableRow'; - -export const StyledTableCell = styled(TableCell)(() => { - const theme = useTheme(); - return { - [`&.${tableCellClasses.head}`]: { - backgroundColor: theme.palette.primary.main, - color: theme.palette.common.white - }, - [`&.${tableCellClasses.body}`]: { - fontSize: 14 - } - }; -}); - -export const StyledTableRow = styled(TableRow)(() => { - const theme = useTheme(); - return { - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.primary.slight - }, - // hide last border - '&:last-child td, &:last-child th': { - border: 0 - } - }; -}); diff --git a/src/theme.js b/src/theme.js index 267759516..577a80a05 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,13 +1,16 @@ import { createTheme } from '@mui/material/styles'; +const themePalettePrimaryMain = '#017969'; +const themePalettePrimarySlight = '#8fc2bb'; + const theme = createTheme({ typography: { fontFamily: 'Roboto, sans-serif' }, palette: { primary: { light: '#039686', - main: '#017969', + main: themePalettePrimaryMain, dark: '#004d3e', - slight: '#8fc2bb', + slight: themePalettePrimarySlight, contrastText: '#fff' }, secondary: { @@ -51,6 +54,26 @@ const theme = createTheme({ color: 'white' } } + }, + MuiTableHead: { + styleOverrides: { + root: { + backgroundColor: themePalettePrimaryMain, + coolor: '#fff' + } + } + }, + MuiTableRow: { + styleOverrides: { + root: { + '&:last-child td, &:last-child th': { + border: 0 + }, + '&:nth-of-type(even)': { + backgroundColor: themePalettePrimarySlight + } + } + } } } });