Make model filtering more obvious (#3771)

bcgov · Jul 10, 2024 · 1d036f6 · 1d036f6
1 parent e841364
commit 1d036f6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/web/src/features/moreCast2/components/ForecastHeader.tsx b/web/src/features/moreCast2/components/ForecastHeader.tsx
@@ -1,4 +1,4 @@
-import { Button, FormControl, Grid, IconButton, Menu, MenuItem } from '@mui/material'
+import { Button, FormControl, Grid, Menu, MenuItem } from '@mui/material'
 import { ExpandMore } from '@mui/icons-material'
 import SaveIcon from '@mui/icons-material/Save'
 import React, { MouseEvent, useState } from 'react'
@@ -34,10 +34,14 @@ const ForecastHeader = ({ colDef, columnClickHandlerProps }: ForecastHeaderProps
 
   return (
     <>
-      {'Forecast'}
-      <IconButton data-testid={`${colDef.field}-column-header`} size="small" onClick={handleClick}>
-        <ExpandMore />
-      </IconButton>
+      <Button
+        data-testid={`${colDef.field}-column-header`}
+        endIcon={<ExpandMore />}
+        onClick={handleClick}
+        sx={{ color: 'black' }}
+      >
+        {'Forecast'}
+      </Button>
       <Menu
         data-testid="apply-to-column-menu"
         open={isAForecastColumn() && open}

diff --git a/web/src/features/moreCast2/components/GroupHeader.tsx b/web/src/features/moreCast2/components/GroupHeader.tsx
@@ -1,5 +1,5 @@
-import { Checkbox, FormControlLabel, FormGroup, IconButton, Popover, Stack, Typography, styled } from '@mui/material'
-import { ExpandMore } from '@mui/icons-material'
+import { Button, Checkbox, FormControlLabel, FormGroup, Popover, Stack, Typography, styled } from '@mui/material'
+import { PlaylistAdd } from '@mui/icons-material'
 import React, { ChangeEvent, MouseEvent, useState } from 'react'
 import { LIGHT_GREY, MEDIUM_GREY, DARK_GREY, MoreCastParams } from 'app/theme'
 import { ColumnVis } from 'features/moreCast2/components/DataGridColumns'
@@ -50,10 +50,9 @@ const GroupHeader = ({ id, columns, weatherParam, handleShowHideChange }: GroupH
 
   return (
     <>
-      <Typography style={{ fontWeight: 'bold' }}>{id}</Typography>
-      <IconButton onClick={handleClick}>
-        <ExpandMore />
-      </IconButton>
+      <Button sx={{ color: 'black' }} endIcon={<PlaylistAdd />} onClick={handleClick}>
+        <Typography style={{ fontWeight: 'bold' }}>{id}</Typography>
+      </Button>
       <Popover
         id={id}
         open={open}