From 345230baa4188ce659b7c48c114fa98b68d41a0c Mon Sep 17 00:00:00 2001 From: Christoph Jerolimov Date: Fri, 31 May 2024 15:08:52 +0200 Subject: [PATCH] fix(rbac): improve criteria toggle button readability on dark themes (#1755) --- .../ConditionalAccess/ConditionsFormRow.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx b/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx index c354cfec94..0a22376314 100644 --- a/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx +++ b/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx @@ -7,7 +7,8 @@ import AddIcon from '@mui/icons-material/Add'; import RemoveIcon from '@mui/icons-material/Remove'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import ButtonGroup from '@mui/material/ButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { ConditionsFormRowFields } from './ConditionsFormRowFields'; import { conditionButtons, criterias } from './const'; @@ -30,7 +31,7 @@ const useStyles = makeStyles(theme => ({ criteriaButton: { width: '100%', textTransform: 'none', - color: theme.palette.grey[700], + padding: theme.spacing(1), }, addRuleButton: { color: theme.palette.primary.light, @@ -129,10 +130,16 @@ export const ConditionsFormRow = ({ return ( - + handleCriteriaChange(newCriteria)} + className={classes.criteriaButtonGroup} + > {conditionButtons.map(({ val, label }) => ( - + ))} - + {(criteria === criterias.allOf || criteria === criterias.anyOf) && ( {criteria === criterias.allOf &&