fix: minor styling fixes

Author: kitsonk

components/Jobs.tsx

@@ -31,7 +31,7 @@ function JobState({ state }: { state: JobState }) {
   }
   return (
     <div
-      class={`bg-${color}-100 dark:bg-${color}-900 text-${color}-800 dark:text-${color}-300 font-medium w-fit inline-block mx-1 px-2.5 py-0.5 rounded`}
+      class={`bg-${color}-200 dark:bg-${color}-900 text-${color}-800 dark:text-${color}-300 font-medium w-fit inline-block mx-1 px-2.5 py-0.5 rounded`}
     >
       {label}
     </div>

components/KvEntry.tsx

@@ -138,7 +138,7 @@ export function KvEntry(
               type="button"
               onClick={() => editDialogOpen.value = true}
             >
-              {value || meta ? "Update value" : "Add value"}
+              {value || meta ? "Update value..." : "Add value..."}
             </button>
           )}
           {value || meta
@@ -149,7 +149,7 @@ export function KvEntry(
                   type="button"
                   onClick={() => addEntryDialogOpen.value = true}
                 >
-                  Add sub-entry
+                  Add sub-entry...
                 </button>
                 <button
                   class="flex items-center justify-center font-bold text-white bg-primary-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 rounded-lg text-sm px-4 py-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800"

components/KvKeyPart.tsx

@@ -41,7 +41,7 @@ export function KvKeyPart(
   }
   return (
     <li
-      class={`bg-${color}-100 dark:bg-${color}-900 text-${color}-800 dark:text-${color}-300 font-medium w-fit inline-block mx-1 px-2.5 py-0.5 rounded`}
+      class={`bg-${color}-200 dark:bg-${color}-900 text-${color}-800 dark:text-${color}-300 font-medium w-fit inline-block mx-1 px-2.5 py-0.5 rounded`}
     >
       {onClick ? <a href="#" onClick={onClick}>{children}</a> : children}
     </li>

components/KvValue.tsx

@@ -255,7 +255,7 @@ export function KvValue(
       <h2 class="font-bold my-2">Type</h2>
       <div>
         <div
-          class={`bg-${color}-100 text-${color}-800 px-2.5 py-0.5 m-1 inline-block rounded dark:bg-${color}-900 dark:text-${color}-300 ${
+          class={`bg-${color}-200 text-${color}-800 px-2.5 py-0.5 m-1 inline-block rounded dark:bg-${color}-900 dark:text-${color}-300 ${
             border ? "border" : ""
           }`}
         >

tailwind.config.ts

@@ -121,20 +121,20 @@ export default {
   ],
   safelist: [
     // these are dynamically assigned to kv value types
-    "bg-blue-100",
-    "bg-gray-100",
-    "bg-green-100",
-    "bg-indigo-100",
-    "bg-orange-100",
-    "bg-pink-100",
-    "bg-purple-100",
-    "bg-red-100",
-    "bg-yellow-100",
-    "text-blue-100",
-    "text-gray-100",
-    "text-green-100",
-    "text-indigo-100",
-    "text-orange-100",
+    "bg-blue-200",
+    "bg-gray-200",
+    "bg-green-200",
+    "bg-indigo-200",
+    "bg-orange-200",
+    "bg-pink-200",
+    "bg-purple-200",
+    "bg-red-200",
+    "bg-yellow-200",
+    "text-blue-800",
+    "text-gray-800",
+    "text-green-800",
+    "text-indigo-800",
+    "text-orange-800",
     "text-pink-800",
     "text-purple-800",
     "text-red-800",