Increase color contrast and consistency (#225)

* Increase color contrast and consistency
* Update manifest checksums

Author: dotNomad

extensions/package-vulnerability-scanner/manifest.json

@@ -20,14 +20,14 @@
 	},
 	"packages": {},
 	"files": {
-		"dist/assets/index-CmdH3BdM.css": {
-			"checksum": "133200803297edaaba634130f05ce6ac"
+		"dist/assets/index-BeB0Q4U9.js": {
+			"checksum": "eec48b7aef372e410f6eddb398ec9b53"
 		},
-		"dist/assets/index-Mo0hYq-0.js": {
-			"checksum": "a8cd717c6740df720243f5c5df7440a3"
+		"dist/assets/index-C-y7BWfk.css": {
+			"checksum": "9c79124c79ef1f350c8af2a925a7f4ad"
 		},
 		"dist/index.html": {
-			"checksum": "4a7eba688b0cb49d2d5cc87c123fbcfd"
+			"checksum": "a555313182523439d7b4001d392385af"
 		},
 		"main.py": {
 			"checksum": "f8385dbd8a8cd24204f1eb6209f8bb30"

extensions/package-vulnerability-scanner/src/components/ContentCard.vue

@@ -101,11 +101,11 @@ function handleClick() {
       </template>
     </div>
 
-    <div class="text-xs text-gray-500 truncate">
+    <div class="text-xs text-gray-600 truncate">
       Type: {{ content.app_mode || "Unknown type" }} · GUID: {{ content.guid }}
     </div>
 
-    <div class="mt-1 text-xs text-gray-500 flex flex-wrap gap-x-3">
+    <div class="mt-1 text-xs text-gray-600 flex flex-wrap gap-x-3">
       <span v-if="content.py_version">Python: {{ content.py_version }}</span>
       <span v-if="content.r_version">R: {{ content.r_version }}</span>
       <span v-if="content.quarto_version"
@@ -114,14 +114,16 @@ function handleClick() {
     </div>
 
     <div class="mt-2 text-sm">
-      <span v-if="packageCount > 0"> {{ packageCount }} packages </span>
-      <span v-else-if="hasError" class="text-red-600">
+      <span v-if="packageCount > 0" class="text-gray-600">
+        {{ packageCount }} packages
+      </span>
+      <span v-else-if="hasError" class="text-red-700">
         Error loading packages
       </span>
-      <span v-else-if="isLoading" class="text-gray-400">
+      <span v-else-if="isLoading" class="text-gray-600">
         Loading packages...
       </span>
-      <span v-else class="text-gray-400"> No packages found </span>
+      <span v-else class="text-gray-600"> No packages found </span>
     </div>
   </div>
 </template>

extensions/package-vulnerability-scanner/src/components/VulnerabilityChecker.vue

@@ -162,9 +162,9 @@ const filteredPackages = computed((): PackageWithVulnsAndFix[] => {
     <!-- Content header with title and back button -->
     <div class="flex justify-between items-center mb-6">
       <div>
-        <h2 class="text-xl font-semibold">{{ contentTitle }}</h2>
+        <h2 class="text-xl text-gray-800 font-semibold">{{ contentTitle }}</h2>
         <div class="flex flex-wrap space-x-2 mb-1">
-          <p class="text-sm text-gray-500">
+          <p class="text-sm text-gray-600">
             {{ contentStore.currentContentId }}
           </p>
           <a
@@ -215,7 +215,7 @@ const filteredPackages = computed((): PackageWithVulnsAndFix[] => {
         :vulnerabilities="totalVulnerabilities"
       />
 
-      <h3 class="text-lg text-gray-700 mb-4">{{ filterTitle }}</h3>
+      <h3 class="text-lg text-gray-800 mb-4">{{ filterTitle }}</h3>
 
       <EmptyState v-if="!hasPackages">
         <p>This content has no packages. No vulnerabilities found.</p>

extensions/package-vulnerability-scanner/src/components/ui/StatusMessage.vue

@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <div
-    class="p-4 rounded-md border-l-4 mb-4"
+    class="p-4 rounded-r-md border-l-4 mb-4"
     :class="{
       'bg-red-50 border-red-500 text-red-700': type === 'error',
       'bg-yellow-50 border-yellow-400 text-yellow-800': type === 'warning',

extensions/package-vulnerability-scanner/src/components/vulnerability/PackageCard.vue

@@ -24,7 +24,7 @@ const repo = computed(() =>
     <template v-if="vulnerabilities && vulnerabilities.length > 0">
       <p
         v-if="vulnerabilities.length > 1"
-        class="text-sm font-medium text-gray-700 mb-3"
+        class="text-sm font-medium text-gray-600 mb-3"
       >
         {{ vulnerabilities.length }} vulnerabilities found for this package
       </p>
@@ -33,16 +33,18 @@ const repo = computed(() =>
         v-if="latestFixedVersion"
         class="bg-green-50 border-l-3 border-green-500 py-2 px-3 my-3 rounded-r-md"
       >
-        <p class="m-0 text-[15px] text-green-700 flex items-center">
+        <p class="m-0 text-green-700 flex items-center">
           <span class="mr-2">🛠️</span>
           <span
             >To fix
             {{
               vulnerabilities.length > 1
                 ? "these vulnerabilities"
                 : "this vulnerability"
-            }}, upgrade to version {{ latestFixedVersion }} or later.</span
-          >
+            }}, upgrade to version
+            <span class="font-semibold">{{ latestFixedVersion }}</span>
+            or later.
+          </span>
         </p>
       </div>
 

extensions/package-vulnerability-scanner/src/components/vulnerability/PackageHeader.vue

@@ -13,7 +13,7 @@ defineProps<{
       {{ package.name }}
     </h4>
 
-    <span class="text-gray-500">v{{ package.version }}</span>
+    <span class="text-gray-600">v{{ package.version }}</span>
 
     <span
       class="text-xs font-bold text-white py-1 px-2 rounded self-end ml-auto"

extensions/package-vulnerability-scanner/src/components/vulnerability/StatButton.vue

@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
     <span
       class="text-sm mt-1"
       :class="{
-        'text-gray-500': !active,
+        'text-gray-600': !active,
         'text-blue-600': type === 'primary' && active,
         'text-red-500': type === 'error' && active,
       }"

extensions/package-vulnerability-scanner/src/components/vulnerability/VulnerabilityDetails.vue

@@ -25,21 +25,19 @@ function getOsvUrl(vulnId: string): string {
 
 <template>
   <div class="bg-red-50 border-l-4 border-red-500 rounded-r-md p-4">
-    <p class="mb-1">
+    <p class="text-gray-800 mb-1">
       <strong>{{ summary }}</strong>
     </p>
 
-    <p class="font-mono text-gray-500 text-sm mb-3">
-      <a
-        :href="getOsvUrl(id)"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-blue-600 hover:text-blue-800 hover:underline inline-flex items-center"
-      >
-        {{ id }}
-        <ArrowTopRight class="ml-1" />
-      </a>
-    </p>
+    <a
+      :href="getOsvUrl(id)"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="font-mono text-sm mb-3 text-blue-600 hover:text-blue-800 hover:underline inline-flex items-center"
+    >
+      {{ id }}
+      <ArrowTopRight class="ml-1" />
+    </a>
 
     <div
       v-if="details"
@@ -48,7 +46,7 @@ function getOsvUrl(vulnId: string): string {
       <MarkdownRenderer :content="details" />
     </div>
 
-    <div class="flex justify-between text-xs text-gray-500 mt-3">
+    <div class="flex justify-between text-xs text-gray-600 mt-3">
       <span>Published: {{ publishDate }}</span>
       <span>Last Modified: {{ modifiedDate }}</span>
     </div>