From 8d854461cba0c124ebb19bc7ef0440e0aec1e647 Mon Sep 17 00:00:00 2001 From: Wouter Admiraal Date: Tue, 30 Aug 2022 09:18:47 +0200 Subject: [PATCH] SONAR-16780 [894864] Link or button text lacks 4.5:1 contrast ratio on hover or focus --- .../src/main/js/app/styles/init/links.css | 5 ++ server/sonar-web/src/main/js/app/theme.js | 12 +++- .../drilldown/MeasureCell.tsx | 2 +- .../apps/overview/components/IssueRating.tsx | 2 +- .../__snapshots__/IssueRating-test.tsx.snap | 12 ++-- .../__snapshots__/HelpTooltip-test.tsx.snap | 2 +- .../src/main/js/components/ui/Rating.css | 62 ++++++------------- 7 files changed, 44 insertions(+), 53 deletions(-) diff --git a/server/sonar-web/src/main/js/app/styles/init/links.css b/server/sonar-web/src/main/js/app/styles/init/links.css index dc4c7c56b5e..dd67ae0530a 100644 --- a/server/sonar-web/src/main/js/app/styles/init/links.css +++ b/server/sonar-web/src/main/js/app/styles/init/links.css @@ -44,3 +44,8 @@ a img { .link-no-underline:hover { border-bottom-color: var(--primary) !important; } + +.link-rating, +.link-rating:hover { + border-bottom: 0 !important; +} diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js index 9a73cecbd3b..cc81ebcdd20 100644 --- a/server/sonar-web/src/main/js/app/theme.js +++ b/server/sonar-web/src/main/js/app/theme.js @@ -35,7 +35,6 @@ module.exports = { orange: '#ed7d20', red: '#D02F3A', purple: '#9139d4', - white: '#ffffff', gray94: '#efefef', gray80: '#cdcdcd', @@ -149,9 +148,20 @@ module.exports = { info500: '#0271B9', + success500: '#008A25', + successVariant: '#B0D513', + + warningVariant: '#EABE06', + warningAccent: '#ED7D20', + + error500: '#D02F3A', + neutral600: '#666666', neutral800: '#333333', + white: '#FFFFFF', + + black87: 'rgba(0, 0, 0, 0.87)', black38: 'rgba(0, 0, 0, 0.38)' }, diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx index 858d0213472..0602e2ab4fd 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx @@ -37,7 +37,7 @@ export default function MeasureCell({ component, measure, metric }: Props) { return ( - + ); diff --git a/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx b/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx index b81a710a559..df9280474bf 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx @@ -60,7 +60,7 @@ function renderRatingLink(props: IssueRatingProps) { diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap index 6bc60fbd24e..e692f12d8c5 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap @@ -27,7 +27,7 @@ exports[`should render correctly for bugs 1`] = ` "title": "Foo Bar feature", } } - className="link-no-underline" + className="link-no-underline link-rating" component="my-project" metric="reliability_rating" > @@ -67,7 +67,7 @@ exports[`should render correctly for bugs 2`] = ` "title": "Foo Bar feature", } } - className="link-no-underline" + className="link-no-underline link-rating" component="my-project" metric="new_reliability_rating" > @@ -107,7 +107,7 @@ exports[`should render correctly for code smells 1`] = ` "title": "Foo Bar feature", } } - className="link-no-underline" + className="link-no-underline link-rating" component="my-project" metric="sqale_rating" > @@ -147,7 +147,7 @@ exports[`should render correctly for code smells 2`] = ` "title": "Foo Bar feature", } } - className="link-no-underline" + className="link-no-underline link-rating" component="my-project" metric="new_maintainability_rating" > @@ -187,7 +187,7 @@ exports[`should render correctly for vulnerabilities 1`] = ` "title": "Foo Bar feature", } } - className="link-no-underline" + className="link-no-underline link-rating" component="my-project" metric="security_rating" > @@ -227,7 +227,7 @@ exports[`should render correctly for vulnerabilities 2`] = ` "title": "Foo Bar feature", } } - className="link-no-underline" + className="link-no-underline link-rating" component="my-project" metric="new_security_rating" > diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap index 8a342822784..bdc478b2d8e 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap @@ -10,7 +10,7 @@ exports[`should render dark helptooltip properly: dark 1`] = ` > diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css index 58c687c4ac3..0304c9fdb30 100644 --- a/server/sonar-web/src/main/js/components/ui/Rating.css +++ b/server/sonar-web/src/main/js/components/ui/Rating.css @@ -21,79 +21,55 @@ display: inline-block; width: var(--controlHeight); height: var(--controlHeight); - line-height: var(--controlHeight); + line-height: calc(var(--controlHeight) - 1px); border-radius: var(--controlHeight); + border: 1px solid var(--black38); box-sizing: border-box; - color: #fff; font-size: var(--bigFontSize); font-weight: 400; text-align: center; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.35); } .rating-muted { background-color: var(--gray71) !important; - color: #fff !important; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.35) !important; -} - -a > .rating { - margin-bottom: -1px; - border-bottom: 1px solid; - transition: all 0.2s ease; -} - -a > .rating:hover { - opacity: 0.8; + color: var(--white) !important; } +a > .rating-A, .rating-A { - line-height: 23px; - background-color: var(--green); -} - -a > .rating-A { - border-bottom-color: var(--green); + color: var(--white); + background-color: var(--success500); } +a > .rating-B, .rating-B { - background-color: var(--lightGreen); -} - -a .rating-B { - border-bottom-color: var(--lightGreen); + color: var(--black87); + background-color: var(--successVariant); } +a > .rating-C, .rating-C { - background-color: var(--yellow); -} - -a .rating-C { - border-bottom-color: var(--yellow); + color: var(--black87); + background-color: var(--warningVariant); } +a > .rating-D, .rating-D { - background-color: var(--orange); -} - -a .rating-D { - border-bottom-color: var(--orange); + color: var(--black87); + background-color: var(--warningAccent); } +a > .rating-E, .rating-E { - background-color: var(--red); -} - -a .rating-E { - border-bottom-color: var(--red); + color: var(--white); + background-color: var(--error500); } .rating-small { width: 20px; height: 20px; - line-height: 20px; + line-height: 19px; margin-top: -1px; margin-bottom: -1px; font-size: var(--mediumFontSize); - font-weight: bold; } -- 2.39.5