diff --git a/web/src/components/EventsDataGrid/EventsDataGrid.tsx b/web/src/components/EventsDataGrid/EventsDataGrid.tsx index 22f52c9c..92082377 100644 --- a/web/src/components/EventsDataGrid/EventsDataGrid.tsx +++ b/web/src/components/EventsDataGrid/EventsDataGrid.tsx @@ -38,13 +38,17 @@ export function EventsDataGrid(): React.JSX.Element { return ( ({ height: defaultComponentHeight, minWidth: defaultComponentMinWidth, maxWidth: 960, width: '100%', + // future work: refactor [`& .${gridClasses.row}.odd`]: { backgroundColor: '#202020' }, - }} + [`& .world-event`]: { color: theme.palette.secondary.dark }, + [`& .advance-time`]: { color: theme.palette.info.main }, + [`& .mission-site-expired`]: { color: theme.palette.error.main }, + })} > [] = [ headerName: 'Turn', width: 80, disableColumnMenu: true, - cellClassName: ( - params: GridCellParams, - ): string => { - const turnValue: number = params.value! - return turnValue % 2 === 0 ? 'UNUSED-even' : 'UNUSED-odd' - }, }, { field: 'kind', headerName: 'Kind', width: 110, disableColumnMenu: true, + cellClassName: ( + params: GridCellParams, + ): string => { + const kindValue: string = params.value! + // future work: refactor to use inverted map of playerActionNameToDisplayMap. See renderAssets for code to adapt. + return kindValue === 'World Event' ? 'world-event' : '' + }, }, { field: 'type', headerName: 'Type', width: 190, disableColumnMenu: true, + cellClassName: ( + params: GridCellParams, + ): string => { + const typeValue: string = params.value! + // future work: refactor to use inverted map of playerActionNameToDisplayMap. See renderAssets for code to adapt. + return typeValue === 'Advance time' + ? 'advance-time' + : typeValue === 'Mission site expired' + ? 'mission-site-expired' + : '' + }, }, { field: 'details', diff --git a/web/src/theme.tsx b/web/src/theme.tsx index 1202013f..2385d767 100644 --- a/web/src/theme.tsx +++ b/web/src/theme.tsx @@ -7,9 +7,9 @@ const theme = createTheme({ primary: { main: '#556cd6', }, - secondary: { - main: '#19857b', - }, + // secondary: { + // main: '#19857b', + // }, error: { main: red.A400, },