diff options
| author | 7PH <benjamin.raymond@sonarsource.com> | 2023-11-23 17:45:38 +0100 |
|---|---|---|
| committer | sonartech <sonartech@sonarsource.com> | 2023-11-24 20:02:45 +0000 |
| commit | e138e65891d898853efe4c603a24e7ba0232f9f3 (patch) | |
| tree | d7d25d841fb53bafe0d14634f31b55b9fe88a288 /server/sonar-web/design-system | |
| parent | 90cba00ada375c85944d01cf0422edbed771a6a5 (diff) | |
| download | sonarqube-e138e65891d898853efe4c603a24e7ba0232f9f3.tar.gz sonarqube-e138e65891d898853efe4c603a24e7ba0232f9f3.zip | |
SONAR-20852 Fix StandoutLink external link icon color to match latest design system
Co-authored-by: Stanislav <31501873+stanislavhh@users.noreply.github.com>
Diffstat (limited to 'server/sonar-web/design-system')
| -rw-r--r-- | server/sonar-web/design-system/src/components/Link.tsx | 10 | ||||
| -rw-r--r-- | server/sonar-web/design-system/src/theme/light.ts | 2 |
2 files changed, 11 insertions, 1 deletions
diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx index 07d743a85aa..47177ca0f54 100644 --- a/server/sonar-web/design-system/src/components/Link.tsx +++ b/server/sonar-web/design-system/src/components/Link.tsx @@ -93,7 +93,7 @@ function BaseLinkWithRef(props: LinkProps, ref: React.ForwardedRef<HTMLAnchorEle > {icon} {children} - {showExternalIcon && <OpenNewTabIcon className="sw-ml-1" />} + {showExternalIcon && <ExternalIcon className="sw-ml-1" />} </a> ); } @@ -106,6 +106,10 @@ function BaseLinkWithRef(props: LinkProps, ref: React.ForwardedRef<HTMLAnchorEle ); } +const ExternalIcon = styled(OpenNewTabIcon)` + color: ${themeColor('linkExternalIcon')}; +`; + export const BaseLink = React.forwardRef(BaseLinkWithRef); const StyledBaseLink = styled(BaseLink)` @@ -123,6 +127,10 @@ const StyledBaseLink = styled(BaseLink)` color: var(--active); border-bottom: ${({ children, icon, theme }) => icon && !children ? themeBorder('default', 'transparent')({ theme }) : 'var(--borderActive)'}; + + ${ExternalIcon} { + color: ${themeColor('linkExternalIconActive')}; + } } & > svg { diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 31cbc743bb5..ed9ed6e68ad 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -335,6 +335,8 @@ export const lightTheme = { linkTooltipDefault: COLORS.indigo[200], linkTooltipActive: COLORS.indigo[100], linkBorder: COLORS.indigo[300], + linkExternalIcon: COLORS.indigo[300], + linkExternalIconActive: COLORS.indigo[400], contentLinkBorder: COLORS.blueGrey[200], // discreet select |