Clean up spacings and columns (#13)

* Clean up spacings and columns

* Update test

app/views/budget/_budget_headings.html.erb

@@ -1,17 +1,18 @@
 <div id="salary_budget_labels" class="grid grid-cols-6">
-  <div class="px-5 py-4 col-2">
+  <div class=""></div>
+  <div class="px-5 py-4 col-1">
     Fixed Expense
   </div>
 
-  <div class="px-5 py-4 col-1">
+  <div class="py-4 col-1">
     Investing
   </div>
 
-  <div class="px-5 py-4 col-1">
+  <div class="py-4 col-1">
     Savings
   </div>
 
-  <div class="px-5 py-4 col-1">
+  <div class="py-4 col-1">
     Guilt Free
   </div>
 </div>

app/views/dashboard/index.html.erb

@@ -1,7 +1,7 @@
 <div class="min-h-full">
   <header class="bg-white shadow">
     <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-        <h1 class="text-3xl font-bold tracking-tight text-gray-900">Dashboard</h1>
+        <h1 class="text-3xl font-bold tracking-tight text-gray-900">Budget Calculator</h1>
     </div>
   </header>
 
@@ -10,7 +10,7 @@
     <div class="bg-white shadow">
       <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
         <div class="mt-5">
-          <h3 class="text-2xl font-bold tracking-tight text-gray-900">Budget</h3>
+          <h3 class="text-2xl font-bold tracking-tight text-gray-900">Final Budget</h3>
         </div>
 
         <%= turbo_frame_tag "salary_budget" do %>
@@ -32,13 +32,17 @@
           </div>
         <% end %>
 
-        <%= turbo_frame_tag :incomes do %>
-          <%= render "incomes/index" %>
-        <% end %>
+        <div class="pt-4">
+          <%= turbo_frame_tag :incomes do %>
+            <%= render "incomes/index" %>
+          <% end %>
+        </div>
 
-        <%= turbo_frame_tag "taxed_incomes" do %>
-          <%= render partial: "shared/taxed_incomes", locals: { salary_taxed: @salary_taxed, hourly_taxed: @hourly_taxed} %>
-        <% end %>
+        <div class="pt-4">
+          <%= turbo_frame_tag "taxed_incomes" do %>
+            <%= render partial: "shared/taxed_incomes", locals: { salary_taxed: @salary_taxed, hourly_taxed: @hourly_taxed} %>
+          <% end %>
+        </div>
       </div>
     </div>
 
@@ -60,12 +64,5 @@
         <% end %>
       </div>
     </div>
-
-    <div class="bg-white shadow">
-      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
-        <%= render "federal_tax_brackets/index" %>
-      </div>
-    </div>
-
   </main>
 </div>

app/views/fixed_expenses/_fixed_expense.html.erb

@@ -2,9 +2,9 @@
   <div class="grid grid-cols-6">
     <% attributes = [fixed_expense.expense_name, humanized_money_with_symbol(fixed_expense.annual_cost), humanized_money_with_symbol(fixed_expense.monthly_cost), humanized_money_with_symbol(fixed_expense.bi_weekly_cost)] %>
     <% attributes.each do |attribute| %>
-      <div class="px-5 py-1"><%= attribute %></div>
+      <div class="px-5"><%= attribute %></div>
     <% end %>
-    <div class="px-5 py-1"><%= link_to "Edit", edit_fixed_expense_path(fixed_expense), class:"rounded-lg py-1 px-4 bg-gray-100 inline-block font-medium" %></div>
-    <div class="py-1"><%= button_to "Delete", fixed_expense_path(fixed_expense), method: :delete, class:"rounded-lg py-1 px-4 bg-gray-100 inline-block font-medium" %></div>
+    <div class="px-5"><%= link_to "Edit", edit_fixed_expense_path(fixed_expense), class:"rounded-lg px-2 bg-gray-100 inline-block font-medium" %></div>
+    <div class=""><%= button_to "Delete", fixed_expense_path(fixed_expense), method: :delete, class:"rounded-lg px-2 bg-gray-100 inline-block font-medium" %></div>
   </div>
 <% end %>

app/views/fixed_expenses/_index.html.erb

@@ -1,7 +1,7 @@
 <div id="fixed_expense_labels" class="grid grid-cols-6">
-  <% fixed_headings = ["Expense Name", "Annual Cost", "Monthly Cost", "Bi-weekly Cost"] %>
+  <% fixed_headings = %w[Expense Annual Monthly Bi-weekly] %>
   <% fixed_headings.each do |fixed_heading| %>
-    <div class="px-5 py-4"><strong><%= fixed_heading %></strong></div>
+    <div class="px-5 pt-4"><strong><%= fixed_heading %></strong></div>
   <% end %>
 </div>
 

app/views/incomes/_income.html.erb

@@ -2,8 +2,8 @@
   <div class="grid grid-cols-6">
     <% attributes = [income.income_type, humanized_money_with_symbol(income.rate), income.hours, humanized_money_with_symbol(income.weekly_income)] %>
     <% attributes.each do |attribute| %>
-      <div class="px-5 py-1"><%= attribute %></div>
+      <div class="px-5"><%= attribute %></div>
     <% end %>
-    <div class="px-5 py-1"><%= link_to "Edit", edit_income_path(income), class:"rounded-lg py-1 px-4 bg-gray-100 inline-block font-medium" %></div>
+    <div class="px-5"><%= link_to "Edit", edit_income_path(income), class:"rounded-lg px-2 bg-gray-100 inline-block font-medium" %></div>
   </div>
 <% end %>

app/views/incomes/_index.html.erb

@@ -1,10 +1,9 @@
-<%=  turbo_frame_tag :incomes do %>
-  <div class="grid grid-cols-6">
-    <% income_headings = ["Income Type", "Rate", "Hours", "Weekly Income"] %>
-    <% income_headings.each do |income_heading| %>
-      <div class="px-5"><strong><%= income_heading %></strong></div>
-    <% end %>
-  </div>
+<strong>Net Income</strong>
+<div class="grid grid-cols-6">
+  <% income_headings = ["Income Type", "Rate", "Hours", "Weekly Gross"] %>
+  <% income_headings.each do |income_heading| %>
+    <div class="px-5"><strong><%= income_heading %></strong></div>
+  <% end %>
+</div>
 
-  <%= render @incomes %>
-<% end %>
+<%= render @incomes %>

app/views/shared/_taxed_incomes.html.erb

@@ -1,8 +1,8 @@
-<strong>Income After Taxes</strong>
+<strong>Gross Income</strong>
 <div class="grid grid-cols-6">
-   <% fixed_headings = ["Income Type", "Federal Tax Paid", "State Tax Paid", "Annual Income", "Bi-weekly Income"] %>
+   <% fixed_headings = ["Income Type", "Federal Tax", "State Tax", "Annual", "Bi-weekly"] %>
   <% fixed_headings.each do |fixed_heading| %>
-    <div class="px-5 pt-4"><strong><%= fixed_heading %></strong></div>
+    <div class="px-5"><strong><%= fixed_heading %></strong></div>
   <% end %>
 </div>
 

spec/features/dashboard/dashboard_spec.rb

@@ -11,7 +11,7 @@
   describe "GET /index" do
     it "routes to root path" do
       visit root_path
-      expect(page).to have_content "Dashboard"
+      expect(page).to have_content "Budget Calculator"
     end
 
     it "has incomes on dashboard" do