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

server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx

@@ -25,6 +25,7 @@ import { isMainBranch } from '../../../../helpers/branch-like';
 import { getComponentOverviewUrl } from '../../../../helpers/urls';
 import { BranchLike } from '../../../../types/branch-like';
 import { Component } from '../../../../types/types';
+import { colors } from '../../../theme';
 
 export interface BreadcrumbProps {
   component: Component;
@@ -37,32 +38,62 @@ export function Breadcrumb(props: BreadcrumbProps) {
     currentBranchLike
   } = props;
   const lastBreadcrumbElement = last(breadcrumbs);
-  const isNoMainBranch = currentBranchLike && !isMainBranch(currentBranchLike);
+  const isNotMainBranch = currentBranchLike && !isMainBranch(currentBranchLike);
 
   return (
     <div className="big flex-shrink display-flex-center">
       {breadcrumbs.map((breadcrumbElement, i) => {
         const isFirst = i === 0;
         const isNotLast = i < breadcrumbs.length - 1;
+        const isLast = !isNotLast;
+        const showQualifierIcon = isFirst && lastBreadcrumbElement;
+
+        const name =
+          isNotMainBranch || isNotLast ? (
+            <>
+              {showQualifierIcon && !isNotMainBranch && (
+                <QualifierIcon
+                  className="spacer-right"
+                  qualifier={lastBreadcrumbElement.qualifier}
+                  fill={colors.neutral800}
+                />
+              )}
+              <Link
+                className="link-no-underline"
+                to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}>
+                {showQualifierIcon && isNotMainBranch && (
+                  <QualifierIcon
+                    className="spacer-right"
+                    qualifier={lastBreadcrumbElement.qualifier}
+                    fill={colors.primary}
+                  />
+                )}
+                {breadcrumbElement.name}
+              </Link>
+            </>
+          ) : (
+            <>
+              {showQualifierIcon && (
+                <QualifierIcon
+                  className="spacer-right"
+                  qualifier={lastBreadcrumbElement.qualifier}
+                  fill={colors.neutral800}
+                />
+              )}
+              {breadcrumbElement.name}
+            </>
+          );
 
         return (
           <span className="flex-shrink display-flex-center" key={breadcrumbElement.key}>
-            {isFirst && lastBreadcrumbElement && (
-              <QualifierIcon className="spacer-right" qualifier={lastBreadcrumbElement.qualifier} />
-            )}
-            {isNoMainBranch || isNotLast ? (
-              <h1>
-                <Link
-                  className="link-no-underline text-ellipsis"
-                  title={breadcrumbElement.name}
-                  to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}>
-                  {breadcrumbElement.name}
-                </Link>
-              </h1>
-            ) : (
+            {isLast ? (
               <h1 className="text-ellipsis" title={breadcrumbElement.name}>
-                {breadcrumbElement.name}
+                {name}
               </h1>
+            ) : (
+              <span className="text-ellipsis" title={breadcrumbElement.name}>
+                {name}
+              </span>
             )}
             {isNotLast && <span className="slash-separator" />}
           </span>

server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx

@@ -54,6 +54,7 @@ export interface ComponentNavProps {
 }
 
 const ALERT_HEIGHT = 30;
+const BRANCHLIKE_TOGGLE_ADDED_HEIGHT = 6;
 
 export default function ComponentNav(props: ComponentNavProps) {
   const {
@@ -109,6 +110,10 @@ export default function ComponentNav(props: ComponentNavProps) {
     contextNavHeight += ALERT_HEIGHT;
   }
 
+  if (branchLikes.length) {
+    contextNavHeight += BRANCHLIKE_TOGGLE_ADDED_HEIGHT;
+  }
+
   return (
     <ContextNavBar
       height={contextNavHeight}
@@ -149,7 +154,7 @@ export default function ComponentNav(props: ComponentNavProps) {
       <InfoDrawer
         displayed={displayProjectInfo}
         onClose={() => setDisplayProjectInfo(false)}
-        top={globalNavHeightRaw + contextNavHeightRaw}>
+        top={globalNavHeightRaw + contextNavHeight}>
         <ProjectInformation
           branchLike={currentBranchLike}
           component={component}

server/sonar-web/src/main/js/app/components/nav/component/Header.tsx

@@ -43,7 +43,7 @@ export function Header(props: HeaderProps) {
   return (
     <>
       <Helmet title={component.name} />
-      <header className="display-flex-center flex-shrink">
+      <div className="display-flex-center flex-shrink">
         <Breadcrumb component={component} currentBranchLike={currentBranchLike} />
         {isLoggedIn(currentUser) && (
           <Favorite
@@ -64,7 +64,7 @@ export function Header(props: HeaderProps) {
             <CurrentBranchLikeMergeInformation currentBranchLike={currentBranchLike} />
           </>
         )}
-      </header>
+      </div>
     </>
   );
 }

server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.css

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 .header-meta-warnings .alert {
-  margin-bottom: 0;
+  margin-bottom: 5px;
 }
 
 .header-meta-warnings .alert-content {

server/sonar-web/src/main/js/app/components/nav/component/__tests__/Breadcrumb-test.tsx

@@ -32,8 +32,21 @@ it('should render correctly', () => {
 });
 
 it('should render correctly when not on a main branch', () => {
-  renderBreadcrumb({ currentBranchLike: mockBranch() });
-  expect(screen.getByRole('link', { name: 'Child portfolio' })).toBeInTheDocument();
+  renderBreadcrumb({
+    component: mockComponent({
+      breadcrumbs: [
+        {
+          key: 'project',
+          name: 'My Project',
+          qualifier: ComponentQualifier.Project
+        }
+      ]
+    }),
+    currentBranchLike: mockBranch()
+  });
+  expect(
+    screen.getByRole('link', { name: `qualifier.${ComponentQualifier.Project} My Project` })
+  ).toBeInTheDocument();
 });
 
 function renderBreadcrumb(props: Partial<BreadcrumbProps> = {}) {

server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/Header-test.tsx.snap

@@ -8,7 +8,7 @@ exports[`should render correctly 1`] = `
     prioritizeSeoTags={false}
     title="MyProject"
   />
-  <header
+  <div
     className="display-flex-center flex-shrink"
   >
     <Breadcrumb
@@ -156,6 +156,6 @@ exports[`should render correctly 1`] = `
         }
       }
     />
-  </header>
+  </div>
 </Fragment>
 `;

server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.css

@@ -17,6 +17,26 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+.branch-like-navigation-toggler {
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+
+.branch-like-navigation-toggler:hover {
+  border-color: var(--black38);
+  color: inherit !important;
+}
+
+.branch-like-navigation-toggler:active,
+.branch-like-navigation-toggler.open {
+  border-color: var(--primary);
+}
+
+.branch-like-navigation-toggler-container {
+  height: 26px;
+}
+
 .branch-like-navigation-toggler-container .popup {
   min-width: 430px;
   max-width: 650px;

server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx

@@ -19,6 +19,7 @@
  */
 import classNames from 'classnames';
 import * as React from 'react';
+import { ButtonPlain } from '../../../../../components/controls/buttons';
 import Toggler from '../../../../../components/controls/Toggler';
 import { ProjectAlmBindingResponse } from '../../../../../types/alm-settings';
 import { AppState } from '../../../../../types/appstate';
@@ -65,9 +66,12 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) {
 
   return (
     <span
-      className={classNames('big-spacer-left flex-0 branch-like-navigation-toggler-container', {
-        dropdown: isMenuEnabled
-      })}>
+      className={classNames(
+        'big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center',
+        {
+          dropdown: isMenuEnabled
+        }
+      )}>
       {isMenuEnabled ? (
         <Toggler
           onRequestClose={() => setIsMenuOpen(false)}
@@ -81,12 +85,13 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) {
               onClose={() => setIsMenuOpen(false)}
             />
           }>
-          <a
-            className="link-base-color link-no-underline"
-            href="#"
-            onClick={() => setIsMenuOpen(!isMenuOpen)}>
+          <ButtonPlain
+            className={classNames('branch-like-navigation-toggler', { open: isMenuOpen })}
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            aria-expanded={isMenuOpen}
+            aria-haspopup="menu">
             {currentBranchLikeElement}
-          </a>
+          </ButtonPlain>
         </Toggler>
       ) : (
         currentBranchLikeElement

server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx

@@ -57,12 +57,12 @@ export function CurrentBranchLike(props: CurrentBranchLikeProps) {
   const isGitLab = projectBinding !== undefined && projectBinding.alm === AlmKeys.GitLab;
 
   const additionalIcon = () => {
-    const plusIcon = <PlusCircleIcon fill={colors.blue} size={12} />;
-
     if (branchesEnabled && hasManyBranches) {
       return <DropdownIcon />;
     }
 
+    const plusIcon = <PlusCircleIcon fill={colors.info500} size={12} />;
+
     if (isApplication) {
       if (!hasManyBranches && canAdminComponent) {
         return (
@@ -144,7 +144,7 @@ export function CurrentBranchLike(props: CurrentBranchLikeProps) {
 
   return (
     <span className="display-flex-center flex-shrink text-ellipsis">
-      <BranchLikeIcon branchLike={currentBranchLike} />
+      <BranchLikeIcon branchLike={currentBranchLike} fill={colors.info500} />
       <span
         className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
         title={displayName}>

server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/BranchLikeNavigation-test.tsx

@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { ButtonPlain } from '../../../../../../components/controls/buttons';
 import Toggler from '../../../../../../components/controls/Toggler';
 import { mockSetOfBranchAndPullRequest } from '../../../../../../helpers/mocks/branch-like';
 import { mockComponent } from '../../../../../../helpers/mocks/component';
@@ -40,10 +41,10 @@ it('should properly toggle menu opening when clicking the anchor', () => {
   const wrapper = shallowRender({ appState: mockAppState({ branchesEnabled: true }) });
   expect(wrapper.find(Toggler).props().open).toBe(false);
 
-  click(wrapper.find('a'));
+  click(wrapper.find(ButtonPlain));
   expect(wrapper.find(Toggler).props().open).toBe(true);
 
-  click(wrapper.find('a'));
+  click(wrapper.find(ButtonPlain));
   expect(wrapper.find(Toggler).props().open).toBe(false);
 });
 
@@ -51,7 +52,7 @@ it('should properly close menu when toggler asks for', () => {
   const wrapper = shallowRender({ appState: mockAppState({ branchesEnabled: true }) });
   expect(wrapper.find(Toggler).props().open).toBe(false);
 
-  click(wrapper.find('a'));
+  click(wrapper.find(ButtonPlain));
   expect(wrapper.find(Toggler).props().open).toBe(true);
 
   wrapper

server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <span
-  className="big-spacer-left flex-0 branch-like-navigation-toggler-container"
+  className="big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center"
 >
   <Memo(CurrentBranchLike)
     branchesEnabled={false}
@@ -43,7 +43,7 @@ exports[`should render correctly 1`] = `
 
 exports[`should render the menu trigger if branches are enabled 1`] = `
 <span
-  className="big-spacer-left flex-0 branch-like-navigation-toggler-container dropdown"
+  className="big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center dropdown"
 >
   <Toggler
     onRequestClose={[Function]}
@@ -149,9 +149,10 @@ exports[`should render the menu trigger if branches are enabled 1`] = `
       />
     }
   >
-    <a
-      className="link-base-color link-no-underline"
-      href="#"
+    <ButtonPlain
+      aria-expanded={false}
+      aria-haspopup="menu"
+      className="branch-like-navigation-toggler"
       onClick={[Function]}
     >
       <Memo(CurrentBranchLike)
@@ -188,7 +189,7 @@ exports[`should render the menu trigger if branches are enabled 1`] = `
         }
         hasManyBranches={true}
       />
-    </a>
+    </ButtonPlain>
   </Toggler>
 </span>
 `;

server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/CurrentBranchLike-test.tsx.snap

@@ -13,6 +13,7 @@ exports[`applications should render correctly when there are many branchlikes 1`
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -37,6 +38,7 @@ exports[`applications should render correctly when there is only one branch and
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -60,6 +62,7 @@ exports[`applications should render correctly when there is only one branch and
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -90,7 +93,7 @@ exports[`applications should render correctly when there is only one branch and
     }
   >
     <PlusCircleIcon
-      fill="#4b9fd5"
+      fill="#0271B9"
       size={12}
     />
   </HelpTooltip>
@@ -110,6 +113,7 @@ exports[`projects should render correctly when branches support is disabled: alm
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -131,7 +135,7 @@ exports[`projects should render correctly when branches support is disabled: alm
     title="branch_like_navigation.no_branch_support.title.mr"
   >
     <PlusCircleIcon
-      fill="#4b9fd5"
+      fill="#0271B9"
       size={12}
     />
   </DocumentationTooltip>
@@ -151,6 +155,7 @@ exports[`projects should render correctly when branches support is disabled: alm
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -172,7 +177,7 @@ exports[`projects should render correctly when branches support is disabled: alm
     title="branch_like_navigation.no_branch_support.title.pr"
   >
     <PlusCircleIcon
-      fill="#4b9fd5"
+      fill="#0271B9"
       size={12}
     />
   </DocumentationTooltip>
@@ -192,6 +197,7 @@ exports[`projects should render correctly when branches support is disabled: def
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -213,7 +219,7 @@ exports[`projects should render correctly when branches support is disabled: def
     title="branch_like_navigation.no_branch_support.title"
   >
     <PlusCircleIcon
-      fill="#4b9fd5"
+      fill="#0271B9"
       size={12}
     />
   </DocumentationTooltip>
@@ -233,6 +239,7 @@ exports[`projects should render correctly when there are many branchlikes 1`] =
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -257,6 +264,7 @@ exports[`projects should render correctly when there is only one branchlike 1`]
         "name": "master",
       }
     }
+    fill="#0271B9"
   />
   <span
     className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
@@ -287,7 +295,7 @@ exports[`projects should render correctly when there is only one branchlike 1`]
     title="branch_like_navigation.only_one_branch.title"
   >
     <PlusCircleIcon
-      fill="#4b9fd5"
+      fill="#0271B9"
       size={12}
     />
   </DocumentationTooltip>

server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaLink.tsx

@@ -56,7 +56,7 @@ export default class MetaLink extends React.PureComponent<Props, State> {
     return (
       <li>
         <a
-          className="link-with-icon"
+          className="link-no-underline"
           href={isValid ? link.url : undefined}
           onClick={isValid ? undefined : this.handleClick}
           rel="nofollow noreferrer noopener"

server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/__snapshots__/MetaLink-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`should match snapshot: dangerous link, collapsed 1`] = `
 <li>
   <a
-    className="link-with-icon"
+    className="link-no-underline"
     onClick={[Function]}
     rel="nofollow noreferrer noopener"
     target="_blank"
@@ -21,7 +21,7 @@ exports[`should match snapshot: dangerous link, collapsed 1`] = `
 exports[`should match snapshot: dangerous link, expanded 1`] = `
 <li>
   <a
-    className="link-with-icon"
+    className="link-no-underline"
     onClick={[Function]}
     rel="nofollow noreferrer noopener"
     target="_blank"
@@ -54,7 +54,7 @@ exports[`should match snapshot: dangerous link, expanded 1`] = `
 exports[`should match snapshot: default 1`] = `
 <li>
   <a
-    className="link-with-icon"
+    className="link-no-underline"
     href="http://example.com"
     rel="nofollow noreferrer noopener"
     target="_blank"
@@ -72,7 +72,7 @@ exports[`should match snapshot: default 1`] = `
 exports[`should match snapshot: icon only 1`] = `
 <li>
   <a
-    className="link-with-icon"
+    className="link-no-underline"
     href="http://example.com"
     rel="nofollow noreferrer noopener"
     target="_blank"

server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx

@@ -43,6 +43,8 @@ interface Props {
   systemStatus: SysStatus;
 }
 
+const ALERT_HEIGHT = 30;
+
 export class SettingsNav extends React.PureComponent<Props> {
   static defaultProps = {
     extensions: []
@@ -249,12 +251,12 @@ export class SettingsNav extends React.PureComponent<Props> {
 
     return (
       <ContextNavBar
-        height={notifComponent ? contextNavHeight + 30 : contextNavHeight}
+        height={notifComponent ? contextNavHeight + ALERT_HEIGHT : contextNavHeight}
         id="context-navigation"
         notif={notifComponent}>
-        <header className="navbar-context-header">
+        <div className="navbar-context-header">
           <h1>{translate('layout.settings')}</h1>
-        </header>
+        </div>
 
         <NavBarTabs>
           {this.renderConfigurationTab()}

server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap

@@ -29,13 +29,13 @@ exports[`should render correctly when governance is active 1`] = `
   height={72}
   id="context-navigation"
 >
-  <header
+  <div
     className="navbar-context-header"
   >
     <h1>
       layout.settings
     </h1>
-  </header>
+  </div>
   <NavBarTabs>
     <Dropdown
       overlay={
@@ -182,13 +182,13 @@ exports[`should work with extensions 1`] = `
   height={72}
   id="context-navigation"
 >
-  <header
+  <div
     className="navbar-context-header"
   >
     <h1>
       layout.settings
     </h1>
-  </header>
+  </div>
   <NavBarTabs>
     <Dropdown
       overlay={

server/sonar-web/src/main/js/app/styles/init/links.css

@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 a {
-  border-bottom: 1px solid var(--lightBlue);
-  color: var(--darkBlue);
+  border-bottom: 1px solid var(--primary40);
+  color: var(--primary);
   cursor: pointer;
   outline: none;
   text-decoration: none;
@@ -29,91 +29,13 @@ a {
 a:hover,
 a:active,
 a:focus {
-  color: var(--blue);
-}
-
-.link-base-color {
-  border-bottom: 1px solid #d0d0d0 !important;
-  color: var(--baseFontColor) !important;
-}
-
-.link-base-color:hover,
-.link-base-color:active,
-.link-base-color:focus {
-  color: var(--blue) !important;
-}
-
-.link-base-color:hover {
-  border-bottom-color: var(--lightBlue) !important;
-}
-
-.link-base-color:active,
-.link-base-color:focus {
-  border-bottom-color: var(--lightBlue) !important;
+  border-bottom-color: var(--primary);
 }
 
 .link-no-underline {
-  border-bottom: none !important;
-}
-
-.link-underline {
-  border-bottom: 1px solid var(--lightBlue) !important;
-}
-
-.link-with-icon {
-  border-bottom: none;
-}
-
-.link-with-icon > span:last-child {
-  border-bottom: 1px solid var(--lightBlue);
-}
-
-.link-checkbox {
-  color: inherit;
-  border-bottom: none;
-}
-
-.link-checkbox.disabled,
-.link-checkbox.disabled:hover,
-.link-checkbox.disabled label {
-  color: var(--secondFontColor);
-  cursor: not-allowed;
-}
-
-.link-checkbox:hover,
-.link-checkbox:active,
-.link-checkbox:focus {
-  color: inherit;
-}
-
-.link-checkbox-control {
-  display: inline-block;
-  padding: 4px 0 5px;
-  line-height: 16px;
-}
-
-a.active-link,
-.link-active {
-  border-bottom: none;
-  cursor: default;
-}
-
-a.text-muted {
-  border-bottom: 1px solid #dddddd;
-  color: var(--secondFontColor);
-}
-
-a.text-muted:hover,
-a.text-muted:active,
-a.text-muted:focus {
-  color: #5e5e5e;
-}
-
-a.text-muted:focus {
-  outline: 1px dotted var(--blue);
+  border-bottom-color: transparent !important;
 }
 
-a.set-homepage-link:focus,
-a.favorite-link:focus {
-  outline: 1px dotted var(--blue);
+.link-no-underline:hover {
+  border-bottom-color: var(--primary) !important;
 }

server/sonar-web/src/main/js/app/theme.js

@@ -136,10 +136,23 @@ module.exports = {
     codeAdded: '#dff0d8',
     codeRemoved: '#f2dede',
 
-    //promotion
+    // promotion
     darkBackground: '#292929',
     darkBackgroundSeparator: '#413b3b',
-    darkBackgroundFontColor: '#f6f8fa'
+    darkBackgroundFontColor: '#f6f8fa',
+
+    // new color palette
+    // some of these colors duplicate what we have above, but this will make it
+    // easier to align with the UX designers on what colors to use where.
+    primary: '#236a97',
+    primary40: 'rgba(35, 107, 151, 0.4)',
+
+    info500: '#0271B9',
+
+    neutral600: '#666666',
+    neutral800: '#333333',
+
+    black38: 'rgba(0, 0, 0, 0.38)'
   },
 
   sizes: {

server/sonar-web/src/main/js/apps/code/code.css

@@ -36,6 +36,7 @@
 
 .code-breadcrumbs > li {
   padding: 5px 5px 3px;
+  display: flex;
 }
 
 .code-breadcrumbs > li:first-child {
@@ -44,7 +45,7 @@
 
 .code-breadcrumbs > li::after {
   position: relative;
-  top: -1px;
+  top: 1px;
   padding-left: 10px;
   color: var(--secondFontColor);
   font-size: 11px;

server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx

@@ -132,16 +132,19 @@ function renderNameWithIcon(
       : undefined;
     return (
       <Link
-        className="link-with-icon"
+        className="display-inline-flex-center link-no-underline"
         to={getComponentOverviewUrl(
           component.refKey || component.key,
           component.qualifier,
-          {
-            branch
-          },
+          { branch },
           codeType
         )}>
-        <QualifierIcon qualifier={component.qualifier} /> <span>{name}</span>
+        <QualifierIcon
+          className="little-spacer-right"
+          qualifier={component.qualifier}
+          fill={colors.primary}
+        />
+        <span>{name}</span>
       </Link>
     );
   } else if (canBrowse) {
@@ -150,14 +153,27 @@ function renderNameWithIcon(
       Object.assign(query, { selected: component.key });
     }
     return (
-      <Link className="link-with-icon" to={{ pathname: '/code', search: queryToSearch(query) }}>
-        <QualifierIcon qualifier={component.qualifier} /> <span>{name}</span>
+      <Link
+        className="display-inline-flex-center link-no-underline"
+        to={{ pathname: '/code', search: queryToSearch(query) }}>
+        <QualifierIcon
+          className="little-spacer-right"
+          qualifier={component.qualifier}
+          fill={colors.primary}
+        />
+        <span>{name}</span>
       </Link>
     );
   }
   return (
     <span>
-      <QualifierIcon qualifier={component.qualifier} /> {name}
+      <QualifierIcon
+        qualifier={component.qualifier}
+        fill={
+          component.qualifier === ComponentQualifier.Directory ? colors.orange : colors.neutral800
+        }
+      />{' '}
+      {name}
     </span>
   );
 }

server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap

@@ -10,6 +10,7 @@ foo"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="APP"
     />
      
@@ -28,6 +29,7 @@ foo"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="SVW"
     />
      
@@ -46,6 +48,7 @@ foo"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="TRK"
     />
      
@@ -64,6 +67,7 @@ foo"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="TRK"
     />
      
@@ -82,6 +86,7 @@ foo"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="VW"
     />
      
@@ -99,6 +104,7 @@ foo"
 >
   <span>
     <QualifierIcon
+      fill="#ed7d20"
       qualifier="DIR"
     />
      
@@ -129,6 +135,7 @@ foo"
 >
   <span>
     <QualifierIcon
+      fill="#ed7d20"
       qualifier="DIR"
     />
      
@@ -146,6 +153,7 @@ foo:src/index.tsx"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="FIL"
     />
      
@@ -162,7 +170,7 @@ exports[`#ComponentName should render correctly for files 2`] = `
 foo:src/index.tsx"
 >
   <Link
-    className="link-with-icon"
+    className="display-inline-flex-center link-no-underline"
     to={
       Object {
         "pathname": "/code",
@@ -171,9 +179,10 @@ foo:src/index.tsx"
     }
   >
     <QualifierIcon
+      className="little-spacer-right"
+      fill="#236a97"
       qualifier="FIL"
     />
-     
     <span>
       index.tsx
     </span>
@@ -190,6 +199,7 @@ foo:src/index.tsx"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="FIL"
     />
      
@@ -207,6 +217,7 @@ foo:src/index.tsx"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="FIL"
     />
      
@@ -224,6 +235,7 @@ foo:src/index.tsx"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="FIL"
     />
      
@@ -241,6 +253,7 @@ foo:src/index.tsx"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="FIL"
     />
      
@@ -258,6 +271,7 @@ foo:src/index.tsx"
 >
   <span>
     <QualifierIcon
+      fill="#333333"
       qualifier="FIL"
     />
      
@@ -276,7 +290,7 @@ foo
 foo"
 >
   <Link
-    className="link-with-icon"
+    className="display-inline-flex-center link-no-underline"
     to={
       Object {
         "pathname": "/dashboard",
@@ -285,9 +299,10 @@ foo"
     }
   >
     <QualifierIcon
+      className="little-spacer-right"
+      fill="#236a97"
       qualifier="TRK"
     />
-     
     <span>
       Foo
     </span>
@@ -308,7 +323,7 @@ foo
 foo"
   >
     <Link
-      className="link-with-icon"
+      className="display-inline-flex-center link-no-underline"
       to={
         Object {
           "pathname": "/dashboard",
@@ -317,9 +332,10 @@ foo"
       }
     >
       <QualifierIcon
+        className="little-spacer-right"
+        fill="#236a97"
         qualifier="TRK"
       />
-       
       <span>
         Foo
       </span>
@@ -351,7 +367,7 @@ exports[`#ComponentName should render correctly for refs 3`] = `
 foo"
   >
     <Link
-      className="link-with-icon"
+      className="display-inline-flex-center link-no-underline"
       to={
         Object {
           "pathname": "/dashboard",
@@ -360,9 +376,10 @@ foo"
       }
     >
       <QualifierIcon
+        className="little-spacer-right"
+        fill="#236a97"
         qualifier="TRK"
       />
-       
       <span>
         Foo
       </span>

server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx

@@ -73,7 +73,7 @@ export default class RuleDetailsProfiles extends React.PureComponent<Props> {
         {(activation.inherit === 'OVERRIDES' || activation.inherit === 'INHERITED') && (
           <>
             <RuleInheritanceIcon className="text-middle" inheritance={activation.inherit} />
-            <Link className="link-base-color little-spacer-left text-middle" to={profilePath}>
+            <Link className="little-spacer-left text-middle" to={profilePath}>
               {profile.parentName}
             </Link>
           </>

server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx

@@ -73,7 +73,7 @@ export default function AzurePersonalAccessTokenForm(props: AzurePersonalAccessT
             values={{
               link: url ? (
                 <a
-                  className="link-with-icon"
+                  className="link-no-underline"
                   href={getAzurePatUrl(url)}
                   rel="noopener noreferrer"
                   target="_blank">

server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx

@@ -119,9 +119,7 @@ export default function BitbucketProjectAccordion(props: BitbucketProjectAccordi
                   className={classNames(
                     'display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden',
                     {
-                      disabled: disableRepositories,
-                      'text-muted': disableRepositories,
-                      'link-no-underline': disableRepositories
+                      disabled: disableRepositories
                     }
                   )}
                   key={repo.id}

server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap

@@ -19,7 +19,7 @@ exports[`should render correctly: default 1`] = `
         values={
           Object {
             "link": <a
-              className="link-with-icon"
+              className="link-no-underline"
               href="http://www.example.com/_usersSettings/tokens"
               rel="noopener noreferrer"
               target="_blank"
@@ -95,7 +95,7 @@ exports[`should render correctly: submitting 1`] = `
         values={
           Object {
             "link": <a
-              className="link-with-icon"
+              className="link-no-underline"
               href="http://www.example.com/_usersSettings/tokens"
               rel="noopener noreferrer"
               target="_blank"
@@ -171,7 +171,7 @@ exports[`should render correctly: validation failed 1`] = `
         values={
           Object {
             "link": <a
-              className="link-with-icon"
+              className="link-no-underline"
               href="http://www.example.com/_usersSettings/tokens"
               rel="noopener noreferrer"
               target="_blank"

server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap

@@ -96,7 +96,7 @@ exports[`should render correctly: disable options 1`] = `
   >
     <Radio
       checked={false}
-      className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden disabled text-muted link-no-underline"
+      className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden disabled"
       key="1"
       onCheck={[Function]}
       value="1"

server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx

@@ -74,7 +74,7 @@ export default function IssueSourceViewerHeader(props: Props) {
           <div className="spacer-right">
             {linkToProject ? (
               <a
-                className="link-with-icon"
+                className="link-no-underline"
                 href={getPathUrlAsString(getBranchLikeUrl(project, branchLike))}>
                 {projectNameLabel}
               </a>

server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap

@@ -13,7 +13,7 @@ exports[`should render correctly 1`] = `
       className="spacer-right"
     >
       <a
-        className="link-with-icon"
+        className="link-no-underline"
         href="/dashboard?id=my-project"
       >
         <QualifierIcon
@@ -241,7 +241,7 @@ exports[`should render correctly: project root 1`] = `
       className="spacer-right"
     >
       <a
-        className="link-with-icon"
+        className="link-no-underline"
         href="/dashboard?id=my-project"
       >
         <QualifierIcon

server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx

@@ -36,9 +36,7 @@ export default function TemplateHeader(props: Props) {
   return (
     <header className="page-header" id="project-permissions-header">
       <div className="note spacer-bottom">
-        <Link className="text-muted" to={PERMISSION_TEMPLATES_PATH}>
-          {translate('permission_templates.page')}
-        </Link>
+        <Link to={PERMISSION_TEMPLATES_PATH}>{translate('permission_templates.page')}</Link>
       </div>
 
       <h1 className="page-title">{template.name}</h1>

server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx

@@ -53,7 +53,7 @@ export default class ProjectRow extends React.PureComponent<Props> {
 
         <td className="nowrap hide-overflow project-row-text-cell">
           <Link
-            className="link-with-icon"
+            className="link-no-underline"
             to={getComponentOverviewUrl(project.key, project.qualifier)}>
             <QualifierIcon className="little-spacer-right" qualifier={project.qualifier} />
 

server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap

@@ -17,7 +17,7 @@ exports[`renders 1`] = `
     className="nowrap hide-overflow project-row-text-cell"
   >
     <Link
-      className="link-with-icon"
+      className="link-no-underline"
       to={
         Object {
           "pathname": "/dashboard",
@@ -109,7 +109,7 @@ exports[`renders: portfolio 1`] = `
     className="nowrap hide-overflow project-row-text-cell"
   >
     <Link
-      className="link-with-icon"
+      className="link-no-underline"
       to={
         Object {
           "pathname": "/portfolio",
@@ -201,7 +201,7 @@ exports[`renders: with lastAnalysisDate 1`] = `
     className="nowrap hide-overflow project-row-text-cell"
   >
     <Link
-      className="link-with-icon"
+      className="link-no-underline"
       to={
         Object {
           "pathname": "/dashboard",

server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx

@@ -26,7 +26,7 @@ export default function ProfileNotFound() {
   return (
     <div className="quality-profile-not-found">
       <div className="note spacer-bottom">
-        <NavLink end={true} className="text-muted" to={PROFILE_PATH}>
+        <NavLink end={true} to={PROFILE_PATH}>
           {translate('quality_profiles.page')}
         </NavLink>
       </div>

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx

@@ -38,19 +38,17 @@ export default class ProfileHeader extends React.PureComponent<Props> {
     const { profile } = this.props;
 
     return (
-      <header className="page-header quality-profile-header">
+      <div className="page-header quality-profile-header">
         <div className="note spacer-bottom">
-          <NavLink end={true} className="text-muted" to={PROFILE_PATH}>
+          <NavLink end={true} to={PROFILE_PATH}>
             {translate('quality_profiles.page')}
           </NavLink>
           {' / '}
-          <Link className="text-muted" to={getProfilesForLanguagePath(profile.language)}>
-            {profile.languageName}
-          </Link>
+          <Link to={getProfilesForLanguagePath(profile.language)}>{profile.languageName}</Link>
         </div>
 
         <h1 className="page-title">
-          <ProfileLink className="link-base-color" language={profile.language} name={profile.name}>
+          <ProfileLink language={profile.language} name={profile.name}>
             <span>{profile.name}</span>
           </ProfileLink>
           {profile.isDefault && (
@@ -91,7 +89,7 @@ export default class ProfileHeader extends React.PureComponent<Props> {
             {translate('quality_profiles.built_in.description')}
           </div>
         )}
-      </header>
+      </div>
     );
   }
 }

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx

@@ -147,7 +147,7 @@ export default class ProfileProjects extends React.PureComponent<Props, State> {
         <ul>
           {projects.map(project => (
             <li className="spacer-top js-profile-project" data-key={project.key} key={project.key}>
-              <Link className="link-with-icon" to={getProjectUrl(project.key)}>
+              <Link to={getProjectUrl(project.key)}>
                 <QualifierIcon qualifier="TRK" /> <span>{project.name}</span>
               </Link>
             </li>

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx

@@ -63,11 +63,11 @@ export default function ProfileRulesRowOfType(props: Props) {
       <td className="thin nowrap text-right">
         {inactiveCount != null &&
           (inactiveCount > 0 ? (
-            <Link className="small text-muted" to={inactiveRulesUrl}>
+            <Link className="small" to={inactiveRulesUrl}>
               {formatMeasure(inactiveCount, 'SHORT_INT', null)}
             </Link>
           ) : (
-            <span className="note text-muted">0</span>
+            <span className="note">0</span>
           ))}
       </td>
     </tr>

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx

@@ -52,11 +52,11 @@ export default function ProfileRulesRowTotal(props: Props) {
       <td className="thin nowrap text-right">
         {inactiveCount != null &&
           (inactiveCount > 0 ? (
-            <Link className="small text-muted" to={inactiveRulesUrl}>
+            <Link className="small" to={inactiveRulesUrl}>
               <strong>{formatMeasure(inactiveCount, 'SHORT_INT', null)}</strong>
             </Link>
           ) : (
-            <span className="note text-muted">0</span>
+            <span className="note">0</span>
           ))}
       </td>
     </tr>

server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap

@@ -1,14 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<header
+<div
   className="page-header quality-profile-header"
 >
   <div
     className="note spacer-bottom"
   >
     <NavLink
-      className="text-muted"
       end={true}
       to="/profiles"
     >
@@ -16,7 +15,6 @@ exports[`should render correctly 1`] = `
     </NavLink>
      / 
     <Link
-      className="text-muted"
       to={
         Object {
           "pathname": "/profiles",
@@ -31,7 +29,6 @@ exports[`should render correctly 1`] = `
     className="page-title"
   >
     <ProfileLink
-      className="link-base-color"
       language="js"
       name="name"
     >
@@ -102,18 +99,17 @@ exports[`should render correctly 1`] = `
       </li>
     </ul>
   </div>
-</header>
+</div>
 `;
 
 exports[`should render correctly: for default profile 1`] = `
-<header
+<div
   className="page-header quality-profile-header"
 >
   <div
     className="note spacer-bottom"
   >
     <NavLink
-      className="text-muted"
       end={true}
       to="/profiles"
     >
@@ -121,7 +117,6 @@ exports[`should render correctly: for default profile 1`] = `
     </NavLink>
      / 
     <Link
-      className="text-muted"
       to={
         Object {
           "pathname": "/profiles",
@@ -136,7 +131,6 @@ exports[`should render correctly: for default profile 1`] = `
     className="page-title"
   >
     <ProfileLink
-      className="link-base-color"
       language="js"
       name="name"
     >
@@ -216,5 +210,5 @@ exports[`should render correctly: for default profile 1`] = `
       </li>
     </ul>
   </div>
-</header>
+</div>
 `;

server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap

@@ -36,7 +36,6 @@ exports[`should render correctly: default 1`] = `
         key="org.sonarsource.xml:xml"
       >
         <Link
-          className="link-with-icon"
           to={
             Object {
               "pathname": "/dashboard",
@@ -136,7 +135,6 @@ exports[`should render correctly: no active rules, but associated projects 1`] =
         key="org.sonarsource.xml:xml"
       >
         <Link
-          className="link-with-icon"
           to={
             Object {
               "pathname": "/dashboard",
@@ -221,7 +219,6 @@ exports[`should render correctly: no rights 1`] = `
         key="org.sonarsource.xml:xml"
       >
         <Link
-          className="link-with-icon"
           to={
             Object {
               "pathname": "/dashboard",

server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap

@@ -29,7 +29,7 @@ exports[`should render correctly 1`] = `
     className="thin nowrap text-right"
   >
     <Link
-      className="small text-muted"
+      className="small"
       to={
         Object {
           "pathname": "/coding_rules",
@@ -72,7 +72,7 @@ exports[`should render correctly if there is 0 rules 1`] = `
     className="thin nowrap text-right"
   >
     <span
-      className="note text-muted"
+      className="note"
     >
       0
     </span>

server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap

@@ -27,7 +27,7 @@ exports[`should render correctly 1`] = `
     className="thin nowrap text-right"
   >
     <Link
-      className="small text-muted"
+      className="small"
       to={
         Object {
           "pathname": "/coding_rules",
@@ -70,7 +70,7 @@ exports[`should render correctly if there is 0 rules 1`] = `
     className="thin nowrap text-right"
   >
     <span
-      className="note text-muted"
+      className="note"
     >
       0
     </span>

server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx

@@ -119,11 +119,8 @@ export default class EvolutionDeprecated extends React.PureComponent<Props> {
         <ul>
           {sortedProfiles.map(profile => (
             <li className="spacer-top" key={profile.key}>
-              <div className="text-ellipsis">
-                <ProfileLink
-                  className="link-no-underline"
-                  language={profile.language}
-                  name={profile.name}>
+              <div className="text-ellipsis little-spacer-bottom">
+                <ProfileLink language={profile.language} name={profile.name}>
                   {profile.name}
                 </ProfileLink>
               </div>
@@ -131,7 +128,7 @@ export default class EvolutionDeprecated extends React.PureComponent<Props> {
                 {profile.languageName}
                 {', '}
                 <Link
-                  className="text-muted"
+                  className="link-no-underline"
                   to={getDeprecatedActiveRulesUrl({ qprofile: profile.key })}>
                   {translateWithParameters(
                     'quality_profile.x_rules',

server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap

@@ -22,10 +22,9 @@ exports[`should render correctly 1`] = `
       key="qp-5"
     >
       <div
-        className="text-ellipsis"
+        className="text-ellipsis little-spacer-bottom"
       >
         <ProfileLink
-          className="link-no-underline"
           language="js"
           name="Quality Profile 5"
         >
@@ -38,7 +37,7 @@ exports[`should render correctly 1`] = `
         JavaScript
         , 
         <Link
-          className="text-muted"
+          className="link-no-underline"
           to={
             Object {
               "pathname": "/coding_rules",
@@ -69,10 +68,9 @@ exports[`should render correctly 1`] = `
       key="qp-4"
     >
       <div
-        className="text-ellipsis"
+        className="text-ellipsis little-spacer-bottom"
       >
         <ProfileLink
-          className="link-no-underline"
           language="js"
           name="Quality Profile 4"
         >
@@ -85,7 +83,7 @@ exports[`should render correctly 1`] = `
         JavaScript
         , 
         <Link
-          className="text-muted"
+          className="link-no-underline"
           to={
             Object {
               "pathname": "/coding_rules",
@@ -109,10 +107,9 @@ exports[`should render correctly 1`] = `
       key="qp-2"
     >
       <div
-        className="text-ellipsis"
+        className="text-ellipsis little-spacer-bottom"
       >
         <ProfileLink
-          className="link-no-underline"
           language="js"
           name="Quality Profile 2"
         >
@@ -125,7 +122,7 @@ exports[`should render correctly 1`] = `
         JavaScript
         , 
         <Link
-          className="text-muted"
+          className="link-no-underline"
           to={
             Object {
               "pathname": "/coding_rules",
@@ -142,10 +139,9 @@ exports[`should render correctly 1`] = `
       key="qp-3"
     >
       <div
-        className="text-ellipsis"
+        className="text-ellipsis little-spacer-bottom"
       >
         <ProfileLink
-          className="link-no-underline"
           language="js"
           name="Quality Profile 3"
         >
@@ -158,7 +154,7 @@ exports[`should render correctly 1`] = `
         JavaScript
         , 
         <Link
-          className="text-muted"
+          className="link-no-underline"
           to={
             Object {
               "pathname": "/coding_rules",

server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { SubmitButton } from '../../../components/controls/buttons';
+import { ButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { translate } from '../../../helpers/l10n';
 import { getBaseUrl } from '../../../helpers/system';
@@ -59,8 +59,7 @@ export default class LoginForm extends React.PureComponent<Props, State> {
       .then(this.stopLoading, this.stopLoading);
   };
 
-  handleMoreOptionsClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  handleMoreOptionsClick = () => {
     this.setState({ collapsed: false });
   };
 
@@ -74,12 +73,12 @@ export default class LoginForm extends React.PureComponent<Props, State> {
     if (this.state.collapsed) {
       return (
         <div className="text-center">
-          <a
-            className="small text-muted js-more-options"
-            href="#"
+          <ButtonLink
+            aria-expanded={false}
+            className="small js-more-options"
             onClick={this.handleMoreOptionsClick}>
             {translate('login.more_options')}
-          </a>
+          </ButtonLink>
         </div>
       );
     }

server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap

@@ -4,13 +4,13 @@ exports[`expands more options 1`] = `
 <div
   className="text-center"
 >
-  <a
-    className="small text-muted js-more-options"
-    href="#"
+  <ButtonLink
+    aria-expanded={false}
+    className="small js-more-options"
     onClick={[Function]}
   >
     login.more_options
-  </a>
+  </ButtonLink>
 </div>
 `;
 

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>
 

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

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);

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">

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);
 

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]}
             >

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"

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>
     );

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();
 });
 

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>
 `;

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>
   );

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>
   );

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>
   );