Format table and various components especially buttons

templates/feed.html

@@ -3,19 +3,19 @@
     <td>{{feed.feed_url}}</td>
     <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
     <td>
-        <button class="btn"
+        <button class="btn btn-sm"
                 hx-get="/feed/{{feed.id}}/edit/inline"
                 hx-target="#feed_{{feed.id}}"
                 hx-swap="outerHTML">
             Edit Inline
         </button>
-        <button class="btn"
+        <button class="btn btn-sm"
                 hx-get="/feed/{{feed.id}}/edit/form"
                 hx-target="body"
                 hx-swap="beforeend">
             Edit Dialog
         </button>
-        <button class="btn btn-warning"
+        <button class="btn btn-error btn-sm"
                 hx-confirm="Are you sure?"
                 hx-delete="/feed/{{feed.id}}"
                 hx-target="#feed_{{feed.id}}"

templates/index.html

@@ -4,14 +4,6 @@
 
 {% block head %}
 <style>
-    .navbar {
-        overflow: hidden;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-    }
-
     .overlay {
         width: 100%;
         height: 100%;
@@ -33,25 +25,23 @@
 {% endblock %}
 
 {% block content %}
-<nav class="navbar" style="z-index: 20">
-    <div>
-        <a href="/" style="display: flex">
-            <img src="/assets/logo.svg" style="margin:8px; height: 32px" alt="RSS Notifier Logo"/>
+<div x-data="{'isModalOpen': false}">
+<nav class="navbar bg-base-100 shadow-sm overflow-hidden fixed top-0 left-0 z-20 flex justify-between">
+  <a class="btn btn-ghost text-xl flex" href="/">
+    <img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
     <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
   </a>
-    </div>
-</nav>
-<div style="height: 48px; margin-bottom: 8px"></div>
-<div x-data="{'isModalOpen': false}">
-    <div style="display:flex; justify-content:flex-end">
   <button class="btn" @click="isModalOpen = true">Create</button>
-    </div>
+</nav>
+<div class="pt-16">
+  <!-- TODO: Switch overlay and dialog to DaisyUI -->
   <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
   <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
     <header>
       <h2>Create new RSS Feed subscription</h2>
     </header>
-        <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend" hx-indicator="#indicator"
+    <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend"
+          hx-indicator="#indicator"
           @htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
       <label>
         Name
@@ -66,12 +56,14 @@
       <button class="btn" form="create_form" type="reset" @click="isModalOpen = false">Close</button>
       <button class="btn" form="create_form" type="submit">
         Submit
-                <img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px"
+        <img id="indicator" class="htmx-indicator" src="/assets/oval.svg"
+             style="height: 1rem; margin-left: 2px"
              alt="...">
       </button>
     </footer>
   </dialog>
-    <table style="text-align:center">
+  <div class="overflow-x-auto mx-4 rounded-box border border-base-content/5 bg-base-100">
+    <table class="table table-zebra">
       <thead>
       <tr>
         <th>Feed Name</th>
@@ -85,4 +77,6 @@
       </tbody>
     </table>
   </div>
+</div>
+</div>
 {% endblock %}