Client accuracy/urgency badges fix (#69)

* client: Fixed badges colors

* client: Fix

client/src/components/AccuracyBadge/AccuracyBadge.scss

@@ -0,0 +1,24 @@
+@import '@/variables';
+
+.accuracy-badge {
+  padding: 0 20px;
+  border-radius: 5px;
+  font-weight: 500;
+  color: $white;
+  display: inline-block;
+  text-align: center;
+  font-size: 14px;
+  width: 50px;
+
+  &--low {
+    background-color: $red;
+  }
+
+  &--medium {
+    background-color: $medium-urgency-background;
+  }
+
+  &--high {
+    background-color: $low-urgency-background;
+  }
+}

client/src/components/AccuracyBadge/AccuracyBadge.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './AccuracyBadge.scss';
+import { AccuracyLevel } from 'api/managment-service.ts';
+
+interface AccuracyBadgeProps {
+    label: AccuracyLevel;
+}
+
+const AccuracyBadge: React.FC<AccuracyBadgeProps> = ({ label }) => {
+    return (
+        <span className={`accuracy-badge accuracy-badge--${label.toLowerCase()}`}>
+            {label}
+        </span>
+    );
+};
+
+export default AccuracyBadge;

client/src/components/UrgencyBadge/UrgencyBadge.scss

@@ -10,15 +10,15 @@
   font-size: 14px;
   width: 50px;
 
-  &--low {
+  &--high {
     background-color: $red;
   }
 
   &--medium {
     background-color: $medium-urgency-background;
   }
 
-  &--high {
+  &--low {
     background-color: $low-urgency-background;
   }
 }

client/src/pages/Clusters/Clusters.tsx

@@ -4,7 +4,6 @@ import HeaderWithIcon from 'components/PageTemplate/components/HeaderWithIcon/He
 import Table, { TableColumn } from 'components/Table/Table';
 import './Clusters.scss';
 import Channels from './components/NotificationChannelsColumn/NotificationChannelsColumn';
-import UrgencyBadge from 'components/UrgencyBadge/UrgencyBadge';
 import { useEffect, useState } from 'react';
 import {
   ClusterSummary,
@@ -15,6 +14,7 @@ import SVGIcon from 'components/SVGIcon/SVGIcon';
 import LinkComponent from 'components/LinkComponent/LinkComponent.tsx';
 import Spinner from 'components/Spinner/Spinner.tsx';
 import ReportActionsCell from './ReportActionsCell';
+import AccuracyBadge from 'components/AccuracyBadge/AccuracyBadge.tsx';
 
 interface ClusterDataRow {
   name: string;
@@ -79,7 +79,7 @@ const columns: Array<TableColumn<ClusterDataRow>> = [
     {
         header: 'Accuracy',
         columnKey: 'accuracy',
-        customComponent: ({ accuracy }) => <UrgencyBadge label={accuracy} />,
+        customComponent: ({ accuracy }) => <AccuracyBadge label={accuracy} />,
     },
     {
         header: 'Notification',