From 923578c9eae96d2860f4ee59b249e85aed377612 Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Thu, 17 Apr 2025 11:54:19 +0300 Subject: [PATCH] feat: add values chip styling (#9789) Made chips coloring and paddings correct. ![image](https://github.com/user-attachments/assets/734072cf-b053-492a-ae27-134b1a530345) --- .../FeatureStrategyConstraints/ValueList.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx index 410cb113af..a7ff90ff7e 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx @@ -36,9 +36,21 @@ const ValueChipBase = styled( )(({ theme }) => ({ transition: 'all 0.3s ease', outline: `1px solid #0000`, - background: theme.palette.background.elevation1, + background: theme.palette.secondary.light, + color: theme.palette.secondary.dark, + border: `1px solid ${theme.palette.secondary.border}`, + padding: 0, + height: 'auto', + '& .MuiChip-label': { + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + paddingLeft: theme.spacing(1.5), + }, + '& .MuiChip-deleteIcon': { + marginRight: theme.spacing(1), + }, ':hover, :focus-visible': { - background: theme.palette.background.elevation1, + background: theme.palette.secondary.light, }, ':focus-visible': { outlineColor: theme.palette.secondary.dark, @@ -72,8 +84,8 @@ const AddValuesButton = styled('button')(({ theme }) => ({ whiteSpace: 'nowrap', gap: theme.spacing(0.25), alignItems: 'center', - paddingInline: theme.spacing(1.5), - height: theme.spacing(3), + padding: theme.spacing(0.5, 1.5, 0.5, 1.5), + height: 'auto', transition: 'all 0.3s ease', outline: `1px solid #0000`, background: theme.palette.background.elevation1,