feat(gui): changed colors to be purple and made them transparent with border (#937)

* changed colors to be purple and made them transparent with border

* style: apply automatic fixes of linters

* aaa

* ups

* style: apply automatic fixes of linters

Co-authored-by: jofaul <[email protected]>
Co-authored-by: Lars Reimann <[email protected]>
Co-authored-by: lars-reimann <[email protected]>

Author: jofaul

api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx

@@ -126,8 +126,12 @@ const CustomBarChart: React.FC<CustomBarChartProps> = function ({ parameterUsage
         datasets: [
             {
                 data: labels.map((key) => sortedParameterUsages.get(key)),
-                borderColor: labels.map((key) => (isStringifiedLiteral(key) ? '#871F78' : '#888888')),
-                backgroundColor: labels.map((key) => (isStringifiedLiteral(key) ? '#871F78' : '#888888')),
+                borderColor: labels.map((key) =>
+                    isStringifiedLiteral(key) ? 'rgba(137, 87, 229, 1)' : 'rgba(136, 136, 136, 1)',
+                ),
+                backgroundColor: labels.map((key) =>
+                    isStringifiedLiteral(key) ? 'rgba(137, 87, 229, 0.2)' : 'rgba(136, 136, 136, 0.2)',
+                ),
             },
         ],
     };

api-editor/gui/src/features/statistics/ChartWrappers.tsx

@@ -81,8 +81,8 @@ export const CustomBarChart: React.FC<CustomBarChartProps> = function ({ labels,
         datasets: [
             {
                 data: labels.map((key) => dataValues.get(key)),
-                borderColor: ['#9A1D1D', '#7768AE', '#FFCC00', '#1BA25A'],
-                backgroundColor: ['#9A1D1D', '#7768AE', '#FFCC00', '#1BA25A'],
+                borderColor: ['rgba(137, 87, 229, 1)'],
+                backgroundColor: ['rgba(137, 87, 229, 0.2)'],
             },
         ],
     };
@@ -157,8 +157,8 @@ export const CustomLineChart: React.FC<CustomLineChartProps> = function ({
         datasets: [
             {
                 data: labels.map((key) => dataValues.get(key)),
-                borderColor: 'rgb(255, 99, 132)',
-                backgroundColor: 'rgba(255, 99, 132, 0.5)',
+                borderColor: 'rgba(137, 87, 229, 1)',
+                backgroundColor: 'rgba(137, 87, 229, 0.2)',
             },
         ],
     };

api-editor/gui/src/features/statistics/ProgressStatistics.tsx

@@ -10,11 +10,11 @@ import { ArcElement, Chart as ChartJS, Title, Tooltip } from 'chart.js';
 ChartJS.register(ArcElement, Title, Tooltip);
 
 export const ProgressStatistics = function () {
-    const completeOrCorrectBg = useColorModeValue('#38a169', '#68d391');
-    const completeOrCorrectBorder = useColorModeValue('#2f855a', '#99e6b3');
+    const completeOrCorrectBg = useColorModeValue('rgba(56, 161, 105, 0.2)', 'rgba(104, 211, 145, 0.2)');
+    const completeOrCorrectBorder = useColorModeValue('rgba(47, 133, 90, 1)', 'rgba(153, 230, 179, 1)');
 
-    const uncheckedBg = useColorModeValue('#CCC', '#888');
-    const uncheckedBorder = useColorModeValue('#AAA', '#AAA');
+    const uncheckedBg = useColorModeValue('rgba(204, 204, 204, 0.2)', 'rgba(136, 136, 136, 0.2)');
+    const uncheckedBorder = useColorModeValue('rgba(170, 170, 170, 1)', 'rgba(170, 170, 170, 1)');
 
     const textColor = useColorModeValue('#000', '#FFF');
 

api-editor/gui/src/features/statistics/QualityStatistics.tsx

@@ -47,20 +47,20 @@ interface QualityPieChartProps {
 }
 
 const QualityPieChart: React.FC<QualityPieChartProps> = function ({ annotationType, annotations }) {
-    const correctBg = useColorModeValue('#38a169', '#68d391');
-    const correctBorder = useColorModeValue('#2f855a', '#99e6b3');
+    const correctBg = useColorModeValue('rgba(56, 161, 105, 0.2)', 'rgba(104, 211, 145, 0.2)');
+    const correctBorder = useColorModeValue('rgba(47, 133, 90, 1)', 'rgba(153, 230, 179, 1)');
 
-    const changedBg = useColorModeValue('#a16e38', '#d39568');
-    const changedBorder = useColorModeValue('#855d2f', '#e6c099');
+    const changedBg = useColorModeValue('rgba(161, 110, 56, 0.2)', 'rgba(211, 149, 104, 0.2)');
+    const changedBorder = useColorModeValue('rgba(133, 93, 47, 1)', 'rgba(230, 192, 153, 1)');
 
-    const wrongOrRemovedBg = useColorModeValue('#a13838', '#d36868');
-    const wrongOrRemovedBorder = useColorModeValue('#852f2f', '#e69999');
+    const wrongOrRemovedBg = useColorModeValue('rgba(161, 56, 56, 0.2)', 'rgba(211, 104, 104, 0.2)');
+    const wrongOrRemovedBorder = useColorModeValue('rgba(133, 47, 47, 1)', 'rgba(230, 153, 153, 1)');
 
-    const unsureBg = useColorModeValue('#a19038', '#d3ba68');
-    const unsureBorder = useColorModeValue('#857a2f', '#e6d799');
+    const unsureBg = useColorModeValue('rgba(161, 144, 56, 0.2)', 'rgba(211, 186, 104, 0.2)');
+    const unsureBorder = useColorModeValue('rgba(133, 122, 47, 1)', 'rgba(230, 215, 153, 1)');
 
-    const uncheckedBg = useColorModeValue('#CCC', '#888');
-    const uncheckedBorder = useColorModeValue('#AAA', '#AAA');
+    const uncheckedBg = useColorModeValue('rgba(204, 204, 204, 0.2)', 'rgba(136, 136, 136, 0.2)');
+    const uncheckedBorder = useColorModeValue('rgba(170, 170, 170, 1)', 'rgba(170, 170, 170, 1)');
 
     const textColor = useColorModeValue('#000', '#FFF');