Update the style for nested forms to add dark theme.

lib/decentralised_book_index_web/components/core_components.ex

@@ -215,10 +215,10 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
           "border border-gray-500 text-gray-600"
 
         {"primary", false} ->
-          "bg-primary-600 hover:bg-primary-700 text-white"
+          "bg-primary-600 hover:bg-primary-700 text-white dark:text-white"
 
         {"primary", true} ->
-          "border border-primary-700 text-primary-700 hover:bg-primary-50 font-semibold"
+          "border border-primary-700 text-primary-700 hover:bg-primary-50 font-semibold dark:text-white"
 
         {"error", false} ->
           "bg-error-700 hover:bg-error-800 text-white"

lib/decentralised_book_index_web/live/book_live/form_component.ex

@@ -59,13 +59,13 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
 
   def bids_inputs(assigns) do
     ~H"""
-    <h2>Book ids</h2>
+    <h2 class="font-semibold leading-8 text-zinc-800 dark:text-white">Book ids</h2>
 
     <table class="w-full">
       <thead class="border-b border-zinc-100">
         <tr>
-          <th class="text-left font-medium text-sm pb-1 px-3 w-24">Type</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-24 dark:text-white">Type</th>
-          <th class="text-left font-medium text-sm pb-1 px-3">Id</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 dark:text-white">Id</th>
         </tr>
       </thead>
       <tbody phx-hook="bidSort" id="bidSort" phx-target={@myself}>
@@ -134,13 +134,13 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
 
   def author_roles_inputs(assigns) do
     ~H"""
-    <h2>Authors</h2>
+    <h2 class="font-semibold leading-8 text-zinc-800 dark:text-white">Authors</h2>
 
     <table class="w-full">
       <thead class="border-b border-zinc-100">
         <tr>
-          <th class="text-left font-medium text-sm pb-1 px-3 w-80">Author</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-80 dark:text-white">Author</th>
-          <th class="text-left font-medium text-sm pb-1 px-3">Role</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 dark:text-white">Role</th>
         </tr>
       </thead>
       <tbody phx-hook="authorRoleSort" id="authorRoleSort" phx-target={@myself}>