SONAR-16725 [891882] An icon lacks 3 to 1 contrast ratio

13 files changed, 43 insertions, 45 deletions

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
index c04ccc4f6fd..7343f6a8420 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
@@ -129,9 +129,9 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
           <div className="component-name">
             <div className="component-name-parent">
               <a
-                className="link-with-icon"
+                className="link-no-underline"
                 href={getPathUrlAsString(getBranchLikeUrl(project, this.props.branchLike))}>
-                <QualifierIcon qualifier="TRK" /> <span>{projectName}</span>
+                <QualifierIcon qualifier={ComponentQualifier.Project} /> <span>{projectName}</span>
               </a>
             </div>
 
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap
index f5c25d061ba..1aa0e65f921 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`should render correctly for a regular file 1`] = `
         className="component-name-parent"
       >
         <a
-          className="link-with-icon"
+          className="link-no-underline"
           href="/dashboard?id=project"
         >
           <QualifierIcon
@@ -129,7 +129,7 @@ exports[`should render correctly for a unit test 1`] = `
         className="component-name-parent"
       >
         <a
-          className="link-with-icon"
+          className="link-no-underline"
           href="/dashboard?id=my-project"
         >
           <QualifierIcon
@@ -262,7 +262,7 @@ exports[`should render correctly if issue details are passed 1`] = `
         className="component-name-parent"
       >
         <a
-          className="link-with-icon"
+          className="link-no-underline"
           href="/dashboard?id=project"
         >
           <QualifierIcon
diff --git a/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx b/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx
index f0a776dcf43..c0fd6951d4d 100644
--- a/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx
+++ b/server/sonar-web/src/main/js/components/common/AnalysisWarningsModal.tsx
@@ -145,7 +145,6 @@ export class AnalysisWarningsModal extends React.PureComponent<Props, State> {
                   {dismissable && currentUser.isLoggedIn && (
                     <div className="spacer-top display-flex-inline">
                       <ButtonLink
-                        className="link-base-color"
                         disabled={Boolean(dismissedWarning)}
                         onClick={() => {
                           this.handleDismissMessage(key);
diff --git a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
index 3e582b2aed0..b1e6b85ee7f 100644
--- a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
+++ b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
@@ -66,7 +66,7 @@ export default function DocumentationTooltip(props: DocumentationTooltipProps) {
                     </Link>
                   ) : (
                     <Link
-                      className="display-inline-flex-center link-with-icon"
+                      className="display-inline-flex-center"
                       to={href}
                       rel="noopener noreferrer"
                       target="_blank">
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx
index 68788eb7fae..bd8f9d4a99a 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/AnalysisWarningsModal-test.tsx
@@ -22,7 +22,8 @@ import * as React from 'react';
 import { dismissAnalysisWarning, getTask } from '../../../api/ce';
 import { mockTaskWarning } from '../../../helpers/mocks/tasks';
 import { mockCurrentUser } from '../../../helpers/testMocks';
-import { mockEvent, waitAndUpdate } from '../../../helpers/testUtils';
+import { waitAndUpdate } from '../../../helpers/testUtils';
+import { ButtonLink } from '../../controls/buttons';
 import { AnalysisWarningsModal } from '../AnalysisWarningsModal';
 
 jest.mock('../../../api/ce', () => ({
@@ -67,11 +68,14 @@ it('should correctly handle dismissing warnings', async () => {
     warnings: [mockTaskWarning({ key: 'bar', dismissable: true })]
   });
 
-  const click = wrapper.find('ButtonLink.link-base-color').props().onClick;
+  const { onClick } = wrapper
+    .find(ButtonLink)
+    .at(0)
+    .props();
 
-  expect(click).toBeDefined();
-
-  click!(mockEvent());
+  if (onClick) {
+    onClick();
+  }
 
   await waitAndUpdate(wrapper);
 
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap
index b703954b0ea..7b9218712f4 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/AnalysisWarningsModal-test.tsx.snap
@@ -254,7 +254,6 @@ exports[`should render correctly: with dismissable warnings 1`] = `
             className="spacer-top display-flex-inline"
           >
             <ButtonLink
-              className="link-base-color"
               disabled={false}
               onClick={[Function]}
             >
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap
index 949ca3317f0..5c6a804f4e0 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap
@@ -78,7 +78,7 @@ exports[`renders correctly: with links 1`] = `
           className="little-spacer-bottom"
         >
           <Link
-            className="display-inline-flex-center link-with-icon"
+            className="display-inline-flex-center"
             rel="noopener noreferrer"
             target="_blank"
             to="http://link.tosome.place"
@@ -97,7 +97,7 @@ exports[`renders correctly: with links 1`] = `
           className="little-spacer-bottom"
         >
           <Link
-            className="display-inline-flex-center link-with-icon"
+            className="display-inline-flex-center"
             rel="noopener noreferrer"
             target="_blank"
             to="/documentation/guide"
diff --git a/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx b/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx
index 2e8f9473d2c..45be643969c 100644
--- a/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx
+++ b/server/sonar-web/src/main/js/components/facet/ListStyleFacetFooter.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { formatMeasure } from '../../helpers/measures';
+import { ButtonLink } from '../controls/buttons';
 
 interface Props {
   count: number;
@@ -29,15 +30,11 @@ interface Props {
 }
 
 export default class ListStyleFacetFooter extends React.PureComponent<Props> {
-  handleShowMoreClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
+  handleShowMoreClick = () => {
     this.props.showMore();
   };
 
-  handleShowLessClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
+  handleShowLessClick = () => {
     if (this.props.showLess) {
       this.props.showLess();
     }
@@ -53,15 +50,15 @@ export default class ListStyleFacetFooter extends React.PureComponent<Props> {
         {translateWithParameters('x_show', formatMeasure(count, 'INT', null))}
 
         {hasMore && (
-          <a className="spacer-left text-muted" href="#" onClick={this.handleShowMoreClick}>
+          <ButtonLink className="spacer-left" onClick={this.handleShowMoreClick}>
             {translate('show_more')}
-          </a>
+          </ButtonLink>
         )}
 
         {this.props.showLess && allShown && (
-          <a className="spacer-left text-muted" href="#" onClick={this.handleShowLessClick}>
+          <ButtonLink className="spacer-left" onClick={this.handleShowLessClick}>
             {translate('show_less')}
-          </a>
+          </ButtonLink>
         )}
       </footer>
     );
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx b/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx
index eda9b9d98f1..3a2fd18f845 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/ListStyleFacetFooter-test.tsx
@@ -20,6 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { click } from '../../../helpers/testUtils';
+import { ButtonLink } from '../../controls/buttons';
 import ListStyleFacetFooter from '../ListStyleFacetFooter';
 
 it('should not render "show more"', () => {
@@ -34,7 +35,7 @@ it('should show more', () => {
     <ListStyleFacetFooter count={3} showLess={undefined} showMore={showMore} total={15} />
   );
   expect(wrapper).toMatchSnapshot();
-  click(wrapper.find('a'));
+  click(wrapper.find(ButtonLink));
   expect(showMore).toBeCalled();
 });
 
@@ -44,7 +45,7 @@ it('should show less', () => {
     <ListStyleFacetFooter count={15} showLess={showLess} showMore={jest.fn()} total={15} />
   );
   expect(wrapper).toMatchSnapshot();
-  click(wrapper.find('a'));
+  click(wrapper.find(ButtonLink));
   expect(showLess).toBeCalled();
 });
 
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap
index 85a2744871c..ea8274402b9 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacetFooter-test.tsx.snap
@@ -21,13 +21,12 @@ exports[`should show less 1`] = `
   className="note spacer-top spacer-bottom text-center"
 >
   x_show.15
-  <a
-    className="spacer-left text-muted"
-    href="#"
+  <ButtonLink
+    className="spacer-left"
     onClick={[Function]}
   >
     show_less
-  </a>
+  </ButtonLink>
 </footer>
 `;
 
@@ -36,12 +35,11 @@ exports[`should show more 1`] = `
   className="note spacer-top spacer-bottom text-center"
 >
   x_show.3
-  <a
-    className="spacer-left text-muted"
-    href="#"
+  <ButtonLink
+    className="spacer-left"
     onClick={[Function]}
   >
     show_more
-  </a>
+  </ButtonLink>
 </footer>
 `;
diff --git a/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx b/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx
index 94b098f0dcd..547e084b077 100644
--- a/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx
@@ -26,7 +26,7 @@ export default function BranchIcon({ fill, ...iconProps }: IconProps) {
     <Icon {...iconProps}>
       <path
         d="M12.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C3.5 3 4.1 3.8 5 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
diff --git a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx b/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx
index e73eabac2a2..6beb58455c7 100644
--- a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx
@@ -26,7 +26,7 @@ export default function PullRequestIcon({ fill, ...iconProps }: IconProps) {
     <Icon {...iconProps}>
       <path
         d="M13,11.9L13,5.5C13,5.4 13.232,1.996 7.9,2L9.1,0.8L8.5,0.1L5.9,2.6L8.5,5.1L9.2,4.4L7.905,3.008C12.256,2.99 12,5.4 12,5.5L12,11.9C11.1,12.1 10.5,12.9 10.5,13.8C10.5,14.9 11.4,15.8 12.5,15.8C13.6,15.8 14.5,14.9 14.5,13.8C14.5,12.9 13.9,12.2 13,11.9ZM4,11.9C4.9,12.2 5.5,12.9 5.5,13.8C5.5,14.9 4.6,15.8 3.5,15.8C2.4,15.8 1.5,14.9 1.5,13.8C1.5,12.9 2.1,12.1 3,11.9L3,4.1C2.1,3.9 1.5,3.1 1.5,2.2C1.5,1.1 2.4,0.2 3.5,0.2C4.6,0.2 5.5,1.1 5.5,2.2C5.5,3.1 4.9,3.9 4,4.1L4,11.9ZM12.5,14.9C11.9,14.9 11.5,14.5 11.5,13.9C11.5,13.3 11.9,12.9 12.5,12.9C13.1,12.9 13.5,13.3 13.5,13.9C13.5,14.5 13.1,14.9 12.5,14.9ZM3.5,14.9C2.9,14.9 2.5,14.5 2.5,13.9C2.5,13.3 2.9,12.9 3.5,12.9C4.1,12.9 4.5,13.3 4.5,13.9C4.5,14.5 4.1,14.9 3.5,14.9ZM2.5,2.2C2.5,1.6 2.9,1.2 3.5,1.2C4.1,1.2 4.5,1.6 4.5,2.2C4.5,2.8 4.1,3.2 3.5,3.2C2.9,3.2 2.5,2.8 2.5,2.2Z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
diff --git a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
index 2c97d64e948..05ba3b5c163 100644
--- a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
@@ -51,7 +51,7 @@ export default function QualifierIcon({
   }
 
   const FoundIcon = qualifierIcons[qualifier.toLowerCase()];
-  const ariaLabel = qualifier != null ? translate(`qualifier.${qualifier}`) : undefined;
+  const ariaLabel = qualifier ? translate(`qualifier.${qualifier}`) : undefined;
   return FoundIcon ? (
     <FoundIcon className={className} fill={fill} ariaLabel={ariaLabel} {...props} />
   ) : null;
@@ -62,7 +62,7 @@ function ApplicationIcon({ fill, ariaLabel, ...iconProps }: IconProps) {
     <Icon {...iconProps} ariaLabel={ariaLabel}>
       <path
         d="M3.014 10.986a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm-5.004-.021c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zm-4.98 1.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.984 6a2 2 0 1 1-.001 4.001A2 2 0 0 1 2.984 6zm9.984 0a2 2 0 1 1-.001 4.001A2 2 0 0 1 12.968 6zm-5.004-.021c1.103 0 2 .897 2 2a2 2 0 1 1-2-2zM2.984 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2zM3 1.025a2 2 0 1 1-.001 4.001A2 2 0 0 1 3 1.025zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zM7.98 1.004c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zM3 2.025a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7.98 2.004a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
@@ -73,7 +73,7 @@ function DeveloperIcon({ fill, ariaLabel, ...iconProps }: IconProps) {
     <Icon {...iconProps} ariaLabel={ariaLabel}>
       <path
         d="M7.974 8.02a3.5 3.5 0 0 1-2.482-1.017 3.428 3.428 0 0 1-1.028-2.455c0-.927.365-1.8 1.028-2.455a3.505 3.505 0 0 1 2.482-1.017 3.5 3.5 0 0 1 2.482 1.017 3.434 3.434 0 0 1 1.027 2.455c0 .928-.365 1.8-1.027 2.455A3.504 3.504 0 0 1 7.974 8.02zm0-5.778c-1.286 0-2.332 1.034-2.332 2.306s1.046 2.307 2.332 2.307c1.285 0 2.332-1.035 2.332-2.307S9.258 2.242 7.974 2.242zm3.534 6.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862 0 .532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233 0-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88 0-.294.01-.584.03-.863.018-.263.056-.554.112-.867a6.5 6.5 0 0 1 .207-.838c.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4 1.265.564.523.166 1.06.25 1.59.25a5.25 5.25 0 0 0 1.592-.25c.51-.164.923-.348 1.266-.565.25-.158.48-.304.682-.435l-.002.002zm-.244-1.18c-.055 0-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41 0-.82-.065-1.228-.196a4.303 4.303 0 0 1-.993-.437c-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374 0-.716.06-1.026.183-.31.12-.572.283-.787.487a3.28 3.28 0 0 0-.57.737 4.662 4.662 0 0 0-.395.888c-.098.303-.18.633-.244.988a9.652 9.652 0 0 0-.128.992c-.02.306-.032.62-.032.942 0 .73.224 1.304.672 1.726.448.42 1.043.632 1.785.632h8.044c.743 0 1.34-.21 1.787-.633.447-.42.67-.996.67-1.725 0-.32-.01-.635-.03-.942a9.159 9.159 0 0 0-.374-1.98c-.098-.304-.23-.6-.395-.888a3.23 3.23 0 0 0-.57-.737 2.404 2.404 0 0 0-.788-.487 2.779 2.779 0 0 0-1.026-.183h-.004z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
@@ -95,7 +95,7 @@ function FileIcon({ fill, ariaLabel, ...iconProps }: IconProps) {
     <Icon {...iconProps} ariaLabel={ariaLabel}>
       <path
         d="M14 15H2V1l7.997.02c1 .034 1.759.758 2.428 1.42.667.663 1.561 1.605 1.574 2.555H14V15zM9 2H3v12h10V6H9V2zm3 10H4v-1h8v1zm0-2H4V9h8v1zm-1.988-5h3.008c-.012-.674-.714-1.443-1.204-1.937-.488-.495-1.039-1.058-1.816-1.055v2.96l.012.032z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
@@ -106,7 +106,7 @@ function PortfolioIcon({ fill, ariaLabel, ...iconProps }: IconProps) {
     <Icon {...iconProps} ariaLabel={ariaLabel}>
       <path
         d="M14.97 14.97H1.016V1.015H14.97V14.97zm-1-12.955H2.015V13.97H13.97V2.015zm-.973 10.982H9V9h3.997v3.997zM7 12.996H3.004V9H7v3.996zM11.997 10H10v1.997h1.997V10zM6 10H4.004v1.996H6V10zm1-3H3.006V3.006H7V7zm5.985 0H9V3.015h3.985V7zM6 4.006H4.006V6H6V4.006zm5.985.009H10V6h1.985V4.015z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
@@ -117,7 +117,7 @@ function ProjectIcon({ fill, ariaLabel, ...iconProps }: IconProps) {
     <Icon {...iconProps} ariaLabel={ariaLabel}>
       <path
         d="M14.985 13.988L1 14.005 1.02 5h13.966v8.988h-.001zM1.998 5.995l.006 7.02L14.022 13 14 6.004l-12.002-.01v.001zM3 4.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2 4.5h1zm1-2v-.504h8.002L12 2.5h1l-.004-1.495H3.003L3 2.5h1z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
@@ -128,7 +128,7 @@ function SubPortfolioIcon({ fill, ariaLabel, ...iconProps }: IconProps) {
     <Icon {...iconProps} ariaLabel={ariaLabel}>
       <path
         d="M14 7h2v9H7v-2H0V0h14v7zM8 8v7h7V8H8zm3 6H9v-2h2v2zm3 0h-2v-2h2v2zm-1-7V1H1v12h6V7h6zm-7 5H2V8h4v4zm5-1H9V9h2v2zm3 0h-2V9h2v2zM5 9H3v2h2V9zm1-3H2V2h4v4zm6 0H8V2h4v4zM5 3H3v2h2V3zm6 0H9v2h2V3z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );
@@ -139,7 +139,7 @@ function UnitTestIcon({ fill, ariaLabel, ...iconProps }: IconProps) {
     <Icon {...iconProps} ariaLabel={ariaLabel}>
       <path
         d="M14 15H2V1l7.997.02c1.013-.03 1.57.893 2.239 1.555.667.663 1.75 1.47 1.763 2.42H14V15zM9 2H3v12h10V6H9V2zM7 8l-3 2.5L7 13V8zm1 5l3-2.5L8 8v5zm2.012-8h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96l.012.032z"
-        style={{ fill: fill || colors.blue }}
+        style={{ fill: fill || colors.primary }}
       />
     </Icon>
   );