From d02bc697f9d3153e809856ed59e9f99403f0bb08 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Wed, 18 Jan 2017 16:36:50 +0100 Subject: [PATCH] SONAR-8643 Make the color palette consistent --- .../details/treemap/MeasureTreemap.js | 8 ++++---- .../src/main/js/apps/overview/styles.css | 4 ++-- .../_source-viewer-measures-coverage.hbs | 2 +- .../main/js/components/ui/CoverageRating.js | 6 +++--- .../js/components/ui/DuplicationsRating.css | 19 ++++++++++++++----- .../src/main/js/components/ui/Level.css | 4 ++-- .../src/main/js/components/ui/Rating.css | 18 ++++++++---------- .../src/main/js/helpers/constants.js | 4 ++-- .../sonar-web/src/main/less/deprecated.less | 8 ++++---- .../sonar-web/src/main/less/init/tables.less | 2 +- server/sonar-web/src/main/less/variables.less | 10 +++++----- 11 files changed, 46 insertions(+), 39 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/treemap/MeasureTreemap.js b/server/sonar-web/src/main/js/apps/component-measures/details/treemap/MeasureTreemap.js index 12060645ba4..5cd860c9ab5 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/details/treemap/MeasureTreemap.js +++ b/server/sonar-web/src/main/js/apps/component-measures/details/treemap/MeasureTreemap.js @@ -101,21 +101,21 @@ export default class MeasureTreemap extends React.Component { getPercentColorScale (metric) { const color = d3.scale.linear().domain([0, 25, 50, 75, 100]); color.range(metric.direction === 1 ? - ['#ee0000', '#f77700', '#ffee00', '#80cc00', '#00aa00'] : - ['#00aa00', '#80cc00', '#ffee00', '#f77700', '#ee0000']); + ['#d4333f', '#ed7d20', '#eabe06', '#b0d513', '#00aa00'] : + ['#00aa00', '#b0d513', '#eabe06', '#ed7d20', '#d4333f']); return color; } getRatingColorScale () { return d3.scale.linear() .domain([1, 2, 3, 4, 5]) - .range(['#00aa00', '#80cc00', '#ffee00', '#f77700', '#ee0000']); + .range(['#00aa00', '#b0d513', '#eabe06', '#ed7d20', '#d4333f']); } getLevelColorScale () { return d3.scale.ordinal() .domain(['ERROR', 'WARN', 'OK', 'NONE']) - .range(['#d4333f', '#ff9900', '#85bb43', '##b4b4b4']); + .range(['#d4333f', '#ed7d20', '#00aa00', '#b4b4b4']); } getScale () { diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css index 5778a0ceaef..609305faa34 100644 --- a/server/sonar-web/src/main/js/apps/overview/styles.css +++ b/server/sonar-web/src/main/js/apps/overview/styles.css @@ -110,7 +110,7 @@ } .overview-quality-gate-condition-warn { - border-color: #f90; + border-color: #ed7d20; } .overview-quality-gate-condition-error .overview-quality-gate-threshold { @@ -118,7 +118,7 @@ } .overview-quality-gate-condition-warn .overview-quality-gate-threshold { - color: #f90; + color: #ed7d20; } diff --git a/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-coverage.hbs b/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-coverage.hbs index 7258237382a..2598e962d77 100644 --- a/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-coverage.hbs +++ b/server/sonar-web/src/main/js/components/source-viewer/templates/measures/_source-viewer-measures-coverage.hbs @@ -4,7 +4,7 @@ diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.js b/server/sonar-web/src/main/js/components/ui/CoverageRating.js index bb65d33d7c3..177bc35673d 100644 --- a/server/sonar-web/src/main/js/components/ui/CoverageRating.js +++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.js @@ -30,7 +30,7 @@ const SIZE_TO_WIDTH_MAPPING = { const SIZE_TO_THICKNESS_MAPPING = { 'small': 2, 'normal': 3, - 'big': 4 + 'big': 3 }; export default class CoverageRating extends React.Component { @@ -51,8 +51,8 @@ export default class CoverageRating extends React.Component { if (this.props.value != null) { const value = Number(this.props.value); data = [ - { value, fill: this.props.muted ? '#bdbdbd' : '#85bb43' }, - { value: 100 - value, fill: this.props.muted ? '#f3f3f3' : '#d4333f' } + { value, fill: this.props.muted ? '#bdbdbd' : '#00aa00' }, + { value: 100 - value, fill: '#d4333f' } ]; } diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css index 6e9842abc77..f8b14c03087 100644 --- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css +++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css @@ -6,7 +6,7 @@ align-items: center; width: 24px; height: 24px; - border: 3px solid #f3ca8e; + border: 3px solid #ed7d20; border-radius: 24px; box-sizing: border-box; } @@ -33,21 +33,25 @@ .duplications-rating:after { border-radius: 24px; - background-color: #f3ca8e; content: ""; } .duplications-rating-A { - border-color: #85bb43; + border-color: #00aa00; } .duplications-rating-A:after { display: none; } +.duplications-rating-B { + border-color: #b0d513; +} + .duplications-rating-B:after { width: 6px; height: 6px; + background-color: #b0d513; } .duplications-rating-small.duplications-rating-B:after { @@ -60,9 +64,14 @@ height: 12px; } +.duplications-rating-C { + border-color: #eabe06; +} + .duplications-rating-C:after { width: 8px; height: 8px; + background-color: #eabe06; } .duplications-rating-small.duplications-rating-C:after { @@ -76,13 +85,13 @@ } .duplications-rating-D { - border-color: #d4333f; + border-color: #ed7d20; } .duplications-rating-D:after { width: 12px; height: 12px; - background-color: #d4333f; + background-color: #ed7d20; } .duplications-rating-small.duplications-rating-D:after { diff --git a/server/sonar-web/src/main/js/components/ui/Level.css b/server/sonar-web/src/main/js/components/ui/Level.css index 0d2a90de193..e48587f6e8a 100644 --- a/server/sonar-web/src/main/js/components/ui/Level.css +++ b/server/sonar-web/src/main/js/components/ui/Level.css @@ -37,11 +37,11 @@ a > .level:hover { } .level-OK { - background-color: #85bb43; + background-color: #00aa00; } .level-WARN { - background-color: #f90; + background-color: #ed7d20; } .level-ERROR { 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 f2bffe4ea81..e4702058302 100644 --- a/server/sonar-web/src/main/js/components/ui/Rating.css +++ b/server/sonar-web/src/main/js/components/ui/Rating.css @@ -38,32 +38,30 @@ a > .rating:hover { } .rating-A { - background-color: #0a0; + background-color: #00aa00; } a > .rating-A { - border-bottom-color: #0a0; + border-bottom-color: #00aa00; } .rating-B { - background-color: #80cc00; + background-color: #b0d513; } -a .rating-B { border-bottom-color: #80cc00; } +a .rating-B { border-bottom-color: #b0d513; } .rating-C { - background-color: #fe0; - color: #444; - text-shadow: none; + background-color: #eabe06; } -a .rating-C { border-bottom-color: #fe0; } +a .rating-C { border-bottom-color: #eabe06; } .rating-D { - background-color: #f77700; + background-color: #ed7d20; } -a .rating-D { border-bottom-color: #f77700; } +a .rating-D { border-bottom-color: #ed7d20; } .rating-E { background-color: #e00; diff --git a/server/sonar-web/src/main/js/helpers/constants.js b/server/sonar-web/src/main/js/helpers/constants.js index 14d5a2f3b42..802a12c2327 100644 --- a/server/sonar-web/src/main/js/helpers/constants.js +++ b/server/sonar-web/src/main/js/helpers/constants.js @@ -20,5 +20,5 @@ export const SEVERITIES = ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO']; export const STATUSES = ['OPEN', 'REOPENED', 'CONFIRMED', 'RESOLVED', 'CLOSED']; -export const CHART_COLORS_RANGE_PERCENT = ['#00aa00', '#80cc00', '#ffee00', '#f77700', '#ee0000']; -export const CHART_REVERSED_COLORS_RANGE_PERCENT = ['#ee0000', '#f77700', '#ffee00', '#80cc00', '#00aa00']; +export const CHART_COLORS_RANGE_PERCENT = ['#00aa00', '#b0d513', '#eabe06', '#ed7d20', '#d4333f']; +export const CHART_REVERSED_COLORS_RANGE_PERCENT = ['#d4333f', '#ed7d20', '#eabe06', '#b0d513', '#00aa00']; diff --git a/server/sonar-web/src/main/less/deprecated.less b/server/sonar-web/src/main/less/deprecated.less index bb8bb2652e5..eb5e54dd766 100644 --- a/server/sonar-web/src/main/less/deprecated.less +++ b/server/sonar-web/src/main/less/deprecated.less @@ -343,13 +343,13 @@ div.autocompleteNote { } .color_OK { - border: 2px solid #85bb43 !important; - color: #85bb43 !important; + border: 2px solid #00aa00 !important; + color: #00aa00 !important; } .color_WARN { - border: 2px solid #f90 !important; - color: #f90 !important; + border: 2px solid #ed7d20 !important; + color: #ed7d20 !important; } .color_ERROR { diff --git a/server/sonar-web/src/main/less/init/tables.less b/server/sonar-web/src/main/less/init/tables.less index 427536371bb..63809c03cca 100644 --- a/server/sonar-web/src/main/less/init/tables.less +++ b/server/sonar-web/src/main/less/init/tables.less @@ -234,7 +234,7 @@ td.sep { .formError { display: inline-block; - background-color: #FF9090; + background-color: #ed7d20; color: #000; padding: 0 5px; } diff --git a/server/sonar-web/src/main/less/variables.less b/server/sonar-web/src/main/less/variables.less index 57871ac69c2..51a49a78e71 100644 --- a/server/sonar-web/src/main/less/variables.less +++ b/server/sonar-web/src/main/less/variables.less @@ -65,16 +65,16 @@ @blue: #4b9fd5; @lightBlue: #cae3f2; +@darkBlue: darken(@blue, 20%); +@green: #00aa00; +@lightGreed: #b0d513; +@yellow: #eabe06; +@orange: #ed7d20; @red: #d4333f; @lightRed: #d49f98; -@green: #85bb43; -@yellow: #fede06; -@orange: #f90; @lightOrange: #f3ca8e; @purple: #9139d4; -@darkBlue: darken(@blue, 20%); - @darkColor: #262626; @lightColor: #fff; -- 2.39.5