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