docs: improved api table

Author: shairez

apps/website/src/routes/docs/_components/api-table/api-table.tsx

@@ -1,8 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { Tooltip } from '@qwik-ui/headless';
 import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
-import {} from '@qwik-ui/headless';
-import { Button } from '@qwik-ui/tailwind';
 type APITableProps = {
   propDescriptors: {
     name: string;
@@ -17,22 +14,26 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
     <div class="overflow-auto">
       <table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
         <tbody class="divide-y divide-gray-700">
-          <tr class="w-1/4 text-white">
+          <tr class="w-1/4 dark:text-white ">
             <td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
               Prop
             </td>
-            <td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium">Type</td>
-            <td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium">Description</td>
+            <td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium ">Type</td>
+            <td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium ">Description</td>
           </tr>
           {propDescriptors?.map((propDescriptor) => {
             return (
               <tr key={propDescriptor.name}>
                 <td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
-                  <code>{propDescriptor.name}</code>
+                  <code class="bg-indigo-200 dark:bg-indigo-900 rounded-md mr-6">
+                    {propDescriptor.name}
+                  </code>
                 </td>
                 <td class="prose prose-sm py-3 align-baseline">
                   <span class="flex items-center">
-                    <code>{propDescriptor.type}</code>
+                    <code class="bg-gray-300 dark:bg-gray-700">
+                      {propDescriptor.type}
+                    </code>
                     {propDescriptor.info && (
                       <Popover placement="top">
                         <PopoverContent>