Merge pull request #182 from ClearContracts/justin/tables

Justin/tables
cardanoapi · Nov 27, 2024 · 582ddd7 · 582ddd7
2 parents aa1b3ad + a6552c6
commit 582ddd7
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git 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 (
+          <Typography variant="h5" fontWeight="600">
+            Workshop
+          </Typography>
+        );
+      },
       renderCell: (params): JSX.Element => {
         return <Typography fontWeight="500">{params.row.name}</Typography>;
       },
+      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 (
+          <Typography variant="h5" fontWeight="600">
+            Delegate
+          </Typography>
+        );
+      },
       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 (
+          <Typography variant="h5" fontWeight="600">
+            Alternate
+          </Typography>
+        );
+      },
       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 (
+          <Typography variant="h5" fontWeight="600">
+            Active Voter
+          </Typography>
+        );
+      },
       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`,
             }}
           />
         </Box>

diff --git 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 (
+          <Typography variant="h5" fontWeight="600">
+            Poll #
+          </Typography>
+        );
+      },
+      renderCell: (params): JSX.Element => {
+        return <Typography>{params.row.id}</Typography>;
+      },
+    },
     {
       field: 'name',
       headerName: 'Name',
       minWidth: 150,
       flex: 1,
+      disableColumnMenu: true,
+      renderHeader: (): JSX.Element => {
+        return (
+          <Typography variant="h5" fontWeight="600">
+            Poll Name
+          </Typography>
+        );
+      },
+      renderCell: (params): JSX.Element => {
+        return <Typography>{params.row.name}</Typography>;
+      },
     },
     {
       field: 'user_vote',
       headerName: 'User Vote',
       minWidth: 150,
       flex: 1,
+      disableColumnMenu: true,
+      renderHeader: (): JSX.Element => {
+        return (
+          <Typography variant="h5" fontWeight="600">
+            User Vote
+          </Typography>
+        );
+      },
       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`,
             }}
           />
         </Box>

diff --git 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