diff --git a/src/components/representatives/representativesTable.tsx b/src/components/representatives/representativesTable.tsx index 95835c0..10b8da5 100644 --- a/src/components/representatives/representativesTable.tsx +++ b/src/components/representatives/representativesTable.tsx @@ -30,9 +30,17 @@ export function RepresentativesTable(props: Props): JSX.Element { headerName: 'Name', minWidth: 125, flex: 1, + renderHeader: (): JSX.Element => { + return ( + + Workshop + + ); + }, renderCell: (params): JSX.Element => { return {params.row.name}; }, + disableColumnMenu: true, }, { field: 'Delegate', @@ -41,6 +49,14 @@ export function RepresentativesTable(props: Props): JSX.Element { flex: 1, sortable: false, filterable: false, + disableColumnMenu: true, + renderHeader: (): JSX.Element => { + return ( + + Delegate + + ); + }, renderCell: (params): JSX.Element => { const delegateId = params.row.delegate_id; const delegate = representatives.find((rep) => rep.id === delegateId); @@ -90,6 +106,14 @@ export function RepresentativesTable(props: Props): JSX.Element { flex: 1, sortable: false, filterable: false, + disableColumnMenu: true, + renderHeader: (): JSX.Element => { + return ( + + Alternate + + ); + }, renderCell: (params): JSX.Element => { const alternateId = params.row.alternate_id; const alternate = representatives.find((rep) => rep.id === alternateId); @@ -141,6 +165,14 @@ export function RepresentativesTable(props: Props): JSX.Element { flex: 1, sortable: false, filterable: false, + disableColumnMenu: true, + renderHeader: (): JSX.Element => { + return ( + + Active Voter + + ); + }, renderCell: (params): JSX.Element => { const activeVoterId = params.row.active_voter_id; const activeVoter = representatives.find( @@ -215,7 +247,6 @@ export function RepresentativesTable(props: Props): JSX.Element { display: 'none', }, '.MuiDataGrid-columnHeader': { - backgroundColor: 'rgba(0, 0, 0, 0.1)', fontFamily: 'Chivo', fontSize: '1.2rem', }, @@ -224,6 +255,8 @@ export function RepresentativesTable(props: Props): JSX.Element { flexDirection: 'column', justifyContent: 'center', }, + border: 'none', + borderRadius: `${theme.shape.borderRadius}px`, }} /> diff --git a/src/components/representatives/votingHistoryTable.tsx b/src/components/representatives/votingHistoryTable.tsx index 1c1318d..ed478d4 100644 --- a/src/components/representatives/votingHistoryTable.tsx +++ b/src/components/representatives/votingHistoryTable.tsx @@ -2,6 +2,7 @@ import { pollPhases } from '@/constants/pollPhases'; import DoDisturbRounded from '@mui/icons-material/DoDisturbRounded'; import ThumbDownRounded from '@mui/icons-material/ThumbDownRounded'; import ThumbUpRounded from '@mui/icons-material/ThumbUpRounded'; +import { useTheme } from '@mui/material'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { DataGrid, GridColDef } from '@mui/x-data-grid'; @@ -26,19 +27,54 @@ interface Props { export function VotingHistoryTable(props: Props): JSX.Element { const { userId, votes, polls } = props; + const theme = useTheme(); + const columns: GridColDef[] = [ - { field: 'id', headerName: '#' }, + { + field: 'id', + headerName: '#', + disableColumnMenu: true, + renderHeader: (): JSX.Element => { + return ( + + Poll # + + ); + }, + renderCell: (params): JSX.Element => { + return {params.row.id}; + }, + }, { field: 'name', headerName: 'Name', minWidth: 150, flex: 1, + disableColumnMenu: true, + renderHeader: (): JSX.Element => { + return ( + + Poll Name + + ); + }, + renderCell: (params): JSX.Element => { + return {params.row.name}; + }, }, { field: 'user_vote', headerName: 'User Vote', minWidth: 150, flex: 1, + disableColumnMenu: true, + renderHeader: (): JSX.Element => { + return ( + + User Vote + + ); + }, renderCell: (params): JSX.Element => { const userVoteData = votes.find( (vote) => vote.poll_id === params.row.id, @@ -108,10 +144,15 @@ export function VotingHistoryTable(props: Props): JSX.Element { display: 'none', }, '.MuiDataGrid-columnHeader': { - backgroundColor: 'rgba(0, 0, 0, 0.1)', fontFamily: 'Chivo', fontSize: '1.2rem', }, + '.MuiDataGrid-cell': { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + borderRadius: `${theme.shape.borderRadius}px`, }} /> diff --git a/src/providers/themeProvider.tsx b/src/providers/themeProvider.tsx index 93647d8..c3f0226 100644 --- a/src/providers/themeProvider.tsx +++ b/src/providers/themeProvider.tsx @@ -17,7 +17,7 @@ export function ColorModeProvider({ }): JSX.Element { const theme = createTheme({ shape: { - borderRadius: 4, + borderRadius: 8, }, palette: { // palette values for light mode