From 107995d3433fd542078a49a21866d8803aed8183 Mon Sep 17 00:00:00 2001
From: Benjamin Randolph <104036158+neb417@users.noreply.github.com>
Date: Wed, 6 Nov 2024 12:52:06 -0700
Subject: [PATCH] Style cards on dashboard. (#55)

---
 app/views/components/_income_switch.erb |  3 +--
 app/views/dashboard/_index.html.erb     | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/views/components/_income_switch.erb b/app/views/components/_income_switch.erb
index fe8154a..8459cc0 100644
--- a/app/views/components/_income_switch.erb
+++ b/app/views/components/_income_switch.erb
@@ -1,7 +1,6 @@
 <%= form_with url: income_switch_url, local: true do |form| %>
   <label class="relative inline-flex items-center cursor-pointer">
     <%= form.check_box :enabled, class: "sr-only peer", onchange: "this.form.requestSubmit()" %>
-    <div class="w-11 h-6 bg-gray-800 peer-focus:outline-none rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-800"></div>
-    <span class="ms-3 text-sm font-medium text-gray-900">Switch income type</span>
+    <div class="w-11 h-6 bg-gray-800 peer-focus:outline-none rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-purple"></div>
   </label>
 <% end %>
\ No newline at end of file
diff --git a/app/views/dashboard/_index.html.erb b/app/views/dashboard/_index.html.erb
index 1385eff..7d544af 100644
--- a/app/views/dashboard/_index.html.erb
+++ b/app/views/dashboard/_index.html.erb
@@ -2,8 +2,12 @@
   <div class="min-h-full">
     <div class="primary-card">
       <div class="mx-auto py-6 sm:px-6 lg:px-8">
+        <div class="mb-2">
+          <strong>Budget Calculator</strong>
+        </div>
+
         <div class="grid grid-cols-3">
-          <h3>Final Budget</h3>
+          <div>Switch Income Type</div>
           <div>Savings Rate %</div>
           <div>Investing Rate %</div>
         </div>
@@ -62,8 +66,10 @@
     <div class="primary-card">
       <div class="mx-auto py-6 sm:px-6 lg:px-8">
         <%= turbo_frame_tag "income_header_frame" do %>
-          <h1>Income</h1>
-          <%= link_to "New Income", new_income_path, data: { turbo_frame: :incomes }, class: "btn btn-primary" %>
+          <strong>Incomes</strong>
+          <div class="mt-4">
+            <%= link_to "New Income", new_income_path, data: { turbo_frame: :incomes }, class: "btn btn-primary" %>
+          </div>
         <% end %>
 
         <div class="pt-4">
@@ -80,8 +86,10 @@
     <div class="primary-card">
       <div class="mx-auto py-6 sm:px-6 lg:px-8">
         <%= turbo_frame_tag "fixed_expense_header_frame" do %>
-          <h3>Fixed Expenses</h3>
-          <%= link_to "New Fixed Expense", new_fixed_expense_path, data: { turbo_frame: :fixed_expenses }, class: "btn btn-primary" %>
+          <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 %>
 
         <%= render "fixed_expenses/index" %>