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

26 files changed, 106 insertions, 95 deletions

diff --git a/server/sonar-web/src/main/js/apps/code/code.css b/server/sonar-web/src/main/js/apps/code/code.css
index 7588b745ab2..739ec197e88 100644
--- a/server/sonar-web/src/main/js/apps/code/code.css
+++ b/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;
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx b/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx
index 6c96b8a34cf..a22e7b7989a 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx
+++ b/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>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap
index e54bcc69a92..0160ee7d449 100644
--- a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
index e0ed6fe2146..5d8a86d738a 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsProfiles.tsx
+++ b/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>
           </>
diff --git a/server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx
index a6350387a22..67ba28ef4aa 100644
--- a/server/sonar-web/src/main/js/apps/create/project/AzurePersonalAccessTokenForm.tsx
+++ b/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">
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx
index b1c05705ec8..4bd638587d0 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketProjectAccordion.tsx
+++ b/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}
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap
index c8399e96c85..685eb640c7e 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzurePersonalAccessTokenForm-test.tsx.snap
+++ b/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"
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap
index 4afde710ce4..bbcf7b5ecbe 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketProjectAccordion-test.tsx.snap
+++ b/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"
diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
index cd749078555..16672277108 100644
--- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap
index e571d0d0e36..db4633e9607 100644
--- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/IssueSourceViewerHeader-test.tsx.snap
+++ b/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
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx
index 4a4addbb9ae..09eca7b0f1c 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.tsx
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
index 1cb7d26e0ba..5178b23c919 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
+++ b/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} />
 
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap
index 69db1456cc3..19273a75709 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap
+++ b/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",
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx
index 8c4e6f2c318..02665f130c1 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
index 1d4b6ed5d4b..5e147feec6b 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
+++ b/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>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx
index 0dcc970ab01..a5ad08c1fb6 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx
index 2243f339ffe..3f813408c04 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowOfType.tsx
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx
index 45bd13b3f6c..62156642237 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesRowTotal.tsx
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap
index db6386f4230..8b99596ac38 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap
+++ b/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>
 `;
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap
index f7310b99075..cfb7b753c46 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileProjects-test.tsx.snap
+++ b/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",
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap
index 74a4d1abcf2..a1eb150e996 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowOfType-test.tsx.snap
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap
index 5e18680e3b4..695b3fbe044 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesRowTotal-test.tsx.snap
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx
index 18a7b1f33e3..3c7ce567769 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx
+++ b/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',
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap
index 292172b31e5..9166e4285dd 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/EvolutionDeprecated-test.tsx.snap
+++ b/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",
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx b/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx
index aa137b6a5bb..c395c1f80d0 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx
+++ b/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>
       );
     }
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap
index d45b1952809..3d97ba42e31 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginForm-test.tsx.snap
+++ b/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>
 `;