style: improve requirements status count display

intuitem · Jul 1, 2024 · bda8916 · bda8916
1 parent 60a0b70
commit bda8916
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { complianceResultColorMap, complianceStatusColorMap } from './utils';
+	import { complianceResultColorMap, complianceStatusColorMap, darkenColor } from './utils';
 	import { page } from '$app/stores';
 	import type { z } from 'zod';
 	import type { ReferenceControlSchema, ThreatSchema } from '$lib/utils/schemas';
@@ -124,7 +124,7 @@
 							{#if resultCounts[status[0]]}
 								<span
 									class="badge mr-1"
-									style="background-color: {status[1] + '33'}; color: {status[1]}"
+									style="background-color: {status[1] + '44'}; color: {darkenColor(status[1], 0.3)}"
 								>
 									{resultCounts[status[0]]}
 									{m[toCamelCase(status[0])]()}

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/utils.ts b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/utils.ts
@@ -12,3 +12,18 @@ export const complianceStatusColorMap = {
 	in_review: '#3b82f6',
 	done: '#86efac'
 };
+
+export function darkenColor(hex: string, amount: number) {
+    hex = hex.slice(1);
+    let num = parseInt(hex, 16);
+
+    let r = (num >> 16) - amount * 255;
+    let g = (num >> 8 & 0x00FF) - amount * 255;
+    let b = (num & 0x0000FF) - amount * 255;
+
+    r = Math.max(0, Math.min(255, r));
+    g = Math.max(0, Math.min(255, g));
+    b = Math.max(0, Math.min(255, b));
+
+    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+}