WysiwygEditor - Change link icon color

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [18.5.2] - 2023-01-09
+
+### Changed
+
+- `WysiwygEditor`: Change link icon color ([@BeirlaenAaron](https://github.com/BeirlaenAaron)) in [#2519](https://github.com/teamleadercrm/ui/pull/2519))
+
 ## [18.5.1] - 2023-01-04
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "18.5.1",
+  "version": "18.5.2",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/wysiwygEditor/decorators/linkDecorator.tsx

@@ -7,6 +7,7 @@ import Link from '../../link';
 
 import { GenericComponent } from '../../../@types/types';
 import theme from './theme.css';
+import Icon from '../../icon';
 
 const findLinkEntities = (contentBlock: ContentBlock, callback: () => void, contentState: ContentState) => {
   contentBlock.findEntityRanges((character) => {
@@ -42,7 +43,18 @@ const LinkEntity: GenericComponent<LinkEntityProps> = ({ entityKey, contentState
       <Link className={theme['link']} inherit={false} onClick={(event: MouseEvent) => event.preventDefault()}>
         {children}
       </Link>
-      {showOpenLinkIcon && <IconExternalLinkSmallOutline onClick={openLink} className={theme['icon']} />}
+      {showOpenLinkIcon && (
+        <Icon
+          display="inline-block"
+          onClick={openLink}
+          className={theme['icon']}
+          color="aqua"
+          tint="dark"
+          marginLeft={1}
+        >
+          <IconExternalLinkSmallOutline />
+        </Icon>
+      )}
     </Box>
   );
 };