Follow convention of other pages. (#58)

app/views/dashboard/_index.html.erb

@@ -71,14 +71,7 @@
     </div>
 
     <div class="primary-card">
-      <div class="mx-auto py-6 sm:px-6 lg:px-8">
-        <%= turbo_frame_tag "fixed_expense_header_frame" do %>
-          <strong>Fixed Expenses</strong>
-          <div class="mt-4">
-            <%= link_to "New Fixed Expense", new_fixed_expense_path, data: { turbo_frame: :fixed_expenses }, class: "btn btn-primary" %>
-          </div>
-        <% end %>
-
+      <div class="pb-6">
         <%= render "fixed_expenses/index" %>
 
         <%= render partial: "shared/total_costs", locals: { total_cost: @total_cost } %>

app/views/fixed_expenses/_index.html.erb

@@ -1,10 +1,21 @@
 <%= turbo_frame_tag :fixed_expenses do %>
-  <div id="fixed_expense_labels" class="grid grid-cols-5">
-    <% fixed_headings = %w[Expense Annual Monthly Bi-weekly] %>
-    <% fixed_headings.each do |fixed_heading| %>
-      <div class="px-5 pt-4"><strong><%= fixed_heading %></strong></div>
-    <% end %>
-  </div>
+  <div class="primary-card">
+    <div class="mx-auto pt-6 sm:px-6 lg:px-8">
+      <%= turbo_frame_tag "fixed_expense_header_frame" do %>
+        <strong>Fixed Expenses</strong>
+        <div class="mt-4">
+          <%= link_to "New Fixed Expense", new_fixed_expense_path, data: { turbo_frame: :fixed_expenses }, class: "btn btn-primary" %>
+        </div>
+      <% end %>
+
+      <div id="fixed_expense_labels" class="grid grid-cols-5">
+        <% fixed_headings = %w[Expense Annual Monthly Bi-weekly] %>
+        <% fixed_headings.each do |fixed_heading| %>
+          <div class="px-5 pt-4"><strong><%= fixed_heading %></strong></div>
+      <% end %>
+      </div>
 
-  <%= render @fixed_expenses %>
+      <%= render @fixed_expenses %>
+    </div>
+  </div>
 <% end %>

app/views/fixed_expenses/index.html.erb

@@ -3,14 +3,5 @@
     <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
   <% end %>
 
-  <div class="flex justify-between items-center">
-    <%= turbo_frame_tag :fixed_expenses do %>
-      <h1 class="font-bold text-4xl">Fixed expenses</h1>
-      <%= link_to 'New fixed expense', new_fixed_expense_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
-    <% end %>
-  </div>
-
-  <div id="fixed_expenses" class="min-w-full">
-    <%= render @fixed_expenses %>
-  </div>
+  <%= render "fixed_expenses/index" %>
 </div>

app/views/shared/_total_costs.html.erb

@@ -1,25 +1,27 @@
 <%= turbo_frame_tag "total_costs" do %>
-  <div class="grid grid-cols-5">
-    <div class="px-5">
-      <strong>Total</strong>
-    </div>
+  <div class="mx-auto sm:px-6 lg:px-8">
+    <div class="grid grid-cols-5">
+      <div class="px-5">
+        <strong>Total</strong>
+      </div>
 
-    <div>
-      <strong>
-        <%= render partial: "shared/total", locals: { total: total_cost.annual_cost } %>
-      </strong>
-    </div>
+      <div>
+        <strong>
+          <%= render partial: "shared/total", locals: { total: total_cost.annual_cost } %>
+        </strong>
+      </div>
 
-    <div>
-      <strong>
-        <%= render partial: "shared/total", locals: { total: total_cost.monthly_cost } %>
-      </strong>
-    </div>
+      <div>
+        <strong>
+          <%= render partial: "shared/total", locals: { total: total_cost.monthly_cost } %>
+        </strong>
+      </div>
 
-    <div>
-      <strong>
-        <%= render partial: "shared/total", locals: { total: total_cost.bi_weekly_cost } %>
-      </strong>
+      <div>
+        <strong>
+          <%= render partial: "shared/total", locals: { total: total_cost.bi_weekly_cost } %>
+        </strong>
+      </div>
     </div>
   </div>
 <% end %>