diff options
Diffstat (limited to 'server/sonar-web')
4 files changed, 12 insertions, 13 deletions
diff --git a/server/sonar-web/design-system/src/components/Pill.tsx b/server/sonar-web/design-system/src/components/Pill.tsx index 7cd93fc083c..e6aee90be58 100644 --- a/server/sonar-web/design-system/src/components/Pill.tsx +++ b/server/sonar-web/design-system/src/components/Pill.tsx @@ -23,20 +23,20 @@ import tw from 'twin.macro'; import { themeColor, themeContrast } from '../helpers/theme'; import { ThemeColors } from '../types/theme'; -type PillVariant = 'danger' | 'warning' | 'info' | 'neutral'; +type PillVariant = 'danger' | 'warning' | 'info' | 'accent'; const variantThemeColors: Record<PillVariant, ThemeColors> = { danger: 'pillDanger', warning: 'pillWarning', info: 'pillInfo', - neutral: 'pillNeutral', + accent: 'pillAccent', }; const variantThemeBorderColors: Record<PillVariant, ThemeColors> = { danger: 'pillDangerBorder', warning: 'pillWarningBorder', info: 'pillInfoBorder', - neutral: 'pillNeutralBorder', + accent: 'pillAccentBorder', }; interface PillProps { @@ -46,7 +46,7 @@ interface PillProps { variant: PillVariant; } -export function Pill({ children, variant, ...rest }: PillProps) { +export function Pill({ children, variant, ...rest }: Readonly<PillProps>) { return ( <StyledPill variant={variant} {...rest}> {children} @@ -57,7 +57,7 @@ export function Pill({ children, variant, ...rest }: PillProps) { const StyledPill = styled.span<{ variant: PillVariant; }>` - ${tw`sw-body-sm`}; + ${tw`sw-body-xs`}; ${tw`sw-w-fit`}; ${tw`sw-inline-block`}; ${tw`sw-whitespace-nowrap`}; @@ -66,7 +66,7 @@ const StyledPill = styled.span<{ background-color: ${({ variant }) => themeColor(variantThemeColors[variant])}; color: ${({ variant }) => themeContrast(variantThemeColors[variant])}; - border-style: ${({ variant }) => (variant === 'neutral' ? 'hidden' : 'solid')}; + border-style: ${({ variant }) => (variant === 'accent' ? 'hidden' : 'solid')}; border-color: ${({ variant }) => themeColor(variantThemeBorderColors[variant])}; border-width: 1px; diff --git a/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx index 8c0f28eb87c..87da0f7420b 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Pill-test.tsx @@ -22,6 +22,6 @@ import { render } from '../../helpers/testUtils'; import { Pill } from '../Pill'; it('should render correctly', () => { - render(<Pill variant="neutral">23</Pill>); + render(<Pill variant="accent">23</Pill>); expect(screen.getByText('23')).toBeInTheDocument(); }); diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 3d5196a1f73..a1c81650c33 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -314,8 +314,8 @@ export const lightTheme = { pillWarningBorder: COLORS.yellow[300], pillInfo: COLORS.blue[50], pillInfoBorder: COLORS.blue[300], - pillNeutral: COLORS.blueGrey[50], - pillNeutralBorder: 'transparent', + pillAccent: COLORS.indigo[50], + pillAccentBorder: 'transparent', // input select selectOptionSelected: secondary.light, @@ -702,7 +702,7 @@ export const lightTheme = { pillWarningIcon: COLORS.yellow[700], pillInfo: COLORS.blue[800], pillInfoIcon: COLORS.blue[700], - pillNeutral: COLORS.blueGrey[500], + pillAccent: COLORS.indigo[500], // breadcrumbs breadcrumb: secondary.dark, diff --git a/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx b/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx index 95c7d81dc86..3d533ef2fa4 100644 --- a/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx +++ b/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx @@ -17,7 +17,6 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import classNames from 'classnames'; import { Pill } from 'design-system'; import React from 'react'; import { translate } from '../../helpers/l10n'; @@ -63,8 +62,8 @@ export function CleanCodeAttributePill(props: Readonly<Props>) { }, ]} > - <Pill variant="neutral" data-guiding-id="issue-1" className={className}> - <span className={classNames({ 'sw-font-semibold': !!cleanCodeAttribute })}> + <Pill variant="accent" data-guiding-id="issue-1" className={className}> + <span className="sw-font-semibold"> {translate(type, 'clean_code_attribute_category', cleanCodeAttributeCategory)} </span> {cleanCodeAttribute && ( |