Update nested forms style for Book FormComponent.

lib/decentralised_book_index_web/components/my_components.ex

@@ -12,6 +12,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents do
       import MyComponents.Buttons, only: [
         success_button: 1,
         primary_button: 1,
+        add_button: 1,
         save_button: 1,
         edit_button: 1,
         cancel_button: 1,

lib/decentralised_book_index_web/components/my_components/buttons.ex

@@ -69,6 +69,31 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Buttons do
 
   slot :inner_block, required: true
 
+  def add_button(assigns) do
+    ~H"""
+    <.link
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "flex items-center gap-1",
+        @class
+      ]}
+      {@rest}
+    >
+      <svg class="w-6 h-6 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
+      </svg>
+      {render_slot(@inner_block)}
+    </.link>
+    """
+  end
+
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
   def save_button(assigns) do
     ~H"""
     <.success_button

lib/decentralised_book_index_web/live/book_live/form_component.ex

@@ -7,7 +7,6 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
     <div>
       <.header>
         {@title}
-        <:subtitle>Use this form to manage book records in your database.</:subtitle>
       </.header>
 
       <.simple_form
@@ -86,14 +85,15 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
     <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 dark:text-white">Type</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-36 dark:text-white">Type</th>
           <th class="text-left font-medium text-sm pb-1 px-3 dark:text-white">Id</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-12"></th>
         </tr>
       </thead>
       <tbody phx-hook="bidSort" id="bidSort" phx-target={@myself}>
         <.inputs_for :let={bid_form} field={@form[:bids]}>
           <tr data-id={bid_form.index}>
-            <td class="px-3 w-24">
+            <td class="px-3 w-36">
               <label for={bid_form[:type].id} class="hidden">Type</label>
               <.input field={bid_form[:type]} />
             </td>
@@ -101,7 +101,7 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
               <label for={bid_form[:bid].id} class="hidden">Id</label>
               <.input field={bid_form[:bid]} />
             </td>
-            <td class="w-12">
+            <td class="flex items-center justify-center w-12 pt-2">
               <.button_link
                 phx-click="remove-bid"
                 phx-value-path={bid_form.name}
@@ -110,7 +110,9 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
                 size="xs"
                 inverse
               >
-                <.icon name="hero-trash" class="size-5" />
+                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                  <path fill-rule="evenodd" d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z" clip-rule="evenodd"/>
+                </svg>
               </.button_link>
             </td>
           </tr>
@@ -118,9 +120,10 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       </tbody>
     </table>
 
-    <.button_link phx-click="add-bid" phx-target={@myself} kind="primary" size="sm" inverse>
+    <.add_button phx-click="add-bid" phx-target={@myself} class="w-44">
       Add Book Id
-    </.button_link>
+    </.add_button>
+
     """
   end
 
@@ -161,14 +164,15 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
     <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 dark:text-white">Author</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-96 dark:text-white">Author</th>
           <th class="text-left font-medium text-sm pb-1 px-3 dark:text-white">Role</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-12"></th>
         </tr>
       </thead>
       <tbody phx-hook="authorRoleSort" id="authorRoleSort" phx-target={@myself}>
         <.inputs_for :let={author_roles_form} field={@form[:author_roles]}>
           <tr data-id={author_roles_form.index}>
-            <td class="px-3">
+            <td class="px-3 w-96">
               <label for={author_roles_form[:author_id].id} class="hidden">Type</label>
               <.input field={author_roles_form[:author_id]} />
             </td>
@@ -176,7 +180,7 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
               <label for={author_roles_form[:role].id} class="hidden">Id</label>
               <.input field={author_roles_form[:role]} />
             </td>
-            <td class="w-12">
+            <td class="flex items-center justify-center w-12 pt-2">
               <.button_link
                 phx-click="remove-author-role"
                 phx-value-path={author_roles_form.name}
@@ -185,7 +189,9 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
                 size="xs"
                 inverse
               >
-                <.icon name="hero-trash" class="size-5" />
+                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                  <path fill-rule="evenodd" d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z" clip-rule="evenodd"/>
+                </svg>
               </.button_link>
             </td>
           </tr>
@@ -193,9 +199,9 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       </tbody>
     </table>
 
-    <.button_link phx-click="add-author-role" phx-target={@myself} kind="primary" size="sm" inverse>
+    <.add_button phx-click="add-author-role" phx-target={@myself} class="w-40">
       Add Author
-    </.button_link>
+    </.add_button>
     """
   end