From: 7PH <benjamin.raymond@sonarsource.com>
Date: Thu, 23 Nov 2023 16:45:38 +0000 (+0100)
Subject: SONAR-20852 Fix StandoutLink external link icon color to match latest design system
X-Git-Tag: 10.4.0.87286~416
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=e138e65891d898853efe4c603a24e7ba0232f9f3;p=sonarqube.git

SONAR-20852 Fix StandoutLink external link icon color to match latest design system

Co-authored-by: Stanislav <31501873+stanislavhh@users.noreply.github.com>
---

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