feat: review-comment: fix color for files without classifications

Signed-off-by: Dominikus Hellgartner <dominikus.hellgartner@tngtech.com>

Author: Hellgartner

src/Frontend/Components/ProgressBar/ProgressBar.util.tsx

@@ -6,7 +6,11 @@ import MuiBox from '@mui/material/Box';
 import { sum } from 'lodash';
 
 import { Criticality } from '../../../shared/shared-types';
-import { criticalityColor, OpossumColors } from '../../shared-styles';
+import {
+  classificationUnknownColor,
+  criticalityColor,
+  OpossumColors,
+} from '../../shared-styles';
 import { navigateToSelectedPathOrOpenUnsavedPopup } from '../../state/actions/popup-actions/popup-actions';
 import { useAppDispatch, useAppSelector } from '../../state/hooks';
 import {
@@ -254,7 +258,7 @@ function calculateProgressBarSteps(
   );
   progressBarSteps.push({
     widthInPercent: 100 - totalPercentage,
-    color: OpossumColors.lightestBlue,
+    color: classificationUnknownColor,
   });
 
   return roundPercentagesToAtLeastOnePercentAndNormalize(progressBarSteps);

src/Frontend/Components/ProgressBar/__tests__/ProgressBar.util.test.ts

@@ -4,7 +4,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import { Criticality } from '../../../../shared/shared-types';
 import { faker } from '../../../../testing/Faker';
-import { criticalityColor, OpossumColors } from '../../../shared-styles';
+import {
+  classificationUnknownColor,
+  criticalityColor,
+  OpossumColors,
+} from '../../../shared-styles';
 import {
   ClassificationStatistics,
   ProgressBarData,
@@ -98,7 +102,7 @@ describe('ProgressBar helpers', () => {
 
       const background = getClassificationBarBackground(testProgressBarData);
 
-      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[3].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , hsl(220, 41%, 92%) 65% 100% )`;
+      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[3].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , ${classificationUnknownColor} 65% 100% )`;
       expect(background).toEqual(expectedBackground);
     });
 
@@ -125,7 +129,7 @@ describe('ProgressBar helpers', () => {
 
       const background = getClassificationBarBackground(testProgressBarData);
 
-      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[11].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , hsl(220, 41%, 92%) 65% 100% )`;
+      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[11].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , ${classificationUnknownColor} 65% 100% )`;
       expect(background).toEqual(expectedBackground);
     });
 
@@ -168,7 +172,7 @@ describe('ProgressBar helpers', () => {
 
       const background = getClassificationBarBackground(testProgressBarData);
 
-      const expectedBackground = `linear-gradient(to right, ${classificationStatisticsEntry.color} 0% 25% , hsl(220, 41%, 92%) 25% 100% )`;
+      const expectedBackground = `linear-gradient(to right, ${classificationStatisticsEntry.color} 0% 25% , ${classificationUnknownColor} 25% 100% )`;
       expect(background).toBe(expectedBackground);
     });
   });

src/Frontend/Components/ProjectStatisticsPopup/ProjectStatisticsPopup.util.ts

@@ -13,7 +13,7 @@ import {
   PackageInfo,
 } from '../../../shared/shared-types';
 import { text } from '../../../shared/text';
-import { OpossumColors } from '../../shared-styles';
+import { classificationUnknownColor } from '../../shared-styles';
 import {
   AttributionCountPerSourcePerLicense,
   ChartDataItem,
@@ -378,7 +378,7 @@ export function getSignalCountByClassification(
       name: text.projectStatisticsPopup.charts
         .signalCountByClassificationPieChart.noClassification,
       count: classificationCounts[NO_CLASSIFICATION],
-      color: OpossumColors.lightestBlue,
+      color: classificationUnknownColor,
     });
   }
 

src/Frontend/shared-styles.ts

@@ -40,6 +40,8 @@ export const OpossumColors = {
   brown: 'hsl(33, 55%, 44%)',
 };
 
+export const classificationUnknownColor = OpossumColors.lightOrange;
+
 export const criticalityColor = {
   [Criticality.High]: OpossumColors.orange,
   [Criticality.Medium]: OpossumColors.mediumOrange,